release: @fastify/[email protected] (#254)

Author: galvez

packages/fastify-react/context.js

@@ -1,3 +1,5 @@
+import { createHead } from '@unhead/react/server'
+
 const routeContextInspect = Symbol.for('nodejs.util.inspect.custom')
 
 export default class RouteContext {
@@ -15,10 +17,12 @@ export default class RouteContext {
   }
 
   constructor(server, req, reply, route) {
+    this.app = null
     this.server = server
     this.req = req
     this.reply = reply
     this.head = {}
+    this.useHead = createHead()
     this.actionData = {}
     this.state = null
     this.data = route.data
@@ -46,6 +50,7 @@ export default class RouteContext {
       actionData: this.actionData,
       state: this.state,
       data: this.data,
+      head: this.head,
       layout: this.layout,
       getMeta: this.getMeta,
       getData: this.getData,

packages/fastify-react/package.json

@@ -6,7 +6,7 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "files": [
     "plugin/index.js",
     "plugin/parsers.js",
@@ -24,6 +24,16 @@
     "virtual/resource.js",
     "virtual/root.jsx",
     "virtual/routes.js",
+    "virtual-ts/layouts/default.tsx",
+    "virtual-ts/context.ts",
+    "virtual-ts/core.tsx",
+    "virtual-ts/create.tsx",
+    "virtual-ts/index.ts",
+    "virtual-ts/layouts.ts",
+    "virtual-ts/mount.ts",
+    "virtual-ts/resource.ts",
+    "virtual-ts/root.tsx",
+    "virtual-ts/routes.ts",
     "client.js",
     "context.js",
     "index.js",
@@ -41,6 +51,7 @@
   },
   "dependencies": {
     "@fastify/vite": "workspace:^",
+    "@unhead/react": "^2.0.8",
     "acorn": "^8.14.1",
     "acorn-strip-function": "^1.2.0",
     "acorn-walk": "^8.3.4",
@@ -52,7 +63,6 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.5.0",
-    "unihead": "latest",
     "valtio": "latest",
     "youch": "^3.3.4"
   },

packages/fastify-react/plugin/index.js

@@ -12,26 +12,18 @@ import { closeBundle } from './preload.js'
 import { parseStateKeys } from './parsers.js'
 import { generateStores } from './stores.js'
 
-export default function viteFastifyReactPlugin () {
+export default function viteFastifyReactPlugin ({ ts } = {}) {
   const context = {
     root: null,
   }
   return [viteFastify({
-    clientModule: '$app/index.js'
+    clientModule: ts ? '$app/index.ts' : '$app/index.js'
   }), {
-    name: 'vite-plugin-fastify-react',
+    // https://vite.dev/guide/api-plugin#conventions
+    name: 'vite-plugin-react-fastify',
     config,
     configResolved: configResolved.bind(context),
     resolveId: resolveId.bind(context),
-    configEnvironment (name, config, { mode }) {
-      if (mode === 'production') {
-        config.build.minify = true
-        config.build.sourcemap = false
-      }
-      if (name === 'ssr') {
-        config.build.manifest = false
-      }
-    },
     async load (id) {
       if (id.includes('?server') && !this.environment.config.build?.ssr) {
         const source = loadSource(id)
@@ -44,14 +36,6 @@ export default function viteFastifyReactPlugin () {
       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)
         }
       }

packages/fastify-react/plugin/preload.js

@@ -1,5 +1,5 @@
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs'
-import { join, parse as parsePath } from 'node:path'
+import { join, isAbsolute, parse as parsePath } from 'node:path'
 import { HTMLRewriter } from 'html-rewriter-wasm'
 
 const imageFileRE = /\.((png)|(jpg)|(svg)|(webp)|(gif))$/
@@ -10,13 +10,18 @@ export async function closeBundle(resolvedBundle) {
   }
   const { assetsInlineLimit } = this.environment.config.build
   const { root, base } = this.environment.config
-  const distDir = join(root, this.environment.config.build.outDir)
+  let distDir
+  if (isAbsolute(this.environment.config.build.outDir)) {
+    distDir = this.environment.config.build.outDir
+  } else {
+    distDir = join(root, this.environment.config.build.outDir)
+  }
   const indexHtml = readFileSync(join(distDir, 'index.html'), 'utf8')
   const pages = Object.fromEntries(
     Object.entries(resolvedBundle ?? {})
       .filter(([id, meta]) => {
         if (meta.facadeModuleId?.includes('/pages/')) {
-          meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.jsx$/, 'html/$1.html')
+          meta.htmlPath = meta.facadeModuleId.replace(/.*pages\/(.*)\.(j|t)sx$/, 'html/$1.html')
           return true
         }
       })

packages/fastify-react/plugin/virtual.js

@@ -6,6 +6,7 @@ import { findExports } from 'mlly'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const virtualRoot = resolve(__dirname, '..', 'virtual')
+const virtualRootTS = resolve(__dirname, '..', 'virtual-ts')
 
 const virtualModules = [
   'mount.js',
@@ -20,6 +21,19 @@ const virtualModules = [
   'index.js',
 ]
 
+const virtualModulesTS = [
+  'mount.ts',
+  'resource.ts',
+  'routes.ts',
+  'layouts.ts',
+  'create.tsx',
+  'root.tsx',
+  'layouts/',
+  'context.ts',
+  'core.tsx',
+  'index.ts',
+]
+
 export const prefix = /^\/?\$app\//
 
 export async function resolveId (id) {
@@ -42,19 +56,34 @@ export async function resolveId (id) {
 
 export function loadVirtualModule (virtualInput) {
   let virtual = virtualInput
-  if (!/\.((mc)?ts)|((mc)?js)|(jsx)$/.test(virtual)) {
-    virtual += '.js'
-  }
-  if (!virtualModules.includes(virtual)) {
+  if (!virtualModules.includes(virtual) && !virtualModulesTS.includes(virtual)) {
     return
   }
-  const code = readFileSync(resolve(virtualRoot, virtual), 'utf8')
+  let virtualRootDir = virtualRoot
+  if (virtualInput.match(/\.tsx?$/)) {
+    virtualRootDir = virtualRootTS
+  }
+  const codePath = resolve(virtualRootDir, virtual)
   return {
-    code,
+    code: readFileSync(codePath, 'utf8'),
     map: null,
   }
 }
 
+
+virtualModulesTS.includes = function (virtual) {
+  if (!virtual) {
+    return false
+  }
+  for (const entry of this) {
+    if (virtual.startsWith(entry)) {
+      return true
+    }
+  }
+  return false
+}
+
+
 virtualModules.includes = function (virtual) {
   if (!virtual) {
     return false
@@ -67,11 +96,16 @@ virtualModules.includes = function (virtual) {
   return false
 }
 
-function loadVirtualModuleOverride (viteProjectRoot, virtual) {
-  if (!virtualModules.includes(virtual)) {
+function loadVirtualModuleOverride (viteProjectRoot, virtualInput) {
+  let virtual = virtualInput
+  if (!virtualModules.includes(virtual) && !virtualModulesTS.includes(virtual)) {
     return
   }
-  const overridePath = resolve(viteProjectRoot, virtual)
+  let overridePath = resolve(viteProjectRoot, virtual) 
+  if (existsSync(overridePath)) {
+    return overridePath
+  }
+  overridePath = overridePath.replace('.js', '.ts')
   if (existsSync(overridePath)) {
     return overridePath
   }

packages/fastify-react/rendering.js

@@ -6,7 +6,7 @@ import { Minipass } from 'minipass'
 // 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 { transformHtmlTemplate } from '@unhead/react/server'
 import { createHtmlTemplates } from './templating.js'
 
 // Helper function to get an AsyncIterable (via PassThrough)
@@ -46,6 +46,7 @@ export function onAllReady(app) {
 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) {
@@ -80,6 +81,7 @@ export async function createHtmlFunction (source, _, config) {
   return async function () {
     const { routes, context, body } = await this.render()
 
+    context.useHead.push(context.head)
     this.type('text/html')
 
     // Use template with client module import removed
@@ -116,24 +118,35 @@ export async function createHtmlFunction (source, _, config) {
   }
 }
 
-export function sendClientOnlyShell (templates, context, body) {
-  context.head = new Head(context.head).render()
-  return `${
-    templates.beforeElement(context)
-  }${
-    templates.afterElement(context)
-  }`
+export async function sendClientOnlyShell (templates, context) {
+  return await transformHtmlTemplate(
+    context.useHead,
+    `${
+      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)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.beforeElement(context)
+  )
+
   for await (const chunk of body) {
-    yield chunk
+    yield await transformHtmlTemplate(
+      context.useHead,
+      chunk.toString()
+    )
   }
-  yield templates.afterElement(context)
+  yield await transformHtmlTemplate(
+    context.useHead,
+    templates.afterElement(context)
+  )
 }

packages/fastify-react/routing.js

@@ -1,5 +1,5 @@
 import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { join, isAbsolute } from 'node:path'
 import Youch from 'youch'
 import RouteContext from './context.js'
 import { createHtmlFunction } from './rendering.js'
@@ -111,8 +111,12 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
     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 htmlPath = id.replace(/pages\/(.*?)\.(j|t)sx/, 'html/$1.html')
+    let distDir = config.vite.build.outDir
+    if (!isAbsolute(config.vite.build.outDir)) {
+      distDir = join(config.vite.root, distDir)
+    }
+    const htmlSource = readFileSync(join(distDir, htmlPath), 'utf8')
     const htmlFunction = await createHtmlFunction(htmlSource, scope, config)
     handler = (_, reply) => htmlFunction.call(reply)
   }

packages/fastify-react/server.js

@@ -39,7 +39,7 @@ export function prepareServer(server) {
   })
 }
 
-export async function createRoutes (fromPromise, { param } = { param: /\[([\.\w]+\+?)\]/ }) {
+export async function createRoutes (fromPromise, { param } = { param: /\[([.\w]+\+?)\]/ }) {
   const { default: from } = await fromPromise
   const importPaths = Object.keys(from)
   const promises = []

packages/fastify-react/virtual-ts/context.ts

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