@fastify/react 0.5.0 → 0.6.0

package/index.js

@@ -14,6 +14,9 @@ import * as devalue from 'devalue'
 // <title>, <meta> and <link> elements
 import Head from 'unihead'
 
+// Used for removing <script> tags when serverOnly is enabled
+import { HTMLRewriter } from 'html-rewriter-wasm'
+
 // Helpers from the Node.js stream library to
 // make it easier to work with renderToPipeableStream()
 import {
@@ -27,13 +30,14 @@ import RouteContext from './server/context.js'
 
 export default {
   prepareClient,
+  prepareServer,
   createHtmlFunction,
   createRenderFunction,
   createRouteHandler,
   createRoute,
 }
 
-export async function prepareClient({
+async function prepareClient({
   routes: routesPromise,
   context: contextPromise,
   ...others
@@ -44,17 +48,15 @@ export async function prepareClient({
 }
 
 // The return value of this function gets registered as reply.html()
-export function createHtmlFunction(source, scope, config) {
+async 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 [soHeadSource, soFooterSource] = (await removeModules(source)).split(
+    '<!-- element -->',
+  )
   const soHeadTemplate = createHtmlTemplateFunction(soHeadSource)
   const soFooterTemplate = createHtmlTemplateFunction(soFooterSource)
   // This function gets registered as reply.html()
@@ -93,7 +95,7 @@ export function createHtmlFunction(source, scope, config) {
   }
 }
 
-export async function createRenderFunction({ routes, create }) {
+async function createRenderFunction({ routes, create }) {
   // create is exported by client/index.js
   return (req) => {
     // Create convenience-access routeMap
@@ -117,14 +119,37 @@ export async function createRenderFunction({ routes, create }) {
   }
 }
 
-export function createRouteHandler({ client }, scope, config) {
+function createRouteHandler({ client }, scope, config) {
   return (req, reply) => {
     reply.html(reply.render(req))
     return reply
   }
 }
 
-export function createRoute(
+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 createRoute(
   { client, handler, errorHandler, route },
   scope,
   config,
@@ -138,6 +163,11 @@ export function createRoute(
       client.context,
     )
   }
+
+  if (route.configure) {
+    await route.configure(scope)
+  }
+
   if (route.getData) {
     // If getData is provided, register JSON endpoint for it
     scope.get(`/-/data${route.path}`, {
@@ -189,3 +219,31 @@ export function createRoute(
     ...route,
   })
 }
+
+async function removeModules(html) {
+  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/package.json

@@ -3,7 +3,7 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "files": [
     "virtual/create.jsx",
     "virtual/root.jsx",
@@ -25,12 +25,15 @@
     "./plugin": "./plugin.cjs"
   },
   "dependencies": {
+    "@fastify/vite": "^6.0.5",
+    "acorn-strip-function": "^1.2.0",
     "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",
+    "react-router-dom": "^6",
     "unihead": "latest",
     "valtio": "latest"
   },

package/plugin.cjs

@@ -1,8 +1,9 @@
 const { readFileSync, existsSync } = require('fs')
 const { dirname, join, resolve } = require('path')
 const { fileURLToPath } = require('url')
+const stripFunction = require('acorn-strip-function')
 
-function viteReactFastifyDX(config = {}) {
+function viteFastifyReact(config = {}) {
   const prefix = /^\/:/
   const routing = Object.assign(
     {
@@ -100,11 +101,15 @@ function viteReactFastifyDX(config = {}) {
         return id
       }
     },
-    load(id) {
+    load(id, options) {
+      if (!options?.ssr && !id.startsWith('/:') && id.match(/.(j|t)sx$/)) {
+        const source = readFileSync(id, 'utf8')
+        return stripFunction(stripFunction(source, 'configure'), 'getData')
+      }
       const [, virtual] = id.split(prefix)
       return loadVirtualModule(virtual)
     },
   }
 }
 
-module.exports = viteReactFastifyDX
+module.exports = viteFastifyReact

package/server/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/virtual/core.jsx

@@ -20,6 +20,30 @@ export function useRouteContext() {
   return routeContext
 }
 
+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({ head, ctxHydration, ctx, children }) {
   // If running on the server, assume all data
   // functions have already ran through the preHandler hook
@@ -62,6 +86,7 @@ export function AppRoute({ head, ctxHydration, ctx, children }) {
   // 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
@@ -69,7 +94,7 @@ export function AppRoute({ head, ctxHydration, ctx, children }) {
     try {
       const { pathname, search } = location
       // If not, fetch data from the JSON endpoint
-      ctx.data = waitFetch(`${pathname}${search}`)
+      ctx.data = waitFetch(`/-/data${pathname}${search}`)
     } catch (status) {
       // If it's an actual error...
       if (status instanceof Error) {

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/routes.js

@@ -93,6 +93,7 @@ function getRouteModuleExports(routeModule) {
     streaming: routeModule.streaming,
     clientOnly: routeModule.clientOnly,
     serverOnly: routeModule.serverOnly,
+    ...routeModule,
   }
 }