@fastify/react 0.6.0 → 1.0.0-beta.2

package/plugin/stores.js

@@ -0,0 +1,39 @@
+
+export function generateStores(keys) {
+  let code = `
+import { useRouteContext } from '@fastify/react/client'
+
+function storeGetter (proxy, prop) {
+  if (!proxy.context) {
+    proxy.context = useRouteContext()
+  }
+  if (prop === 'state') {
+    return proxy.context.state[proxy.key]
+  }
+  let method
+  if (method = proxy.context.actions[proxy.key][prop]) {
+    if (!proxy.wrappers[prop]) {
+      proxy.wrappers[prop] = (...args) => {
+        return method(proxy.context.state, ...args)
+      }
+    }
+    return proxy.wrappers[prop]
+  }
+}
+`
+  for (const key of keys) {
+    code += `
+export const ${key} = new Proxy({
+  key: '${key}',
+  wrappers: {},
+  context: null,
+}, {
+  get: storeGetter
+})
+`
+  }
+  return {
+    code,
+    map: null
+  }
+}

package/plugin/virtual.js

@@ -0,0 +1,100 @@
+import { readFileSync, existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import { findExports } from 'mlly'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const virtualRoot = resolve(__dirname, '..', 'virtual')
+
+const virtualModules = [
+  'mount.js',
+  'resource.js',
+  'routes.js',
+  'layouts.js',
+  'create.jsx',
+  'root.jsx',
+  'layouts/',
+  'context.js',
+  'core.jsx',
+  'index.js',
+]
+
+export const prefix = /^\/?\$app\//
+
+export async function resolveId (id) {
+  if (prefix.test(id)) {
+    const [, virtual] = id.split(prefix)
+    if (virtual) {
+      const override = loadVirtualModuleOverride(this.root, virtual)
+      if (override) {
+        return override
+      }
+      return id
+    }
+  }
+}
+
+export function loadVirtualModule (virtualInput) {
+  let virtual = virtualInput
+  if (!/\.((mc)?ts)|((mc)?js)|(jsx)$/.test(virtual)) {
+    virtual += '.js'
+  }
+  if (!virtualModules.includes(virtual)) {
+    return
+  }
+  const code = readFileSync(resolve(virtualRoot, virtual), 'utf8')
+  return {
+    code,
+    map: null,
+  }
+}
+
+virtualModules.includes = function (virtual) {
+  if (!virtual) {
+    return false
+  }
+  for (const entry of this) {
+    if (virtual.startsWith(entry)) {
+      return true
+    }
+  }
+  return false
+}
+
+function loadVirtualModuleOverride (viteProjectRoot, virtual) {
+  if (!virtualModules.includes(virtual)) {
+    return
+  }
+  const overridePath = resolve(viteProjectRoot, virtual)
+  if (existsSync(overridePath)) {
+    return overridePath
+  }
+}
+
+export function loadSource (id) {
+  const filePath = id
+    .replace(/\?client$/, '')
+    .replace(/\?server$/, '')
+  return readFileSync(filePath, 'utf8')
+}
+
+export function createPlaceholderExports (source) {
+  let pExports = ''
+  for (const exp of findExports(source)) {
+    switch (exp.type) {
+      case 'named':
+        for (const name of exp.names) {
+          pExports += `export const ${name} = {}\n`
+        }
+        break
+      case 'default':
+        pExports += `export default {}\n`
+        break
+      case 'declaration':
+        pExports += `export const ${exp.name} = {}\n`
+        break
+    }
+  }
+  return pExports
+}

package/rendering.js

@@ -0,0 +1,139 @@
+import { Readable } from 'node:stream'
+// Helper to make the stream returned renderToPipeableStream()
+// behave like an event emitter and facilitate error handling in Fastify
+import { Minipass } from 'minipass'
+// React 18's preferred server-side rendering function,
+// 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 { createHtmlTemplates } from './templating.js'
+
+// Helper function to get an AsyncIterable (via PassThrough)
+// from the renderToPipeableStream() onShellReady event
+export function onShellReady(app) {
+  const duplex = new Minipass()
+  return new Promise((resolve, reject) => {
+    try {
+      const pipeable = renderToPipeableStream(app, {
+        onShellReady() {
+          resolve(pipeable.pipe(duplex))
+        },
+      })
+    } catch (error) {
+      resolve(error)
+    }
+  })
+}
+
+// Helper function to get an AsyncIterable (via Minipass)
+// from the renderToPipeableStream() onAllReady event
+export function onAllReady(app) {
+  const duplex = new Minipass()
+  return new Promise((resolve, reject) => {
+    try {
+      const pipeable = renderToPipeableStream(app, {
+        onAllReady() {
+          resolve(pipeable.pipe(duplex))
+        },
+      })
+    } catch (error) {
+      resolve(error)
+    }
+  })
+}
+
+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) {
+      return createStreamingResponse(this.request, routes, routeMap, create)
+    }
+    return createResponse(this.request, routes, routeMap, create)
+  }
+}
+
+async function createStreamingResponse (req, routes) {
+  // SSR stream
+  const body = await onShellReady(req.route.app)
+  return { routes, context: req.route, body }
+}
+
+async function createResponse (req, routes) {
+  let body
+  if (!req.route.clientOnly) {
+    // SSR string
+    body = await onAllReady(req.route.app)
+  }
+  return { routes, context: req.route, body }
+}
+
+// The return value of this function gets registered as reply.html()
+export async function createHtmlFunction (source, _, config) {
+  // Creates `universal` and `serverOnly` sets of
+  // HTML `beforeElement` and `afterElement` templates
+  const templates = await createHtmlTemplates(source, config)
+
+  // Registered as reply.html()
+  return async function () {
+    const { routes, context, body } = await this.render()
+
+    this.type('text/html')
+
+    // Use template with client module import removed
+    if (context.serverOnly) {
+      // Turn off hydration
+      context.hydration = ''
+
+      return streamShell(
+        templates.serverOnly,
+        context,
+        body,
+      )
+    }
+
+    // Embed full hydration script
+    context.hydration = (
+      `<script>\nwindow.route = ${
+        // Server data payload
+        devalue.uneval(context.toJSON())
+      }\nwindow.routes = ${
+        // Universal router payload
+        devalue.uneval(routes.toJSON())
+      }\n</script>`
+    )
+
+    // In all other cases use universal,
+    // template which works the same for SSR and CSR.
+
+    if (context.clientOnly) {
+      return sendClientOnlyShell(templates.universal, context)
+    }
+
+    return streamShell(templates.universal, context, body)
+  }
+}
+
+export function sendClientOnlyShell (templates, context, body) {
+  context.head = new Head(context.head).render()
+  return `${
+    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)
+  for await (const chunk of body) {
+    yield chunk
+  }
+  yield templates.afterElement(context)
+}

package/routing.js

@@ -0,0 +1,142 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import Youch from 'youch'
+import RouteContext from './context.js'
+import { createHtmlFunction } from './rendering.js'
+
+export async function prepareClient (entries, _) {
+  const client = entries.ssr
+  if (client.context instanceof Promise) {
+    client.context = await client.context
+  }
+  if (client.routes instanceof Promise) {
+    client.routes = await client.routes
+  }
+  if (client.create instanceof Promise) {
+    const { default: create } = await client.create
+    client.create = create
+  }
+  return client
+}
+
+export function createErrorHandler (_, scope, config) {
+  return async (error, req, reply) => {
+    req.log.error(error)
+    if (config.dev) {
+      const youch = new Youch(error, req.raw)
+      reply.code(500)
+      reply.type('text/html')
+      reply.send(await youch.toHTML())
+      return reply
+    }
+    reply.code(500)
+    reply.send('')
+    return reply
+  }
+}
+
+export async function createRoute ({ client, errorHandler, route }, scope, config) {
+  if (route.configure) {
+    await route.configure(scope)
+  }
+
+  // Used when hydrating Vue Router on the client
+  const routeMap = Object.fromEntries(client.routes.map(_ => [_.path, _]))
+
+  // Extend with route context initialization module
+  RouteContext.extend(client.context)
+
+  const onRequest = async (req, reply) => {
+    req.route = await RouteContext.create(
+      scope,
+      req,
+      reply,
+      route,
+      client.context,
+    )
+  }
+
+  const preHandler = [
+    async (req) => {
+      if (!req.route.clientOnly) {
+        const app = client.create({
+          routes: client.routes,
+          routeMap,
+          ctxHydration: req.route,
+          url: req.url,
+        })
+        req.route.app = app
+      }
+    }
+  ]
+
+  if (route.getData) {
+    preHandler.push(async (req) => {
+      if (!req.route.data) {
+        req.route.data = {}
+      }
+      const result = await route.getData(req.route)
+      Object.assign(req.route.data, result)
+    })
+  }
+
+  if (route.getMeta) {
+    preHandler.push(async (req) => {
+      req.route.head = await route.getMeta(req.route)
+    })
+  }
+
+  if (route.onEnter) {
+    preHandler.push(async (req) => {
+      try {
+        if (route.onEnter) {
+          if (!req.route.data) {
+            req.route.data = {}
+          }
+          const result = await route.onEnter(req.route)
+          Object.assign(req.route.data, result)
+        }
+      } catch (err) {
+        if (config.dev) {
+          console.error(err)
+        }
+        req.route.error = err
+      }
+    })
+  }
+
+  // Route handler
+  let handler
+  if (config.dev) {
+    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 htmlFunction = await createHtmlFunction(htmlSource, scope, config)
+    handler = (_, reply) => htmlFunction.call(reply)
+  }
+
+  // Replace wildcard routes with Fastify compatible syntax
+  const routePath = route.path.replace(/:[^+]+\+/, '*')
+  
+  scope.route({
+    url: routePath,
+    method: route.method ?? ['GET', 'POST', 'PUT', 'DELETE'],
+    errorHandler,
+    onRequest,
+    preHandler,
+    handler,
+    ...route,
+  })
+
+  if (route.getData) {
+    // If getData is provided, register JSON endpoint for it
+    scope.get(`/-/data${routePath}`, {
+      onRequest,
+      async handler (req, reply) {
+        reply.send(await route.getData(req.route))
+      },
+    })
+  }
+}

package/server.js

@@ -0,0 +1,129 @@
+// Otherwise we get a ReferenceError, but since
+// this function is only ran once, there's no overhead
+class Routes extends Array {
+  toJSON () {
+    return this.map((route) => {
+      return {
+        id: route.id,
+        path: route.path,
+        name: route.name,
+        layout: route.layout,
+        getData: !!route.getData,
+        getMeta: !!route.getMeta,
+        onEnter: !!route.onEnter,
+      }
+    })
+  }
+}
+
+export function prepareServer(server) {
+  let url
+  server.decorate('serverURL', { getter: () => url })
+  server.addHook('onListen', () => {
+    const { port, address, family } = server.server.address()
+    const protocol = server.https ? 'https' : 'http'
+    if (family === 'IPv6') {
+      url = `${protocol}://[${address}]:${port}`
+    } else {
+      url = `${protocol}://${address}:${port}`
+    }
+  })
+  server.decorateRequest('fetchMap', null)
+  server.addHook('onRequest', (req, _, done) => {
+    req.fetchMap = new Map()
+    done()
+  })
+  server.addHook('onResponse', (req, _, done) => {
+    req.fetchMap = undefined
+    done()
+  })
+}
+
+export async function createRoutes (fromPromise, { param } = { param: /\[([\.\w]+\+?)\]/ }) {
+  const { default: from } = await fromPromise
+  const importPaths = Object.keys(from)
+  const promises = []
+  if (Array.isArray(from)) {
+    for (const routeDef of from) {
+      promises.push(
+        getRouteModule(routeDef.path, routeDef.component)
+          .then((routeModule) => {
+            return {
+              id: routeDef.path,
+              name: routeDef.path ?? routeModule.path,
+              path: routeDef.path ?? routeModule.path,
+              ...routeModule,
+            }
+          }),
+      )
+    }
+  } else {
+    // Ensure that static routes have precedence over the dynamic ones
+    for (const path of importPaths.sort((a, b) => a > b ? -1 : 1)) {
+      promises.push(
+        getRouteModule(path, from[path])
+          .then((routeModule) => {
+            const route = {
+              id: path,
+              layout: routeModule.layout,
+              name: path
+                // Remove /pages and .vue extension
+                .slice(6, -4)
+                // Remove params
+                .replace(param, '')
+                // Remove leading and trailing slashes
+                .replace(/^\/*|\/*$/g, '')
+                // Replace slashes with underscores
+                .replace(/\//g, '_'),
+              path:
+                routeModule.path ??
+                path
+                  // Remove /pages and .vue extension
+                  .slice(6, -4)
+                  // Replace [id] with :id and [slug+] with :slug+
+                  .replace(param, (_, m) => `:${m}`)
+                  .replace(/:\w+\+/, (_, m) => `*`)
+                  // Replace '/index' with '/'
+                  .replace(/\/index$/, '/')
+                  // Remove trailing slashs
+                  .replace(/(.+)\/+$/, (...m) => m[1]),
+              ...routeModule,
+            }
+
+            if (route.name === '') {
+              route.name = 'catch-all'
+            }
+
+            return route
+          }),
+      )
+    }
+  }
+  return new Routes(...await Promise.all(promises))
+}
+
+
+function getRouteModuleExports (routeModule) {
+  return {
+    // The Route component (default export)
+    component: routeModule.default,
+    // The Layout Route component
+    layout: routeModule.layout,
+    // Route-level hooks
+    getData: routeModule.getData,
+    getMeta: routeModule.getMeta,
+    onEnter: routeModule.onEnter,
+    // Other Route-level settings
+    streaming: routeModule.streaming,
+    clientOnly: routeModule.clientOnly,
+    serverOnly: routeModule.serverOnly,
+  }
+}
+
+async function getRouteModule (path, routeModuleInput) {
+  if (typeof routeModuleInput === 'function') {
+    const routeModule = await routeModuleInput()
+    return getRouteModuleExports(routeModule)
+  }
+  return getRouteModuleExports(routeModuleInput)
+}

package/templating.js

@@ -0,0 +1,51 @@
+import { createHtmlTemplateFunction } from '@fastify/vite/utils'
+import { HTMLRewriter } from 'html-rewriter-wasm'
+
+export async function createHtmlTemplates (source, config) {
+  const el = '<!-- element -->'
+
+  const universal = source.split(el)
+  const serverOnlyRaw = await removeClientModule(source, config)
+  const serverOnly = serverOnlyRaw.split(el)
+
+  return {
+    // Templates for client-only and universal rendering
+    universal: {
+      beforeElement: await createHtmlTemplateFunction(universal[0]),
+      afterElement: await createHtmlTemplateFunction(universal[1]),
+    },
+    // Templates for server-only rendering
+    serverOnly: {
+      beforeElement: await createHtmlTemplateFunction(serverOnly[0]),
+      afterElement: await createHtmlTemplateFunction(serverOnly[1]),
+    },
+  }
+}
+
+async function removeClientModule (html, config) {
+  const decoder = new TextDecoder()
+
+  let output = ''
+  const rewriter = new HTMLRewriter((outputChunk) => {
+    output += decoder.decode(outputChunk)
+  })
+
+  rewriter.on('script', {
+    element (element) {
+      for (const [attr, value] of element.attributes) {
+        if (attr === 'type' && value === 'module') {
+          element.replace('')
+        }
+      }
+    },
+  })
+
+  try {
+    const encoder = new TextEncoder()
+    await rewriter.write(encoder.encode(html))
+    await rewriter.end()
+    return output
+  } finally {
+    rewriter.free()
+  }
+}

package/virtual/core.jsx

@@ -1,24 +1,13 @@
 import { createPath } from 'history'
-import { createContext, useContext, useEffect } from 'react'
-import { BrowserRouter, useLocation } from 'react-router-dom'
-import { StaticRouter } from 'react-router-dom/server.mjs'
-import { proxy, useSnapshot } from 'valtio'
-import layouts from '/:layouts.js'
-import { waitFetch, waitResource } from '/:resource.js'
+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
-export const RouteContext = createContext({})
-
-export function useRouteContext() {
-  const routeContext = useContext(RouteContext)
-  if (routeContext.state) {
-    routeContext.snapshot = isServer
-      ? routeContext.state ?? {}
-      : useSnapshot(routeContext.state ?? {})
-  }
-  return routeContext
-}
 
 let serverActionCounter = 0
 

package/virtual/create.jsx

@@ -1,4 +1,4 @@
-import Root from '/:root.jsx'
+import Root from '$app/root.jsx'
 
 export default function create({ url, ...serverInit }) {
   return <Root url={url} {...serverInit} />

package/virtual/index.js

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

package/virtual/layouts.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react'
 
-const DefaultLayout = () => import('/:layouts/default.jsx')
+const DefaultLayout = () => import('$app/layouts/default.jsx')
 
 const appLayouts = import.meta.glob('/layouts/*.{jsx,tsx}')