0.28.4 • Published 2 years ago
retil-nav-scheme v0.28.4
retil-nav-scheme
Link and route your app with a well-typed, refactorable URL scheme.
Usage
createScheme(urlFunction)
Define your URL scheme in separate files adjacent to your routes. This allows URLs to be imported and referenced without needing to load the full route content.
nestScheme(urlFunction, scheme): nestedNavScheme
Nests a scheme underneath a url, possibly including paremeters. Returns a nested scheme object, which can be passed to a key in a scheme()
call.
patternFor(schemeNode)
Returns a routing pattern for a specific scheme entry. The pattern is compatible with retil-nav, and all other path-to-regexp based routing libraries.
Example
/**
* appURLs.ts
*/
import { createScheme, nestScheme } from 'retil-nav-scheme'
import { encode as encodeBase58UUID } from 'uuid-base58'
import { PostParams, PostQuery } from './post/postURLs'
import profileURLs, { ProfileParams } from './profile/profileURLs'
export default createScheme({
top: () => '/',
post: ({
userHandle,
postId,
...query
}: PostParams & PostQuery) => ({
query: { ...query },
pathname: `/@${userHandle}/${encodeBase58UUID(postId)}`,
}),
login: () => `/login`,
logout: () => `/logout`,
profile: nestScheme(
(profileParams: ProfileParams) => `/@${profileParams.userHandle}`,
profileURLs,
),
})
/**
* appLoader.ts
*/
import { loadLazy } from 'retil-mount'
import { loadMatch } from 'retil-nav'
import { patternFor } from 'retil-nav-scheme'
import urls from './appURLs'
export default loadMatch<AppEnv>({
[patternFor(urls.top)]: loadLazy(() => import('./front/frontLoader')),
[patternFor(urls.post)]: loadLazy(() => import('./post/postLoader')),
[patternFor(urls.login)]: loadLazy(() => import('./login/loginLoader')),
[patternFor(urls.logout)]: loadLazy(() => import('./logout/logoutLoader')),
[patternFor(urls.profile)]: loadLazy(() => import('./profile/profileLoader')),
})
/**
* profileURLs.ts
*/
import { createScheme } from 'retil-nav-scheme'
export type ProfileParams = {
userHandle: string
}
export default createScheme({
top: () => `/`,
replies: () => `/replies`,
})
/**
* profileLoader.ts
*/
import { loadMatch } from 'retil-nav'
import { patternFor } from 'retil-nav-scheme'
import urls from './profileURLs'
export default loadMatch<AppEnv>({
[patternFor(urls.top)]: loadLazy(() => import('./profileLoader')),
[patternFor(urls.replies)]: loadLazy(() => import('./profileRepliesLoader')),
})