@tanstack/router-core 0.0.1-alpha.3 → 0.0.1-alpha.4
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/build/cjs/node_modules/tiny-invariant/dist/esm/tiny-invariant.js +30 -0
- package/build/cjs/node_modules/tiny-invariant/dist/esm/tiny-invariant.js.map +1 -0
- package/build/cjs/packages/router-core/src/index.js +72 -54
- package/build/cjs/packages/router-core/src/index.js.map +1 -1
- package/build/esm/index.js +85 -55
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +60 -35
- package/build/types/index.d.ts +49 -34
- package/build/umd/index.development.js +81 -52
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -1
- package/src/index.ts +219 -142
- package/src/createRoutes.test.ts +0 -328
package/src/createRoutes.test.ts
DELETED
|
@@ -1,328 +0,0 @@
|
|
|
1
|
-
import { Route } from './'
|
|
2
|
-
import { z } from 'zod'
|
|
3
|
-
import {
|
|
4
|
-
createRouter,
|
|
5
|
-
AllRouteInfo,
|
|
6
|
-
createRouteConfig,
|
|
7
|
-
RelativeToPathAutoComplete,
|
|
8
|
-
} from '.'
|
|
9
|
-
|
|
10
|
-
// Write a test
|
|
11
|
-
describe('everything', () => {
|
|
12
|
-
it('should work', () => {
|
|
13
|
-
// Build our routes. We could do this in our component, too.
|
|
14
|
-
const routeConfig = createRouteConfig().addChildren((createRoute) => [
|
|
15
|
-
createRoute({
|
|
16
|
-
path: '/',
|
|
17
|
-
validateSearch: (search) =>
|
|
18
|
-
z
|
|
19
|
-
.object({
|
|
20
|
-
version: z.number(),
|
|
21
|
-
})
|
|
22
|
-
.parse(search),
|
|
23
|
-
}),
|
|
24
|
-
createRoute({
|
|
25
|
-
path: '/test',
|
|
26
|
-
validateSearch: (search) =>
|
|
27
|
-
z
|
|
28
|
-
.object({
|
|
29
|
-
version: z.number(),
|
|
30
|
-
isGood: z.boolean(),
|
|
31
|
-
})
|
|
32
|
-
.parse(search),
|
|
33
|
-
}),
|
|
34
|
-
createRoute({
|
|
35
|
-
path: 'dashboard',
|
|
36
|
-
loader: async () => {
|
|
37
|
-
console.log('Fetching all invoices...')
|
|
38
|
-
return {
|
|
39
|
-
invoices: 'await fetchInvoices()',
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
}).addChildren((createRoute) => [
|
|
43
|
-
createRoute({ path: '/' }),
|
|
44
|
-
createRoute({
|
|
45
|
-
path: 'invoices',
|
|
46
|
-
}).addChildren((createRoute) => [
|
|
47
|
-
createRoute({
|
|
48
|
-
path: '/',
|
|
49
|
-
action: async (partialInvoice: { amount: number }) => {
|
|
50
|
-
const invoice: { id: number; amount: number } = null!
|
|
51
|
-
// // Redirect to the new invoice
|
|
52
|
-
// ctx.router.navigate({
|
|
53
|
-
// to: invoice.id,
|
|
54
|
-
// // Use the current match for relative paths
|
|
55
|
-
// from: ctx.match.pathname,
|
|
56
|
-
// })
|
|
57
|
-
return invoice
|
|
58
|
-
},
|
|
59
|
-
}),
|
|
60
|
-
createRoute({
|
|
61
|
-
path: ':invoiceId',
|
|
62
|
-
parseParams: ({ invoiceId }) => ({ invoiceId: Number(invoiceId) }),
|
|
63
|
-
stringifyParams: ({ invoiceId }) => ({
|
|
64
|
-
invoiceId: String(invoiceId),
|
|
65
|
-
}),
|
|
66
|
-
loader: async ({ params: { invoiceId } }) => {
|
|
67
|
-
console.log('Fetching invoice...')
|
|
68
|
-
return {
|
|
69
|
-
invoice: 'await fetchInvoiceById(invoiceId!)',
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
}),
|
|
73
|
-
]),
|
|
74
|
-
createRoute({
|
|
75
|
-
path: 'users',
|
|
76
|
-
loader: async () => {
|
|
77
|
-
return {
|
|
78
|
-
users: 'await fetchUsers()',
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
validateSearch: (search) =>
|
|
82
|
-
z
|
|
83
|
-
.object({
|
|
84
|
-
usersView: z
|
|
85
|
-
.object({
|
|
86
|
-
sortBy: z.enum(['name', 'id', 'email']).optional(),
|
|
87
|
-
filterBy: z.string().optional(),
|
|
88
|
-
})
|
|
89
|
-
.optional(),
|
|
90
|
-
})
|
|
91
|
-
.parse(search),
|
|
92
|
-
preSearchFilters: [
|
|
93
|
-
// Keep the usersView search param around
|
|
94
|
-
// while in this route (or it's children!)
|
|
95
|
-
(search) => ({
|
|
96
|
-
...search,
|
|
97
|
-
usersView: {
|
|
98
|
-
...search.usersView,
|
|
99
|
-
},
|
|
100
|
-
}),
|
|
101
|
-
],
|
|
102
|
-
}).addChildren((createRoute) => [
|
|
103
|
-
createRoute({
|
|
104
|
-
path: ':userId',
|
|
105
|
-
loader: async ({ params: { userId }, search }) => {
|
|
106
|
-
return {
|
|
107
|
-
user: 'await fetchUserById(userId!)',
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
action: async (partialUser: { amount: number }) => {
|
|
111
|
-
const invoice: { id: number; amount: number } = null!
|
|
112
|
-
// // Redirect to the new invoice
|
|
113
|
-
// ctx.router.navigate({
|
|
114
|
-
// to: invoice.id,
|
|
115
|
-
// // Use the current match for relative paths
|
|
116
|
-
// from: ctx.match.pathname,
|
|
117
|
-
// })
|
|
118
|
-
return invoice
|
|
119
|
-
},
|
|
120
|
-
}),
|
|
121
|
-
]),
|
|
122
|
-
]),
|
|
123
|
-
// Obviously, you can put routes in other files, too
|
|
124
|
-
// reallyExpensiveRoute,
|
|
125
|
-
createRoute({
|
|
126
|
-
path: 'authenticated/', // Trailing slash doesn't mean anything
|
|
127
|
-
}).addChildren((createRoute) => [
|
|
128
|
-
createRoute({
|
|
129
|
-
path: '/',
|
|
130
|
-
}),
|
|
131
|
-
]),
|
|
132
|
-
])
|
|
133
|
-
|
|
134
|
-
type MyRoutesInfo = AllRouteInfo<typeof routeConfig>
|
|
135
|
-
// ^?
|
|
136
|
-
type RouteInfo = MyRoutesInfo['routeInfo']
|
|
137
|
-
type RoutesById = MyRoutesInfo['routeInfoById']
|
|
138
|
-
type RoutesTest = Route<
|
|
139
|
-
MyRoutesInfo,
|
|
140
|
-
MyRoutesInfo['routeInfoByFullPath']['/']
|
|
141
|
-
>
|
|
142
|
-
// ^?
|
|
143
|
-
type RoutePaths = MyRoutesInfo['routeInfoByFullPath']
|
|
144
|
-
// ^?
|
|
145
|
-
type InvoiceRouteInfo = RoutesById['/dashboard/invoices/']
|
|
146
|
-
// ^?
|
|
147
|
-
type InvoiceLoaderData = InvoiceRouteInfo['loaderData']
|
|
148
|
-
// ^?//
|
|
149
|
-
type InvoiceAction = InvoiceRouteInfo['actionPayload']
|
|
150
|
-
// ^?
|
|
151
|
-
|
|
152
|
-
const router = createRouter({
|
|
153
|
-
routeConfig,
|
|
154
|
-
})
|
|
155
|
-
|
|
156
|
-
const loaderData = router.getRoute('/dashboard/users/:userId')
|
|
157
|
-
// ^?
|
|
158
|
-
const route = router.getRoute('/dashboard/users/:userId')
|
|
159
|
-
// ^?
|
|
160
|
-
const action = route.action
|
|
161
|
-
// ^?
|
|
162
|
-
const result = action.submit({ amount: 10000 })
|
|
163
|
-
// ^?
|
|
164
|
-
|
|
165
|
-
router.buildLink({
|
|
166
|
-
to: '/dashboard/users/:userId',
|
|
167
|
-
params: {
|
|
168
|
-
userId: '2',
|
|
169
|
-
},
|
|
170
|
-
search: (prev) => ({
|
|
171
|
-
usersView: {
|
|
172
|
-
sortBy: 'email',
|
|
173
|
-
},
|
|
174
|
-
}),
|
|
175
|
-
})
|
|
176
|
-
|
|
177
|
-
// @ts-expect-error
|
|
178
|
-
router.buildLink({
|
|
179
|
-
from: '/',
|
|
180
|
-
to: '/test',
|
|
181
|
-
})
|
|
182
|
-
|
|
183
|
-
router.buildLink({
|
|
184
|
-
from: '/',
|
|
185
|
-
to: '/test',
|
|
186
|
-
search: () => {
|
|
187
|
-
return {
|
|
188
|
-
version: 2,
|
|
189
|
-
isGood: true,
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
})
|
|
193
|
-
|
|
194
|
-
router.buildLink({
|
|
195
|
-
from: '/test',
|
|
196
|
-
to: '/',
|
|
197
|
-
})
|
|
198
|
-
|
|
199
|
-
route.buildLink({
|
|
200
|
-
to: '',
|
|
201
|
-
})
|
|
202
|
-
|
|
203
|
-
router.getRoute('/dashboard').buildLink({
|
|
204
|
-
to: '/dashboard/invoices',
|
|
205
|
-
params: {
|
|
206
|
-
// @ts-expect-error
|
|
207
|
-
invoiceId: 2,
|
|
208
|
-
},
|
|
209
|
-
})
|
|
210
|
-
|
|
211
|
-
router.getRoute('/dashboard').buildLink({
|
|
212
|
-
to: '/dashboard/invoices/:invoiceId',
|
|
213
|
-
params: {
|
|
214
|
-
// @ts-expect-error
|
|
215
|
-
invoiceId: '2',
|
|
216
|
-
},
|
|
217
|
-
})
|
|
218
|
-
|
|
219
|
-
router.getRoute('/').buildLink({
|
|
220
|
-
to: '/dashboard/invoices/:invoiceId',
|
|
221
|
-
params: {
|
|
222
|
-
invoiceId: 2,
|
|
223
|
-
},
|
|
224
|
-
})
|
|
225
|
-
|
|
226
|
-
router.getRoute('/').buildLink({
|
|
227
|
-
to: '/',
|
|
228
|
-
search: {
|
|
229
|
-
version: 2,
|
|
230
|
-
},
|
|
231
|
-
})
|
|
232
|
-
|
|
233
|
-
router.getRoute('/').buildLink({
|
|
234
|
-
to: '/dashboard/users/:userId',
|
|
235
|
-
params: (current) => ({
|
|
236
|
-
userId:
|
|
237
|
-
// @ts-expect-error
|
|
238
|
-
current?.invoiceId,
|
|
239
|
-
}),
|
|
240
|
-
search: (old) => ({
|
|
241
|
-
usersView: {
|
|
242
|
-
sortBy: 'email' as const,
|
|
243
|
-
filterBy: String(old.version),
|
|
244
|
-
},
|
|
245
|
-
}),
|
|
246
|
-
})
|
|
247
|
-
|
|
248
|
-
router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
|
|
249
|
-
to: '/dashboard/users/:userId',
|
|
250
|
-
params: (current) => ({
|
|
251
|
-
userId: `${current?.invoiceId}`,
|
|
252
|
-
}),
|
|
253
|
-
search: (prev) => {
|
|
254
|
-
return {
|
|
255
|
-
usersView: {
|
|
256
|
-
sortBy: 'name' as const,
|
|
257
|
-
filterBy: 'tanner',
|
|
258
|
-
},
|
|
259
|
-
}
|
|
260
|
-
},
|
|
261
|
-
})
|
|
262
|
-
|
|
263
|
-
router.getRoute('/dashboard/users/:userId').buildLink({
|
|
264
|
-
to: '/',
|
|
265
|
-
search: (prev) => {
|
|
266
|
-
return {
|
|
267
|
-
version: 2,
|
|
268
|
-
}
|
|
269
|
-
},
|
|
270
|
-
})
|
|
271
|
-
|
|
272
|
-
router.buildLink({
|
|
273
|
-
from: '/',
|
|
274
|
-
to: '/dashboard/users/:userId',
|
|
275
|
-
params: {
|
|
276
|
-
userId: '2',
|
|
277
|
-
},
|
|
278
|
-
search: (prev) => ({
|
|
279
|
-
usersView: {
|
|
280
|
-
sortBy: 'id',
|
|
281
|
-
filterBy: `${prev.version}`,
|
|
282
|
-
},
|
|
283
|
-
}),
|
|
284
|
-
})
|
|
285
|
-
|
|
286
|
-
router.getRoute('/').navigate({
|
|
287
|
-
// to: '.',
|
|
288
|
-
// TODO: What the heck? Why is any required here?
|
|
289
|
-
search: (prev: any) => ({
|
|
290
|
-
version: prev.version,
|
|
291
|
-
}),
|
|
292
|
-
})
|
|
293
|
-
|
|
294
|
-
router.buildLink({
|
|
295
|
-
from: '/dashboard/invoices',
|
|
296
|
-
to: '/dashboard',
|
|
297
|
-
})
|
|
298
|
-
|
|
299
|
-
router.getRoute('/').buildLink({
|
|
300
|
-
to: '/dashboard/invoices/:invoiceId',
|
|
301
|
-
params: {
|
|
302
|
-
invoiceId: 2,
|
|
303
|
-
},
|
|
304
|
-
})
|
|
305
|
-
|
|
306
|
-
router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
|
|
307
|
-
to: '.',
|
|
308
|
-
params: (d) => ({
|
|
309
|
-
invoiceId: d.invoiceId,
|
|
310
|
-
}),
|
|
311
|
-
})
|
|
312
|
-
|
|
313
|
-
type test = RelativeToPathAutoComplete<
|
|
314
|
-
// ^?
|
|
315
|
-
MyRoutesInfo['fullPath'],
|
|
316
|
-
'/dashboard/invoices',
|
|
317
|
-
'..'
|
|
318
|
-
>
|
|
319
|
-
|
|
320
|
-
router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
|
|
321
|
-
to: '../test',
|
|
322
|
-
search: {
|
|
323
|
-
version: 2,
|
|
324
|
-
isGood: true,
|
|
325
|
-
},
|
|
326
|
-
})
|
|
327
|
-
})
|
|
328
|
-
})
|