@fastify/react 0.5.0 → 1.0.0-beta.1

package/virtual/mount.js

@@ -1,48 +1,51 @@
 import { createRoot, hydrateRoot } from 'react-dom/client'
 import Head from 'unihead/client'
+import { hydrateRoutes } from '@fastify/react/client'
+import routes from '$app/routes.js'
+import create from '$app/create.jsx'
+import * as context from '$app/context.js'
 
-import create from '/:create.jsx'
-import routesPromise from '/:routes.js'
-
-mount('root')
-
-async function mount(targetInput) {
-  let target = targetInput
-  if (typeof target === 'string') {
-    target = document.getElementById(target)
-  }
-  const context = await import('/: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 routesPromise
+  const resolvedRoutes = await hydrateRoutes(routes)
   const routeMap = Object.fromEntries(
     resolvedRoutes.map((route) => [route.path, route]),
   )
-
   const app = create({
     head,
     ctxHydration,
     routes: window.routes,
     routeMap,
   })
-  if (ctxHydration.clientOnly) {
-    createRoot(target).render(app)
-  } else {
-    hydrateRoot(target, app)
+  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}`)
   }
 }
 
-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
-  },
-) {
+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)

package/virtual/resource.js

@@ -1,7 +1,12 @@
-const fetchMap = new Map()
-const resourceMap = new Map()
+const clientFetchMap = new Map()
+const clientResourceMap = new Map()
 
-export function waitResource(path, id, promise) {
+export function waitResource(
+  path,
+  id,
+  promise,
+  resourceMap = clientResourceMap,
+) {
   const resourceId = `${path}:${id}`
   const loaderStatus = resourceMap.get(resourceId)
   if (loaderStatus) {
@@ -37,7 +42,7 @@ export function waitResource(path, id, promise) {
   return waitResource(path, id)
 }
 
-export function waitFetch(path) {
+export function waitFetch(path, options = {}, fetchMap = clientFetchMap) {
   const loaderStatus = fetchMap.get(path)
   if (loaderStatus) {
     if (loaderStatus.error || loaderStatus.data?.statusCode === 500) {
@@ -59,7 +64,7 @@ export function waitFetch(path) {
     data: null,
     promise: null,
   }
-  loader.promise = fetch(`/-/data${path}`)
+  loader.promise = fetch(path, options)
     .then((response) => response.json())
     .then((loaderData) => {
       loader.data = loaderData
@@ -73,5 +78,5 @@ export function waitFetch(path) {
 
   fetchMap.set(path, loader)
 
-  return waitFetch(path)
+  return waitFetch(path, options, fetchMap)
 }

package/virtual/root.jsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import { AppRoute, Router } from '/:core.jsx'
+import { AppRoute, Router } from '$app/core.jsx'
 
 export default function Root({ url, routes, head, ctxHydration, routeMap }) {
   return (

package/virtual/routes.js

@@ -1,122 +1 @@
-/* global $paramPattern */
-
-import { lazy } from 'react'
-
-export default import.meta.env.SSR
-  ? createRoutes(import.meta.glob('$globPattern', { eager: true }))
-  : hydrateRoutes(import.meta.glob('$globPattern'))
-
-async function createRoutes(from, { param } = { param: $paramPattern }) {
-  // 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,
-          layout: route.layout,
-          getData: !!route.getData,
-          getMeta: !!route.getMeta,
-          onEnter: !!route.onEnter,
-        }
-      })
-    }
-  }
-  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,
-              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) => {
-          return {
-            id: path,
-            layout: routeModule.layout,
-            path:
-              routeModule.path ??
-              path
-                // Remove /pages and .jsx extension
-                .slice(6, -4)
-                // Replace [id] with :id
-                .replace(param, (_, m) => `:${m}`)
-                // Replace '/index' with '/'
-                .replace(/\/index$/, '/')
-                // Remove trailing slashs
-                .replace(/(.+)\/+$/, (...m) => m[1]),
-            ...routeModule,
-          }
-        }),
-      )
-    }
-  }
-  return new Routes(...(await Promise.all(promises)))
-}
-
-async function hydrateRoutes(fromInput) {
-  let from = fromInput
-  if (Array.isArray(from)) {
-    from = Object.fromEntries(from.map((route) => [route.path, route]))
-  }
-  return window.routes.map((route) => {
-    route.loader = memoImport(from[route.id])
-    route.component = lazy(() => route.loader())
-    return route
-  })
-}
-
-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) {
-  let routeModule = routeModuleInput
-  // const isServer = typeof process !== 'undefined'
-  if (typeof routeModule === 'function') {
-    routeModule = await routeModule()
-    return getRouteModuleExports(routeModule)
-  }
-  return getRouteModuleExports(routeModule)
-}
-
-function memoImport(func) {
-  // Otherwise we get a ReferenceError, but since this function
-  // is only ran once for each route, there's no overhead
-  const kFuncExecuted = Symbol('kFuncExecuted')
-  const kFuncValue = Symbol('kFuncValue')
-  func[kFuncExecuted] = false
-  return async () => {
-    if (!func[kFuncExecuted]) {
-      func[kFuncValue] = await func()
-      func[kFuncExecuted] = true
-    }
-    return func[kFuncValue]
-  }
-}
+export default import.meta.glob('/pages/**/*.{jsx,tsx}')

package/plugin.cjs

@@ -1,110 +0,0 @@
-const { readFileSync, existsSync } = require('fs')
-const { dirname, join, resolve } = require('path')
-const { fileURLToPath } = require('url')
-
-function viteReactFastifyDX(config = {}) {
-  const prefix = /^\/:/
-  const routing = Object.assign(
-    {
-      globPattern: '/pages/**/*.{jsx,tsx}',
-      paramPattern: /\[(\w+)\]/,
-    },
-    config,
-  )
-  const virtualRoot = resolve(__dirname, 'virtual')
-  const virtualModules = [
-    'mount.js',
-    'resource.js',
-    'routes.js',
-    'layouts.js',
-    'create.jsx',
-    'root.jsx',
-    'layouts/',
-    'context.js',
-    'core.jsx',
-  ]
-  virtualModules.includes = function (virtual) {
-    if (!virtual) {
-      return false
-    }
-    for (const entry of this) {
-      if (virtual.startsWith(entry)) {
-        return true
-      }
-    }
-    return false
-  }
-  const virtualModuleInserts = {
-    'routes.js': {
-      $globPattern: routing.globPattern,
-      $paramPattern: routing.paramPattern,
-    },
-  }
-
-  let viteProjectRoot
-
-  function loadVirtualModuleOverride(virtual) {
-    if (!virtualModules.includes(virtual)) {
-      return
-    }
-    const overridePath = resolve(viteProjectRoot, virtual)
-    if (existsSync(overridePath)) {
-      return overridePath
-    }
-  }
-
-  function loadVirtualModule(virtual) {
-    if (!virtualModules.includes(virtual)) {
-      return
-    }
-    let code = readFileSync(resolve(virtualRoot, virtual), 'utf8')
-    if (virtualModuleInserts[virtual]) {
-      for (const [key, value] of Object.entries(
-        virtualModuleInserts[virtual],
-      )) {
-        code = code.replace(new RegExp(escapeRegExp(key), 'g'), value)
-      }
-    }
-    return {
-      code,
-      map: null,
-    }
-  }
-
-  // Thanks to https://github.com/sindresorhus/escape-string-regexp/blob/main/index.js
-  function escapeRegExp(s) {
-    return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')
-  }
-
-  return {
-    name: 'vite-plugin-fastify-react',
-    config(config, { command }) {
-      if (command === 'build' && config.build?.ssr) {
-        config.build.rollupOptions = {
-          output: {
-            format: 'es',
-          },
-        }
-      }
-    },
-    configResolved(config) {
-      viteProjectRoot = config.root
-    },
-    async resolveId(id) {
-      const [, virtual] = id.split(prefix)
-      if (virtual) {
-        const override = await loadVirtualModuleOverride(virtual)
-        if (override) {
-          return override
-        }
-        return id
-      }
-    },
-    load(id) {
-      const [, virtual] = id.split(prefix)
-      return loadVirtualModule(virtual)
-    },
-  }
-}
-
-module.exports = viteReactFastifyDX

package/server/stream.js

@@ -1,56 +0,0 @@
-// 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'
-
-// Helper function to prepend and append chunks the body stream
-export async function* generateHtmlStream({ head, body, footer }) {
-  for await (const chunk of await head) {
-    yield chunk
-  }
-  if (body) {
-    for await (const chunk of await body) {
-      yield chunk
-    }
-  }
-  for await (const chunk of await footer()) {
-    yield chunk
-  }
-}
-
-// 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)
-    }
-  })
-}