@tanstack/vue-router 1.140.5 → 1.141.0

package/src/scroll-restoration.tsx

@@ -1,3 +1,4 @@
+import * as Vue from 'vue'
 import {
   defaultGetScrollRestorationKey,
   restoreScroll,
@@ -6,24 +7,71 @@ import {
 import { useRouter } from './useRouter'
 import { ScriptOnce } from './ScriptOnce'
 
-export function ScrollRestoration() {
-  const router = useRouter()
-  const getKey =
-    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
-  const userKey = getKey(router.latestLocation)
-  const resolvedKey =
-    userKey !== defaultGetScrollRestorationKey(router.latestLocation)
-      ? userKey
-      : null
-
-  if (!router.isScrollRestoring || !router.isServer) {
-    return null
-  }
-
-  return (
-    <ScriptOnce
-      children={`(${restoreScroll.toString()})(${JSON.stringify(storageKey)},${JSON.stringify(resolvedKey)}, undefined, true)`}
-      log={false}
-    />
-  )
-}
+/**
+ * ScrollRestoration component for Vue.
+ * On server: renders a ScriptOnce with scroll restoration logic.
+ * On client during hydration: renders a matching ScriptOnce to avoid mismatch.
+ * After mount: renders nothing.
+ */
+export const ScrollRestoration = Vue.defineComponent({
+  name: 'ScrollRestoration',
+  setup() {
+    const router = useRouter()
+
+    // Track mounted state for hydration handling
+    const mounted = Vue.ref(false)
+    Vue.onMounted(() => {
+      mounted.value = true
+    })
+
+    return () => {
+      // After mount, render nothing
+      if (mounted.value) {
+        return null
+      }
+
+      // Check if scroll restoration is enabled
+      if (!router.isScrollRestoring) {
+        return null
+      }
+
+      // Check custom scroll restoration function
+      if (typeof router.options.scrollRestoration === 'function') {
+        const shouldRestore = router.options.scrollRestoration({
+          location: router.latestLocation,
+        })
+        if (!shouldRestore) {
+          return null
+        }
+      }
+
+      const getKey =
+        router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
+      const userKey = getKey(router.latestLocation)
+      const resolvedKey =
+        userKey !== defaultGetScrollRestorationKey(router.latestLocation)
+          ? userKey
+          : undefined
+
+      const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+        storageKey,
+        shouldScrollRestoration: true,
+      }
+      if (resolvedKey) {
+        restoreScrollOptions.key = resolvedKey
+      }
+
+      // Server-side: render the actual scroll restoration script
+      if (router.isServer) {
+        return (
+          <ScriptOnce
+            children={`(${restoreScroll.toString()})(${JSON.stringify(restoreScrollOptions)})`}
+          />
+        )
+      }
+
+      // Client-side during hydration: render empty ScriptOnce to match server structure
+      return <ScriptOnce children="" />
+    }
+  },
+})

package/src/ssr/RouterClient.tsx

@@ -0,0 +1,58 @@
+import * as Vue from 'vue'
+import { hydrate } from '@tanstack/router-core/ssr/client'
+import { HeadContent } from '../HeadContent'
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+
+let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
+
+export const RouterClient = Vue.defineComponent({
+  name: 'RouterClient',
+  props: {
+    router: {
+      type: Object as () => AnyRouter,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isHydrated = Vue.ref(false)
+
+    if (!hydrationPromise) {
+      if (!props.router.state.matches.length) {
+        hydrationPromise = hydrate(props.router)
+      } else {
+        hydrationPromise = Promise.resolve()
+      }
+    }
+
+    Vue.onMounted(() => {
+      hydrationPromise!.then(() => {
+        isHydrated.value = true
+      })
+    })
+
+    // For SSR, we're already hydrated
+    if (typeof window === 'undefined') {
+      isHydrated.value = true
+    }
+
+    return () => {
+      if (!isHydrated.value) {
+        return null
+      }
+
+      return Vue.h(
+        RouterProvider,
+        {
+          router: props.router,
+        },
+        {
+          innerWrap: (innerProps: { children: any }) => [
+            Vue.h(HeadContent),
+            innerProps.children,
+          ],
+        },
+      )
+    }
+  },
+})

package/src/ssr/RouterServer.tsx

@@ -0,0 +1,51 @@
+import * as Vue from 'vue'
+import { Asset } from '../Asset'
+import { useTags } from '../HeadContent'
+import { RouterProvider } from '../RouterProvider'
+import { Scripts } from '../Scripts'
+import type { AnyRouter, RouterManagedTag } from '@tanstack/router-core'
+
+const ServerHeadContent = Vue.defineComponent({
+  name: 'ServerHeadContent',
+  setup() {
+    const getTags = useTags()
+
+    return () =>
+      getTags().map((tag: RouterManagedTag) =>
+        Vue.h(Asset, { key: tag.tag + (tag as any).id, ...tag }),
+      )
+  },
+})
+
+export const RouterServer = Vue.defineComponent({
+  name: 'RouterServer',
+  props: {
+    router: {
+      type: Object as () => AnyRouter,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () =>
+      Vue.h('html', null, [
+        Vue.h('head', null, [Vue.h(ServerHeadContent)]),
+        Vue.h('body', null, [
+          Vue.h('div', { id: '__app' }, [
+            Vue.h(
+              RouterProvider,
+              {
+                router: props.router,
+              },
+              {
+                innerWrap: (innerProps: { children: any }) => [
+                  Vue.h(ServerHeadContent),
+                  innerProps.children,
+                  Vue.h(Scripts),
+                ],
+              },
+            ),
+          ]),
+        ]),
+      ])
+  },
+})

package/src/ssr/client.ts

@@ -0,0 +1 @@
+export { RouterClient } from './RouterClient'

package/src/ssr/defaultRenderHandler.tsx

@@ -0,0 +1,12 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { renderRouterToString } from './renderRouterToString'
+import { RouterServer } from './RouterServer'
+
+export const defaultRenderHandler = defineHandlerCallback(
+  ({ router, responseHeaders }) =>
+    renderRouterToString({
+      router,
+      responseHeaders,
+      App: RouterServer,
+    }),
+)

package/src/ssr/defaultStreamHandler.tsx

@@ -0,0 +1,13 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { renderRouterToStream } from './renderRouterToStream'
+import { RouterServer } from './RouterServer'
+
+export const defaultStreamHandler = defineHandlerCallback(
+  async ({ request, router, responseHeaders }) =>
+    await renderRouterToStream({
+      request,
+      router,
+      responseHeaders,
+      App: RouterServer,
+    }),
+)

package/src/ssr/renderRouterToStream.tsx

@@ -0,0 +1,85 @@
+import { ReadableStream as NodeReadableStream } from 'node:stream/web'
+import * as Vue from 'vue'
+import { pipeToWebWritable, renderToString } from 'vue/server-renderer'
+import { isbot } from 'isbot'
+import { transformReadableStreamWithRouter } from '@tanstack/router-core/ssr/server'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { Component } from 'vue'
+import type { ReadableStream } from 'node:stream/web'
+
+function prependDoctype(
+  readable: globalThis.ReadableStream,
+): NodeReadableStream<Uint8Array> {
+  const encoder = new TextEncoder()
+  let sentDoctype = false
+
+  return new NodeReadableStream<Uint8Array>({
+    async start(controller) {
+      const reader = readable.getReader()
+
+      async function pump(): Promise<void> {
+        const { done, value } = await reader.read()
+        if (done) {
+          controller.close()
+          return
+        }
+
+        if (!sentDoctype) {
+          sentDoctype = true
+          controller.enqueue(encoder.encode('<!DOCTYPE html>'))
+        }
+        controller.enqueue(value)
+        return pump()
+      }
+
+      pump().catch((err) => controller.error(err))
+    },
+  })
+}
+
+export const renderRouterToStream = async ({
+  request,
+  router,
+  responseHeaders,
+  App,
+}: {
+  request: Request
+  router: AnyRouter
+  responseHeaders: Headers
+  App: Component
+}) => {
+  const app = Vue.createSSRApp(App, { router })
+
+  if (isbot(request.headers.get('User-Agent'))) {
+    let fullHtml = await renderToString(app)
+
+    const htmlOpenIndex = fullHtml.indexOf('<html')
+    const htmlCloseIndex = fullHtml.indexOf('</html>')
+
+    if (htmlOpenIndex !== -1 && htmlCloseIndex !== -1) {
+      fullHtml = fullHtml.slice(htmlOpenIndex, htmlCloseIndex + 7)
+    } else if (htmlOpenIndex !== -1) {
+      fullHtml = fullHtml.slice(htmlOpenIndex)
+    }
+
+    return new Response(`<!DOCTYPE html>${fullHtml}`, {
+      status: router.state.statusCode,
+      headers: responseHeaders,
+    })
+  }
+
+  const { writable, readable } = new TransformStream()
+
+  pipeToWebWritable(app, {}, writable)
+
+  const doctypedStream = prependDoctype(readable)
+  const responseStream = transformReadableStreamWithRouter(
+    router,
+    doctypedStream as unknown as ReadableStream,
+  )
+
+  return new Response(responseStream as any, {
+    status: router.state.statusCode,
+    headers: responseHeaders,
+  })
+}

package/src/ssr/renderRouterToString.tsx

@@ -0,0 +1,37 @@
+import * as Vue from 'vue'
+import { renderToString as vueRenderToString } from 'vue/server-renderer'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { Component } from 'vue'
+
+export const renderRouterToString = async ({
+  router,
+  responseHeaders,
+  App,
+}: {
+  router: AnyRouter
+  responseHeaders: Headers
+  App: Component
+}) => {
+  try {
+    const app = Vue.createSSRApp(App, { router })
+
+    let html = await vueRenderToString(app)
+    router.serverSsr!.setRenderFinished()
+    const injectedHtml = await Promise.all(router.serverSsr!.injectedHtml).then(
+      (htmls) => htmls.join(''),
+    )
+    html = html.replace(`</body>`, () => `${injectedHtml}</body>`)
+    return new Response(`<!DOCTYPE html>${html}`, {
+      status: router.state.statusCode,
+      headers: responseHeaders,
+    })
+  } catch (error) {
+    console.error('Render to string error:', error)
+    return new Response('Internal Server Error', {
+      status: 500,
+      headers: responseHeaders,
+    })
+  } finally {
+    router.serverSsr?.cleanup()
+  }
+}

package/src/ssr/server.ts

@@ -0,0 +1,6 @@
+export { RouterServer } from './RouterServer'
+export { defaultRenderHandler } from './defaultRenderHandler'
+export { defaultStreamHandler } from './defaultStreamHandler'
+export { renderRouterToStream } from './renderRouterToStream'
+export { renderRouterToString } from './renderRouterToString'
+export * from '@tanstack/router-core/ssr/server'