npm - @tanstack/vue-router - Versions diffs - 1.140.5 → 1.141.1 - Mend

@tanstack/vue-router 1.140.5 → 1.141.1

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.

Files changed (150) hide show

package/dist/esm/Asset.js +122 -8
package/dist/esm/Asset.js.map +1 -1
package/dist/esm/Body.d.ts +4 -0
package/dist/esm/Body.js +26 -0
package/dist/esm/Body.js.map +1 -0
package/dist/esm/CatchBoundary.d.ts +1 -1
package/dist/esm/CatchBoundary.js +8 -8
package/dist/esm/CatchBoundary.js.map +1 -1
package/dist/esm/Html.d.ts +4 -0
package/dist/esm/Html.js +63 -0
package/dist/esm/Html.js.map +1 -0
package/dist/esm/Match.js +87 -49
package/dist/esm/Match.js.map +1 -1
package/dist/esm/Matches.js +3 -2
package/dist/esm/Matches.js.map +1 -1
package/dist/esm/RouterProvider.js +3 -0
package/dist/esm/RouterProvider.js.map +1 -1
package/dist/esm/ScriptOnce.d.ts +12 -5
package/dist/esm/ScriptOnce.js +35 -15
package/dist/esm/ScriptOnce.js.map +1 -1
package/dist/esm/Scripts.d.ts +2 -1
package/dist/esm/Scripts.js +101 -35
package/dist/esm/Scripts.js.map +1 -1
package/dist/esm/Transitioner.d.ts +16 -0
package/dist/esm/Transitioner.js +136 -133
package/dist/esm/Transitioner.js.map +1 -1
package/dist/esm/awaited.d.ts +20 -5
package/dist/esm/awaited.js +17 -20
package/dist/esm/awaited.js.map +1 -1
package/dist/esm/index.d.ts +2 -0
package/dist/esm/index.js +4 -0
package/dist/esm/index.js.map +1 -1
package/dist/esm/lazyRouteComponent.js +2 -2
package/dist/esm/lazyRouteComponent.js.map +1 -1
package/dist/esm/link.js +27 -35
package/dist/esm/link.js.map +1 -1
package/dist/esm/scroll-restoration.d.ts +8 -1
package/dist/esm/scroll-restoration.js +44 -12
package/dist/esm/scroll-restoration.js.map +1 -1
package/dist/esm/ssr/RouterClient.d.ts +15 -0
package/dist/esm/ssr/RouterClient.js +46 -0
package/dist/esm/ssr/RouterClient.js.map +1 -0
package/dist/esm/ssr/RouterServer.d.ts +15 -0
package/dist/esm/ssr/RouterServer.js +37 -0
package/dist/esm/ssr/RouterServer.js.map +1 -0
package/dist/esm/ssr/client.d.ts +1 -0
package/dist/esm/ssr/client.js +5 -0
package/dist/esm/ssr/client.js.map +1 -0
package/dist/esm/ssr/defaultRenderHandler.d.ts +1 -0
package/dist/esm/ssr/defaultRenderHandler.js +15 -0
package/dist/esm/ssr/defaultRenderHandler.js.map +1 -0
package/dist/esm/ssr/defaultStreamHandler.d.ts +1 -0
package/dist/esm/ssr/defaultStreamHandler.js +17 -0
package/dist/esm/ssr/defaultStreamHandler.js.map +1 -0
package/dist/esm/ssr/renderRouterToStream.d.ts +8 -0
package/dist/esm/ssr/renderRouterToStream.js +70 -0
package/dist/esm/ssr/renderRouterToStream.js.map +1 -0
package/dist/esm/ssr/renderRouterToString.d.ts +7 -0
package/dist/esm/ssr/renderRouterToString.js +33 -0
package/dist/esm/ssr/renderRouterToString.js.map +1 -0
package/dist/esm/ssr/server.d.ts +6 -0
package/dist/esm/ssr/server.js +14 -0
package/dist/esm/ssr/server.js.map +1 -0
package/dist/source/Asset.jsx +119 -7
package/dist/source/Asset.jsx.map +1 -1
package/dist/source/Body.d.ts +4 -0
package/dist/source/Body.jsx +15 -0
package/dist/source/Body.jsx.map +1 -0
package/dist/source/CatchBoundary.d.ts +1 -1
package/dist/source/CatchBoundary.jsx +10 -23
package/dist/source/CatchBoundary.jsx.map +1 -1
package/dist/source/Html.d.ts +4 -0
package/dist/source/Html.jsx +56 -0
package/dist/source/Html.jsx.map +1 -0
package/dist/source/Match.jsx +119 -54
package/dist/source/Match.jsx.map +1 -1
package/dist/source/Matches.jsx +15 -3
package/dist/source/Matches.jsx.map +1 -1
package/dist/source/RouterProvider.jsx +5 -0
package/dist/source/RouterProvider.jsx.map +1 -1
package/dist/source/ScriptOnce.d.ts +12 -5
package/dist/source/ScriptOnce.jsx +27 -16
package/dist/source/ScriptOnce.jsx.map +1 -1
package/dist/source/Scripts.d.ts +2 -1
package/dist/source/Scripts.jsx +100 -42
package/dist/source/Scripts.jsx.map +1 -1
package/dist/source/Transitioner.d.ts +16 -0
package/dist/source/Transitioner.jsx +180 -160
package/dist/source/Transitioner.jsx.map +1 -1
package/dist/source/awaited.d.ts +20 -5
package/dist/source/awaited.jsx +18 -25
package/dist/source/awaited.jsx.map +1 -1
package/dist/source/index.d.ts +2 -0
package/dist/source/index.jsx +2 -0
package/dist/source/index.jsx.map +1 -1
package/dist/source/lazyRouteComponent.jsx +4 -2
package/dist/source/lazyRouteComponent.jsx.map +1 -1
package/dist/source/link.jsx +37 -51
package/dist/source/link.jsx.map +1 -1
package/dist/source/scroll-restoration.d.ts +8 -1
package/dist/source/scroll-restoration.jsx +55 -12
package/dist/source/scroll-restoration.jsx.map +1 -1
package/dist/source/ssr/RouterClient.d.ts +15 -0
package/dist/source/ssr/RouterClient.jsx +48 -0
package/dist/source/ssr/RouterClient.jsx.map +1 -0
package/dist/source/ssr/RouterServer.d.ts +15 -0
package/dist/source/ssr/RouterServer.jsx +40 -0
package/dist/source/ssr/RouterServer.jsx.map +1 -0
package/dist/source/ssr/client.d.ts +1 -0
package/dist/source/ssr/client.js +2 -0
package/dist/source/ssr/client.js.map +1 -0
package/dist/source/ssr/defaultRenderHandler.d.ts +1 -0
package/dist/source/ssr/defaultRenderHandler.jsx +9 -0
package/dist/source/ssr/defaultRenderHandler.jsx.map +1 -0
package/dist/source/ssr/defaultStreamHandler.d.ts +1 -0
package/dist/source/ssr/defaultStreamHandler.jsx +10 -0
package/dist/source/ssr/defaultStreamHandler.jsx.map +1 -0
package/dist/source/ssr/renderRouterToStream.d.ts +8 -0
package/dist/source/ssr/renderRouterToStream.jsx +55 -0
package/dist/source/ssr/renderRouterToStream.jsx.map +1 -0
package/dist/source/ssr/renderRouterToString.d.ts +7 -0
package/dist/source/ssr/renderRouterToString.jsx +26 -0
package/dist/source/ssr/renderRouterToString.jsx.map +1 -0
package/dist/source/ssr/server.d.ts +6 -0
package/dist/source/ssr/server.js +7 -0
package/dist/source/ssr/server.js.map +1 -0
package/package.json +16 -3
package/src/Asset.tsx +157 -7
package/src/Body.tsx +26 -0
package/src/CatchBoundary.tsx +11 -25
package/src/Html.tsx +65 -0
package/src/Match.tsx +135 -58
package/src/Matches.tsx +16 -4
package/src/RouterProvider.tsx +6 -0
package/src/ScriptOnce.tsx +43 -28
package/src/Scripts.tsx +121 -56
package/src/Transitioner.tsx +197 -176
package/src/awaited.tsx +17 -28
package/src/index.tsx +2 -0
package/src/lazyRouteComponent.tsx +4 -2
package/src/link.tsx +42 -47
package/src/scroll-restoration.tsx +69 -21
package/src/ssr/RouterClient.tsx +58 -0
package/src/ssr/RouterServer.tsx +51 -0
package/src/ssr/client.ts +1 -0
package/src/ssr/defaultRenderHandler.tsx +12 -0
package/src/ssr/defaultStreamHandler.tsx +13 -0
package/src/ssr/renderRouterToStream.tsx +85 -0
package/src/ssr/renderRouterToString.tsx +37 -0
package/src/ssr/server.ts +6 -0

