@studiolambda/router 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/router_react.cjs +1 -1
- package/dist/router_react.cjs.map +1 -1
- package/dist/router_react.js +92 -59
- package/dist/router_react.js.map +1 -1
- package/dist/src/react/components/NotFound.d.ts +5 -2
- package/dist/src/react/components/Router.d.ts +1 -1
- package/dist/src/react/context/NavigationSignalContext.d.ts +6 -1
- package/dist/src/react/context/NavigationTypeContext.d.ts +6 -1
- package/dist/src/react/context/ParamsContext.d.ts +10 -0
- package/dist/src/react/context/PathnameContext.d.ts +5 -4
- package/dist/src/react/context/TransitionContext.d.ts +0 -6
- package/dist/src/react/extractPathname.d.ts +1 -2
- package/dist/src/react/hooks/useNavigate.d.ts +15 -0
- package/dist/src/react/hooks/useNavigation.d.ts +10 -0
- package/dist/src/react/hooks/useNavigationEvents.d.ts +18 -0
- package/dist/src/react/hooks/useNavigationHandlers.d.ts +9 -0
- package/dist/src/react/hooks/useNavigationSignal.d.ts +15 -0
- package/dist/src/react/hooks/useNavigationType.d.ts +18 -0
- package/dist/src/react/hooks/useNextMatch.d.ts +11 -0
- package/dist/src/react/hooks/useParams.d.ts +1 -0
- package/dist/src/react/hooks/usePathname.d.ts +1 -0
- package/dist/src/react/hooks/usePrefetch.d.ts +52 -0
- package/dist/src/react/index.d.ts +1 -1
- package/dist/src/react/navigation/createMemoryNavigation.d.ts +5 -1
- package/package.json +1 -1
- package/dist/src/react/context/PropsContext.d.ts +0 -10
|
@@ -6,5 +6,20 @@
|
|
|
6
6
|
*
|
|
7
7
|
* @returns A navigate function that accepts a URL string and
|
|
8
8
|
* optional `NavigationNavigateOptions`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* function LogoutButton() {
|
|
13
|
+
* const navigate = useNavigate()
|
|
14
|
+
*
|
|
15
|
+
* return (
|
|
16
|
+
* <button onClick={function () {
|
|
17
|
+
* navigate('/login', { history: 'replace' })
|
|
18
|
+
* }}>
|
|
19
|
+
* Log Out
|
|
20
|
+
* </button>
|
|
21
|
+
* )
|
|
22
|
+
* }
|
|
23
|
+
* ```
|
|
9
24
|
*/
|
|
10
25
|
export declare function useNavigate(): (url: string, options?: NavigationNavigateOptions) => NavigationResult;
|
|
@@ -9,5 +9,15 @@
|
|
|
9
9
|
*
|
|
10
10
|
* @returns The Navigation object from the nearest provider.
|
|
11
11
|
* @throws When used outside a NavigationContext provider.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* function HistoryDebug() {
|
|
16
|
+
* const navigation = useNavigation()
|
|
17
|
+
* const entries = navigation.entries()
|
|
18
|
+
*
|
|
19
|
+
* return <pre>{JSON.stringify(entries.map(e => e.url))}</pre>
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
12
22
|
*/
|
|
13
23
|
export declare function useNavigation(): Navigation;
|
|
@@ -39,5 +39,23 @@ export interface NavigationEventHandlers {
|
|
|
39
39
|
* @param navigation - The Navigation object to subscribe to.
|
|
40
40
|
* @param handlers - Callbacks for each navigation lifecycle
|
|
41
41
|
* event. All are optional.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* function NavigationLogger() {
|
|
46
|
+
* const navigation = useNavigation()
|
|
47
|
+
*
|
|
48
|
+
* useNavigationEvents(navigation, {
|
|
49
|
+
* onNavigateSuccess() {
|
|
50
|
+
* console.log('navigation completed')
|
|
51
|
+
* },
|
|
52
|
+
* onNavigateError(error) {
|
|
53
|
+
* console.error('navigation failed', error)
|
|
54
|
+
* },
|
|
55
|
+
* })
|
|
56
|
+
*
|
|
57
|
+
* return null
|
|
58
|
+
* }
|
|
59
|
+
* ```
|
|
42
60
|
*/
|
|
43
61
|
export declare function useNavigationEvents(navigation: Navigation, handlers: NavigationEventHandlers): void;
|
|
@@ -40,6 +40,15 @@ export interface PrecommitHandlerOptions {
|
|
|
40
40
|
* provides TransitionContext.
|
|
41
41
|
* @throws When no transition tuple is provided and the
|
|
42
42
|
* hook is used outside a TransitionContext provider.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```tsx
|
|
46
|
+
* function CustomRouter() {
|
|
47
|
+
* const transition = useTransition()
|
|
48
|
+
* const { createHandler } = useNavigationHandlers(transition)
|
|
49
|
+
* // use createHandler to build intercept handlers
|
|
50
|
+
* }
|
|
51
|
+
* ```
|
|
43
52
|
*/
|
|
44
53
|
export declare function useNavigationHandlers(transition?: ReturnType<typeof useTransition>): {
|
|
45
54
|
createPrecommitHandler: (options: PrecommitHandlerOptions) => ((controller: NavigationPrecommitController) => Promise<void>) | undefined;
|
|
@@ -8,6 +8,21 @@
|
|
|
8
8
|
* Returns `null` before any navigation event has occurred
|
|
9
9
|
* (i.e. on the initial render).
|
|
10
10
|
*
|
|
11
|
+
* Must be used inside a `<Router>` component tree.
|
|
12
|
+
*
|
|
11
13
|
* @returns The current AbortSignal or null.
|
|
14
|
+
* @throws When used outside a Router or NavigationSignalContext
|
|
15
|
+
* provider.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* function UserProfile({ id }: { id: string }) {
|
|
20
|
+
* const signal = useNavigationSignal()
|
|
21
|
+
*
|
|
22
|
+
* useEffect(function () {
|
|
23
|
+
* fetch(`/api/user/${id}`, { signal })
|
|
24
|
+
* }, [id, signal])
|
|
25
|
+
* }
|
|
26
|
+
* ```
|
|
12
27
|
*/
|
|
13
28
|
export declare function useNavigationSignal(): AbortSignal | null;
|
|
@@ -7,6 +7,24 @@
|
|
|
7
7
|
* Returns `null` before any navigation event has occurred
|
|
8
8
|
* (i.e. on the initial render).
|
|
9
9
|
*
|
|
10
|
+
* Must be used inside a `<Router>` component tree.
|
|
11
|
+
*
|
|
10
12
|
* @returns The current NavigationType or null.
|
|
13
|
+
* @throws When used outside a Router or NavigationTypeContext
|
|
14
|
+
* provider.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* function PageTransition({ children }: { children: ReactNode }) {
|
|
19
|
+
* const type = useNavigationType()
|
|
20
|
+
* const isTraversal = type === 'traverse'
|
|
21
|
+
*
|
|
22
|
+
* return (
|
|
23
|
+
* <div className={isTraversal ? 'slide' : 'fade'}>
|
|
24
|
+
* {children}
|
|
25
|
+
* </div>
|
|
26
|
+
* )
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
11
29
|
*/
|
|
12
30
|
export declare function useNavigationType(): NavigationType | null;
|
|
@@ -22,5 +22,16 @@ export interface NextMatchOptions {
|
|
|
22
22
|
* @param options - Optional matcher override.
|
|
23
23
|
* @returns A resolver function that takes a destination URL
|
|
24
24
|
* and a not-found component, returning the resolved match.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* function CustomRouter() {
|
|
29
|
+
* const resolve = useNextMatch()
|
|
30
|
+
* const match = resolve(window.location.href, NotFound)
|
|
31
|
+
* const Component = match.handler.component
|
|
32
|
+
*
|
|
33
|
+
* return <Component />
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
25
36
|
*/
|
|
26
37
|
export declare function useNextMatch(options?: NextMatchOptions): (destination: string | null, notFound: ComponentType) => Resolved<Handler>;
|
|
@@ -10,6 +10,42 @@ export interface PrefetchOptions {
|
|
|
10
10
|
*/
|
|
11
11
|
matcher?: Matcher<Handler>;
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* Clears the prefetch deduplication cache for a specific
|
|
15
|
+
* matcher instance. After clearing, subsequent calls to the
|
|
16
|
+
* prefetch function will re-execute handlers for pathnames
|
|
17
|
+
* that were previously skipped.
|
|
18
|
+
*
|
|
19
|
+
* Useful when cached data becomes stale — for example after
|
|
20
|
+
* a user logs out, a form submission invalidates server
|
|
21
|
+
* state, or a known data expiry occurs.
|
|
22
|
+
*
|
|
23
|
+
* When called without a matcher argument, has no effect.
|
|
24
|
+
* The cache is automatically garbage-collected when the
|
|
25
|
+
* matcher instance is no longer referenced, so explicit
|
|
26
|
+
* clearing is only needed for long-lived matchers.
|
|
27
|
+
*
|
|
28
|
+
* @param matcher - The matcher whose prefetch cache should
|
|
29
|
+
* be cleared.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* function LogoutButton() {
|
|
34
|
+
* const navigate = useNavigate()
|
|
35
|
+
* const matcher = use(MatcherContext)
|
|
36
|
+
*
|
|
37
|
+
* return (
|
|
38
|
+
* <button onClick={function () {
|
|
39
|
+
* clearPrefetchCache(matcher)
|
|
40
|
+
* navigate('/login', { history: 'replace' })
|
|
41
|
+
* }}>
|
|
42
|
+
* Log Out
|
|
43
|
+
* </button>
|
|
44
|
+
* )
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare function clearPrefetchCache(matcher: Matcher<Handler>): void;
|
|
13
49
|
/**
|
|
14
50
|
* Returns a function that triggers the prefetch logic for a
|
|
15
51
|
* given URL by resolving it against the matcher and calling
|
|
@@ -28,5 +64,21 @@ export interface PrefetchOptions {
|
|
|
28
64
|
* @param options - Optional matcher override.
|
|
29
65
|
* @returns A function that accepts a URL string and invokes
|
|
30
66
|
* the matched route's prefetch handler, if any.
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```tsx
|
|
70
|
+
* function PrefetchOnHover({ href, children }: Props) {
|
|
71
|
+
* const prefetch = usePrefetch()
|
|
72
|
+
*
|
|
73
|
+
* return (
|
|
74
|
+
* <a
|
|
75
|
+
* href={href}
|
|
76
|
+
* onMouseEnter={function () { prefetch(href) }}
|
|
77
|
+
* >
|
|
78
|
+
* {children}
|
|
79
|
+
* </a>
|
|
80
|
+
* )
|
|
81
|
+
* }
|
|
82
|
+
* ```
|
|
31
83
|
*/
|
|
32
84
|
export declare function usePrefetch(options?: PrefetchOptions): (url: string) => void | Promise<void>;
|
|
@@ -4,7 +4,7 @@ export * from './components/NotFound';
|
|
|
4
4
|
export * from './components/Link';
|
|
5
5
|
export * from './context/MatcherContext';
|
|
6
6
|
export * from './context/TransitionContext';
|
|
7
|
-
export * from './context/
|
|
7
|
+
export * from './context/ParamsContext';
|
|
8
8
|
export * from './context/NavigationContext';
|
|
9
9
|
export * from './context/NavigationSignalContext';
|
|
10
10
|
export * from './context/NavigationTypeContext';
|
|
@@ -17,13 +17,17 @@ export interface MemoryNavigationOptions {
|
|
|
17
17
|
* browser Navigation API is unavailable.
|
|
18
18
|
*
|
|
19
19
|
* The returned object satisfies the subset of the `Navigation`
|
|
20
|
-
* interface consumed by the Router component:
|
|
20
|
+
* interface consumed by the Router component and hooks:
|
|
21
21
|
*
|
|
22
22
|
* - `currentEntry.url` — returns the initial URL
|
|
23
23
|
* - `addEventListener` / `removeEventListener` — no-ops
|
|
24
24
|
* (no events fire in a memory environment)
|
|
25
25
|
* - `navigate()` — no-op that returns a NavigationResult
|
|
26
26
|
* with immediately-resolved promises
|
|
27
|
+
* - `back()` / `forward()` — no-ops that return a
|
|
28
|
+
* NavigationResult with immediately-resolved promises
|
|
29
|
+
* - `traverseTo()` — no-op that returns a NavigationResult
|
|
30
|
+
* - `updateCurrentEntry()` — no-op
|
|
27
31
|
* - `canGoBack` / `canGoForward` — always false
|
|
28
32
|
* - `entries()` — returns a single-entry array
|
|
29
33
|
*
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Provides the route parameters extracted from the matched URL
|
|
3
|
-
* pattern as a string-keyed record. Defaults to an empty object
|
|
4
|
-
* when no route has been matched yet.
|
|
5
|
-
*
|
|
6
|
-
* Consumed via the `useParams` hook. The Router component
|
|
7
|
-
* updates this context on every successful navigation with
|
|
8
|
-
* the newly extracted parameters.
|
|
9
|
-
*/
|
|
10
|
-
export declare const ParamsContext: import('react').Context<Record<string, string>>;
|