@solidjs/router 0.17.0-next.5 → 1.0.0-next.10

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.
Files changed (51) hide show
  1. package/README.md +526 -716
  2. package/dist/claims.d.ts +21 -0
  3. package/dist/claims.js +115 -0
  4. package/dist/data/action.d.ts +28 -1
  5. package/dist/data/action.js +218 -52
  6. package/dist/data/events.d.ts +8 -0
  7. package/dist/data/events.js +23 -22
  8. package/dist/data/flash.d.ts +21 -0
  9. package/dist/data/flash.js +78 -0
  10. package/dist/data/flashCookie.d.ts +7 -0
  11. package/dist/data/flashCookie.js +20 -0
  12. package/dist/data/query.js +11 -4
  13. package/dist/data/serverForms.d.ts +1 -0
  14. package/dist/data/serverForms.js +5 -0
  15. package/dist/index.d.ts +5 -3
  16. package/dist/index.js +1548 -683
  17. package/dist/index.jsx +2 -2
  18. package/dist/lifecycle.d.ts +29 -4
  19. package/dist/lifecycle.js +40 -37
  20. package/dist/paths.d.ts +117 -0
  21. package/dist/paths.js +41 -0
  22. package/dist/routers/components.d.ts +10 -21
  23. package/dist/routers/components.jsx +29 -44
  24. package/dist/routers/factory.d.ts +66 -0
  25. package/dist/routers/factory.jsx +151 -0
  26. package/dist/routers/history.d.ts +26 -0
  27. package/dist/routers/history.js +180 -0
  28. package/dist/routers/index.d.ts +4 -11
  29. package/dist/routers/index.js +2 -6
  30. package/dist/routers/scrollRestoration.d.ts +33 -0
  31. package/dist/routers/scrollRestoration.js +135 -0
  32. package/dist/routing.d.ts +80 -44
  33. package/dist/routing.js +311 -108
  34. package/dist/server.d.ts +79 -0
  35. package/dist/server.js +284 -0
  36. package/dist/types.d.ts +75 -6
  37. package/dist/utils.d.ts +2 -0
  38. package/dist/utils.js +2 -0
  39. package/package.json +10 -8
  40. package/dist/components.d.ts +0 -31
  41. package/dist/components.jsx +0 -46
  42. package/dist/routers/HashRouter.d.ts +0 -9
  43. package/dist/routers/HashRouter.js +0 -41
  44. package/dist/routers/MemoryRouter.d.ts +0 -24
  45. package/dist/routers/MemoryRouter.js +0 -57
  46. package/dist/routers/Router.d.ts +0 -9
  47. package/dist/routers/Router.js +0 -45
  48. package/dist/routers/StaticRouter.d.ts +0 -6
  49. package/dist/routers/StaticRouter.js +0 -15
  50. package/dist/routers/createRouter.d.ts +0 -10
  51. package/dist/routers/createRouter.js +0 -40
package/dist/routing.d.ts CHANGED
@@ -1,8 +1,12 @@
1
1
  import type { JSX } from "@solidjs/web";
2
- import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams } from "./types.js";
2
+ import type { Branch, Intent, LazyBoundary, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams, TypedPath, TypedSearchPath } from "./types.js";
3
+ import type { FlashSubmission } from "./data/flash.js";
3
4
  /** Consider this API opaque and internal. It is likely to change in the future. */
4
5
  export declare const RouterContextObj: import("solid-js").Context<RouterContext>;
5
6
  export declare const RouteContextObj: import("solid-js").Context<RouteContext>;
7
+ export declare function useOptionalContext<T>(context: {
8
+ defaultValue?: T;
9
+ }): T | undefined;
6
10
  export declare const useRouter: () => RouterContext;
7
11
  export declare const useRoute: () => RouteContext;
8
12
  export declare const useResolvedPath: (path: () => string) => import("solid-js").SourceAccessor<string | undefined>;
@@ -55,43 +59,47 @@ export declare const useLocation: <S = unknown>() => Location<S>;
55
59
  */