package/dist/source/ssr/renderRouterToStream.jsx ADDED Viewed

@@ -0,0 +1,55 @@
+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';
+function prependDoctype(readable) {
+    const encoder = new TextEncoder();
+    let sentDoctype = false;
+    return new NodeReadableStream({
+        async start(controller) {
+            const reader = readable.getReader();
+            async function pump() {
+                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, }) => {
+    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);
+    return new Response(responseStream, {
+        status: router.state.statusCode,
+        headers: responseHeaders,
+    });
+};
+//# sourceMappingURL=renderRouterToStream.jsx.map

package/dist/source/ssr/renderRouterToStream.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"renderRouterToStream.jsx","sourceRoot":"","sources":["../../../src/ssr/renderRouterToStream.tsx"],"names":[],"mappings":"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"}

package/dist/source/ssr/renderRouterToString.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { AnyRouter } from '@tanstack/router-core';
+import type { Component } from 'vue';
+export declare const renderRouterToString: ({ router, responseHeaders, App, }: {
+    router: AnyRouter;
+    responseHeaders: Headers;
+    App: Component;
+}) => Promise<Response>;

package/dist/source/ssr/renderRouterToString.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import * as Vue from 'vue';
+import { renderToString as vueRenderToString } from 'vue/server-renderer';
+export const renderRouterToString = async ({ router, responseHeaders, App, }) => {
+    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();
+    }
+};
+//# sourceMappingURL=renderRouterToString.jsx.map

