@funstack/router 0.0.10 → 1.1.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/bin/skill-installer.mjs +2 -3
- package/dist/bin/skill-installer.mjs.map +1 -1
- package/dist/{route-p_gr5yPI.mjs → bindRoute-CQ2-ruTp.mjs} +11 -3
- package/dist/bindRoute-CQ2-ruTp.mjs.map +1 -0
- package/dist/{route-DRcgs0Pt.d.mts → bindRoute-DulMzi5X.d.mts} +169 -12
- package/dist/bindRoute-DulMzi5X.d.mts.map +1 -0
- package/dist/docs/ApiHooksPage.tsx +9 -22
- package/dist/docs/ApiTypesPage.tsx +17 -0
- package/dist/docs/ApiUtilitiesPage.tsx +62 -3
- package/dist/docs/ExamplesPage.tsx +3 -5
- package/dist/docs/FaqPage.tsx +84 -0
- package/dist/docs/GettingStartedPage.tsx +6 -3
- package/dist/docs/LearnActionsPage.tsx +228 -0
- package/dist/docs/LearnLoadersPage.tsx +320 -0
- package/dist/docs/LearnNavigationApiPage.tsx +1 -1
- package/dist/docs/LearnRouteDefinitionsPage.tsx +285 -0
- package/dist/docs/LearnRscPage.tsx +6 -0
- package/dist/docs/LearnSsgPage.tsx +3 -5
- package/dist/docs/index.md +4 -0
- package/dist/index.d.mts +36 -11
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +108 -71
- package/dist/index.mjs.map +1 -1
- package/dist/server.d.mts +2 -2
- package/dist/server.mjs +2 -3
- package/package.json +6 -5
- package/skills/funstack-router-knowledge/SKILL.md +1 -1
- package/dist/route-DRcgs0Pt.d.mts.map +0 -1
- package/dist/route-p_gr5yPI.mjs.map +0 -1
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import { CodeBlock } from "../components/CodeBlock.js";
|
|
2
|
+
|
|
3
|
+
export function LearnRouteDefinitionsPage() {
|
|
4
|
+
return (
|
|
5
|
+
<div className="learn-content">
|
|
6
|
+
<h2>RSC with Route Features</h2>
|
|
7
|
+
|
|
8
|
+
<p className="page-intro">
|
|
9
|
+
When using React Server Components as route components, you may also
|
|
10
|
+
want route features like loaders, typed hooks (
|
|
11
|
+
<code>useRouteParams</code>, <code>useRouteData</code>), and navigation
|
|
12
|
+
state. The challenge is that route definitions referencing server
|
|
13
|
+
components cannot be imported from client modules. This guide shows how
|
|
14
|
+
to split a route definition into a <strong>shared part</strong>{" "}
|
|
15
|
+
(importable by client components for type safety) and a{" "}
|
|
16
|
+
<strong>server part</strong> (where the component is attached), enabling
|
|
17
|
+
full route features alongside RSC.
|
|
18
|
+
</p>
|
|
19
|
+
|
|
20
|
+
<section>
|
|
21
|
+
<h3>The Problem</h3>
|
|
22
|
+
<p>
|
|
23
|
+
In an RSC architecture, server modules and client modules cannot
|
|
24
|
+
freely import from each other. This creates a dilemma for type-safe
|
|
25
|
+
routing:
|
|
26
|
+
</p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li>
|
|
29
|
+
<strong>If routes live in a server module</strong> — they can
|
|
30
|
+
reference server components, but client components cannot import the
|
|
31
|
+
route objects for type-safe hooks like <code>useRouteParams</code>{" "}
|
|
32
|
+
or <code>useRouteData</code>.
|
|
33
|
+
</li>
|
|
34
|
+
<li>
|
|
35
|
+
<strong>If routes live in a shared module</strong> — client
|
|
36
|
+
components can import them, but server components cannot be
|
|
37
|
+
referenced (importing a server component makes a module
|
|
38
|
+
server-only).
|
|
39
|
+
</li>
|
|
40
|
+
</ul>
|
|
41
|
+
<p>
|
|
42
|
+
There is no single location where route objects can both reference
|
|
43
|
+
server components <em>and</em> be imported by client components.
|
|
44
|
+
</p>
|
|
45
|
+
</section>
|
|
46
|
+
|
|
47
|
+
<section>
|
|
48
|
+
<h3>The Key Insight</h3>
|
|
49
|
+
<p>
|
|
50
|
+
The only part of a route definition that is inherently server-specific
|
|
51
|
+
is the <strong>component</strong> (because it may be a server
|
|
52
|
+
component). Everything else — <code>id</code>, <code>path</code>
|
|
53
|
+
, <code>loader</code>, <code>action</code>, and navigation state
|
|
54
|
+
— is client-safe. Loaders and actions run in the browser during
|
|
55
|
+
navigation, so they can live in shared modules.
|
|
56
|
+
</p>
|
|
57
|
+
<p>
|
|
58
|
+
This means we can split a route definition at exactly one point: the
|
|
59
|
+
component reference. FUNSTACK Router supports this split through
|
|
60
|
+
partial route definitions and <code>bindRoute()</code>.
|
|
61
|
+
</p>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<section>
|
|
65
|
+
<h3>Step 1: Define the Route (Shared Module)</h3>
|
|
66
|
+
<p>
|
|
67
|
+
Call <code>route()</code> <strong>without</strong> a{" "}
|
|
68
|
+
<code>component</code> property to create a partial route definition.
|
|
69
|
+
This object carries all type information and is safe to import from
|
|
70
|
+
client modules:
|
|
71
|
+
</p>
|
|
72
|
+
<CodeBlock language="typescript">{`// src/pages/user/loader.ts
|
|
73
|
+
"use client";
|
|
74
|
+
import type { User } from "../../types";
|
|
75
|
+
|
|
76
|
+
export async function loadUser({ params, signal }) {
|
|
77
|
+
const res = await fetch(\`/api/users/\${params.userId}\`, { signal });
|
|
78
|
+
return res.json() as Promise<User>;
|
|
79
|
+
}`}</CodeBlock>
|
|
80
|
+
<CodeBlock language="typescript">{`// src/pages/user/route.ts — shared module (no "use client" directive)
|
|
81
|
+
import { route } from "@funstack/router/server";
|
|
82
|
+
import { loadUser } from "./loader";
|
|
83
|
+
|
|
84
|
+
export const userRoute = route({
|
|
85
|
+
id: "user",
|
|
86
|
+
path: "/:userId",
|
|
87
|
+
loader: loadUser,
|
|
88
|
+
});
|
|
89
|
+
// Inferred types:
|
|
90
|
+
// Params = { userId: string } — from path
|
|
91
|
+
// Data = User — from loader return type`}</CodeBlock>
|
|
92
|
+
<p>
|
|
93
|
+
The <code>id</code> property is required for partial routes — it
|
|
94
|
+
is used at runtime to match the route context and at the type level to
|
|
95
|
+
carry type information for hooks.
|
|
96
|
+
</p>
|
|
97
|
+
</section>
|
|
98
|
+
|
|
99
|
+
<section>
|
|
100
|
+
<h3>Step 2: Bind the Component (Server Module)</h3>
|
|
101
|
+
<p>
|
|
102
|
+
Use <code>bindRoute()</code> from <code>@funstack/router/server</code>{" "}
|
|
103
|
+
to attach a component to the partial route. This produces a full route
|
|
104
|
+
definition for <code>{"<Router />"}</code>:
|
|
105
|
+
</p>
|
|
106
|
+
<CodeBlock language="tsx">{`// src/App.tsx — Server Component
|
|
107
|
+
import { bindRoute } from "@funstack/router/server";
|
|
108
|
+
import { Router } from "@funstack/router";
|
|
109
|
+
import { userRoute } from "./pages/user/route";
|
|
110
|
+
import { UserProfile } from "./pages/user/UserProfile";
|
|
111
|
+
|
|
112
|
+
const routes = [
|
|
113
|
+
bindRoute(userRoute, {
|
|
114
|
+
component: <UserProfile />,
|
|
115
|
+
}),
|
|
116
|
+
];
|
|
117
|
+
|
|
118
|
+
export default function App() {
|
|
119
|
+
return <Router routes={routes} />;
|
|
120
|
+
}`}</CodeBlock>
|
|
121
|
+
<p>
|
|
122
|
+
Because <code>bindRoute()</code> lives in the server entry point, the
|
|
123
|
+
component can be a server component. The resulting route definition is
|
|
124
|
+
fully compatible with <code>{"<Router />"}</code> — it is the
|
|
125
|
+
same type as what <code>route()</code> with a component produces.
|
|
126
|
+
</p>
|
|
127
|
+
<p>
|
|
128
|
+
<code>bindRoute()</code> also accepts optional <code>children</code>,{" "}
|
|
129
|
+
<code>exact</code>, and <code>requireChildren</code> properties in the
|
|
130
|
+
second argument, just like the regular <code>route()</code> function.
|
|
131
|
+
</p>
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
<section>
|
|
135
|
+
<h3>Type-Safe Hooks in Client Components</h3>
|
|
136
|
+
<p>
|
|
137
|
+
The partial route object from Step 1 can be imported in client
|
|
138
|
+
components and passed to hooks for full type safety:
|
|
139
|
+
</p>
|
|
140
|
+
<CodeBlock language="tsx">{`// src/pages/user/UserActions.tsx
|
|
141
|
+
"use client";
|
|
142
|
+
import { useRouteParams, useRouteData } from "@funstack/router";
|
|
143
|
+
import { userRoute } from "./route";
|
|
144
|
+
|
|
145
|
+
export function UserActions() {
|
|
146
|
+
const { userId } = useRouteParams(userRoute);
|
|
147
|
+
// userId: string ✓
|
|
148
|
+
|
|
149
|
+
const user = useRouteData(userRoute);
|
|
150
|
+
// user: User ✓
|
|
151
|
+
|
|
152
|
+
return (
|
|
153
|
+
<div>
|
|
154
|
+
<h2>{user.name}</h2>
|
|
155
|
+
<p>User ID: {userId}</p>
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
}`}</CodeBlock>
|
|
159
|
+
<p>
|
|
160
|
+
All typed hooks — <code>useRouteParams</code>,{" "}
|
|
161
|
+
<code>useRouteData</code>, and <code>useRouteState</code> —
|
|
162
|
+
accept both partial route definitions and full route definitions. The
|
|
163
|
+
type information flows naturally from path patterns, loader return
|
|
164
|
+
types, and <code>routeState</code>.
|
|
165
|
+
</p>
|
|
166
|
+
</section>
|
|
167
|
+
|
|
168
|
+
<section>
|
|
169
|
+
<h3>Navigation State</h3>
|
|
170
|
+
<p>
|
|
171
|
+
<code>routeState()</code> also supports partial route definitions.
|
|
172
|
+
When called without a <code>component</code>, it produces a partial
|
|
173
|
+
route carrying the state type:
|
|
174
|
+
</p>
|
|
175
|
+
<CodeBlock language="typescript">{`// src/pages/settings/route.ts — shared module
|
|
176
|
+
import { routeState } from "@funstack/router/server";
|
|
177
|
+
|
|
178
|
+
type SettingsState = { tab: string };
|
|
179
|
+
|
|
180
|
+
export const settingsRoute = routeState<SettingsState>()({
|
|
181
|
+
id: "settings",
|
|
182
|
+
path: "/settings",
|
|
183
|
+
});
|
|
184
|
+
// Params = {}, State = { tab: string }`}</CodeBlock>
|
|
185
|
+
<CodeBlock language="tsx">{`// src/pages/settings/SettingsPanel.tsx
|
|
186
|
+
"use client";
|
|
187
|
+
import { useRouteState } from "@funstack/router";
|
|
188
|
+
import { settingsRoute } from "./route";
|
|
189
|
+
|
|
190
|
+
export function SettingsPanel() {
|
|
191
|
+
const state = useRouteState(settingsRoute);
|
|
192
|
+
// state: { tab: string } | undefined ✓
|
|
193
|
+
// ...
|
|
194
|
+
}`}</CodeBlock>
|
|
195
|
+
</section>
|
|
196
|
+
|
|
197
|
+
<section>
|
|
198
|
+
<h3>Nested Routes</h3>
|
|
199
|
+
<p>
|
|
200
|
+
Partial routes use relative path segments, the same as regular routes.
|
|
201
|
+
Use <code>bindRoute()</code> with <code>children</code> to build
|
|
202
|
+
nested route trees:
|
|
203
|
+
</p>
|
|
204
|
+
<CodeBlock language="typescript">{`// src/pages/users/route.ts
|
|
205
|
+
import { route } from "@funstack/router/server";
|
|
206
|
+
export const usersRoute = route({ id: "users", path: "/users" });
|
|
207
|
+
|
|
208
|
+
// src/pages/users/profile/route.ts
|
|
209
|
+
import { route } from "@funstack/router/server";
|
|
210
|
+
import { fetchUser } from "./fetchUser"; // "use client" module
|
|
211
|
+
export const userProfileRoute = route({
|
|
212
|
+
id: "userProfile",
|
|
213
|
+
path: "/:userId", // relative to parent
|
|
214
|
+
loader: fetchUser,
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
// src/pages/users/settings/route.ts
|
|
218
|
+
import { route } from "@funstack/router/server";
|
|
219
|
+
export const userSettingsRoute = route({
|
|
220
|
+
id: "userSettings",
|
|
221
|
+
path: "/:userId/settings", // relative to parent
|
|
222
|
+
});`}</CodeBlock>
|
|
223
|
+
<CodeBlock language="tsx">{`// src/App.tsx
|
|
224
|
+
const routes = [
|
|
225
|
+
bindRoute(usersRoute, {
|
|
226
|
+
component: <Outlet />,
|
|
227
|
+
children: [
|
|
228
|
+
bindRoute(userProfileRoute, {
|
|
229
|
+
component: <UserProfile />,
|
|
230
|
+
}),
|
|
231
|
+
bindRoute(userSettingsRoute, {
|
|
232
|
+
component: <UserSettings />,
|
|
233
|
+
}),
|
|
234
|
+
],
|
|
235
|
+
}),
|
|
236
|
+
];`}</CodeBlock>
|
|
237
|
+
<p>
|
|
238
|
+
For layout routes that don't need typed hooks, <code>id</code> is
|
|
239
|
+
optional. A route without <code>id</code> can still be used with{" "}
|
|
240
|
+
<code>bindRoute()</code>:
|
|
241
|
+
</p>
|
|
242
|
+
<CodeBlock language="typescript">{`import { route, bindRoute } from "@funstack/router/server";
|
|
243
|
+
const layout = route({ path: "/dashboard" });
|
|
244
|
+
bindRoute(layout, { component: <Outlet />, children: [...] });`}</CodeBlock>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<section>
|
|
248
|
+
<h3>Recommended Project Structure</h3>
|
|
249
|
+
<p>
|
|
250
|
+
This pattern encourages <strong>collocating</strong> each route
|
|
251
|
+
definition with the page components that use it:
|
|
252
|
+
</p>
|
|
253
|
+
<CodeBlock language="bash">{`src/
|
|
254
|
+
pages/
|
|
255
|
+
user/
|
|
256
|
+
route.ts ← Step 1: id, path (shared module)
|
|
257
|
+
loader.ts ← "use client" — loader function
|
|
258
|
+
UserProfile.tsx ← Server component (the page)
|
|
259
|
+
UserActions.tsx ← "use client" — imports ./route for hooks
|
|
260
|
+
settings/
|
|
261
|
+
route.ts ← Step 1: id, path, routeState (shared module)
|
|
262
|
+
Settings.tsx ← Server component (the page)
|
|
263
|
+
SettingsPanel.tsx ← "use client" — imports ./route for hooks
|
|
264
|
+
App.tsx ← Step 2: bindRoute() assembles route tree`}</CodeBlock>
|
|
265
|
+
<p>This structure provides several benefits:</p>
|
|
266
|
+
<ul>
|
|
267
|
+
<li>
|
|
268
|
+
<strong>Locality</strong> — The route definition sits next to
|
|
269
|
+
the components that use it. Imports are short and obvious.
|
|
270
|
+
</li>
|
|
271
|
+
<li>
|
|
272
|
+
<strong>Encapsulation</strong> — Each page "owns" its route.
|
|
273
|
+
Adding a new page means adding a folder with a route and components,
|
|
274
|
+
then one <code>bindRoute()</code> call in <code>App.tsx</code>.
|
|
275
|
+
</li>
|
|
276
|
+
<li>
|
|
277
|
+
<strong>Local type safety</strong> — Path params and loader
|
|
278
|
+
data types are defined once in <code>route.ts</code> and consumed by
|
|
279
|
+
sibling client components. No separate type declarations needed.
|
|
280
|
+
</li>
|
|
281
|
+
</ul>
|
|
282
|
+
</section>
|
|
283
|
+
</div>
|
|
284
|
+
);
|
|
285
|
+
}
|
|
@@ -269,6 +269,12 @@ export default function App() {
|
|
|
269
269
|
See also the <a href="/learn/ssr">Server-Side Rendering</a> guide
|
|
270
270
|
for how the router handles SSR and hydration
|
|
271
271
|
</li>
|
|
272
|
+
<li>
|
|
273
|
+
For type-safe hooks in client components, see the{" "}
|
|
274
|
+
<a href="/learn/rsc/route-features">RSC with Route Features</a>{" "}
|
|
275
|
+
guide which explains how to split route definitions across the
|
|
276
|
+
server/client boundary
|
|
277
|
+
</li>
|
|
272
278
|
</ul>
|
|
273
279
|
</section>
|
|
274
280
|
</div>
|
|
@@ -103,11 +103,9 @@ export function LearnSsgPage() {
|
|
|
103
103
|
</p>
|
|
104
104
|
<p>
|
|
105
105
|
If you only need loaders to run at build time (not on the client),
|
|
106
|
-
consider using
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
send the result as static HTML, without shipping loader code to the
|
|
110
|
-
client.
|
|
106
|
+
consider using <a href="/learn/rsc">React Server Components</a> with
|
|
107
|
+
SSG. RSC lets you fetch data on the server during the build and send
|
|
108
|
+
the result as static HTML, without shipping loader code to the client.
|
|
111
109
|
</p>
|
|
112
110
|
</section>
|
|
113
111
|
|
package/dist/docs/index.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
## Available Documentation
|
|
4
4
|
|
|
5
5
|
- [Examples](./ExamplesPage.tsx)
|
|
6
|
+
- [FAQ](./FaqPage.tsx)
|
|
6
7
|
- [Getting Started](./GettingStartedPage.tsx)
|
|
7
8
|
|
|
8
9
|
### API Reference
|
|
@@ -14,8 +15,11 @@
|
|
|
14
15
|
|
|
15
16
|
### Learn
|
|
16
17
|
|
|
18
|
+
- [Form Actions](./LearnActionsPage.tsx) - FUNSTACK Router can intercept submissions and run an action function on the client before navigation occurs. This guide explains how actions work, when to use them, and important considerations for progressive enhancement.
|
|
19
|
+
- [How Loaders Run](./LearnLoadersPage.tsx) - Loaders fetch data for a route before the UI renders. This page explains when loaders execute, how results are cached, and how different types of navigation affect loader behavior.
|
|
17
20
|
- [Navigation API](./LearnNavigationApiPage.tsx) - FUNSTACK Router is built on the Navigation API , a modern browser API that provides a unified way to handle navigation. This guide explains the key differences from the older History API and the benefits this brings to your application.
|
|
18
21
|
- [Nested Routes](./LearnNestedRoutesPage.tsx) - Nested routes let you build complex page layouts where parts of the UI persist across navigation while other parts change. Think of a dashboard with a sidebar that stays in place while the main content area updates—that's nested routing in action.
|
|
22
|
+
- [RSC with Route Features](./LearnRouteDefinitionsPage.tsx) - When using React Server Components as route components, you may also want route features like loaders, typed hooks ( useRouteParams, useRouteData), and navigation state. The challenge is that route definitions referencing server components cannot be imported from client modules. This guide shows how to split a route definition into a shared part (importable by client components for type safety) and a server part (where the component is attached), enabling full route features alongside RSC.
|
|
19
23
|
- [React Server Components](./LearnRscPage.tsx) - FUNSTACK Router is designed to work with React Server Components (RSC). The package provides a dedicated server entry point so that route definitions can live in server modules, keeping client bundle sizes small.
|
|
20
24
|
- [Static Site Generation](./LearnSsgPage.tsx) - When your server or static site generator knows the URL being rendered, you can use the ssr prop to match path-based routes during SSR. This produces richer server-rendered HTML — users see page content immediately instead of just the app shell.
|
|
21
25
|
- [How SSR Works](./LearnSsrBasicPage.tsx) - FUNSTACK Router supports server-side rendering with a two-stage model. During SSR, pathless (layout) routes without loaders render to produce an app shell, while path-based routes and loaders activate only after client hydration.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as
|
|
1
|
+
import { _ as routeState, a as ExtractRouteParams, c as OpaqueRouteDefinition, d as RouteComponentProps, f as RouteComponentPropsOf, g as route, h as TypefulOpaqueRouteDefinition, i as ExtractRouteId, l as PartialRouteDefinition, m as RouteDefinition, n as ActionArgs, o as ExtractRouteState, p as RouteComponentPropsWithData, r as ExtractRouteData, s as LoaderArgs, t as bindRoute, u as PathParams } from "./bindRoute-DulMzi5X.mjs";
|
|
2
2
|
import { ComponentType, ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/types.d.ts
|
|
@@ -72,6 +72,26 @@ type Location = {
|
|
|
72
72
|
pathname: string;
|
|
73
73
|
search: string;
|
|
74
74
|
hash: string;
|
|
75
|
+
/**
|
|
76
|
+
* NavigationHistoryEntry.id — unique identifier for this entry.
|
|
77
|
+
* A new id is assigned when the entry is replaced.
|
|
78
|
+
* Null when Navigation API is unavailable.
|
|
79
|
+
*
|
|
80
|
+
* **Warning:** Do not render this value directly in DOM, as it is not
|
|
81
|
+
* available during SSR and will cause a hydration mismatch. Use it as a
|
|
82
|
+
* React `key` or in effects/callbacks instead.
|
|
83
|
+
*/
|
|
84
|
+
entryId: string | null;
|
|
85
|
+
/**
|
|
86
|
+
* NavigationHistoryEntry.key — represents the slot in the entry list.
|
|
87
|
+
* Stable across replacements.
|
|
88
|
+
* Null when Navigation API is unavailable.
|
|
89
|
+
*
|
|
90
|
+
* **Warning:** Do not render this value directly in DOM, as it is not
|
|
91
|
+
* available during SSR and will cause a hydration mismatch. Use it as a
|
|
92
|
+
* React `key` or in effects/callbacks instead.
|
|
93
|
+
*/
|
|
94
|
+
entryKey: string | null;
|
|
75
95
|
};
|
|
76
96
|
/**
|
|
77
97
|
* Callback invoked before navigation is intercepted.
|
|
@@ -167,12 +187,6 @@ declare function Router({
|
|
|
167
187
|
*/
|
|
168
188
|
declare function Outlet(): ReactNode;
|
|
169
189
|
//#endregion
|
|
170
|
-
//#region src/hooks/useNavigate.d.ts
|
|
171
|
-
/**
|
|
172
|
-
* Returns a function for programmatic navigation.
|
|
173
|
-
*/
|
|
174
|
-
declare function useNavigate(): (to: string, options?: NavigateOptions) => void;
|
|
175
|
-
//#endregion
|
|
176
190
|
//#region src/hooks/useLocation.d.ts
|
|
177
191
|
/**
|
|
178
192
|
* Returns the current location object.
|
|
@@ -244,7 +258,7 @@ declare function useBlocker(options: UseBlockerOptions): void;
|
|
|
244
258
|
* }
|
|
245
259
|
* ```
|
|
246
260
|
*/
|
|
247
|
-
declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteParams<T>;
|
|
261
|
+
declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteParams<T>;
|
|
248
262
|
//#endregion
|
|
249
263
|
//#region src/hooks/useRouteState.d.ts
|
|
250
264
|
/**
|
|
@@ -268,7 +282,7 @@ declare function useRouteParams<T extends TypefulOpaqueRouteDefinition<string, R
|
|
|
268
282
|
* }
|
|
269
283
|
* ```
|
|
270
284
|
*/
|
|
271
|
-
declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteState<T> | undefined;
|
|
285
|
+
declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteState<T> | undefined;
|
|
272
286
|
//#endregion
|
|
273
287
|
//#region src/hooks/useRouteData.d.ts
|
|
274
288
|
/**
|
|
@@ -295,7 +309,7 @@ declare function useRouteState<T extends TypefulOpaqueRouteDefinition<string, Re
|
|
|
295
309
|
* }
|
|
296
310
|
* ```
|
|
297
311
|
*/
|
|
298
|
-
declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteData<T>;
|
|
312
|
+
declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Record<string, string>, unknown, unknown> | PartialRouteDefinition<string, Record<string, string>, unknown, unknown>>(route: T): ExtractRouteData<T>;
|
|
299
313
|
//#endregion
|
|
300
314
|
//#region src/hooks/useIsPending.d.ts
|
|
301
315
|
/**
|
|
@@ -303,5 +317,16 @@ declare function useRouteData<T extends TypefulOpaqueRouteDefinition<string, Rec
|
|
|
303
317
|
*/
|
|
304
318
|
declare function useIsPending(): boolean;
|
|
305
319
|
//#endregion
|
|
306
|
-
|
|
320
|
+
//#region src/bypassInterception.d.ts
|
|
321
|
+
/**
|
|
322
|
+
* Perform a full page reload, bypassing the router's interception.
|
|
323
|
+
*/
|
|
324
|
+
declare function hardReload(): void;
|
|
325
|
+
/**
|
|
326
|
+
* Navigate to the given URL with a full page navigation,
|
|
327
|
+
* bypassing the router's interception.
|
|
328
|
+
*/
|
|
329
|
+
declare function hardNavigate(url: string): void;
|
|
330
|
+
//#endregion
|
|
331
|
+
export { type ActionArgs, type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type MatchedRoute, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PartialRouteDefinition, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type SSRConfig, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, bindRoute, hardNavigate, hardReload, route, routeState, useBlocker, useIsPending, useLocation, useRouteData, useRouteParams, useRouteState, useSearchParams };
|
|
307
332
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router/index.tsx","../src/Outlet.tsx","../src/hooks/
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router/index.tsx","../src/Outlet.tsx","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts","../src/bypassInterception.ts"],"mappings":";;;;cAGM,6BAAA;;AAFoE;;;;;;;KAgB9D,uBAAA;EAAA,CACT,6BAAA,UAyB0B;EAvB3B,IAAA,WA4Be;EA1Bf,QAAA,GAAW,uBAAA;EAgCc;;;;;;EAzBzB,KAAA;EAPA;;;;;EAaA,eAAA,YAM2B;EAA3B,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAE3B;EAAA,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,wCAAA;EAE3B,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA,SAAmB,OAAA;IACnB,cAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;AAmBN;KAAY,YAAA;sCAEV,KAAA,EAAO,uBAAA,EAAP;EAEA,MAAA,EAAQ,MAAA,kBAAR;EAEA,QAAA;AAAA;;;;KAcU,cAAA;EAMQ,4DAJlB,OAAA,WAAkB,YAAA,WAUR;EARV,YAAA;EAEA,QAAA,EAAU,QAAA;AAAA;;;;KAMA,eAAA;EAYA,uDAVV,OAAA;EAEA,KAAA,YASA;EAPA,IAAA;AAAA;;;;KAMU,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;EAgCoB;;;;;;;AAStB;;EA/BE,OAAA;EA+BsB;;;;;AC7HxB;;;;EDwGE,QAAA;AAAA;;;;;;;;KAUU,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;;;;KASI,YAAA;;;;AApK8D;;KCuC9D,SAAA;EDrCkC;;AAc9C;;;;EC8BE,IAAA;EDN2B;;;;;;;;;;;ECkB3B,UAAA;AAAA;AAAA,KAGU,WAAA;EACV,MAAA,EAAQ,eAAA;EDlCR;;;;;;;EC0CA,UAAA,GAAa,kBAAA;ED5Bc;;;;;;ECmC3B,QAAA,GAAW,YAAA;ED7BL;;;;;;;;;;;;;;;AA4BR;;;;;ECsBE,GAAA,GAAM,SAAA;AAAA;AAAA,iBAGQ,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA,QAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD1GyD;iBEM1D,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ALF8D;EKOxE,WAAA;AAAA;;;ALSF;;;;;;;;;;;;;;;;;;;;;;;;;iBKqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ALrCsC;;;;;AAgB1E;;;;;;;;;;;;iBMUgB,cAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;ANnC0C;;;;;AAgB1E;;;;;;;;;;;;;iBOWgB,aAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;APpC2C;;;;;AAgB1E;;;;;;;;;;;;;;;;iBQcgB,YAAA,WAEV,4BAAA,SAEE,MAAA,sCAIF,sBAAA,SAA+B,MAAA,oCAAA,CACnC,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBClCd,YAAA,CAAA;;;ATL0D;;;AAAA,iBUW1D,UAAA,CAAA;;AVKhB;;;iBUGgB,YAAA,CAAa,GAAA"}
|