@fastify/react 0.1.0

package/README.md

@@ -0,0 +1,90 @@
+# fastify-dx-react [![NPM version](https://img.shields.io/npm/v/fastify-dx-react.svg?style=flat)](https://www.npmjs.com/package/fastify-dx-react) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://standardjs.com/)
+
+- [**Introduction**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#introduction)
+- [**Quick Start**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#quick-start)
+- [**Package Scripts**](https://github.com/fastify/fastify-dx/blob/main/packages/fastify-dx-react/README.md#package-scripts)
+- [**Basic Setup**](https://github.com/fastify/fastify-dx/blob/main/docs/react/basic-setup.md)
+- [**Project Structure**](https://github.com/fastify/fastify-dx/blob/main/docs/react/project-structure.md)
+- [**Rendering Modes**](https://github.com/fastify/fastify-dx/blob/main/docs/react/rendering-modes.md)
+- [**Routing Configuration**](https://github.com/fastify/fastify-dx/blob/main/docs/react/routing-config.md)
+- [**Data Prefetching**](https://github.com/fastify/fastify-dx/blob/main/docs/react/data-prefetching.md)
+- [**Route Layouts**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-layouts.md)
+- [**Route Context**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-context.md)
+- [**Route Enter Event**](https://github.com/fastify/fastify-dx/blob/main/docs/react/route-enter.md)
+- [**Virtual Modules**](https://github.com/fastify/fastify-dx/blob/main/docs/react/virtual-modules.md)
+
+## Introduction
+
+**Fastify DX for React** is a renderer adapter for [**fastify-vite**](https://github.com/fastify/fastify-vite).
+
+It is a **fast**, **lightweight** alternative to Next.js and Remix packed with **Developer Experience** features.
+
+It has an extremely small core (~1k LOC total) and is built on top of [Fastify](https://github.com/fastify/fastify), [Vite](https://vitejs.dev/), [React Router](https://reactrouter.com/docs/en/v6) and [Valtio](https://github.com/pmndrs/valtio).
+
+[**See the release notes for the 0.0.1 alpha release**](https://github.com/fastify/fastify-dx/releases/tag/v0.0.1).
+
+> At this stage this project is mostly a [**one-man show**](https://github.com/sponsors/galvez), who's devoting all his free time to its completion. Contributions are extremely welcome, as well as bug reports for any issues you may find. 
+
+In this first alpha release it's still missing a test suite. The same is true for [**fastify-vite**](). 
+
+It'll move into **beta** status when test suites are added to both packages.
+
+## Quick Start
+
+Ensure you have **Node v16+**.
+
+Make a copy of [**starters/react**](https://github.com/fastify/fastify-dx/tree/dev/starters/react). If you have [`degit`](https://github.com/Rich-Harris/degit), run the following from a new directory:
+
+```bash
+degit fastify/fastify-dx/starters/react
+```
+
+> **If you're starting a project from scratch**, you'll need these packages installed.
+>
+> ```bash
+> npm i fastify fastify-vite fastify-dx-react -P
+> npm i @vitejs/plugin-react -D
+> ```
+
+
+Run `npm install`. 
+  
+Run `npm run dev`. 
+
+Visit `http://localhost:3000/`.
+
+## What's Included
+
+That will get you a **starter template** with:
+  
+- A minimal [Fastify](https://github.com/fastify/fastify) server.
+- Some dummy API routes.
+- A `pages/` folder with some [demo routes](https://github.com/fastify/fastify-dx/tree/dev/starters/react/client/pages).
+- All configuration files.
+
+It also includes some _**opinionated**_ essentials:
+
+- [**PostCSS Preset Env**](https://www.npmjs.com/package/postcss-preset-env) by [**Jonathan Neal**](https://github.com/jonathantneal), which enables [several modern CSS features](https://preset-env.cssdb.org/), such as [**CSS Nesting**](https://www.w3.org/TR/css-nesting-1/).
+
+- [**UnoCSS**](https://github.com/unocss/unocss) by [**Anthony Fu**](https://antfu.me/), which supports all [Tailwind utilities](https://uno.antfu.me/) and many other goodies through its [default preset](https://github.com/unocss/unocss/tree/main/packages/preset-uno). 
+
+- [**Valtio**](https://github.com/pmndrs/valtio) by [**Daishi Kato**](https://blog.axlight.com/), with a global and SSR-ready store which you can use anywhere.
+
+
+## Package Scripts
+
+`npm run dev` boots the development server.
+  
+`npm run build` creates the production bundle.
+  
+`npm run serve` serves the production bundle.
+
+## Meta
+
+Created by [Jonas Galvez](https://github.com/sponsors/galvez), **Engineering Manager** and **Open Sourcerer** at [NearForm](https://nearform.com).
+
+## Sponsors
+
+<a href="https://nearform.com"><img width="200px" src="https://user-images.githubusercontent.com/12291/172310344-594669fd-da4c-466b-a250-a898569dfea3.svg"></a>
+
+Also [**Duc-Thien Bui**](https://github.com/aecea) and [**Tom Preston-Werner**](https://github.com/mojombo) [via GitHub Sponsors](https://github.com/sponsors/galvez). _Thank you!_

package/index.js

@@ -0,0 +1,178 @@
+// Used to send a readable stream to reply.send()
+import { Readable } from 'stream'
+
+// fastify-vite's minimal HTML templating function,
+// which extracts interpolation variables from comments
+// and returns a function with the generated code
+import { createHtmlTemplateFunction } from '@fastify/vite'
+
+// Used to safely serialize JavaScript into
+// <script> tags, preventing a few types of attack
+import devalue from 'devalue'
+
+// Small SSR-ready library used to generate
+// <title>, <meta> and <link> elements
+import Head from 'unihead'
+
+// Helpers from the Node.js stream library to
+// make it easier to work with renderToPipeableStream()
+import { generateHtmlStream, onAllReady, onShellReady } from './server/stream.js'
+
+// Holds the universal route context
+import RouteContext from './server/context.js'
+
+export default {
+  prepareClient,
+  createHtmlFunction,
+  createRenderFunction,
+  createRouteHandler,
+  createRoute,
+}
+
+export async function prepareClient ({
+  routes: routesPromise,
+  context: contextPromise,
+  ...others
+}) {
+  const context = await contextPromise
+  const resolvedRoutes = await routesPromise
+  return { context, routes: resolvedRoutes, ...others }
+}
+
+// The return value of this function gets registered as reply.html()
+export function createHtmlFunction (source, scope, config) {
+  // Templating functions for universal rendering (SSR+CSR)
+  const [unHeadSource, unFooterSource] = source.split('<!-- element -->')
+  const unHeadTemplate = createHtmlTemplateFunction(unHeadSource)
+  const unFooterTemplate = createHtmlTemplateFunction(unFooterSource)
+  // Templating functions for server-only rendering (SSR only)
+  const [soHeadSource, soFooterSource] = source
+    // Unsafe if dealing with user-input, but safe here
+    // where we control the index.html source
+    .replace(/<script[^>]+type="module"[^>]+>.*?<\/script>/g, '')
+    .split('<!-- element -->')
+  const soHeadTemplate = createHtmlTemplateFunction(soHeadSource)
+  const soFooterTemplate = createHtmlTemplateFunction(soFooterSource)
+  // This function gets registered as reply.html()
+  return function ({ routes, context, body }) {
+    // Decide which templating functions to use, with and without hydration
+    const headTemplate = context.serverOnly ? soHeadTemplate : unHeadTemplate
+    const footerTemplate = context.serverOnly ? soFooterTemplate : unFooterTemplate
+    // Render page-level <head> elements
+    const head = new Head(context.head).render()
+    // Create readable stream with prepended and appended chunks
+    const readable = Readable.from(generateHtmlStream({
+      body: body && (
+        context.streaming
+          ? onShellReady(body)
+          : onAllReady(body)
+      ),
+      head: headTemplate({ ...context, head }),
+      footer: () => footerTemplate({
+        ...context,
+        hydration: '',
+        // Decide whether or not to include the hydration script
+        ...!context.serverOnly && {
+          hydration: (
+            '<script>\n' +
+            `window.route = ${devalue(context.toJSON())}\n` +
+            `window.routes = ${devalue(routes.toJSON())}\n` +
+            '</script>'
+          )
+        },
+      }),
+    }))
+    // Send out header and readable stream with full response
+    this.type('text/html')
+    this.send(readable)
+  }
+}
+
+export async function createRenderFunction ({ routes, create }) {
+  // create is exported by client/index.js
+  return function (req) {
+    // Create convenience-access routeMap
+    const routeMap = Object.fromEntries(routes.toJSON().map((route) => {
+      return [route.path, route]
+    }))
+    // Creates main React component with all the SSR context it needs
+    const app = !req.route.clientOnly && create({
+      routes,
+      routeMap,
+      ctxHydration: req.route,
+      url: req.url,
+    })
+    // Perform SSR, i.e., turn app.instance into an HTML fragment
+    // The SSR context data is passed along so it can be inlined for hydration
+    return { routes, context: req.route, body: app }
+  }
+}
+
+export function createRouteHandler (client, scope, config) {
+  return function (req, reply) {
+    reply.html(reply.render(req))
+    return reply
+  }
+}
+
+export function createRoute ({ client, handler, errorHandler, route }, scope, config) {
+  const onRequest = async function onRequest (req, reply) {
+    req.route = await RouteContext.create(
+      scope,
+      req,
+      reply,
+      route,
+      client.context,
+    )
+  }
+  if (route.getData) {
+    // If getData is provided, register JSON endpoint for it
+    scope.get(`/-/data${route.path}`, {
+      onRequest,
+      async handler (req, reply) {
+        reply.send(await route.getData(req.route))
+      },
+    })
+  }
+
+  // See https://github.com/fastify/fastify-dx/blob/main/URMA.md
+  const hasURMAHooks = Boolean(
+    route.getData || route.getMeta || route.onEnter,
+  )
+
+  // Extend with route context initialization module
+  RouteContext.extend(client.context)
+
+  scope.get(route.path, {
+    onRequest,
+    // If either getData or onEnter are provided,
+    // make sure they run before the SSR route handler
+    ...hasURMAHooks && {
+      async preHandler (req, reply) {
+        try {
+          if (route.getData) {
+            req.route.data = await route.getData(req.route)
+          }
+          if (route.getMeta) {
+            req.route.head = await route.getMeta(req.route)
+          }
+          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
+        }
+      },
+    },
+    handler,
+    errorHandler,
+    ...route,
+  })
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "scripts": {
+    "lint": "eslint . --ext .js,.jsx --fix"
+  },
+  "type": "module",
+  "main": "index.js",
+  "name": "@fastify/react",
+  "version": "0.1.0",
+  "files": [
+    "virtual/create.jsx",
+    "virtual/create.tsx",
+    "virtual/root.jsx",
+    "virtual/root.tsx",
+    "virtual/layouts.js",
+    "virtual/layouts/default.jsx",
+    "virtual/context.js",
+    "virtual/context.ts",
+    "virtual/mount.js",
+    "virtual/mount.ts",
+    "virtual/resource.js",
+    "virtual/core.jsx",
+    "virtual/routes.js",
+    "index.js",
+    "plugin.cjs",
+    "server/context.js",
+    "server/stream.js"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": "./index.js",
+    "./plugin": "./plugin.cjs"
+  },
+  "dependencies": {
+    "devalue": "^2.0.1",
+    "history": "^5.3.0",
+    "minipass": "^3.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "unihead": "^0.0.6",
+    "valtio": "^1.7.2"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-react": "^7.29.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/plugin.cjs

@@ -0,0 +1,112 @@
+const { readFileSync, existsSync } = require('fs')
+const { dirname, join, resolve } = require('path')
+const { fileURLToPath } = require('url')
+
+function viteReactFastifyDX (config = {}) {  
+  const prefix = /^\/?dx:/
+  const routing = Object.assign({
+    globPattern: '/pages/**/*.(jsx|tsx)',
+    paramPattern: /\[(\w+)\]/,
+  }, config)
+  const virtualRoot = resolve(__dirname, 'virtual')
+  const virtualModules = [ 
+    'mount.js', 
+    'mount.ts', 
+    'resource.js',
+    'resource.ts',
+    'routes.js',
+    'layouts.js',
+    'create.jsx',
+    'create.tsx',
+    'root.jsx',
+    'root.tsx',
+    'layouts/',
+    'context.js',
+    'context.ts',
+    '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-react-fastify-dx',
+    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/context.js

@@ -0,0 +1,65 @@
+
+const routeContextInspect = Symbol.for('nodejs.util.inspect.custom')
+
+export default class RouteContext {
+  static async create (server, req, reply, route, contextInit) {
+    const routeContext = new RouteContext(server, req, reply, route)
+    if (contextInit) {
+      if (contextInit.state) {
+        routeContext.state = contextInit.state()
+      }
+      if (contextInit.default) {
+        await contextInit.default(routeContext)
+      }
+    }
+    return routeContext
+  }
+
+  constructor (server, req, reply, route) {
+    this.server = server
+    this.req = req
+    this.reply = reply
+    this.head = {}
+    this.state = null
+    this.data = route.data
+    this.firstRender = true
+    this.layout = route.layout
+    this.getMeta = !!route.getMeta
+    this.getData = !!route.getData
+    this.onEnter = !!route.onEnter
+    this.streaming = route.streaming
+    this.clientOnly = route.clientOnly
+    this.serverOnly = route.serverOnly
+  }
+
+  [routeContextInspect] () {
+    return {
+      ...this,
+      server: { [routeContextInspect]: () => '[Server]' },
+      req: { [routeContextInspect]: () => '[Request]' },
+      reply: { [routeContextInspect]: () => '[Reply]' },
+    }
+  }
+
+  toJSON () {
+    return {
+      state: this.state,
+      data: this.data,
+      layout: this.layout,
+      getMeta: this.getMeta,
+      getData: this.getData,
+      onEnter: this.onEnter,
+      firstRender: this.firstRender,
+      clientOnly: this.clientOnly,
+    }
+  }
+}
+
+RouteContext.extend = function (initial) {
+  const { default: _, ...extra } = initial
+  for (const [prop, value] of Object.entries(extra)) {
+    if (prop !== 'data' && prop !== 'state') {
+      Object.defineProperty(RouteContext.prototype, prop, value)
+    }
+  }
+}

package/server/stream.js

@@ -0,0 +1,53 @@
+
+// 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 }) {
+  yield head
+  if (body) {
+    for await (const chunk of await body) {
+      yield chunk
+    }
+  }
+  yield footer()
+}
+
+// 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)
+    }
+  })
+}

package/virtual/context.js

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

package/virtual/context.ts

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

package/virtual/core.jsx

@@ -0,0 +1,145 @@
+import { createContext, useContext, useEffect } from 'react'
+import { useLocation, BrowserRouter, Routes, Route } from 'react-router-dom'
+import { StaticRouter } from 'react-router-dom/server.mjs'
+import { createPath } from 'history'
+import { proxy, useSnapshot } from 'valtio'
+import { waitResource, waitFetch } from '/dx:resource.js'
+import layouts from '/dx:layouts.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
+}
+
+export function DXApp ({
+  url,
+  routes,
+  head,
+  routeMap,
+  ctxHydration,
+}) {
+  return (
+    <Router location={url}>
+      <Routes>{
+        routes.map(({ path, component: Component }) =>
+          <Route
+            key={path}
+            path={path}
+            element={
+              <DXRoute
+                head={head}
+                ctxHydration={ctxHydration}
+                ctx={routeMap[path]}>
+                <Component />
+              </DXRoute>
+            } />,
+        )
+      }</Routes>
+    </Router>
+  )
+}
+
+export function DXRoute ({ head, 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
+  }
+
+  const location = useLocation()
+  const path = createPath(location)
+
+  // When the next route renders client-side,
+  // force it to execute all URMA hooks again
+  useEffect(() => {
+    window.route.firstRender = false
+  }, [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(`${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()
+      head.update(await getMeta(ctx))
+    }
+    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/create.jsx

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

package/virtual/create.tsx

@@ -0,0 +1,7 @@
+import Root from '/dx:root.tsx'
+
+export default function create ({ url, ...serverInit }) {
+  return (
+    <Root url={url} {...serverInit} />
+  )
+}

package/virtual/layouts/default.jsx

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

package/virtual/layouts.js

@@ -0,0 +1,14 @@
+import { lazy } from 'react'
+
+const DefaultLayout = () => import('/dx:layouts/default.jsx')
+
+const appLayouts = import.meta.glob('/layouts/*.jsx')
+
+appLayouts['/layouts/default.jsx'] ??= DefaultLayout
+
+export default Object.fromEntries(
+  Object.keys(appLayouts).map((path) => {
+    const name = path.slice(9, -4)
+    return [name, lazy(appLayouts[path])]
+  }),
+)

package/virtual/mount.js

@@ -0,0 +1,47 @@
+import Head from 'unihead/client'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+
+import create from '/dx:create.jsx'
+import routesPromise from '/dx:routes.js'
+
+mount('main')
+
+async function mount (target) {
+  if (typeof target === 'string') {
+    target = document.querySelector(target)
+  }
+  const context = await import('/dx:context.js')
+  const ctxHydration = await extendContext(window.route, context)
+  const head = new Head(window.route.head, window.document)
+  const resolvedRoutes = await routesPromise
+  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)
+  }
+}
+
+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/mount.ts

@@ -0,0 +1,47 @@
+import Head from 'unihead/client'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+
+import create from '/dx:create.tsx'
+import routesPromise from '/dx:routes.js'
+
+mount('main')
+
+async function mount (target) {
+  if (typeof target === 'string') {
+    target = document.querySelector(target)
+  }
+  const context = await import('/dx:context.ts')
+  const ctxHydration = await extendContext(window.route, context)
+  const head = new Head(window.route.head, window.document)
+  const resolvedRoutes = await routesPromise
+  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)
+  }
+}
+
+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/resource.js

@@ -0,0 +1,68 @@
+
+const fetchMap = new Map()
+const resourceMap = new Map()
+
+export function waitResource (path, id, promise) {
+  const resourceId = `${path}:${id}`
+  const loader = resourceMap.get(resourceId)
+  if (loader) {
+    if (loader.error) {
+      throw loader.error
+    }
+    if (loader.suspended) {
+      throw loader.promise
+    }
+    resourceMap.delete(resourceId)
+
+    return loader.result
+  } else {
+    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) {
+  const loader = fetchMap.get(path)
+  if (loader) {
+    if (loader.error || loader.data?.statusCode === 500) {
+      if (loader.data?.statusCode === 500) {
+        throw new Error(loader.data.message)
+      }
+      throw loader.error
+    }
+    if (loader.suspended) {
+      throw loader.promise
+    }
+    fetchMap.delete(path)
+
+    return loader.data
+  } else {
+    const loader = {
+      suspended: true,
+      error: null,
+      data: null,
+      promise: null,
+    }
+    loader.promise = fetch(`/-/data${path}`)
+      .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)
+  }
+}

package/virtual/root.jsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import { Router, DXRoute } from '/dx:core.jsx'
+
+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={
+                <DXRoute
+                  head={head}
+                  ctxHydration={ctxHydration}
+                  ctx={routeMap[path]}>
+                  <Component />
+                </DXRoute>
+              } />,
+          )
+        }</Routes>
+      </Router>
+    </Suspense>
+  )
+}

package/virtual/root.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import { Router, DXRoute } from '/dx:core.jsx'
+
+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={
+                <DXRoute
+                  head={head}
+                  ctxHydration={ctxHydration}
+                  ctx={routeMap[path]}>
+                  <Component />
+                </DXRoute>
+              } />,
+          )
+        }</Routes>
+      </Router>
+    </Suspense>
+  )
+}

package/virtual/routes.js

@@ -0,0 +1,121 @@
+/* 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 (from) {
+  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, routeModule) {
+  // const isServer = typeof process !== 'undefined'
+  if (typeof routeModule === 'function') {
+    routeModule = await routeModule()
+    return getRouteModuleExports(routeModule)
+  } else {
+    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 function () {
+    if (!func[kFuncExecuted]) {
+      func[kFuncValue] = await func()
+      func[kFuncExecuted] = true
+    }
+    return func[kFuncValue]
+  }
+}