package/dist/source/ssr/renderRouterToString.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"renderRouterToString.jsx","sourceRoot":"","sources":["../../../src/ssr/renderRouterToString.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAIzE,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EAAE,EACzC,MAAM,EACN,eAAe,EACf,GAAG,GAKJ,EAAE,EAAE;IACH,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,CAAA;QAE7C,IAAI,IAAI,GAAG,MAAM,iBAAiB,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,CAAC,SAAU,CAAC,iBAAiB,EAAE,CAAA;QACrC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,SAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CACzE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1B,CAAA;QACD,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,GAAG,YAAY,SAAS,CAAC,CAAA;QAC9D,OAAO,IAAI,QAAQ,CAAC,kBAAkB,IAAI,EAAE,EAAE;YAC5C,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;YAC/B,OAAO,EAAE,eAAe;SACzB,CAAC,CAAA;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAA;QAC/C,OAAO,IAAI,QAAQ,CAAC,uBAAuB,EAAE;YAC3C,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,eAAe;SACzB,CAAC,CAAA;IACJ,CAAC;YAAS,CAAC;QACT,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,CAAA;IAC7B,CAAC;AACH,CAAC,CAAA"}

package/dist/source/ssr/server.d.ts ADDED Viewed

@@ -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';

package/dist/source/ssr/server.js ADDED Viewed

@@ -0,0 +1,7 @@
+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';
+//# sourceMappingURL=server.js.map

package/dist/source/ssr/server.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"server.js","sourceRoot":"","sources":["../../../src/ssr/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,cAAc,kCAAkC,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-router",
-  "version": "1.140.5",
+  "version": "1.141.1",
   "description": "Modern and scalable routing for Vue applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -33,6 +33,18 @@
         "default": "./dist/esm/index.js"
       }
     },
