feat!: support static loader

Squashed commit of the following:

commit 6986a88
Author: Riri <Daydreamerriri@outlook.com>
Date:   Thu Jul 25 03:00:00 2024 +0800

    chore: update demo

commit 7e8fc2a
Author: Riri <Daydreamerriri@outlook.com>
Date:   Thu Jul 25 01:07:38 2024 +0800

    chore: release v0.7.0-beta.1

commit b6ff813
Author: Riri <Daydreamerriri@outlook.com>
Date:   Wed Jul 24 21:04:35 2024 +0800

    feat: server loader on dev

commit 94ad60a
Author: Riri <Daydreamerriri@outlook.com>
Date:   Tue Jul 23 17:06:08 2024 +0800

    feat: static loader data on prod

commit cbe7157
Author: Riri <Daydreamerriri@outlook.com>
Date:   Tue Jul 23 09:24:45 2024 +0800

    feat: manifest

Author: Daydreamer-riri

examples/with-loader/src/main.tsx

@@ -10,6 +10,7 @@ const routes: RouteRecord[] = [
     entry: 'src/pages/index.tsx',
   },
   {
+    id: 'doc?s',
     path: '/docs/:docs',
     lazy: () => import('./pages/[docs]'),
   },
@@ -25,4 +26,4 @@ const routesWithLayout = [{
   children: routes,
 }]
 
-export const createRoot = ViteReactSSG({ routes: routesWithLayout })
+export const createRoot = ViteReactSSG({ routes: routesWithLayout, basename: import.meta.env.BASE_URL })

examples/with-loader/src/pages/[docs].tsx

@@ -1,12 +1,18 @@
+/* eslint-disable no-console */
 import type { Params } from 'react-router-dom'
-import { useLoaderData } from 'react-router-dom'
+import { Link, useLoaderData, useParams } from 'react-router-dom'
 
 export default function Docs() {
   const doc = useLoaderData() as string
+  const { docs } = useParams()
+  const anotherPage = docs === 'a' ? 'b' : 'a'
 
   return (
-    // eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
-    <div dangerouslySetInnerHTML={{ __html: doc }} />
+    <>
+      {/* eslint-disable-next-line react-dom/no-dangerously-set-innerhtml */}
+      <div dangerouslySetInnerHTML={{ __html: doc }} />
+      <Link to={`/docs/${anotherPage}`}>{anotherPage}</Link>
+    </>
   )
 }
 
@@ -15,6 +21,7 @@ export const Component = Docs
 export const entry = 'src/pages/[docs].tsx'
 
 export async function loader({ params }: { params: Params<string> }) {
+  console.log('🚀 ~ loader ~ params:', params)
   const doc = await import(`../docs/${params.docs}.md`)
   const { renderToString } = await import('react-dom/server')
   const html = renderToString(<doc.default />)

examples/with-loader/src/pages/index.tsx

@@ -11,9 +11,9 @@ export default function Index() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <Link to="/docs/a">TO A</Link>
-        {' '}
-        <Link to="/docs/b">TO B</Link>
+        <Link style={{ display: 'block' }} to="/docs/a">TO A</Link>
+        <Link style={{ display: 'block' }} to="/docs/b">TO B</Link>
+        <Link style={{ display: 'block' }} to="/json">TO JSON</Link>
       </div>
     </>
   )

examples/with-loader/src/pages/json.tsx

@@ -1,10 +1,13 @@
 import { useLoaderData } from 'react-router-dom'
 
 export default function Docs() {
-  const json = useLoaderData() as typeof import('../docs/test.json')
+  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>
 
   return (
-    <div>{json.key}</div>
+    <>
+      <div>{data.key}</div>
+      <pre>{data.packageJson}</pre>
+    </>
   )
 }
 
@@ -14,7 +17,13 @@ export const entry = 'src/pages/json.tsx'
 
 export async function loader() {
   // If you use `import('../docs/test.json?raw')`, it will return a JSON string.
+  const fs = (await import('node:fs'))
+  const cwd = process.cwd()
   const json = (await import('../docs/test.json')).default
+  const packageJson = await fs.promises.readFile(`${cwd}/package.json`, 'utf-8')
 
-  return json
+  return {
+    ...json,
+    packageJson,
+  }
 }

examples/with-loader/tsconfig.json