56
60
  export declare const useIsRouting: () => () => boolean;
57
61
  /**
58
- * usePreloadRoute returns a function that can be used to preload a route manual.
59
- * This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.
62
+ * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
63
+ * Useful for determining if a given path matches the current route.
60
64
  *
61
65
  * @example
62
66
  * ```js
63
- * const preload = usePreloadRoute();
67
+ * const match = useMatch(() => props.href);
64
68
  *
65
- * preload(`/users/settings`, { preloadData: true });
69
+ * return <div classList={{ active: Boolean(match()) }} />;
66
70
  * ```
67
71
  */
68
- export declare const usePreloadRoute: () => (url: string | URL, options?: {
69
- preloadData?: boolean;
70
- }) => void;
72
+ export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
71
73
  /**
72
- * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
73
- * Useful for determining if a given path matches the current route.
74
+ * `useRouteMatches` returns an accessor of the router's resolved matches for
75
+ * the current location — the chain of route definitions producing the current
76
+ * render, outermost first. Useful for reading `info` metadata off the matched
77
+ * chain. Unlike `useMatch`, which tests a path pattern you supply against the
78
+ * location, this reflects the route tree itself.
74
79
  *
75
80
  * @example
76
81
  * ```js
77
- * const match = useMatch(() => props.href);
82
+ * const matches = useRouteMatches();
78
83
  *
79
- * return <div classList={{ active: Boolean(match()) }} />;
84
+ * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb));
80
85
  * ```
81
86
  */
82
- export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
87
+ export declare const useRouteMatches: () => () => RouteMatch[];
83
88
  /**
84
- * `useCurrentMatches` returns all the matches for the current matched route.
85
- * Useful for getting all the route information.
89
+ * `usePreloadRoute` returns a function for warming a route by hand — the same
90
+ * work link hover/focus intent triggers automatically: the matched routes'
91
+ * lazy components load, and with `preloadData` their `preload` functions run.
86
92
  *
87
93
  * @example
88
94
  * ```js
89
- * const matches = useCurrentMatches();
95
+ * const preload = usePreloadRoute();
90
96
  *
91
- * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
97
+ * preload(paths.users(2).settings, { preloadData: true });
92
98
  * ```
93
99
  */
94
- export declare const useCurrentMatches: () => () => RouteMatch[];
100
+ export declare const usePreloadRoute: () => (url: string | URL | TypedPath, options?: {
101
+ preloadData?: boolean;
102
+ }) => void;
95
103
  /**
96
104
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
97
105
  *
@@ -103,7 +111,10 @@ export declare const useCurrentMatches: () => () => RouteMatch[];
103
111
  * const getUser = query(() => fetchUser(params.id), "user");
104
112
  * ```
105
113
  */
106
- export declare const useParams: <T extends Params>() => T;
114
+ export declare function useParams<T extends Params>(): T;
115
+ export declare function useParams<P extends Params>(path: TypedPath<P>): {
116
+ [K in keyof P]: P[K];
117
+ };
107
118
  /**
108
119
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
109
120
  * The object is a proxy so you must access properties to subscribe to reactive updates.
@@ -131,39 +142,64 @@ export declare const useParams: <T extends Params>() => T;
131
142
  * );
132
143
  * ```
133
144
  */
