Skip to content

Commit

Permalink
fix: hydration, pending timing removal
Browse files Browse the repository at this point in the history
  • Loading branch information
@tannerlinsley
tannerlinsley committed Nov 16, 2022
1 parent dfcfb57 commit 3b07142
Show file tree
Hide file tree
Showing 15 changed files with 147 additions and 144 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Quer
- Prefetching
- Automatic Prefetching
- Transitions
- Pending States
- Error Boundaries
- Code Splitting
- Layout Routes
Expand Down
91 changes: 45 additions & 46 deletions docs/comparison.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,52 +15,51 @@ Feature/Capability Key:
- 🔶 Possible, but requires custom code/implementation/casting
- 🛑 Not officially supported

| | TanStack Router | React Router DOM [_(Website)_][react-router] |
| ---------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------- |
| Github Repo / Stars | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-react-router]][gh-react-router] |
| Bundle Size | [![][bp-tanstack-router]][bpl-tanstack-router] | [![][bp-react-router]][bpl-react-router] |
| History, Memory & Hash Routers | ✅ | ✅ |
| Nested / Layout Routes | ✅ | ✅ |
| Suspense-like Route Transitions | ✅ | ✅ |
| Typesafe Route Configurations | ✅ | 🛑 |
| Loaders | ✅ | ✅ |
| Typesafe Loaders | ✅ | 🔶 |
| Loader Caching (SWR + Invalidation) | ✅ | 🛑 |
| Actions | ✅ | ✅ |
| Typesafe Actions | ✅ | 🔶 |
| Route Prefetching | ✅ | ✅ |
| Auto Route Prefetching | ✅ | 🛑 |
| Route Prefetching Delay | ✅ | 🔶 |
| Path Params | ✅ | ✅ |
| Typesafe Path Params | ✅ | 🛑 |
| Path Param Validation | ✅ | 🛑 |
| Custom Path Param Parsing/Serialization | ✅ | 🛑 |
| Code-Splitting | ✅ | ✅ |
| Ranked Routes | 🟢 | ✅ |
| Active Link Customization | ✅ | ✅ |
| Ephemeral Optimistic UI | ✅ | ✅ |
| Typesafe Absolute + Relative Navigation | ✅ | 🛑 |
| Route Mount/Transition/Unmount Events | ✅ | 🛑 |
| Official Devtools | 🟢 | 🛑 |
| Basic Search Params | ✅ | ✅ |
| Search Param Hooks | ✅ | ✅ |
| `<Link/>`/`useNavigate` Search Param API | ✅ | 🟡 (search-string only via the `to`/`search` options) |
| JSON Search Params | ✅ | 🔶 |
| TypeSafe Search Params | ✅ | 🛑 |
| Search Param Schema Validation | ✅ | 🛑 |
| Search Param Immutability + Structural Sharing | ✅ | 🛑 |
| Custom Search Param parsing/serialization | ✅ | 🔶 |
| Hierarchical Search Param Transforms | ✅ | 🛑 |
| Async Route Elements | ✅ | 🛑 |
| Suspense Route Elements | ✅ | ✅ |
| Route Error Elements | ✅ | ✅ |
| Route Pending Elements | ✅ | 🛑 |
| Pending Timing (delay, min-show) | ✅ | 🛑 |
| `<Prompt>`/`usePrompt` | ✅ | 🔶 |
| SSR | 🛑 (Coming Soon) | ✅ |
| Navigation Scroll Restoration | 🛑 (Coming Soon) | ✅ |
| Deferred Loader Streaming | 🛑 (Coming Soon) | ✅ |
| `<Form>` API | 🛑 | ✅ |
| | TanStack Router | React Router DOM [_(Website)_][react-router] |
| ---------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| Github Repo / Stars | [![][stars-tanstack-router]][gh-tanstack-router] | [![][stars-react-router]][gh-react-router] |
| Bundle Size | [![][bp-tanstack-router]][bpl-tanstack-router] | [![][bp-react-router]][bpl-react-router] |
| History, Memory & Hash Routers | ✅ | ✅ |
| Nested / Layout Routes | ✅ | ✅ |
| Suspense-like Route Transitions | ✅ | ✅ |
| Typesafe Route Configurations | ✅ | 🛑 |
| Loaders | ✅ | ✅ |
| Typesafe Loaders | ✅ | 🔶 |
| Loader Caching (SWR + Invalidation) | ✅ | 🛑 |
| Actions | ✅ | ✅ |
| Typesafe Actions | ✅ | 🔶 |
| Route Prefetching | ✅ | ✅ |
| Auto Route Prefetching | ✅ | 🛑 |
| Route Prefetching Delay | ✅ | 🔶 |
| Path Params | ✅ | ✅ |
| Typesafe Path Params | ✅ | 🛑 |
| Path Param Validation | ✅ | 🛑 |
| Custom Path Param Parsing/Serialization | ✅ | 🛑 |
| Code-Splitting | ✅ | ✅ |
| Ranked Routes | 🟢 | ✅ |
| Active Link Customization | ✅ | ✅ |
| Ephemeral Optimistic UI | ✅ | ✅ |
| Typesafe Absolute + Relative Navigation | ✅ | 🛑 |
| Route Mount/Transition/Unmount Events | ✅ | 🛑 |
| Official Devtools | 🟢 | 🛑 |
| Basic Search Params | ✅ | ✅ |
| Search Param Hooks | ✅ | ✅ |
| `<Link/>`/`useNavigate` Search Param API | ✅ | 🟡 (search-string only via the `to`/`search` options) |
| JSON Search Params | ✅ | 🔶 |
| TypeSafe Search Params | ✅ | 🛑 |
| Search Param Schema Validation | ✅ | 🛑 |
| Search Param Immutability + Structural Sharing | ✅ | 🛑 |
| Custom Search Param parsing/serialization | ✅ | 🔶 |
| Hierarchical Search Param Transforms | ✅ | 🛑 |
| Async Route Elements | ✅ | 🛑 |
| Suspense Route Elements | ✅ | ✅ |
| Route Error Elements | ✅ | ✅ |
| Route Pending Elements | ✅ | 🛑 |
| `<Prompt>`/`usePrompt` | ✅ | 🔶 |
| SSR | 🛑 (Coming Soon) | ✅ |
| Navigation Scroll Restoration | 🛑 (Coming Soon) | ✅ |
| Deferred Loader Streaming | 🛑 (Coming Soon) | ✅ |
| `<Form>` API | 🛑 | ✅ |

