@fastify/react 1.0.1 → 1.0.2

package/package.json

@@ -3,7 +3,7 @@
   "main": "index.js",
   "name": "@fastify/react",
   "description": "The official @fastify/vite renderer for React",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "files": [
     "plugin/index.js",
     "plugin/parsers.js",
@@ -51,7 +51,7 @@
     "unihead": "latest",
     "valtio": "latest",
     "youch": "^3.3.4",
-    "@fastify/vite": "^8.0.2"
+    "@fastify/vite": "^8.0.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.2"

package/plugin/index.js

@@ -12,7 +12,7 @@ import { closeBundle } from './preload.js'
 import { parseStateKeys } from './parsers.js'
 import { generateStores } from './stores.js'
 
-export default function viteFastifyVue () {
+export default function viteFastifyReactPlugin () {
   const context = {
     root: null,
   }
@@ -23,12 +23,21 @@ export default function viteFastifyVue () {
     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') && !context.resolvedConfig.build.ssr) {
+      if (id.includes('?server') && !this.environment.config.build?.ssr) {
         const source = loadSource(id)
         return createPlaceholderExports(source)
       }
-      if (id.includes('?client') && context.resolvedConfig.build.ssr) {
+      if (id.includes('?client') && this.environment.config.build?.ssr) {
         const source = loadSource(id)
         return createPlaceholderExports(source)
       }
@@ -51,7 +60,9 @@ export default function viteFastifyVue () {
       order: 'post',
       handler: transformIndexHtml.bind(context)
     },
-    closeBundle: closeBundle.bind(context),
+    closeBundle () {
+      closeBundle.call(this, context.resolvedBundle)
+    },
   }]
 }
 

package/plugin/preload.js

@@ -1,46 +1,52 @@
-import { writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { readFileSync, 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))$/
+const imageFileRE = /\.((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)
+export async function closeBundle(resolvedBundle) {
+  if (this.environment.name !== 'client') {
+    return
+  }
+  const { assetsInlineLimit } = this.environment.config.build
+  const { root, base } = this.environment.config
+  const 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')
+          return true
+        }
+      })
+  )
+  for (const page of Object.values(pages)) {
+    const jsImports = page.imports
+    const cssImports = page.viteMetadata.importedCss
+    const images = page.moduleIds.filter((img) => {
+      return (page.modules[img].originalLength > assetsInlineLimit) && imageFileRE.test(img)
+    })
+    let imagePreloads = '\n'
+    for (let image of images) {
+      image = image.slice(root.length + 1)
+      imagePreloads += `  <link rel="preload" as="image" crossorigin href="${base}${image}">\n`
+    }
+    let cssPreloads = ''
+    for (const css of cssImports) {
+      cssPreloads += `  <link rel="preload" as="style" crossorigin href="${base}${css}">\n`
     }
+    let jsPreloads = ''
+    for (const js of jsImports) {
+      jsPreloads += `  <link rel="modulepreload" crossorigin href="${base}${js}">\n`
+    }
+    const pageHtml = await appendHead(
+      indexHtml,
+      imagePreloads,
+      cssPreloads,
+      jsPreloads
+    )
+    writeHtml(page, pageHtml, distDir)
   }
 }
 

package/plugin/stores.js

@@ -11,7 +11,7 @@ function storeGetter (proxy, prop) {
     return proxy.context.state[proxy.key]
   }
   let method
-  if (method = proxy.context.actions[proxy.key][prop]) {
+  if (method = proxy.context.actions?.[proxy.key]?.[prop]) {
     if (!proxy.wrappers[prop]) {
       proxy.wrappers[prop] = (...args) => {
         return method(proxy.context.state, ...args)

package/plugin/virtual.js

@@ -23,6 +23,11 @@ const virtualModules = [
 export const prefix = /^\/?\$app\//
 
 export async function resolveId (id) {
+  // Paths are prefixed with .. on Windows by the glob import
+  if (process.platform === 'win32' && /^\.\.\/[C-Z]:/.test(id)) {
+    return id.substring(3)
+  }
+
   if (prefix.test(id)) {
     const [, virtual] = id.split(prefix)
     if (virtual) {

package/routing.js

@@ -120,12 +120,13 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
   // Replace wildcard routes with Fastify compatible syntax
   const routePath = route.path.replace(/:[^+]+\+/, '*')
   
+  unshiftHook(route, 'onRequest', onRequest)
+  unshiftHook(route, 'preHandler', preHandler)
+
   scope.route({
     url: routePath,
     method: route.method ?? ['GET', 'POST', 'PUT', 'DELETE'],
     errorHandler,
-    onRequest,
-    preHandler,
     handler,
     ...route,
   })
@@ -140,3 +141,16 @@ export async function createRoute ({ client, errorHandler, route }, scope, confi
     })
   }
 }
+
+function unshiftHook (route, hookName, hook) {
+  if (!route[hookName]) {
+    route[hookName] = []
+  }
+  if (!Array.isArray(hook)) {
+    hook = [hook]
+  }
+  if (!Array.isArray(route[hookName])) {
+    route[hookName] = [route[hookName]]
+  }
+  route[hookName] = [...route[hookName], ...hook]
+}

package/server.js

@@ -117,6 +117,19 @@ function getRouteModuleExports (routeModule) {
     streaming: routeModule.streaming,
     clientOnly: routeModule.clientOnly,
     serverOnly: routeModule.serverOnly,
+    // Server configure function
+    configure: routeModule.configure,
+    // Route-level Fastify hooks
+    onRequest: routeModule.onRequest ?? undefined,
+    preParsing: routeModule.preParsing ?? undefined,
+    preValidation: routeModule.preValidation ?? undefined,
+    preHandler: routeModule.preHandler ?? undefined,
+    preSerialization: routeModule.preSerialization ?? undefined,
+    onError: routeModule.onError ?? undefined,
+    onSend: routeModule.onSend ?? undefined,
+    onResponse: routeModule.onResponse ?? undefined,
+    onTimeout: routeModule.onTimeout ?? undefined,
+    onRequestAbort: routeModule.onRequestAbort ?? undefined,
   }
 }