@@ -11,7 +11,8 @@
     "resolveJsonModule": true,
 
     "types": [
-      "vite/client"
+      "vite/client",
+      "@types/node",
     ],
     "allowImportingTsExtensions": true,
     /* Linting */

examples/with-loader/vite.config.ts

@@ -4,6 +4,7 @@ import mdx from '@mdx-js/rollup'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '/with-loader/',
   plugins: [
     mdx(),
     react(),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.7.0-beta.1",
   "packageManager": "pnpm@9.4.0",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",

src/client/index.tsx

@@ -2,9 +2,11 @@ import React from 'react'
 import { createRoot as ReactDOMCreateRoot, hydrateRoot } from 'react-dom/client'
 import { HelmetProvider } from 'react-helmet-async'
 import { RouterProvider, createBrowserRouter, matchRoutes } from 'react-router-dom'
-import type { RouterOptions, ViteReactSSGClientOptions, ViteReactSSGContext } from '../types'
+import type { RouteRecord, RouterOptions, ViteReactSSGClientOptions, ViteReactSSGContext } from '../types'
 import { documentReady } from '../utils/document-ready'
 import { deserializeState } from '../utils/state'
+import { joinUrlSegments, stripBase, withLeadingSlash } from '../utils/path'
+import { convertRoutesToDataRoutes } from '../utils/remix-router'
 
 export * from '../types'
 
@@ -28,7 +30,7 @@ export function ViteReactSSG(
   const BASE_URL = routerOptions.basename ?? '/'
 
   async function createRoot(client = false, routePath?: string) {
-    const browserRouter = client ? createBrowserRouter(routerOptions.routes, { basename: BASE_URL }) : undefined
+    const browserRouter = client ? createBrowserRouter(convertRoutesToDataRoutes(routerOptions.routes, transformStaticLoaderRoute), { basename: BASE_URL }) : undefined
 
     const appRenderCallbacks: Function[] = []
     const onSSRAppRendered = client
@@ -122,6 +124,45 @@ export function ViteReactSSG(
   }
 
   return createRoot
+
+  function transformStaticLoaderRoute(route: RouteRecord) {
+    const loader: RouteRecord['loader'] = async ({ request }) => {
+      if (import.meta.env.DEV) {
+        const routeId = encodeURIComponent(route.id!)
+        const dataQuery = `_data=${routeId}`
+        const url = request.url.includes('?') ? `${request.url}&${dataQuery}` : `${request.url}?${dataQuery}`
+        return fetch(url)
+      }
+      else {
+        let staticLoadData: any
+        if (window.__VITE_REACT_SSG_STATIC_LOADER_DATA__) {
+          staticLoadData = window.__VITE_REACT_SSG_STATIC_LOADER_DATA__
+        }
+        else {
+          const manifestUrl = joinUrlSegments(BASE_URL, `static-loader-data-manifest-${window.__VITE_REACT_SSG_HASH__}.json`)
+          staticLoadData = await (await fetch(withLeadingSlash(manifestUrl))).json()
+          window.__VITE_REACT_SSG_STATIC_LOADER_DATA__ = staticLoadData
+        }
+
+        const { url } = request
+        let { pathname } = new URL(url)
+        if (BASE_URL !== '/') {
+          pathname = stripBase(pathname, BASE_URL)
+        }
+        const routeData = staticLoadData?.[pathname]?.[route.id!]
+        return routeData ?? null
+      }
+    }
+    route.loader = loader
+    return route
+  }
+}
+
+declare global {
+  interface Window {
+    __VITE_REACT_SSG_STATIC_LOADER_DATA__: any
+    __VITE_REACT_SSG_HASH__: string
+  }
 }
 
 export { default as Head } from './components/Head'

src/node/build.ts

@@ -5,15 +5,16 @@ import { blue, cyan, dim, gray, green, red, yellow } from 'kolorist'
 import PQueue from 'p-queue'
 import fs from 'fs-extra'
 import type { InlineConfig } from 'vite'
-import { mergeConfig, resolveConfig, build as viteBuild, version as viteVersion } from 'vite'
+import { createLogger, mergeConfig, resolveConfig, build as viteBuild, version as viteVersion } from 'vite'
 import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
 import { JSDOM } from 'jsdom'
 import type { RouteRecord, ViteReactSSGContext, ViteReactSSGOptions } from '../types'
 import { serializeState } from '../utils/state'
-import { buildLog, createRequest, getSize, removeLeadingSlash, resolveAlias, routesToPaths, withTrailingSlash } from './utils'
+import { removeLeadingSlash, withTrailingSlash } from '../utils/path'
+import { buildLog, createRequest, getSize, resolveAlias, routesToPaths } from './utils'
 import { getCritters } from './critial'
 import { render } from './server'
-import { detectEntry, renderHTML } from './html'
+import { SCRIPT_COMMENT_PLACEHOLDER, detectEntry, renderHTML } from './html'
 import { renderPreloadLinks } from './preload-links'
 
 export type SSRManifest = Record<string, string[]>
@@ -27,6 +28,8 @@ export interface ManifestItem {
 
 export type Manifest = Record<string, ManifestItem>
 
+export type StaticLoaderDataManifest = Record<string, Record<string, unknown> | undefined>
+
 export type CreateRootFactory = (client: boolean, routePath?: string) => Promise<ViteReactSSGContext<true> | ViteReactSSGContext<false>>
 
 function DefaultIncludedRoutes(paths: string[], _routes: Readonly<RouteRecord[]>) {
@@ -39,7 +42,8 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   const config = await resolveConfig(viteConfig, 'build', mode, mode)
   const cwd = process.cwd()
   const root = config.root || cwd
-  const ssgOut = join(root, '.vite-react-ssg-temp', Math.random().toString(36).substring(2, 12))
+  const hash = Math.random().toString(36).substring(2, 12)
+  const ssgOut = join(root, '.vite-react-ssg-temp', hash)
   const outDir = config.build.outDir || 'dist'
   const out = isAbsolute(outDir) ? outDir : join(root, outDir)
   const configBase = config.base
@@ -64,6 +68,13 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   if (fs.existsSync(ssgOut))
     await fs.remove(ssgOut)
 
+  const clientLogger = createLogger()
+  const loggerWarn = clientLogger.warn
+  clientLogger.warn = (msg: string, options) => {
+    if (msg.includes('vite:resolve') && msg.includes('externalized for browser compatibility'))
+      return
+    loggerWarn(msg, options)
+  }
   // client
   buildLog('Build for client...')
   await viteBuild(mergeConfig(viteConfig, {
@@ -82,7 +93,9 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
         },
       },
     },
+    customLogger: clientLogger,
     mode: config.mode,
+    ssr: { noExternal: ['vite-react-ssg'] },
   }))
 
   if (mock) {
@@ -114,6 +127,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
       },
     },
     mode: config.mode,
