@fastify/react 1.0.1 → 1.1.0-beta.1

package/context.js

@@ -1,3 +1,5 @@
+import { createHead } from '@unhead/react/server'
+
 const routeContextInspect = Symbol.for('nodejs.util.inspect.custom')
 
 export default class RouteContext {
@@ -15,10 +17,12 @@ export default class RouteContext {
   }
 
   constructor(server, req, reply, route) {
+    this.app = null
     this.server = server
     this.req = req
     this.reply = reply
     this.head = {}
+    this.useHead = createHead()
     this.actionData = {}
     this.state = null
     this.data = route.data
@@ -46,6 +50,7 @@ export default class RouteContext {
       actionData: this.actionData,
       state: this.state,
       data: this.data,
+      head: this.head,
       layout: this.layout,
       getMeta: this.getMeta,
       getData: this.getData,

package/package.json

@@ -3,7 +3,7 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "1.0.1",
+  "version": "1.1.0-beta.1",
   "files": [
     "plugin/index.js",
     "plugin/parsers.js",
@@ -21,6 +21,16 @@
     "virtual/resource.js",
     "virtual/root.jsx",
     "virtual/routes.js",
+    "virtual-ts/layouts/default.tsx",
+    "virtual-ts/context.ts",
+    "virtual-ts/core.tsx",
+    "virtual-ts/create.tsx",
+    "virtual-ts/index.ts",
+    "virtual-ts/layouts.ts",
+    "virtual-ts/mount.ts",
+    "virtual-ts/resource.ts",
+    "virtual-ts/root.tsx",
+    "virtual-ts/routes.ts",
     "client.js",
     "context.js",
     "index.js",
@@ -37,6 +47,7 @@
     "./server": "./server.js"
   },
   "dependencies": {
+    "@unhead/react": "^2.0.8",
     "acorn": "^8.14.1",
     "acorn-strip-function": "^1.2.0",
     "acorn-walk": "^8.3.4",
@@ -48,10 +59,9 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.5.0",
-    "unihead": "latest",
     "valtio": "latest",
     "youch": "^3.3.4",
-    "@fastify/vite": "^8.0.2"
+    "@fastify/vite": "^8.1.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.2"

package/plugin/index.js

@@ -12,37 +12,30 @@ import { closeBundle } from './preload.js'
 import { parseStateKeys } from './parsers.js'
 import { generateStores } from './stores.js'
 
-export default function viteFastifyVue () {
+export default function viteFastifyReactPlugin ({ ts } = {}) {
   const context = {
     root: null,
   }
   return [viteFastify({
-    clientModule: '$app/index.js'
+    clientModule: ts ? '$app/index.ts' : '$app/index.js'
   }), {
-    name: 'vite-plugin-fastify-react',
+    // https://vite.dev/guide/api-plugin#conventions
+    name: 'vite-plugin-react-fastify',
     config,
     configResolved: configResolved.bind(context),
     resolveId: resolveId.bind(context),
     async load (id) {
-      if (id.includes('?server') && !context.resolvedConfig.build.ssr) {
+      if (id.includes('?server') && !this.environment.config.build?.ssr) {
         const source = loadSource(id)
         return createPlaceholderExports(source)
       }
-      if (id.includes('?client') && context.resolvedConfig.build.ssr) {
+      if (id.includes('?client') && this.environment.config.build?.ssr) {
         const source = loadSource(id)
         return createPlaceholderExports(source)
       }
       if (prefix.test(id)) {
         const [, virtual] = id.split(prefix)
         if (virtual) {
-          if (virtual === 'stores') {
-            const contextPath = join(context.root, 'context.js')
-            if (existsSync(contextPath)) {
-              const keys = parseStateKeys(readFileSync(contextPath, 'utf8'))
-              return generateStores(keys)
-            }
-            return
-          }
           return loadVirtualModule(virtual)
         }
       }
@@ -51,7 +44,9 @@ export default function viteFastifyVue () {
       order: 'post',
       handler: transformIndexHtml.bind(context)
     },
-    closeBundle: closeBundle.bind(context),
+    closeBundle () {
+      closeBundle.call(this, context.resolvedBundle)
+    },
   }]
 }
 

package/plugin/preload.js

@@ -1,46 +1,57 @@
-import { writeFileSync, mkdirSync, existsSync } from 'node:fs'
-import { join, parse as parsePath } from 'node:path'
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { join, isAbsolute, parse as parsePath } from 'node:path'
 import { HTMLRewriter } from 'html-rewriter-wasm'
 
-const imageFile = /\.((png)|(jpg)|(svg)|(webp)|(gif))$/
+const imageFileRE = /\.((png)|(jpg)|(svg)|(webp)|(gif))$/
 
-export async function closeBundle() {
-  if (!this.resolvedConfig.build.ssr) {
-    const distDir = join(this.root, this.resolvedConfig.build.outDir)
-    const pages = Object.fromEntries(
-      Object.entries(this.resolvedBundle ?? {})
-        .filter(([id, meta]) => {
-          if (meta.facadeModuleId?.includes('/pages/')) {
-            meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.jsx$/, 'html/$1.html')
-            return true
-          }
-        })
-    )
-    for (const page of Object.values(pages)) {
-      const jsImports = page.imports
-      const cssImports = page.viteMetadata.importedCss
-      const images = page.moduleIds.filter(_ => imageFile.test(_))
-      let imagePreloads = '\n'
-      for (let image of images) {
-        image = image.slice(this.root.length + 1)
-        imagePreloads += `  <link rel="preload" as="image" href="${this.resolvedConfig.base}${image}">\n`
-      }
-      let cssPreloads = ''
-      for (const css of cssImports) {
-        cssPreloads += `  <link rel="preload" as="style" href="${this.resolvedConfig.base}${css}">\n`
-      }
-      let jsPreloads = ''
-      for (const js of jsImports) {
-        jsPreloads += `  <link rel="modulepreload" href="${this.resolvedConfig.base}${js}">\n`
-      }
-      const pageHtml = await appendHead(
-        this.indexHtml,
-        imagePreloads,
-        cssPreloads,
-        jsPreloads
-      )
-      writeHtml(page, pageHtml, distDir)
+export async function closeBundle(resolvedBundle) {
+  if (this.environment.name !== 'client') {
+    return
+  }
+  const { assetsInlineLimit } = this.environment.config.build
+  const { root, base } = this.environment.config
+  let distDir
+  if (isAbsolute(this.environment.config.build.outDir)) {
+    distDir = this.environment.config.build.outDir
+  } else {
+    distDir = join(root, this.environment.config.build.outDir)
+  }
+  const indexHtml = readFileSync(join(distDir, 'index.html'), 'utf8')
+  const pages = Object.fromEntries(
+    Object.entries(resolvedBundle ?? {})
+      .filter(([id, meta]) => {
+        if (meta.facadeModuleId?.includes('/pages/')) {
+          meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.(j|t)sx$/, 'html/$1.html')
+          return true
+        }
+      })
+  )
+  for (const page of Object.values(pages)) {
+    const jsImports = page.imports
+    const cssImports = page.viteMetadata.importedCss
+    const images = page.moduleIds.filter((img) => {
+      return (page.modules[img].originalLength > assetsInlineLimit) && imageFileRE.test(img)
+    })
+    let imagePreloads = '\n'
+    for (let image of images) {
+      image = image.slice(root.length + 1)
+      imagePreloads += `  <link rel="preload" as="image" crossorigin href="${base}${image}">\n`
     }
+    let cssPreloads = ''
+    for (const css of cssImports) {
+      cssPreloads += `  <link rel="preload" as="style" crossorigin href="${base}${css}">\n`
+    }
+    let jsPreloads = ''
+    for (const js of jsImports) {
+      jsPreloads += `  <link rel="modulepreload" crossorigin href="${base}${js}">\n`
+    }
+    const pageHtml = await appendHead(
+      indexHtml,
+      imagePreloads,
+      cssPreloads,
+      jsPreloads
+    )
+    writeHtml(page, pageHtml, distDir)
   }
 }
 

package/plugin/stores.js

@@ -11,7 +11,7 @@ function storeGetter (proxy, prop) {
     return proxy.context.state[proxy.key]
   }
   let method
-  if (method = proxy.context.actions[proxy.key][prop]) {
+  if (method = proxy.context.actions?.[proxy.key]?.[prop]) {
     if (!proxy.wrappers[prop]) {
       proxy.wrappers[prop] = (...args) => {
         return method(proxy.context.state, ...args)

package/plugin/virtual.js

@@ -6,6 +6,7 @@ import { findExports } from 'mlly'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const virtualRoot = resolve(__dirname, '..', 'virtual')
+const virtualRootTS = resolve(__dirname, '..', 'virtual-ts')
 
 const virtualModules = [
   'mount.js',
@@ -20,9 +21,27 @@ const virtualModules = [
   'index.js',
 ]
 
+const virtualModulesTS = [
+  'mount.ts',
+  'resource.ts',
+  'routes.ts',
+  'layouts.ts',
+  'create.tsx',
+  'root.tsx',
+  'layouts/',
+  'context.ts',
+  'core.tsx',
+  'index.ts',
+]
+
 export const prefix = /^\/?\$app\//
 
 export async function resolveId (id) {
+  // Paths are prefixed with .. on Windows by the glob import
+  if (process.platform === 'win32' && /^\.\.\/[C-Z]:/.test(id)) {
+    return id.substring(3)
+  }
+
   if (prefix.test(id)) {
     const [, virtual] = id.split(prefix)
     if (virtual) {
@@ -37,19 +56,34 @@ export async function resolveId (id) {
 
 export function loadVirtualModule (virtualInput) {
   let virtual = virtualInput
-  if (!/\.((mc)?ts)|((mc)?js)|(jsx)$/.test(virtual)) {
-    virtual += '.js'
-  }
-  if (!virtualModules.includes(virtual)) {
+  if (!virtualModules.includes(virtual) && !virtualModulesTS.includes(virtual)) {
     return
   }
-  const code = readFileSync(resolve(virtualRoot, virtual), 'utf8')
+  let virtualRootDir = virtualRoot
+  if (virtualInput.match(/\.tsx?$/)) {
+    virtualRootDir = virtualRootTS
+  }
+  const codePath = resolve(virtualRootDir, virtual)
   return {
-    code,
+    code: readFileSync(codePath, 'utf8'),
     map: null,
   }
 }
 
+
+virtualModulesTS.includes = function (virtual) {
+  if (!virtual) {
+    return false
+  }
+  for (const entry of this) {
+    if (virtual.startsWith(entry)) {
+      return true
+    }
+  }
+  return false
+}
+
+
 virtualModules.includes = function (virtual) {
   if (!virtual) {
     return false
@@ -62,11 +96,16 @@ virtualModules.includes = function (virtual) {
   return false
 }
 
-function loadVirtualModuleOverride (viteProjectRoot, virtual) {
-  if (!virtualModules.includes(virtual)) {
+function loadVirtualModuleOverride (viteProjectRoot, virtualInput) {
+  let virtual = virtualInput
+  if (!virtualModules.includes(virtual) && !virtualModulesTS.includes(virtual)) {
     return
   }
-  const overridePath = resolve(viteProjectRoot, virtual)
+  let overridePath = resolve(viteProjectRoot, virtual) 
+  if (existsSync(overridePath)) {
+    return overridePath
+  }
+  overridePath = overridePath.replace('.js', '.ts')
   if (existsSync(overridePath)) {
     return overridePath
   }

package/rendering.js

@@ -6,7 +6,7 @@ import { Minipass } from 'minipass'
 // which enables the combination of React.lazy() and Suspense
 import { renderToPipeableStream } from 'react-dom/server'
 import * as devalue from 'devalue'
-import Head from 'unihead'
+import { transformHtmlTemplate } from '@unhead/react/server'
 import { createHtmlTemplates } from './templating.js'
 
 // Helper function to get an AsyncIterable (via PassThrough)
@@ -46,6 +46,7 @@ export function onAllReady(app) {
 export async function createRenderFunction ({ routes, create }) {
   // Used when hydrating React Router on the client
   const routeMap = Object.fromEntries(routes.map(_ => [_.path, _]))
+
   // Registered as reply.render()
   return function () {
     if (this.request.route.streaming) {
@@ -80,6 +81,7 @@ export async function createHtmlFunction (source, _, config) {
   return async function () {
     const { routes, context, body } = await this.render()
 
+    context.useHead.push(context.head)
     this.type('text/html')
 
     // Use template with client module import removed
@@ -116,24 +118,35 @@ export async function createHtmlFunction (source, _, config) {
   }
 }
 
-export function sendClientOnlyShell (templates, context, body) {
-  context.head = new Head(context.head).render()
-  return `${
-    templates.beforeElement(context)
-  }${
-    templates.afterElement(context)
-  }`
+export async function sendClientOnlyShell (templates, context) {
+  return await transformHtmlTemplate(
+    context.useHead,
+    `${
+      templates.beforeElement(context)
+    }${
+      templates.afterElement(context)
+    }`
+  )
 }
 
 export function streamShell (templates, context, body) {
-  context.head = new Head(context.head).render()
   return Readable.from(createShellStream(templates, context, body))
 }
 
 async function * createShellStream (templates, context, body) {
-  yield templates.beforeElement(context)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.beforeElement(context)
+  )
+
   for await (const chunk of body) {
-    yield chunk
+    yield await transformHtmlTemplate(
+      context.useHead,
+      chunk.toString()
+    )
   }
-  yield templates.afterElement(context)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.afterElement(context)
+  )
 }

package/routing.js

@@ -1,5 +1,5 @@
 import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { join, isAbsolute } from 'node:path'
 import Youch from 'youch'
 import RouteContext from './context.js'
 import { createHtmlFunction } from './rendering.js'
@@ -111,8 +111,12 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
     handler = (_, reply) => reply.html()
   } else {
     const { id } = route
-    const htmlPath = id.replace(/pages\/(.*?)\.jsx/, 'html/$1.html')
-    const htmlSource = readFileSync(join(config.vite.root, config.vite.build.outDir, htmlPath), 'utf8')
+    const htmlPath = id.replace(/pages\/(.*?)\.(j|t)sx/, 'html/$1.html')
+    let distDir = config.vite.build.outDir
+    if (!isAbsolute(config.vite.build.outDir)) {
+      distDir = join(config.vite.root, distDir)
+    }
+    const htmlSource = readFileSync(join(distDir, htmlPath), 'utf8')
     const htmlFunction = await createHtmlFunction(htmlSource, scope, config)
     handler = (_, reply) => htmlFunction.call(reply)
   }
@@ -120,12 +124,13 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
   // Replace wildcard routes with Fastify compatible syntax
   const routePath = route.path.replace(/:[^+]+\+/, '*')
   
+  unshiftHook(route, 'onRequest', onRequest)
+  unshiftHook(route, 'preHandler', preHandler)
+
   scope.route({
     url: routePath,
     method: route.method ?? ['GET', 'POST', 'PUT', 'DELETE'],
     errorHandler,
-    onRequest,
-    preHandler,
     handler,
     ...route,
   })
@@ -140,3 +145,16 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
     })
   }
 }
+
+function unshiftHook (route, hookName, hook) {
+  if (!route[hookName]) {
+    route[hookName] = []
+  }
+  if (!Array.isArray(hook)) {
+    hook = [hook]
+  }
+  if (!Array.isArray(route[hookName])) {
+    route[hookName] = [route[hookName]]
+  }
+  route[hookName] = [...route[hookName], ...hook]
+}

package/server.js

@@ -39,7 +39,7 @@ export function prepareServer(server) {
   })
 }
 
-export async function createRoutes (fromPromise, { param } = { param: /\[([\.\w]+\+?)\]/ }) {
+export async function createRoutes (fromPromise, { param } = { param: /\[([.\w]+\+?)\]/ }) {
   const { default: from } = await fromPromise
   const importPaths = Object.keys(from)
   const promises = []
@@ -117,6 +117,19 @@ function getRouteModuleExports (routeModule) {
     streaming: routeModule.streaming,
     clientOnly: routeModule.clientOnly,
     serverOnly: routeModule.serverOnly,
+    // Server configure function
+    configure: routeModule.configure,
+    // Route-level Fastify hooks
+    onRequest: routeModule.onRequest ?? undefined,
+    preParsing: routeModule.preParsing ?? undefined,
+    preValidation: routeModule.preValidation ?? undefined,
+    preHandler: routeModule.preHandler ?? undefined,
+    preSerialization: routeModule.preSerialization ?? undefined,
+    onError: routeModule.onError ?? undefined,
+    onSend: routeModule.onSend ?? undefined,
+    onResponse: routeModule.onResponse ?? undefined,
+    onTimeout: routeModule.onTimeout ?? undefined,
+    onRequestAbort: routeModule.onRequestAbort ?? undefined,
   }
 }
 

package/virtual/core.jsx

@@ -33,7 +33,7 @@ export function useServerAction(action, options = {}) {
   return actionData[action]
 }
 
-export function AppRoute({ head, ctxHydration, ctx, children }) {
+export function AppRoute({ ctxHydration, ctx, children }) {
   // If running on the server, assume all data
   // functions have already ran through the preHandler hook
   if (isServer) {
@@ -100,7 +100,8 @@ export function AppRoute({ head, ctxHydration, ctx, children }) {
   if (!ctx.firstRender && ctx.getMeta) {
     const updateMeta = async () => {
       const { getMeta } = await ctx.loader()
-      head.update(await getMeta(ctx))
+      ctx.head = await getMeta(ctx)
+      ctxHydration.useHead.push(ctx.head)
     }
     waitResource(path, 'updateMeta', updateMeta)
   }

package/virtual/create.jsx

@@ -1,5 +1,19 @@
+import { 
+  UnheadProvider as ClientUnheadProvider 
+} from '@unhead/react/client'
+import { 
+  UnheadProvider as ServerUnheadProvider 
+} from '@unhead/react/server?server'
+
 import Root from '$app/root.jsx'
 
 export default function create({ url, ...serverInit }) {
-  return <Root url={url} {...serverInit} />
+  const UnheadProvider = import.meta.env.SSR
+    ? ServerUnheadProvider
+    : ClientUnheadProvider
+  return (
+    <UnheadProvider value={serverInit.ctxHydration.useHead}>
+      <Root url={url} {...serverInit} />
+    </UnheadProvider>
+  )
 }

package/virtual/mount.js

@@ -1,23 +1,27 @@
 import { createRoot, hydrateRoot } from 'react-dom/client'
-import Head from 'unihead/client'
 import { hydrateRoutes } from '@fastify/react/client'
+import { createHead } from '@unhead/react/client'
 import routes from '$app/routes.js'
 import create from '$app/create.jsx'
 import * as context from '$app/context.js'
 
 async function mountApp (...targets) {
   const ctxHydration = await extendContext(window.route, context)
-  const head = new Head(window.route.head, window.document)
   const resolvedRoutes = await hydrateRoutes(routes)
   const routeMap = Object.fromEntries(
     resolvedRoutes.map((route) => [route.path, route]),
   )
+  const useHead = createHead()
+  ctxHydration.useHead = useHead
+  ctxHydration.useHead.push(window.route.head)
+
   const app = create({
-    head,
     ctxHydration,
     routes: window.routes,
     routeMap,
   })
+
+
   let mountTargetFound = false
   for (const target of targets) {
     const targetElem = document.querySelector(target)

package/virtual-ts/context.ts

@@ -0,0 +1,4 @@
+// This file serves as a placeholder
+// if no context.js file is provided
+
+export default () => {}

package/virtual-ts/core.tsx

@@ -0,0 +1,136 @@
+import { createPath } from 'history'
+import { useEffect } from 'react'
+import { BrowserRouter, StaticRouter, useLocation } from 'react-router'
+import { proxy } from 'valtio'
+import { RouteContext, useRouteContext } from '@fastify/react/client'
+import layouts from '$app/layouts.js'
+import { waitFetch, waitResource } from '$app/resource.js'
+
+export const isServer = import.meta.env.SSR
+export const Router = isServer ? StaticRouter : BrowserRouter
+
+let serverActionCounter = 0
+
+export function createServerAction(name) {
+  return `/-/action/${name ?? serverActionCounter++}`
+}
+
+export function useServerAction(action, options = {}) {
+  if (import.meta.env.SSR) {
+    const { req, server } = useRouteContext()
+    req.route.actionData[action] = waitFetch(
+      `${server.serverURL}${action}`,
+      options,
+      req.fetchMap,
+    )
+    return req.route.actionData[action]
+  }
+  const { actionData } = useRouteContext()
+  if (actionData[action]) {
+    return actionData[action]
+  }
+  actionData[action] = waitFetch(action, options)
+  return actionData[action]
+}
+
+export function AppRoute({ ctxHydration, ctx, children }) {
+  // If running on the server, assume all data
+  // functions have already ran through the preHandler hook
+  if (isServer) {
+    const Layout = layouts[ctxHydration.layout ?? 'default']
+    return (
+      <RouteContext.Provider
+        value={{
+          ...ctx,
+          ...ctxHydration,
+          state: isServer
+            ? ctxHydration.state ?? {}
+            : proxy(ctxHydration.state ?? {}),
+        }}
+      >
+        <Layout>{children}</Layout>
+      </RouteContext.Provider>
+    )
+  }
+  // Note that on the client, window.route === ctxHydration
+
+  // Indicates whether or not this is a first render on the client
+  ctx.firstRender = window.route.firstRender
+
+  // If running on the client, the server context data
+  // is still available, hydrated from window.route
+  if (ctx.firstRender) {
+    ctx.data = window.route.data
+    ctx.head = window.route.head
+  } else {
+    ctx.data = undefined
+    ctx.head = undefined
+  }
+
+  const location = useLocation()
+  const path = createPath(location)
+
+  // When the next route renders client-side,
+  // force it to execute all URMA hooks again
+  // biome-ignore lint/correctness/useExhaustiveDependencies: I'm inclined to believe you, Biome, but I'm not risking it.
+  useEffect(() => {
+    window.route.firstRender = false
+    window.route.actionData = {}
+  }, [location])
+
+  // If we have a getData function registered for this route
+  if (!ctx.data && ctx.getData) {
+    try {
+      const { pathname, search } = location
+      // If not, fetch data from the JSON endpoint
+      ctx.data = waitFetch(`/-/data${pathname}${search}`)
+    } catch (status) {
+      // If it's an actual error...
+      if (status instanceof Error) {
+        ctx.error = status
+      }
+      // If it's just a promise (suspended state)
+      throw status
+    }
+  }
+
+  // Note that ctx.loader() at this point will resolve the
+  // memoized module, so there's barely any overhead
+
+  if (!ctx.firstRender && ctx.getMeta) {
+    const updateMeta = async () => {
+      const { getMeta } = await ctx.loader()
+      ctx.head = await getMeta(ctx)
+      ctxHydration.useHead.push(ctx.head)
+    }
+    waitResource(path, 'updateMeta', updateMeta)
+  }
+
+  if (!ctx.firstRender && ctx.onEnter) {
+    const runOnEnter = async () => {
+      const { onEnter } = await ctx.loader()
+      const updatedData = await onEnter(ctx)
+      if (!ctx.data) {
+        ctx.data = {}
+      }
+      Object.assign(ctx.data, updatedData)
+    }
+    waitResource(path, 'onEnter', runOnEnter)
+  }
+
+  const Layout = layouts[ctx.layout ?? 'default']
+
+  return (
+    <RouteContext.Provider
+      value={{
+        ...ctxHydration,
+        ...ctx,
+        state: isServer
+          ? ctxHydration.state ?? {}
+          : proxy(ctxHydration.state ?? {}),
+      }}
+    >
+      <Layout>{children}</Layout>
+    </RouteContext.Provider>
+  )
+}

package/virtual-ts/create.tsx

@@ -0,0 +1,19 @@
+import { 
+  UnheadProvider as ClientUnheadProvider 
+} from '@unhead/react/client'
+import { 
+  UnheadProvider as ServerUnheadProvider 
+} from '@unhead/react/server?server'
+
+import Root from '$app/root.jsx'
+
+export default function create({ url, ...serverInit }) {
+  const UnheadProvider = import.meta.env.SSR
+    ? ServerUnheadProvider
+    : ClientUnheadProvider
+  return (
+    <UnheadProvider value={serverInit.ctxHydration.useHead}>
+      <Root url={url} {...serverInit} />
+    </UnheadProvider>
+  )
+}

package/virtual-ts/index.ts

@@ -0,0 +1,7 @@
+import { createRoutes } from '@fastify/react/server'
+
+export default {
+  routes: createRoutes(import('$app/routes.ts')),
+  create: import('$app/create.tsx'),
+  context: import('$app/context.ts'),
+}

package/virtual-ts/layouts/default.tsx

@@ -0,0 +1,8 @@
+// This file serves as a placeholder
+// if no layouts/default.jsx file is provided
+
+import { Suspense } from 'react'
+
+export default function Layout({ children }) {
+  return <Suspense>{children}</Suspense>
+}

package/virtual-ts/layouts.ts

@@ -0,0 +1,20 @@
+import { lazy } from 'react'
+
+const DefaultLayout = () => import('$app/layouts/default.tsx')
+
+const appLayouts = import.meta.glob('/layouts/*.{jsx,tsx}')
+
+if (
+  !Object.keys(appLayouts).some((path) =>
+    path.match(/\/layouts\/default\.(j|t)sx/),
+  )
+) {
+  appLayouts['/layouts/default.tsx'] = DefaultLayout
+}
+
+export default Object.fromEntries(
+  Object.keys(appLayouts).map((path) => {
+    const name = path.slice(9, -4)
+    return [name, lazy(appLayouts[path])]
+  }),
+)

package/virtual-ts/mount.ts

@@ -0,0 +1,58 @@
+import { createRoot, hydrateRoot } from 'react-dom/client'
+import { hydrateRoutes } from '@fastify/react/client'
+import { createHead } from '@unhead/react/client'
+import routes from '$app/routes.js'
+import create from '$app/create.jsx'
+import * as context from '$app/context.js'
+
+async function mountApp (...targets) {
+  const ctxHydration = await extendContext(window.route, context)
+  const resolvedRoutes = await hydrateRoutes(routes)
+  const routeMap = Object.fromEntries(
+    resolvedRoutes.map((route) => [route.path, route]),
+  )
+  const useHead = createHead()
+  ctxHydration.useHead = useHead
+  ctxHydration.useHead.push(window.route.head)
+
+  const app = create({
+    ctxHydration,
+    routes: window.routes,
+    routeMap,
+  })
+
+
+  let mountTargetFound = false
+  for (const target of targets) {
+    const targetElem = document.querySelector(target)
+    if (targetElem) {
+      mountTargetFound = true
+      if (ctxHydration.clientOnly) {
+        createRoot(targetElem).render(app)
+      } else {
+        hydrateRoot(targetElem, app)
+      }
+      break
+    }
+  }
+  if (!mountTargetFound) {
+    throw new Error(`No mount element found from provided list of targets: ${targets}`)
+  }
+}
+
+mountApp('#root', 'main')
+
+async function extendContext (ctx, {
+  // The route context initialization function
+  default: setter,
+  // We destructure state here just to discard it from extra
+  state,
+  // Other named exports from context.js
+  ...extra
+}) {
+  Object.assign(ctx, extra)
+  if (setter) {
+    await setter(ctx)
+  }
+  return ctx
+}

package/virtual-ts/resource.ts

@@ -0,0 +1,82 @@
+const clientFetchMap = new Map()
+const clientResourceMap = new Map()
+
+export function waitResource(
+  path,
+  id,
+  promise,
+  resourceMap = clientResourceMap,
+) {
+  const resourceId = `${path}:${id}`
+  const loaderStatus = resourceMap.get(resourceId)
+  if (loaderStatus) {
+    if (loaderStatus.error) {
+      throw loaderStatus.error
+    }
+    if (loaderStatus.suspended) {
+      throw loaderStatus.promise
+    }
+    resourceMap.delete(resourceId)
+
+    return loaderStatus.result
+  }
+  const loader = {
+    suspended: true,
+    error: null,
+    result: null,
+    promise: null,
+  }
+  loader.promise = promise()
+    .then((result) => {
+      loader.result = result
+    })
+    .catch((loaderError) => {
+      loader.error = loaderError
+    })
+    .finally(() => {
+      loader.suspended = false
+    })
+
+  resourceMap.set(resourceId, loader)
+
+  return waitResource(path, id)
+}
+
+export function waitFetch(path, options = {}, fetchMap = clientFetchMap) {
+  const loaderStatus = fetchMap.get(path)
+  if (loaderStatus) {
+    if (loaderStatus.error || loaderStatus.data?.statusCode === 500) {
+      if (loaderStatus.data?.statusCode === 500) {
+        throw new Error(loaderStatus.data.message)
+      }
+      throw loaderStatus.error
+    }
+    if (loaderStatus.suspended) {
+      throw loaderStatus.promise
+    }
+    fetchMap.delete(path)
+
+    return loaderStatus.data
+  }
+  const loader = {
+    suspended: true,
+    error: null,
+    data: null,
+    promise: null,
+  }
+  loader.promise = fetch(path, options)
+    .then((response) => response.json())
+    .then((loaderData) => {
+      loader.data = loaderData
+    })
+    .catch((loaderError) => {
+      loader.error = loaderError
+    })
+    .finally(() => {
+      loader.suspended = false
+    })
+
+  fetchMap.set(path, loader)
+
+  return waitFetch(path, options, fetchMap)
+}

package/virtual-ts/root.tsx

@@ -0,0 +1,29 @@
+import { Suspense } from 'react'
+import { Route, Routes } from 'react-router'
+import { AppRoute, Router } from '$app/core.tsx'
+
+export default function Root({ url, routes, head, ctxHydration, routeMap }) {
+  return (
+    <Suspense>
+      <Router location={url}>
+        <Routes>
+          {routes.map(({ path, component: Component }) => (
+            <Route
+              key={path}
+              path={path}
+              element={
+                <AppRoute
+                  head={head}
+                  ctxHydration={ctxHydration}
+                  ctx={routeMap[path]}
+                >
+                  <Component />
+                </AppRoute>
+              }
+            />
+          ))}
+        </Routes>
+      </Router>
+    </Suspense>
+  )
+}

package/virtual-ts/routes.ts

@@ -0,0 +1 @@
+export default import.meta.glob('/pages/**/*.{jsx,tsx}')