134
- export declare const useSearchParams: <T extends SearchParams>() => [Partial<T>, (params: SetSearchParams, options?: Partial<NavigateOptions>) => void];
145
+ export declare function useSearchParams<In, Out>(path: TypedSearchPath<In, Out>): [Out, (params: Partial<In>, options?: Partial<NavigateOptions>) => void];
146
+ export declare function useSearchParams<T extends SearchParams>(): [
147
+ Partial<T>,
148
+ (params: SetSearchParams, options?: Partial<NavigateOptions>) => void
149
+ ];
150
+ export interface LinkState {
151
+ /** The location matches this link or lives under it (exact-only when `end`). Styling: `data-active`. */
152
+ active: () => boolean;
153
+ /** The location matches this link exactly — what `aria-current="page"` reflects. */
154
+ current: () => boolean;
155
+ /** This link is the target of an in-flight navigation. Styling: `data-pending`. */
156
+ pending: () => boolean;
157
+ }
135
158
  /**
136
- * useBeforeLeave takes a function that will be called prior to leaving a route.
137
- * The function will be called with:
138
- *
139
- * - from (*Location*): current location (before change).
140
- * - to (*string | number*): path passed to `navigate`.
141
- * - options (*NavigateOptions*): options passed to navigate.
142
- * - preventDefault (*function*): call to block the route change.
143
- * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
144
- * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
159
+ * Reactive link state for custom link components — the programmatic
160
+ * counterpart of the attribute vocabulary plain anchors receive
161
+ * (`aria-current`, `data-active`, `data-pending`).
145
162
  *
146
163
  * @example
147
- * ```js
148
- * useBeforeLeave((e: BeforeLeaveEventArgs) => {
149
- * if (form.isDirty && !e.defaultPrevented) {
150
- * // preventDefault to block immediately and prompt user async
151
- * e.preventDefault();
152
- * setTimeout(() => {
153
- * if (window.confirm("Discard unsaved changes - are you sure?")) {
154
- * // user wants to proceed anyway so retry with force=true
155
- * e.retry(true);
156
- * }
157
- * }, 100);
158
- * }
159
- * });
164
+ * ```tsx
165
+ * function TabLink(props: { href: string; children: JSX.Element }) {
166
+ * const link = useLinkState(() => props.href);
167
+ * return (
168
+ * <a href={props.href} class="tab" data-selected={link.active() || undefined}>
169
+ * {props.children}
170
+ * </a>
171
+ * );
172
+ * }
160
173
  * ```
161
174
  */
162
- export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
175
+ export declare const useLinkState: (href: () => string | TypedPath, options?: {
176
+ end?: boolean;
177
+ }) => LinkState;
178
+ /** Reactive read of the lazy-subtree version — recompile compiled branches when it changes. */
179
+ export declare function trackLazySubtrees(): number;
180
+ /** Non-reactive read, for cache-busting outside the reactive graph (server collectors). */
181
+ export declare function peekLazySubtrees(): number;
182
+ /**
183
+ * Kicks (or joins) a boundary's resolution. Returns the resolved routes
184
+ * synchronously once available, the in-flight promise otherwise. Commit is
185
+ * always async — even for thunks returning arrays — so the version bump
186
+ * never writes a signal from inside a render computation.
187
+ */
188
+ export declare function resolveLazySubtree(record: LazyBoundary): readonly RouteDefinition[] | Promise<readonly RouteDefinition[]>;
189
+ /**
190
+ * The unresolved boundaries in a match chain. Rendering gates on these (the
191
+ * route-states memo suspends until they land — see routers/components.tsx)
192
+ * and the server's flight collector awaits them before its preload pass.
193
+ */
194
+ export declare function unresolvedLazyMatches(matches: RouteMatch[]): LazyBoundary[];
163
195
  export declare function createRoutes(routeDef: RouteDefinition, base?: string): RouteDescription[];
164
196
  export declare function createBranch(routes: RouteDescription[], index?: number): Branch;
165
- export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
197
+ export declare function createBranches(routeDef: RouteDefinition | readonly RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
166
198
  export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
199
+ export declare function mergeParams(matches: RouteMatch[]): Params;
200
+ export declare function registerFlightRouter(router: RouterContext): () => void;
201
+ export declare function provideFlightConsumer(factory: (router: RouterContext) => () => void): void;
202
+ export declare function provideFlashDecoder(decoder: (cookieHeader: string | null) => FlashSubmission | undefined): void;
167
203
  export declare function getIntent(): Intent | undefined;
168
204
  export declare function getInPreloadFn(): boolean;
169
205
  export declare function setInPreloadFn(value: boolean): void;