Skip to content

Commit e86dfea

Browse files
brenelzbrenelz
authored
fix: remount deps for solid (#4947)
1 parent 055ba50 commit e86dfea

File tree

9 files changed

+314
-1
lines changed

9 files changed

+314
-1
lines changed

‎e2e/react-router/basic-file-based/src/routeTree.gen.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import { createFileRoute } from '@tanstack/react-router'
1212

1313
import { Route as rootRouteImport } from './routes/__root'
1414
import { Route as Char45824Char54620Char48124Char44397RouteImport } from './routes/대한민국'
15+
import { Route as RemountDepsRouteImport } from './routes/remountDeps'
1516
import { Route as PostsRouteImport } from './routes/posts'
17+
import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps'
1618
import { Route as EditingBRouteImport } from './routes/editing-b'
1719
import { Route as EditingARouteImport } from './routes/editing-a'
1820
import { Route as ComponentTypesTestRouteImport } from './routes/component-types-test'
@@ -66,11 +68,21 @@ const Char45824Char54620Char48124Char44397Route =
6668
path: '/대한민국',
6769
getParentRoute: () => rootRouteImport,
6870
} as any)
71+
const RemountDepsRoute = RemountDepsRouteImport.update({
72+
id: '/remountDeps',
73+
path: '/remountDeps',
74+
getParentRoute: () => rootRouteImport,
75+
} as any)
6976
const PostsRoute = PostsRouteImport.update({
7077
id: '/posts',
7178
path: '/posts',
7279
getParentRoute: () => rootRouteImport,
7380
} as any)
81+
const NotRemountDepsRoute = NotRemountDepsRouteImport.update({
82+
id: '/notRemountDeps',
83+
path: '/notRemountDeps',
84+
getParentRoute: () => rootRouteImport,
85+
} as any)
7486
const EditingBRoute = EditingBRouteImport.update({
7587
id: '/editing-b',
7688
path: '/editing-b',
@@ -285,7 +297,9 @@ export interface FileRoutesByFullPath {
285297
'/component-types-test': typeof ComponentTypesTestRoute
286298
'/editing-a': typeof EditingARoute
287299
'/editing-b': typeof EditingBRoute
300+
'/notRemountDeps': typeof NotRemountDepsRoute
288301
'/posts': typeof PostsRouteWithChildren
302+
'/remountDeps': typeof RemountDepsRoute
289303
'/대한민국': typeof Char45824Char54620Char48124Char44397Route
290304
'/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
291305
'/inside': typeof groupInsideRoute
@@ -325,6 +339,8 @@ export interface FileRoutesByTo {
325339
'/component-types-test': typeof ComponentTypesTestRoute
326340
'/editing-a': typeof EditingARoute
327341
'/editing-b': typeof EditingBRoute
342+
'/notRemountDeps': typeof NotRemountDepsRoute
343+
'/remountDeps': typeof RemountDepsRoute
328344
'/대한민국': typeof Char45824Char54620Char48124Char44397Route
329345
'/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
330346
'/inside': typeof groupInsideRoute
@@ -366,7 +382,9 @@ export interface FileRoutesById {
366382
'/component-types-test': typeof ComponentTypesTestRoute
367383
'/editing-a': typeof EditingARoute
368384
'/editing-b': typeof EditingBRoute
385+
'/notRemountDeps': typeof NotRemountDepsRoute
369386
'/posts': typeof PostsRouteWithChildren
387+
'/remountDeps': typeof RemountDepsRoute
370388
'/대한민국': typeof Char45824Char54620Char48124Char44397Route
371389
'/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
372390
'/(group)': typeof groupRouteWithChildren
@@ -412,7 +430,9 @@ export interface FileRouteTypes {
412430
| '/component-types-test'
413431
| '/editing-a'
414432
| '/editing-b'
433+
| '/notRemountDeps'
415434
| '/posts'
435+
| '/remountDeps'
416436
| '/대한민국'
417437
| '/onlyrouteinside'
418438
| '/inside'
@@ -452,6 +472,8 @@ export interface FileRouteTypes {
452472
| '/component-types-test'
453473
| '/editing-a'
454474
| '/editing-b'
475+
| '/notRemountDeps'
476+
| '/remountDeps'
455477
| '/대한민국'
456478
| '/onlyrouteinside'
457479
| '/inside'
@@ -492,7 +514,9 @@ export interface FileRouteTypes {
492514
| '/component-types-test'
493515
| '/editing-a'
494516
| '/editing-b'
517+
| '/notRemountDeps'
495518
| '/posts'
519+
| '/remountDeps'
496520
| '/대한민국'
497521
| '/(another-group)/onlyrouteinside'
498522
| '/(group)'
@@ -538,7 +562,9 @@ export interface RootRouteChildren {
538562
ComponentTypesTestRoute: typeof ComponentTypesTestRoute
539563
EditingARoute: typeof EditingARoute
540564
EditingBRoute: typeof EditingBRoute
565+
NotRemountDepsRoute: typeof NotRemountDepsRoute
541566
PostsRoute: typeof PostsRouteWithChildren
567+
RemountDepsRoute: typeof RemountDepsRoute
542568
Char45824Char54620Char48124Char44397Route: typeof Char45824Char54620Char48124Char44397Route
543569
anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute
544570
groupRoute: typeof groupRouteWithChildren
@@ -577,13 +603,27 @@ declare module '@tanstack/react-router' {
577603
preLoaderRoute: typeof Char45824Char54620Char48124Char44397RouteImport
578604
parentRoute: typeof rootRouteImport
579605
}
606+
'/remountDeps': {
607+
id: '/remountDeps'
608+
path: '/remountDeps'
609+
fullPath: '/remountDeps'
610+
preLoaderRoute: typeof RemountDepsRouteImport
611+
parentRoute: typeof rootRouteImport
612+
}
580613
'/posts': {
581614
id: '/posts'
582615
path: '/posts'
583616
fullPath: '/posts'
584617
preLoaderRoute: typeof PostsRouteImport
585618
parentRoute: typeof rootRouteImport
586619
}
620+
'/notRemountDeps': {
621+
id: '/notRemountDeps'
622+
path: '/notRemountDeps'
623+
fullPath: '/notRemountDeps'
624+
preLoaderRoute: typeof NotRemountDepsRouteImport
625+
parentRoute: typeof rootRouteImport
626+
}
587627
'/editing-b': {
588628
id: '/editing-b'
589629
path: '/editing-b'
@@ -969,7 +1009,9 @@ const rootRouteChildren: RootRouteChildren = {
9691009
ComponentTypesTestRoute: ComponentTypesTestRoute,
9701010
EditingARoute: EditingARoute,
9711011
EditingBRoute: EditingBRoute,
1012+
NotRemountDepsRoute: NotRemountDepsRoute,
9721013
PostsRoute: PostsRouteWithChildren,
1014+
RemountDepsRoute: RemountDepsRoute,
9731015
Char45824Char54620Char48124Char44397Route:
9741016
Char45824Char54620Char48124Char44397Route,
9751017
anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute,

‎e2e/react-router/basic-file-based/src/routes/notRemountDeps.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { createFileRoute } from '@tanstack/react-router'
2+
import * as React from 'react'
3+
4+
export const Route = createFileRoute('/notRemountDeps')({
5+
validateSearch(search: { searchParam: string }) {
6+
return { searchParam: search.searchParam }
7+
},
8+
loaderDeps(opts) {
9+
return opts.search
10+
},
11+
component: Home,
12+
remountDeps(opts) {
13+
return opts.params
14+
},
15+
})
16+
17+
let counter = 0
18+
19+
function Home() {
20+
const search = Route.useSearch()
21+
const navigate = Route.useNavigate()
22+
23+
const [mounts, setMounts] = React.useState(counter)
24+
React.useEffect(() => {
25+
setMounts(++counter)
26+
}, [])
27+
28+
return (
29+
<div className="p-2">
30+
<button
31+
onClick={() => {
32+
navigate({
33+
search: { searchParam: Math.random().toString(36).substring(2, 8) },
34+
})
35+
}}
36+
>
37+
Regenerate search param
38+
</button>
39+
40+
<div>Search: {search.searchParam}</div>
41+
<div data-testid="component-mounts">Page component mounts: {mounts}</div>
42+
</div>
43+
)
44+
}

‎e2e/react-router/basic-file-based/src/routes/remountDeps.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { createFileRoute } from '@tanstack/react-router'
2+
import * as React from 'react'
3+
4+
export const Route = createFileRoute('/remountDeps')({
5+
validateSearch(search: { searchParam: string }) {
6+
return { searchParam: search.searchParam }
7+
},
8+
loaderDeps(opts) {
9+
return opts.search
10+
},
11+
component: Home,
12+
remountDeps(opts) {
13+
return opts.search
14+
},
15+
})
16+
17+
let counter = 0
18+
19+
function Home() {
20+
const search = Route.useSearch()
21+
const navigate = Route.useNavigate()
22+
23+
const [mounts, setMounts] = React.useState(counter)
24+
React.useEffect(() => {
25+
setMounts(++counter)
26+
}, [])
27+
28+
return (
29+
<div className="p-2">
30+
<button
31+
onClick={() => {
32+
navigate({
33+
search: { searchParam: Math.random().toString(36).substring(2, 8) },
34+
})
35+
}}
36+
>
37+
Regenerate search param
38+
</button>
39+
40+
<div>Search: {search.searchParam}</div>
41+
<div data-testid="component-mounts">Page component mounts: {mounts}</div>
42+
</div>
43+
)
44+
}

‎e2e/react-router/basic-file-based/tests/app.spec.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,3 +284,27 @@ test('Should change post navigating back and forth', async ({ page }) => {
284284
await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
285285
await expect(page.getByTestId('post-title')).toContainText('sunt aut facere')
286286
})
287+
288+
test('Should not remount deps when remountDeps does not change ', async ({
289+
page,
290+
}) => {
291+
await page.goto('/notRemountDeps')
292+
await expect(page.getByTestId('component-mounts')).toContainText(
293+
'Page component mounts: 1',
294+
)
295+
await page.getByRole('button', { name: 'Regenerate search param' }).click()
296+
await expect(page.getByTestId('component-mounts')).toContainText(
297+
'Page component mounts: 1',
298+
)
299+
})
300+
301+
test('Should remount deps when remountDeps does change ', async ({ page }) => {
302+
await page.goto('/remountDeps')
303+
await expect(page.getByTestId('component-mounts')).toContainText(
304+
'Page component mounts: 1',
305+
)
306+
await page.getByRole('button', { name: 'Regenerate search param' }).click()
307+
await expect(page.getByTestId('component-mounts')).toContainText(
308+
'Page component mounts: 2',
309+
)
310+
})

‎e2e/solid-router/basic-file-based/src/routeTree.gen.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
import { createFileRoute } from '@tanstack/solid-router'
1212

1313
import { Route as rootRouteImport } from './routes/__root'
14+
import { Route as RemountDepsRouteImport } from './routes/remountDeps'
1415
import { Route as PostsRouteImport } from './routes/posts'
16+
import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps'
1517
import { Route as EditingBRouteImport } from './routes/editing-b'
1618
import { Route as EditingARouteImport } from './routes/editing-a'
1719
import { Route as ComponentTypesTestRouteImport } from './routes/component-types-test'
@@ -49,11 +51,21 @@ const groupRoute = groupRouteImport.update({
4951
id: '/(group)',
5052
getParentRoute: () => rootRouteImport,
5153
} as any)
54+
const RemountDepsRoute = RemountDepsRouteImport.update({
55+
id: '/remountDeps',
56+
path: '/remountDeps',
57+
getParentRoute: () => rootRouteImport,
58+
} as any)
5259
const PostsRoute = PostsRouteImport.update({
5360
id: '/posts',
5461
path: '/posts',
5562
getParentRoute: () => rootRouteImport,
5663
} as any)
64+
const NotRemountDepsRoute = NotRemountDepsRouteImport.update({
65+
id: '/notRemountDeps',
66+
path: '/notRemountDeps',
67+
getParentRoute: () => rootRouteImport,
68+
} as any)
5769
const EditingBRoute = EditingBRouteImport.update({
5870
id: '/editing-b',
5971
path: '/editing-b',
@@ -213,7 +225,9 @@ export interface FileRoutesByFullPath {
213225
'/component-types-test': typeof ComponentTypesTestRoute
214226
'/editing-a': typeof EditingARoute
215227
'/editing-b': typeof EditingBRoute
228+
'/notRemountDeps': typeof NotRemountDepsRoute
216229
'/posts': typeof PostsRouteWithChildren
230+
'/remountDeps': typeof RemountDepsRoute
217231
'/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
218232
'/inside': typeof groupInsideRoute
219233
'/lazyinside': typeof groupLazyinsideRoute
@@ -242,6 +256,8 @@ export interface FileRoutesByTo {
242256
'/component-types-test': typeof ComponentTypesTestRoute
243257
'/editing-a': typeof EditingARoute
244258
'/editing-b': typeof EditingBRoute
259+
'/notRemountDeps': typeof NotRemountDepsRoute
260+
'/remountDeps': typeof RemountDepsRoute
245261
'/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
246262
'/inside': typeof groupInsideRoute
247263
'/lazyinside': typeof groupLazyinsideRoute
@@ -272,7 +288,9 @@ export interface FileRoutesById {
272288
'/component-types-test': typeof ComponentTypesTestRoute
273289
'/editing-a': typeof EditingARoute
274290
'/editing-b': typeof EditingBRoute
291+
'/notRemountDeps': typeof NotRemountDepsRoute
275292
'/posts': typeof PostsRouteWithChildren
293+
'/remountDeps': typeof RemountDepsRoute
276294
'/(another-group)/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
277295
'/(group)': typeof groupRouteWithChildren
278296
'/(group)/_layout': typeof groupLayoutRouteWithChildren
@@ -307,7 +325,9 @@ export interface FileRouteTypes {
307325
| '/component-types-test'
308326
| '/editing-a'
309327
| '/editing-b'
328+
| '/notRemountDeps'
310329
| '/posts'
330+
| '/remountDeps'
311331
| '/onlyrouteinside'
312332
| '/inside'
313333
| '/lazyinside'
@@ -336,6 +356,8 @@ export interface FileRouteTypes {
336356
| '/component-types-test'
337357
| '/editing-a'
338358
| '/editing-b'
359+
| '/notRemountDeps'
360+
| '/remountDeps'
339361
| '/onlyrouteinside'
340362
| '/inside'
341363
| '/lazyinside'
@@ -365,7 +387,9 @@ export interface FileRouteTypes {
365387
| '/component-types-test'
366388
| '/editing-a'
367389
| '/editing-b'
390+
| '/notRemountDeps'
368391
| '/posts'
392+
| '/remountDeps'
369393
| '/(another-group)/onlyrouteinside'
370394
| '/(group)'
371395
| '/(group)/_layout'
@@ -400,7 +424,9 @@ export interface RootRouteChildren {
400424
ComponentTypesTestRoute: typeof ComponentTypesTestRoute
401425
EditingARoute: typeof EditingARoute
402426
EditingBRoute: typeof EditingBRoute
427+
NotRemountDepsRoute: typeof NotRemountDepsRoute
403428
PostsRoute: typeof PostsRouteWithChildren
429+
RemountDepsRoute: typeof RemountDepsRoute
404430
anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute
405431
groupRoute: typeof groupRouteWithChildren
406432
RedirectTargetRoute: typeof RedirectTargetRouteWithChildren
@@ -421,13 +447,27 @@ declare module '@tanstack/solid-router' {
421447
preLoaderRoute: typeof groupRouteImport
422448
parentRoute: typeof rootRouteImport
423449
}
450+
'/remountDeps': {
451+
id: '/remountDeps'
452+
path: '/remountDeps'
453+
fullPath: '/remountDeps'
454+
preLoaderRoute: typeof RemountDepsRouteImport
455+
parentRoute: typeof rootRouteImport
456+
}
424457
'/posts': {
425458
id: '/posts'
426459
path: '/posts'
427460
fullPath: '/posts'
428461
preLoaderRoute: typeof PostsRouteImport
429462
parentRoute: typeof rootRouteImport
430463
}
464+
'/notRemountDeps': {
465+
id: '/notRemountDeps'
466+
path: '/notRemountDeps'
467+
fullPath: '/notRemountDeps'
468+
preLoaderRoute: typeof NotRemountDepsRouteImport
469+
parentRoute: typeof rootRouteImport
470+
}
431471
'/editing-b': {
432472
id: '/editing-b'
433473
path: '/editing-b'
@@ -743,7 +783,9 @@ const rootRouteChildren: RootRouteChildren = {
743783
ComponentTypesTestRoute: ComponentTypesTestRoute,
744784
EditingARoute: EditingARoute,
745785
EditingBRoute: EditingBRoute,
786+
NotRemountDepsRoute: NotRemountDepsRoute,
746787
PostsRoute: PostsRouteWithChildren,
788+
RemountDepsRoute: RemountDepsRoute,
747789
anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute,
748790
groupRoute: groupRouteWithChildren,
749791
RedirectTargetRoute: RedirectTargetRouteWithChildren,

0 commit comments

Comments
 (0)