[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router@alpha?label=💾
[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router@alpha
Expand Down
4 changes: 0 additions & 4 deletions docs/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,6 @@
"label": "Code-Splitting",
"to": "guide/route-elements"
},
{
"label": "Pending States",
"to": "guide/pending-states"
},
{
"label": "Prompts",
"to": "guide/prompts"
Expand Down
5 changes: 0 additions & 5 deletions docs/guide/pending-states.md
View file

This file was deleted.

3 changes: 1 addition & 2 deletions docs/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ TanStack Router is a UI router for building applications in React, Preact, Vue,
- Stale-while-revalidate Loader Cache
- Automatic (and manual) cache invalidation
- Automatic route prefetching
- Suspense-like route transitions with optional pending states
- Suspense-like route transitions
- Asynchronous route elements and error boundaries
- File-Splitting & Code-splitting
- Typesafe JSON-first Search Params w/ Immutable Structural Sharing
Expand All @@ -25,7 +25,6 @@ TanStack Router is a UI router for building applications in React, Preact, Vue,

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


- [TRPC](https://trpc.io/)
- [Remix](https://remix.run)
- [Chicane](https://swan-io.github.io/chicane/)
Expand Down
14 changes: 1 addition & 13 deletions examples/react/basic-ssr-lite/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,7 @@ export async function createServer(
render = (await import('./dist/server/entry-server.tsx')).render
}

const context = {}
const [appHead, appHtml] = await render(url, context)

if (context.url) {
// Somewhere a `<Redirect>` was rendered
return res.redirect(301, context.url)
}

const html = template
.replace('<!--app-head-->', appHead)
.replace(`<!--app-html-->`, appHtml)

res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
render({ template, url, res })
} catch (e) {
!isProd && vite.ssrFixStacktrace(e)
console.log(e.stack)
Expand Down
68 changes: 49 additions & 19 deletions examples/react/basic-ssr-lite/src/entry-server.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,69 @@ import { createMemoryHistory, RouterProvider } from '@tanstack/react-router'
import jsesc from 'jsesc'
import { App } from './App'
import { router } from './router'
import { ServerResponse } from 'http'

export async function render(opts: {
url: string
template: string
res: ServerResponse
}) {
router.reset()

export async function render(url: string) {
const memoryHistory = createMemoryHistory({
initialEntries: [url],
initialEntries: [opts.url],
})

router.update({
history: memoryHistory,
})

const unsub = router.mount()
await router.load()
router.mount()() // and unsubscribe immediately

const routerState = router.dehydrateState()

const res = [
`<script>window.__TANSTACK_ROUTER_STATE__ = JSON.parse(${jsesc(
router.load().then(() => {
const routerState = router.dehydrateState()
const routerScript = `<script>window.__TANSTACK_ROUTER_STATE__ = JSON.parse(${jsesc(
JSON.stringify(routerState),
{
isScriptContext: true,
wrap: true,
json: true,
},
)})</script>`,
ReactDOMServer.renderToString(
<RouterProvider router={router}>
<App />
</RouterProvider>,
),
]

unsub()
router.reset()
)})</script>`

opts.res.write(routerScript)
})

const leadingHtml = opts.template.substring(
0,
opts.template.indexOf('<!--app-html-->'),
)

const tailingHtml = opts.template.substring(
opts.template.indexOf('<!--app-html-->') + '<!--app-html-->'.length,
)

opts.res.setHeader('Content-Type', 'text/html')

const stream = ReactDOMServer.renderToPipeableStream(
<RouterProvider router={router}>
<App />
</RouterProvider>,
{
onShellReady: () => {
opts.res.write(leadingHtml)
stream.pipe(opts.res)
},
onError: (err) => {
console.log(err)
},
onAllReady: () => {
opts.res.end(tailingHtml)
},
},
)

// router.reset()

return res
// return res
}
10 changes: 0 additions & 10 deletions examples/react/kitchen-sink-codesplit/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,6 @@ function App() {
2000,
)

const PendingComponent = React.useCallback(
() => (
<div className={`p-2 text-2xl`}>
<Spinner />
</div>
),
[],
)

return (
<>
{/* More stuff to tweak our sandbox setup in real-time */}
Expand Down Expand Up @@ -93,7 +84,6 @@ function App() {
<AuthProvider>
<RouterProvider
router={router}
defaultPendingComponent={PendingComponent}
defaultLoaderMaxAge={defaultLoaderMaxAge}
defaultPreloadMaxAge={defaultPreloadMaxAge}
// Normally, the options above aren't changing, but for this particular
Expand Down
Loading

0 comments on commit 3b07142

Please sign in to comment.