Skip to content

Commit 3b07142

Browse files
tannerlinsleytannerlinsley
committed
fix: hydration, pending timing removal
1 parent dfcfb57 commit 3b07142

File tree

15 files changed

+147
-144
lines changed

15 files changed

+147
-144
lines changed

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Quer
5252
- Prefetching
5353
- Automatic Prefetching
5454
- Transitions
55-
- Pending States
5655
- Error Boundaries
5756
- Code Splitting
5857
- Layout Routes

‎docs/comparison.md

+45-46
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,51 @@ Feature/Capability Key:
1515
- 🔶 Possible, but requires custom code/implementation/casting
1616
- 🛑 Not officially supported
1717

18-
| | TanStack Router | React Router DOM [_(Website)_][react-router] |
19-
| ---------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------- |
20-
| Github Repo / Stars | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-react-router]][gh-react-router] |
21-
| Bundle Size | [![][bp-tanstack-router]][bpl-tanstack-router] | [![][bp-react-router]][bpl-react-router] |
22-
| History, Memory & Hash Routers | ✅ | ✅ |
23-
| Nested / Layout Routes | ✅ | ✅ |
24-
| Suspense-like Route Transitions | ✅ | ✅ |
25-
| Typesafe Route Configurations | ✅ | 🛑 |
26-
| Loaders | ✅ | ✅ |
27-
| Typesafe Loaders | ✅ | 🔶 |
28-
| Loader Caching (SWR + Invalidation) | ✅ | 🛑 |
29-
| Actions | ✅ | ✅ |
30-
| Typesafe Actions | ✅ | 🔶 |
31-
| Route Prefetching | ✅ | ✅ |
32-
| Auto Route Prefetching | ✅ | 🛑 |
33-
| Route Prefetching Delay | ✅ | 🔶 |
34-
| Path Params | ✅ | ✅ |
35-
| Typesafe Path Params | ✅ | 🛑 |
36-
| Path Param Validation | ✅ | 🛑 |
37-
| Custom Path Param Parsing/Serialization | ✅ | 🛑 |
38-
| Code-Splitting | ✅ | ✅ |
39-
| Ranked Routes | 🟢 | ✅ |
40-
| Active Link Customization | ✅ | ✅ |
41-
| Ephemeral Optimistic UI | ✅ | ✅ |
42-
| Typesafe Absolute + Relative Navigation | ✅ | 🛑 |
43-
| Route Mount/Transition/Unmount Events | ✅ | 🛑 |
44-
| Official Devtools | 🟢 | 🛑 |
45-
| Basic Search Params | ✅ | ✅ |
46-
| Search Param Hooks | ✅ | ✅ |
47-
| `<Link/>`/`useNavigate` Search Param API | ✅ | 🟡 (search-string only via the `to`/`search` options) |
48-
| JSON Search Params | ✅ | 🔶 |
49-
| TypeSafe Search Params | ✅ | 🛑 |
50-
| Search Param Schema Validation | ✅ | 🛑 |
51-
| Search Param Immutability + Structural Sharing | ✅ | 🛑 |
52-
| Custom Search Param parsing/serialization | ✅ | 🔶 |
53-
| Hierarchical Search Param Transforms | ✅ | 🛑 |
54-
| Async Route Elements | ✅ | 🛑 |
55-
| Suspense Route Elements | ✅ | ✅ |
56-
| Route Error Elements | ✅ | ✅ |
57-
| Route Pending Elements | ✅ | 🛑 |
58-
| Pending Timing (delay, min-show) | ✅ | 🛑 |
59-
| `<Prompt>`/`usePrompt` | ✅ | 🔶 |
60-
| SSR | 🛑 (Coming Soon) | ✅ |
61-
| Navigation Scroll Restoration | 🛑 (Coming Soon) | ✅ |
62-
| Deferred Loader Streaming | 🛑 (Coming Soon) | ✅ |
63-
| `<Form>` API | 🛑 | ✅ |
18+
| | TanStack Router | React Router DOM [_(Website)_][react-router] |
19+
| ---------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
20+
| Github Repo / Stars | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-react-router]][gh-react-router] |
21+
| Bundle Size | [![][bp-tanstack-router]][bpl-tanstack-router] | [![][bp-react-router]][bpl-react-router] |
22+
| History, Memory & Hash Routers | ✅ | ✅ |
23+
| Nested / Layout Routes | ✅ | ✅ |
24+
| Suspense-like Route Transitions | ✅ | ✅ |
25+
| Typesafe Route Configurations | ✅ | 🛑 |
26+
| Loaders | ✅ | ✅ |
27+
| Typesafe Loaders | ✅ | 🔶 |
28+
| Loader Caching (SWR + Invalidation) | ✅ | 🛑 |
29+
| Actions | ✅ | ✅ |
30+
| Typesafe Actions | ✅ | 🔶 |
31+
| Route Prefetching | ✅ | ✅ |
32+
| Auto Route Prefetching | ✅ | 🛑 |
33+
| Route Prefetching Delay | ✅ | 🔶 |
34+
| Path Params | ✅ | ✅ |
35+
| Typesafe Path Params | ✅ | 🛑 |
36+
| Path Param Validation | ✅ | 🛑 |
37+
| Custom Path Param Parsing/Serialization | ✅ | 🛑 |
38+
| Code-Splitting | ✅ | ✅ |
39+
| Ranked Routes | 🟢 | ✅ |
40+
| Active Link Customization | ✅ | ✅ |
41+
| Ephemeral Optimistic UI | ✅ | ✅ |
42+
| Typesafe Absolute + Relative Navigation | ✅ | 🛑 |
43+
| Route Mount/Transition/Unmount Events | ✅ | 🛑 |
44+
| Official Devtools | 🟢 | 🛑 |
45+
| Basic Search Params | ✅ | ✅ |
46+
| Search Param Hooks | ✅ | ✅ |
47+
| `<Link/>`/`useNavigate` Search Param API | ✅ | 🟡 (search-string only via the `to`/`search` options) |
48+
| JSON Search Params | ✅ | 🔶 |
49+
| TypeSafe Search Params | ✅ | 🛑 |
50+
| Search Param Schema Validation | ✅ | 🛑 |
51+
| Search Param Immutability + Structural Sharing | ✅ | 🛑 |
52+
| Custom Search Param parsing/serialization | ✅ | 🔶 |
53+
| Hierarchical Search Param Transforms | ✅ | 🛑 |
54+
| Async Route Elements | ✅ | 🛑 |
55+
| Suspense Route Elements | ✅ | ✅ |
56+
| Route Error Elements | ✅ | ✅ |
57+
| Route Pending Elements | ✅ | 🛑 |
58+
| `<Prompt>`/`usePrompt` | ✅ | 🔶 |
59+
| SSR | 🛑 (Coming Soon) | ✅ |
60+
| Navigation Scroll Restoration | 🛑 (Coming Soon) | ✅ |
61+
| Deferred Loader Streaming | 🛑 (Coming Soon) | ✅ |
62+
| `<Form>` API | 🛑 | ✅ |
6463