+    "./ssr/server": {
+      "import": {
+        "types": "./dist/esm/ssr/server.d.ts",
+        "default": "./dist/esm/ssr/server.js"
+      }
+    },
+    "./ssr/client": {
+      "import": {
+        "types": "./dist/esm/ssr/client.d.ts",
+        "default": "./dist/esm/ssr/client.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -45,11 +57,12 @@
   },
   "dependencies": {
     "@tanstack/vue-store": "^0.8.0",
+    "isbot": "^5.1.22",
     "jsesc": "^3.0.2",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.140.0",
-    "@tanstack/router-core": "1.140.5"
+    "@tanstack/history": "1.141.0",
+    "@tanstack/router-core": "1.141.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Asset.tsx CHANGED Viewed

@@ -1,9 +1,164 @@
+import * as Vue from 'vue'
+import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
+interface ScriptAttrs {
+  [key: string]: string | boolean | undefined
+  src?: string
+}
+const Title = Vue.defineComponent({
+  name: 'Title',
+  props: {
+    children: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const router = useRouter()
+    if (!router.isServer) {
+      Vue.onMounted(() => {
+        if (props.children) {
+          document.title = props.children
+        }
+      })
+      Vue.watch(
+        () => props.children,
+        (newTitle) => {
+          if (newTitle) {
+            document.title = newTitle
+          }
+        },
+      )
+    }
+    return () => Vue.h('title', {}, props.children)
+  },
+})
+const Script = Vue.defineComponent({
+  name: 'Script',
+  props: {
+    attrs: {
+      type: Object as Vue.PropType<ScriptAttrs>,
+      default: () => ({}),
+    },
+    children: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const router = useRouter()
+    if (!router.isServer) {
+      Vue.onMounted(() => {
+        const attrs = props.attrs
+        const children = props.children
+        if (attrs?.src) {
+          const normSrc = (() => {
+            try {
+              const base = document.baseURI || window.location.href
+              return new URL(attrs.src, base).href
+            } catch {
+              return attrs.src
+            }
+          })()
+          const existingScript = Array.from(
+            document.querySelectorAll('script[src]'),
+          ).find((el) => (el as HTMLScriptElement).src === normSrc)
+          if (existingScript) {
+            return
+          }
+          const script = document.createElement('script')
+          for (const [key, value] of Object.entries(attrs)) {
+            if (value !== undefined && value !== false) {
+              script.setAttribute(
+                key,
+                typeof value === 'boolean' ? '' : String(value),
+              )
+            }
+          }
+          document.head.appendChild(script)
+        } else if (typeof children === 'string') {
+          const typeAttr =
+            typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'
+          const nonceAttr =
+            typeof attrs?.nonce === 'string' ? attrs.nonce : undefined
+          const existingScript = Array.from(
+            document.querySelectorAll('script:not([src])'),
+          ).find((el) => {
+            if (!(el instanceof HTMLScriptElement)) return false
+            const sType = el.getAttribute('type') ?? 'text/javascript'
+            const sNonce = el.getAttribute('nonce') ?? undefined
+            return (
+              el.textContent === children &&
+              sType === typeAttr &&
+              sNonce === nonceAttr
+            )
+          })
+          if (existingScript) {
+            return
+          }
+          const script = document.createElement('script')
+          script.textContent = children
+          if (attrs) {
+            for (const [key, value] of Object.entries(attrs)) {
+              if (value !== undefined && value !== false) {
+                script.setAttribute(
+                  key,
+                  typeof value === 'boolean' ? '' : String(value),
+                )
+              }
+            }
+          }
+          document.head.appendChild(script)
+        }
+      })
+    }
+    return () => {
+      if (!router.isServer) {
+        const { src: _src, ...rest } = props.attrs || {}
+        return Vue.h('script', {
+          ...rest,
+          'data-allow-mismatch': true,
+          innerHTML: '',
+        })
+      }
+      if (props.attrs?.src && typeof props.attrs.src === 'string') {
+        return Vue.h('script', props.attrs)
+      }
+      if (typeof props.children === 'string') {
+        return Vue.h('script', {
+          ...props.attrs,
+          innerHTML: props.children,
+        })
+      }
+      return null
+    }
+  },
+})
 export function Asset({ tag, attrs, children }: RouterManagedTag): any {
   switch (tag) {
     case 'title':
-      return <title {...attrs}>{children}</title>
+      return Vue.h(Title, { children: children })
     case 'meta':
       return <meta {...attrs} />
     case 'link':
@@ -11,12 +166,7 @@ export function Asset({ tag, attrs, children }: RouterManagedTag): any {
     case 'style':
       return <style {...attrs} innerHTML={children} />
     case 'script':
-      if ((attrs as any) && (attrs as any).src) {
-        return <script {...attrs} />
-      }
-      if (typeof children === 'string')
-        return <script {...attrs} innerHTML={children} />
-      return null
+      return Vue.h(Script, { attrs, children: children })
     default:
       return null
   }

package/src/Body.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import * as Vue from 'vue'
+export const Body = Vue.defineComponent({
+  name: 'Body',
+  setup(_, { slots }) {
+    const isServer = typeof window === 'undefined'
+    return () => {
+      const children = slots.default?.()
+      if (isServer) {
+        return Vue.h(
+          'body',
+          {},
+          Vue.h(
+            'div',
+            { id: '__app' },
+            Vue.h('div', { 'data-allow-mismatch': '' }, children),
+          ),
+        )
+      }
+      return Vue.h('div', { 'data-allow-mismatch': '' }, children)
+    }
+  },
+})

package/src/CatchBoundary.tsx CHANGED Viewed

@@ -1,13 +1,11 @@
 import * as Vue from 'vue'
 import type { ErrorRouteComponent } from './route'
-// Define the error component props interface
 interface ErrorComponentProps {
   error: Error
   reset: () => void
 }
-// Create a Vue error boundary component
 const VueErrorBoundary = Vue.defineComponent({
   name: 'VueErrorBoundary',
   props: {
@@ -23,7 +21,6 @@ const VueErrorBoundary = Vue.defineComponent({
       error.value = null
     }
-    // Watch for changes in the reset key
     Vue.watch(
       () => props.resetKey,
       (newKey, oldKey) => {
@@ -33,52 +30,49 @@ const VueErrorBoundary = Vue.defineComponent({
       },
     )
-    // Capture errors from child components
     Vue.onErrorCaptured((err: Error) => {
-      // If the error is a Promise (thrown for Suspense), don't treat it as an error
-      // Just ignore it - Suspense will handle it
       if (
         err instanceof Promise ||
         (err && typeof (err as any).then === 'function')
       ) {
-        return false // Prevent from propagating as an error, but don't set error state
+        return false
       }
       error.value = err
       resetFn.value = reset
-      // Call the onError callback if provided
       if (props.onError) {
         props.onError(err)
       }
-      // Prevent the error from propagating further
       return false
     })
     return () => {
-      // If there's an error, render the fallback
       if (error.value && slots.fallback) {
-        return slots.fallback({
+        const fallbackContent = slots.fallback({
           error: error.value,
           reset,
         })
+        return Array.isArray(fallbackContent) && fallbackContent.length === 1
+          ? fallbackContent[0]
+          : fallbackContent
       }
-      // Otherwise render the default slot
-      return slots.default && slots.default()
+      const defaultContent = slots.default && slots.default()
+      return Array.isArray(defaultContent) && defaultContent.length === 1
+        ? defaultContent[0]
+        : defaultContent
     }
   },
 })
-// Main CatchBoundary component
 export function CatchBoundary(props: {
   getResetKey: () => number | string
   children: Vue.VNode
-  errorComponent?: ErrorRouteComponent
+  errorComponent?: ErrorRouteComponent | Vue.Component
   onCatch?: (error: Error) => void
 }) {
-  // Create a component to use in the template
   const CatchBoundaryWrapper = Vue.defineComponent({
     name: 'CatchBoundaryWrapper',
     inheritAttrs: false,
@@ -86,9 +80,6 @@ export function CatchBoundary(props: {
       const resetKey = Vue.computed(() => props.getResetKey())
       return () => {
-        // Always use our default component as a safe fallback
-        const defaultErrorComponent = ErrorComponent
         return Vue.h(
           VueErrorBoundary,
           {
@@ -98,14 +89,10 @@ export function CatchBoundary(props: {
           {
             default: () => props.children,
             fallback: ({ error, reset }: ErrorComponentProps) => {
-              // Safely render the error component - either the provided one or the default
               if (props.errorComponent) {
-                // Use the provided error component
                 return Vue.h(props.errorComponent, { error, reset })
-              } else {
-                // Use the default error component
-                return Vue.h(defaultErrorComponent, { error, reset })
               }
+              return Vue.h(ErrorComponent, { error, reset })
             },
           },
         )
@@ -116,7 +103,6 @@ export function CatchBoundary(props: {
   return Vue.h(CatchBoundaryWrapper)
 }
-// Error component
 export const ErrorComponent = Vue.defineComponent({
   name: 'ErrorComponent',
   props: {

package/src/Html.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import * as Vue from 'vue'
+import { Body } from './Body'
+export const Html = Vue.defineComponent({
+  name: 'Html',
+  setup(_, { slots }) {
+    const isServer = typeof window === 'undefined'
+    const hydrated = Vue.ref(false)
+    if (!isServer) {
+      Vue.onMounted(() => {
+        hydrated.value = true
+      })
+    }
+    return () => {
+      if (isServer) {
+        return Vue.h('html', {}, slots.default?.())
+      }
+      const children = slots.default?.() || []
+      const flatChildren = Array.isArray(children) ? children : [children]
+      let bodyVnode: Vue.VNode | null = null
+      const headChildren: Array<Vue.VNode> = []
+      for (const child of flatChildren) {
+        if (typeof child === 'object' && child !== null) {
+          const vnode = child
+          if (vnode.type === 'head') {
+            if (vnode.children) {
+              if (Array.isArray(vnode.children)) {
+                for (const c of vnode.children) {
+                  if (typeof c === 'object' && c !== null && 'type' in c) {
+                    headChildren.push(c as Vue.VNode)
+                  }
+                }
+              }
+            }
+            continue
+          }
+          if (vnode.type === Body) {
+            bodyVnode = vnode
+            continue
+          }
+          if (!bodyVnode) {
+            bodyVnode = vnode
+          }
+        }
+      }
+      const result: Array<Vue.VNode> = []
+      if (bodyVnode) {
+        result.push(bodyVnode)
+      }
+      if (hydrated.value && headChildren.length > 0) {
+        result.push(Vue.h(Vue.Teleport, { to: 'head' }, headChildren))
+      }
+      return result.length === 1 ? result[0] : Vue.h(Vue.Fragment, result)
+    }
+  },
+})