+    ssr: { noExternal: ['vite-react-ssg'] },
   }))
 
   const prefix = (format === 'esm' && process.platform === 'win32') ? 'file://' : ''
@@ -153,6 +167,8 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   const queue = new PQueue({ concurrency })
   const crittersQueue = new PQueue({ concurrency: 1 })
 
+  const staticLoaderDataManifest: StaticLoaderDataManifest = {}
+
   for (const path of routesPaths) {
     queue.add(async () => {
       try {
@@ -166,7 +182,8 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
         const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`
         const request = createRequest(fetchUrl)
 
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes], request, styleCollector, base)
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], request, styleCollector, base)
+        staticLoaderDataManifest[path] = routerContext?.loaderData
 
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx)
 
@@ -188,6 +205,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
 
         const html = jsdom.serialize()
         let transformed = (await onPageRendered?.(path, html, appCtx)) || html
+        transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`)
         if (critters) {
           transformed = (await crittersQueue.add(() => critters.process(transformed)))!
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin')
@@ -220,6 +238,13 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
 
   await queue.start().onIdle()
 
+  buildLog('Generating static loader data manifest...')
+  const staticLoaderDataManifestString = JSON.stringify(staticLoaderDataManifest, null, 0)
+  await fs.writeFile(join(out, `static-loader-data-manifest-${hash}.json`), staticLoaderDataManifestString)
+  config.logger.info(
+    `${dim(`${outDir}/`)}${cyan(`static-loader-data-manifest-${hash}.json`.padEnd(15, ' '))}  ${dim(getSize(staticLoaderDataManifestString))}`,
+  )
+
   await fs.remove(join(root, '.vite-react-ssg-temp'))
 
   const pwaPlugin: VitePluginPWAAPI = config.plugins.find(i => i.name === 'vite-plugin-pwa')?.api