6564
[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router@alpha?label=💾
6665
[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router@alpha

‎docs/config.json

-4
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,6 @@
118118
"label": "Code-Splitting",
119119
"to": "guide/route-elements"
120120
},
121-
{
122-
"label": "Pending States",
123-
"to": "guide/pending-states"
124-
},
125121
{
126122
"label": "Prompts",
127123
"to": "guide/prompts"

‎docs/guide/pending-states.md

-5
This file was deleted.

‎docs/overview.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ TanStack Router is a UI router for building applications in React, Preact, Vue,
1111
- Stale-while-revalidate Loader Cache
1212
- Automatic (and manual) cache invalidation
1313
- Automatic route prefetching
14-
- Suspense-like route transitions with optional pending states
14+
- Suspense-like route transitions
1515
- Asynchronous route elements and error boundaries
1616
- File-Splitting & Code-splitting
1717
- Typesafe JSON-first Search Params w/ Immutable Structural Sharing
@@ -25,7 +25,6 @@ TanStack Router is a UI router for building applications in React, Preact, Vue,
2525

2626
TanStack Router builds on concepts and patterns popularized by many other OSS projects, including:
2727

28-
2928
- [TRPC](https://trpc.io/)
3029
- [Remix](https://remix.run)
3130
- [Chicane](https://swan-io.github.io/chicane/)

‎examples/react/basic-ssr-lite/server.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,7 @@ export async function createServer(
7878
render = (await import('./dist/server/entry-server.tsx')).render
7979
}
8080

81-
const context = {}
82-
const [appHead, appHtml] = await render(url, context)
83-
84-
if (context.url) {
85-
// Somewhere a `<Redirect>` was rendered
86-
return res.redirect(301, context.url)
87-
}
88-
89-
const html = template
90-
.replace('<!--app-head-->', appHead)
91-
.replace(`<!--app-html-->`, appHtml)
92-
93-
res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
81+
render({ template, url, res })
9482
} catch (e) {
9583
!isProd && vite.ssrFixStacktrace(e)
9684
console.log(e.stack)

‎examples/react/basic-ssr-lite/src/entry-server.tsx

+49-19
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,69 @@ import { createMemoryHistory, RouterProvider } from '@tanstack/react-router'
44
import jsesc from 'jsesc'
55
import { App } from './App'
66
import { router } from './router'
7+
import { ServerResponse } from 'http'
8+
9+
export async function render(opts: {
10+
url: string
11+
template: string
12+
res: ServerResponse
13+
}) {
14+
router.reset()
715

8-
export async function render(url: string) {
916
const memoryHistory = createMemoryHistory({
10-
initialEntries: [url],
17+
initialEntries: [opts.url],
1118
})
1219

1320
router.update({
1421
history: memoryHistory,
1522
})
1623

17-
const unsub = router.mount()
18-
await router.load()
24+
router.mount()() // and unsubscribe immediately
1925

20-
const routerState = router.dehydrateState()
21-
22-
const res = [
23-
`<script>window.__TANSTACK_ROUTER_STATE__ = JSON.parse(${jsesc(
26+
router.load().then(() => {
27+
const routerState = router.dehydrateState()
28+
const routerScript = `<script>window.__TANSTACK_ROUTER_STATE__ = JSON.parse(${jsesc(
2429
JSON.stringify(routerState),
2530
{
2631
isScriptContext: true,
2732
wrap: true,
2833
json: true,
2934
},
30-
)})</script>`,
31-
ReactDOMServer.renderToString(
32-
<RouterProvider router={router}>
33-
<App />
34-
</RouterProvider>,
35-
),
36-
]
37-
38-
unsub()
39-
router.reset()
35+
)})</script>`
36+
37+
opts.res.write(routerScript)
38+
})
39+
40+
const leadingHtml = opts.template.substring(
41+
0,
42+
opts.template.indexOf('<!--app-html-->'),
43+
)
44+
45+
const tailingHtml = opts.template.substring(
46+
opts.template.indexOf('<!--app-html-->') + '<!--app-html-->'.length,
47+
)
48+
49+
opts.res.setHeader('Content-Type', 'text/html')
50+
51+
const stream = ReactDOMServer.renderToPipeableStream(
52+
<RouterProvider router={router}>
53+
<App />
54+
</RouterProvider>,
55+
{
56+
onShellReady: () => {
57+
opts.res.write(leadingHtml)
58+
stream.pipe(opts.res)
59+
},
60+
onError: (err) => {
61+
console.log(err)
62+
},
63+
onAllReady: () => {
64+
opts.res.end(tailingHtml)
65+
},
66+
},
67+
)
68+
69+
// router.reset()
4070

41-
return res
71+
// return res
4272
}

‎examples/react/kitchen-sink-codesplit/src/main.tsx

-10
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,6 @@ function App() {
2121
2000,
2222
)
2323

24-
const PendingComponent = React.useCallback(
25-
() => (
26-
<div className={`p-2 text-2xl`}>
27-
<Spinner />
28-
</div>
29-
),
30-
[],
31-
)
32-
3324
return (
3425
<>
3526
{/* More stuff to tweak our sandbox setup in real-time */}
@@ -93,7 +84,6 @@ function App() {
9384
<AuthProvider>
9485
<RouterProvider
9586
router={router}
96-
defaultPendingComponent={PendingComponent}
9787
defaultLoaderMaxAge={defaultLoaderMaxAge}
9888
defaultPreloadMaxAge={defaultPreloadMaxAge}
9989
// Normally, the options above aren't changing, but for this particular

0 commit comments

Comments
 (0)