@fastify/react 0.5.0 → 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Jonas Galvez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client.js

@@ -0,0 +1,44 @@
+import { createContext, useContext, lazy } from 'react'
+import { useSnapshot } from 'valtio'
+
+export const RouteContext = createContext({})
+export const isServer = typeof window === 'undefined' && typeof process === 'object'
+
+export function useRouteContext() {
+  const routeContext = useContext(RouteContext)
+  if (routeContext.state) {
+    routeContext.snapshot = isServer
+      ? routeContext.state ?? {}
+      : useSnapshot(routeContext.state ?? {})
+  }
+  return routeContext
+}
+
+export 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 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]
+  }
+}

package/{server/context.js → context.js}

@@ -19,6 +19,7 @@ export default class RouteContext {
     this.req = req
     this.reply = reply
     this.head = {}
+    this.actionData = {}
     this.state = null
     this.data = route.data
     this.firstRender = true
@@ -42,6 +43,7 @@ export default class RouteContext {
 
   toJSON() {
     return {
+      actionData: this.actionData,
       state: this.state,
       data: this.data,
       layout: this.layout,

package/index.js

@@ -1,191 +1,16 @@
-// Used to send a readable stream to reply.send()
-import { Readable } from 'stream'
+export {
+  prepareServer,
+} from './server.js'
 
-// 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/utils'
-
-// Used to safely serialize JavaScript into
-// <script> tags, preventing a few types of attack
-import * as 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 {
+export {
   prepareClient,
-  createHtmlFunction,
-  createRenderFunction,
-  createRouteHandler,
+  createErrorHandler,
   createRoute,
-}
-
-export async function prepareClient({
-  routes: routesPromise,
-  context: contextPromise,
-  ...others
-}) {
-  const context = await contextPromise
-  const resolvedRoutes = await routesPromise
-  return { context, routes: resolvedRoutes, ...others }
-}
+} from './routing.js'
 
-// 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>\nwindow.route = ${devalue.uneval(
-                context.toJSON(),
-              )}\nwindow.routes = ${devalue.uneval(
-                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 (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 (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)
+export {
+  createRenderFunction,
+  createHtmlFunction,
+} from './rendering.js'
 
-  scope.route({
-    url: route.path,
-    method: ['GET', 'POST', 'PUT', 'DELETE'],
-    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,
-  })
-}
+export const clientModule = '$app/index.js'

package/package.json

@@ -3,43 +3,76 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "0.5.0",
+  "version": "1.0.0-beta.1",
   "files": [
-    "virtual/create.jsx",
-    "virtual/root.jsx",
-    "virtual/layouts.js",
+    "plugin/index.js",
+    "plugin/parsers.js",
+    "plugin/parsers.test.js",
+    "plugin/preload.js",
+    "plugin/stores.js",
+    "plugin/virtual.js",
     "virtual/layouts/default.jsx",
     "virtual/context.js",
+    "virtual/core.jsx",
+    "virtual/create.jsx",
+    "virtual/index.jsx",
+    "virtual/layouts.js",
     "virtual/mount.js",
     "virtual/resource.js",
-    "virtual/core.jsx",
+    "virtual/root.jsx",
     "virtual/routes.js",
+    "client.js",
+    "context.js",
     "index.js",
-    "plugin.cjs",
-    "server/context.js",
-    "server/stream.js"
+    "rendering.js",
+    "routing.js",
+    "server.js",
+    "templating.js"
   ],
   "license": "MIT",
   "exports": {
     ".": "./index.js",
-    "./plugin": "./plugin.cjs"
+    "./plugin": "./plugin/index.js",
+    "./client": "./client.js",
+    "./server": "./server.js"
   },
   "dependencies": {
+    "acorn": "^8.14.1",
+    "acorn-strip-function": "^1.2.0",
+    "acorn-walk": "^8.3.4",
     "devalue": "latest",
     "history": "latest",
+    "html-rewriter-wasm": "^0.4.1",
     "minipass": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "latest",
+    "mlly": "^1.7.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.5.0",
+    "react-router-dom": "^7.5.0",
     "unihead": "latest",
-    "valtio": "latest"
+    "valtio": "latest",
+    "youch": "^3.3.4",
+    "@fastify/vite": "^8.0.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.5.3"
+    "@biomejs/biome": "^1.9.2"
   },
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fastify/fastify-vite.git"
+  },
+  "keywords": [
+    "fastify",
+    "vite",
+    "react"
+  ],
+  "bugs": {
+    "url": "https://github.com/fastify/fastify-vite/issues"
+  },
+  "homepage": "https://fastify-vite.dev/react/",
   "scripts": {
     "lint": "biome check --apply-unsafe ."
   }

package/plugin/index.js

@@ -0,0 +1,102 @@
+import { readFileSync, existsSync } from 'node:fs'
+import { join } from 'node:path'
+import viteFastify from '@fastify/vite/plugin'
+import {
+  prefix,
+  resolveId,
+  loadSource,
+  loadVirtualModule,
+  createPlaceholderExports
+} from './virtual.js'
+import { closeBundle } from './preload.js'
+import { parseStateKeys } from './parsers.js'
+import { generateStores } from './stores.js'
+
+export default function viteFastifyVue () {
+  const context = {
+    root: null,
+  }
+  return [viteFastify({
+    clientModule: '$app/index.js'
+  }), {
+    name: 'vite-plugin-fastify-react',
+    config,
+    configResolved: configResolved.bind(context),
+    resolveId: resolveId.bind(context),
+    async load (id) {
+      if (id.includes('?server') && !context.resolvedConfig.build.ssr) {
+        const source = loadSource(id)
+        return createPlaceholderExports(source)
+      }
+      if (id.includes('?client') && context.resolvedConfig.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)
+        }
+      }
+    },
+    transformIndexHtml: {
+      order: 'post',
+      handler: transformIndexHtml.bind(context)
+    },
+    closeBundle: closeBundle.bind(context),
+  }]
+}
+
+function transformIndexHtml (html, { bundle }) {
+  if (!bundle) {
+    return
+  }
+  this.indexHtml = html
+  this.resolvedBundle = bundle
+}
+
+function configResolved (config) {
+  this.resolvedConfig = config
+  this.root = config.root
+}
+
+function config (config, { command }) {
+  if (command === 'build') {
+    if (!config.build) {
+      config.build = {}
+    }
+    if (!config.build.rollupOptions) {
+      config.build.rollupOptions = {}
+    }
+    config.build.rollupOptions.onwarn = onwarn
+  }
+}
+
+function onwarn (warning, rollupWarn) {
+  if (
+    !(
+      warning.code == 'MISSING_EXPORT' &&
+      warning.message?.includes?.('"scrollBehavior" is not exported')
+    )
+    &&
+    !(
+      warning.code == 'PLUGIN_WARNING' &&
+      warning.message?.includes?.('dynamic import will not move module into another chunk')
+    )
+    &&
+    !(
+      warning.code == 'UNUSED_EXTERNAL_IMPORT' &&
+      warning.exporter === 'vue'
+    )
+  ) {
+    rollupWarn(warning)
+  }
+}

package/plugin/parsers.js

@@ -0,0 +1,42 @@
+import * as acorn from 'acorn'
+import * as walk from 'acorn-walk'
+
+export function parseStateKeys (code) {
+  const ast = acorn.parse(code, { sourceType: 'module', ecmaVersion: 2020 })
+
+  let objectKeys = []
+
+  walk.simple(ast, {
+    ExportNamedDeclaration(node) {
+      if (node.declaration.type === 'FunctionDeclaration') {
+        for (const subNode of node.declaration.body.body) {
+          if (subNode.type === 'ReturnStatement' && subNode.argument.type === 'ObjectExpression') {
+            objectKeys = extractObjectKeys(subNode.argument)
+          }
+        }
+      } else if (node.declaration.type === 'VariableDeclaration') {
+        for (const subNode of node.declaration.declarations) {
+          if (
+            subNode.type === 'VariableDeclarator' &&
+            subNode.init.type === 'ArrowFunctionExpression' &&
+            subNode.init.body.type === 'ObjectExpression'
+          ) {
+            objectKeys = extractObjectKeys(subNode.init.body)
+          }
+        }
+      }
+    }
+  })
+
+  return objectKeys
+}
+
+function extractObjectKeys(node) {
+  const keys = []
+  for (const prop of node.properties) {
+    if (prop.key && prop.key.type === 'Identifier') {
+      keys.push(prop.key.name)
+    }
+  }
+  return keys
+}

package/plugin/parsers.test.js

@@ -0,0 +1,28 @@
+import test from 'node:test'
+import assert from 'node:assert'
+
+test('parseStateKeys', (t) => {
+  const a = `export function state () {
+    return {
+      user: {
+        authenticated: false,
+      },
+      todoList: null,
+    }
+  }`
+  assert.equal(['user', 'todoList'], parseStateKeys(a))
+
+  const b = `export const state = () => ({
+    user: {
+      authenticated: false,
+    },
+    todoList: null,
+  })
+  if (1) {
+    const state = () => {
+
+    }
+  }
+  `;
+  assert.equal(['user', 'todoList'], parseStateKeys(b))
+})

package/plugin/preload.js

@@ -0,0 +1,75 @@
+import { writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { join, parse as parsePath } from 'node:path'
+import { HTMLRewriter } from 'html-rewriter-wasm'
+
+const imageFile = /\.((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)
+    }
+  }
+}
+
+async function appendHead (html, ...tags) {
+  const encoder = new TextEncoder()
+  const decoder = new TextDecoder()
+  let output = ''
+  const rewriter = new HTMLRewriter((outputChunk) => {
+    output += decoder.decode(outputChunk)
+  })
+  rewriter.on('head', {
+    element(element) {
+      element.prepend(tags.join('\n  '), { html: true })
+    },
+  })
+  try {
+    await rewriter.write(encoder.encode(html))
+    await rewriter.end()
+    return output
+  } finally {
+    rewriter.free()
+  }
+}
+
+function writeHtml(page, pageHtml, distDir) {
+  const { dir, base } = parsePath(page.htmlPath)
+  const htmlDir = join(distDir, dir)
+  if (!existsSync(htmlDir)) {
+    mkdirSync(htmlDir, { recursive: true })
+  }
+  writeFileSync(join(htmlDir, base), pageHtml)
+}

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
+  }
+}