vite-react-ssg 0.1.2 → 0.3.0

package/README.md

@@ -4,10 +4,25 @@ Static-site generation for React on Vite.
 
 [![NPM version](https://img.shields.io/npm/v/vite-react-ssg?color=a1b858&label=)](https://www.npmjs.com/package/vite-react-ssg)
 
-## Install
+# Table of contents
+* [Usage](#usage)
+* [Extra route options](#extra-route-options)
+	* [`entry`](#entry)
+	* [`getStaticPaths`](#getstaticpaths)
+* [lazy](#lazy)
+* [`<ClientOnly/>`](#clientonly)
+* [Document head](#document-head)
+	* [Reactive head](#reactive-head)
+* [CSS in JS](#css-in-js)
+* [Critical CSS](#critical-css)
+* [Configuration](#configuration)
+	* [Custom Routes to Render](#custom-routes-to-render)
+* [Use CSR in development environment](#use-csr-in-development-environment)
+* [Roadmap](#roadmap)
+* [Credits](#credits)
+
+## Usage
 
-> **This library requires Node.js version >= 17**
-> or `Request` is available
 <pre>
 <b>npm i -D vite-react-ssg</b> <em>react-router-dom</em>
 </pre>
@@ -48,40 +63,91 @@ import React from 'react'
 import type { RouteRecord } from 'vite-react-ssg'
 import './App.css'
 
-const pages = import.meta.glob<any>('./pages/**/*.tsx')
-
-const children: RouteRecord[] = Object.entries(pages).map(([filepath, component]) => {
-  let path = filepath.split('/pages')[1]
-  path = path.split('.')[0].replace('index', '')
-  const entry = `src${filepath.slice(1)}`
-
-  if (path.endsWith('/')) {
-    return {
-      index: true,
-      Component: React.lazy(component),
-      entry,
-    }
-  }
-  return {
-    path,
-    Component: React.lazy(component),
-    // Used to obtain static resources through manifest
-    entry,
-  }
-})
-
 const Layout = React.lazy(() => import('./Layout'))
+
 export const routes: RouteRecord[] = [
   {
     path: '/',
     element: <Layout />,
-    children,
-    // Used to obtain static resources through manifest
     entry: 'src/Layout.tsx',
+    children: [
+      {
+        path: 'a',
+        Component: React.lazy(() => import('./pages/a')),
+        entry: 'src/pages/a.tsx',
+      },
+      {
+        index: true,
+        Component: React.lazy(() => import('./pages/index')),
+        // Used to obtain static resources through manifest
+        entry: 'src/pages/index.tsx',
+      },
+      {
+        path: 'nest/:b',
+        Component: React.lazy(() => import('./pages/nest/[b]')),
+        entry: 'src/pages/nest/[b].tsx',
+        // To determine which paths will be pre-rendered
+        getStaticPaths: () => ['nest/b1', 'nest/b2'],
+      },
+    ],
   },
 ]
 ```
 
+## Extra route options
+
+The RouteObject of vite-react-ssg is based on react-router, and vite-react-ssg receives some additional properties.
+
+#### `entry`
+Used to obtain static resources.If you introduce static resources (such as css files) in that route and use lazy loading (such as React.lazy or route.lazy), you should set the entry field. It should be the path from root to the target file.
+
+eg: `src/pages/page1.tsx`
+
+#### `getStaticPaths`
+The `getStaticPaths()` function should return an array of path
+to determine which paths will be pre-rendered by vite-react-ssg.
+
+This function is only valid for dynamic route.
+
+```ts
+const route = {
+  path: 'nest/:b',
+  Component: React.lazy(() => import('./pages/nest/[b]')),
+  entry: 'src/pages/nest/[b].tsx',
+  // To determine which paths will be pre-rendered
+  getStaticPaths: () => ['nest/b1', 'nest/b2'],
+},
+```
+
+## lazy
+These options work well with the `lazy` field.
+
+```tsx
+// src/pages/[page].tsx
+export function Component() {
+  return (
+    <div>{/* your component */}</div>
+  )
+}
+
+export function getStaticPaths() {
+  return ['page1', 'page2']
+}
+
+export const entry = 'src/pages/[page].tsx'
+```
+```ts
+// src/routes.ts
+const routes = [
+  {
+    path: '/:page',
+    lazy: () => import('./pages/[page]')
+  }
+]
+```
+
+See [example](./examples/lazy-pages/src/App.tsx).
+
 ## `<ClientOnly/>`
 
 If you need to render some component in browser only, you can wrap your component with `<ClientOnly>`.
@@ -176,11 +242,14 @@ Use the `getStyleCollector` option to specify an SSR/SSG style collector. Curren
 
 ```tsx
 import { ViteReactSSG } from 'vite-react-ssg'
-import { getStyledComponentsCollector } from 'vite-react-ssg/style-collectors'
+import getStyledComponentsCollector from 'vite-react-ssg/style-collectors/styled-components'
 import { routes } from './App.js'
 import './index.css'
 
-export const createRoot = ViteReactSSG({ routes }, () => {}, { getStyleCollector: getStyledComponentsCollector })
+export const createRoot = ViteReactSSG(
+  { routes },
+  () => { },
+  { getStyleCollector: getStyledComponentsCollector })
 ```
 
 You can provide your own by looking at the [implementation](./src/style-collectors/) of any of the existing collectors.
@@ -226,6 +295,110 @@ export default {
 }
 ```
 
+```ts
+interface ViteReactSSGOptions {
+  /**
+   * Set the scripts' loading mode. Only works for `type="module"`.
+   *
+   * @default 'sync'
+   */
+  script?: 'sync' | 'async' | 'defer' | 'async defer'
+  /**
+   * Build format.
+   *
+   * @default 'esm'
+   */
+  format?: 'esm' | 'cjs'
+  /**
+   * The path of the main entry file (relative to the project root).
+   *
+   * @default 'src/main.ts'
+   */
+  entry?: string
+  /**
+   * Mock browser global variables (window, document, etc...) from SSG.
+   *
+   * @default false
+   */
+  mock?: boolean
+  /**
+   * Apply formatter to the generated index file.
+   *
+   * **It will cause Hydration Failed.**
+   *
+   * @default 'none'
+   */
+  formatting?: 'minify' | 'prettify' | 'none'
+  /**
+   * Vite environmeng mode.
+   */
+  mode?: string
+  /**
+   * Directory style of the output directory.
+   *
+   * flat: `/foo` -> `/foo.html`
+   * nested: `/foo` -> `/foo/index.html`
+   *
+   * @default 'flat'
+   */
+  dirStyle?: 'flat' | 'nested'
+  /**
+   * Generate for all routes, including dynamic routes.
+   * If enabled, you will need to configGure your serve
+   * manually to handle dynamic routes properly.
+   *
+   * @default false
+   */
+  includeAllRoutes?: boolean
+  /**
+   * Options for the critters packages.
+   *
+   * @see https://github.com/GoogleChromeLabs/critters
+   */
+  crittersOptions?: CrittersOptions | false
+  /**
+   * Custom function to modify the routes to do the SSG.
+   *
+   * Works only when `includeAllRoutes` is set to false.
+   *
+   * Defaults to a handler that filters out all the dynamic routes.
+   * When passing your custom handler, you should also take care of the dynamic routes yourself.
+   */
+  includedRoutes?: (paths: string[], routes: Readonly<RouteRecord[]>) => Promise<string[]> | string[]
+  /**
+   * Callback to be called before every page render.
+   *
+   * It can be used to transform the project's `index.html` file before passing it to the renderer.
+   *
+   * To do so, you can change the 'index.html' file contents (passed in through the `indexHTML` parameter), and return it.
+   * The returned value will then be passed to renderer.
+   */
+  onBeforePageRender?: (route: string, indexHTML: string, appCtx: ViteReactSSGContext<true>) => Promise<string | null | undefined> | string | null | undefined
+  /**
+   * Callback to be called on every rendered page.
+   *
+   * It can be used to transform the current route's rendered HTML.
+   *
+   * To do so, you can transform the route's rendered HTML (passed in through the `renderedHTML` parameter), and return it.
+   * The returned value will be used as the HTML of the route.
+   */
+  onPageRendered?: (route: string, renderedHTML: string, appCtx: ViteReactSSGContext<true>) => Promise<string | null | undefined> | string | null | undefined
+
+  onFinished?: () => Promise<void> | void
+  /**
+   * The application's root container `id`.
+   *
+   * @default `root`
+   */
+  rootContainerId?: string
+  /**
+   * The size of the SSG processing queue.
+   *
+   * @default 20
+   */
+  concurrency?: number
+}
+```
 See [src/types.ts](./src/types.ts). for more options available.
 
 ### Custom Routes to Render
@@ -300,8 +473,12 @@ Then, you can start the application with CSR in the development environment.
 - [x] Preload assets
 - [x] Document head
 - [x] SSR in dev environment
+- [x] More Client components, such as `<ClientOnly />`
+- [x] `getStaticPaths` for dynamic routes
 - [ ] Initial State
-- [ ] More Client components, such as `<ClientOnly />`
+
+## Credits
+This project inspired by [vite-ssg](https://github.com/antfu/vite-ssg), thanks to [@antfu](https://github.com/antfu) for his awesome work.
 
 ## License
 

package/dist/index.cjs

@@ -157,6 +157,17 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
           root.render(app);
         });
       } else {
+        const lazeMatches = reactRouterDom.matchRoutes(routerOptions.routes, window.location)?.filter(
+          (m) => m.route.lazy
+        );
+        if (lazeMatches && lazeMatches?.length > 0) {
+          await Promise.all(
+            lazeMatches.map(async (m) => {
+              const routeModule = await m.route.lazy();
+              Object.assign(m.route, { ...routeModule, lazy: void 0 });
+            })
+          );
+        }
         React__default.startTransition(() => {
           client.hydrateRoot(container, app);
         });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-408e974a.js';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './types-408e974a.js';
+import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-c03d6a58.js';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './types-c03d6a58.js';
 import React, { ReactNode } from 'react';
 import { HelmetProps } from 'react-helmet-async';
 import { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, isValidElement, forwardRef } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
-import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, matchRoutes, createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { d as deserializeState, S as SiteMetadataDefaults } from './shared/vite-react-ssg.9d005d5e.mjs';
 export { H as Head } from './shared/vite-react-ssg.9d005d5e.mjs';
 
@@ -152,6 +152,17 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
           root.render(app);
         });
       } else {
+        const lazeMatches = matchRoutes(routerOptions.routes, window.location)?.filter(
+          (m) => m.route.lazy
+        );
+        if (lazeMatches && lazeMatches?.length > 0) {
+          await Promise.all(
+            lazeMatches.map(async (m) => {
+              const routeModule = await m.route.lazy();
+              Object.assign(m.route, { ...routeModule, lazy: void 0 });
+            })
+          );
+        }
         React.startTransition(() => {
           hydrateRoot(container, app);
         });

package/dist/node/cli.cjs

@@ -3,7 +3,8 @@
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const dev = require('../shared/vite-react-ssg.b0fd1823.cjs');
+const webFetch = require('@remix-run/web-fetch');
+const dev = require('../shared/vite-react-ssg.677d2862.cjs');
 require('node:path');
 require('node:module');
 require('fs-extra');
@@ -22,6 +23,44 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const yargs__default = /*#__PURE__*/_interopDefaultCompat(yargs);
 
+class NodeRequest extends webFetch.Request {
+  constructor(info, init) {
+    super(info, init);
+  }
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return new NodeRequest(this);
+  }
+}
+class NodeResponse extends webFetch.Response {
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return super.clone();
+  }
+}
+const fetch = (info, init) => {
+  init = {
+    // Disable compression handling so people can return the result of a fetch
+    // directly in the loader without messing with the Content-Encoding header.
+    compress: false,
+    ...init
+  };
+  return webFetch.fetch(info, init);
+};
+
+function installGlobals() {
+  global.Headers = webFetch.Headers;
+  global.Request = NodeRequest;
+  global.Response = NodeResponse;
+  global.fetch = fetch;
+  global.FormData = webFetch.FormData;
+}
+
+installGlobals();
 yargs__default(helpers.hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").command(
   "build",
   "Build SSG",

package/dist/node/cli.mjs

@@ -1,7 +1,8 @@
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build, d as dev } from '../shared/vite-react-ssg.b83f6ed3.mjs';
+import { Request, Response, fetch as fetch$1, Headers, FormData } from '@remix-run/web-fetch';
+import { b as build, d as dev } from '../shared/vite-react-ssg.eb444549.mjs';
 import 'node:path';
 import 'node:module';
 import 'fs-extra';
@@ -16,6 +17,44 @@ import 'react-router-dom/server.js';
 import 'node:stream';
 import 'react-dom/server';
 
+class NodeRequest extends Request {
+  constructor(info, init) {
+    super(info, init);
+  }
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return new NodeRequest(this);
+  }
+}
+class NodeResponse extends Response {
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return super.clone();
+  }
+}
+const fetch = (info, init) => {
+  init = {
+    // Disable compression handling so people can return the result of a fetch
+    // directly in the loader without messing with the Content-Encoding header.
+    compress: false,
+    ...init
+  };
+  return fetch$1(info, init);
+};
+
+function installGlobals() {
+  global.Headers = Headers;
+  global.Request = NodeRequest;
+  global.Response = NodeResponse;
+  global.fetch = fetch;
+  global.FormData = FormData;
+}
+
+installGlobals();
 yargs(hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").command(
   "build",
   "Build SSG",

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const dev = require('./shared/vite-react-ssg.b0fd1823.cjs');
+const dev = require('./shared/vite-react-ssg.677d2862.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');

package/dist/node.d.ts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './types-408e974a.js';
+import { b as ViteReactSSGOptions } from './types-c03d6a58.js';
 import 'critters';
 import 'react';
 import 'react-router-dom';

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.b83f6ed3.mjs';
+export { b as build, d as dev } from './shared/vite-react-ssg.eb444549.mjs';
 import 'node:path';
 import 'node:module';
 import 'kolorist';

package/dist/shared/{vite-react-ssg.b0fd1823.cjs → vite-react-ssg.677d2862.cjs}

@@ -872,6 +872,8 @@ function routesToPaths(routes) {
   function addEntry(path, entry) {
     if (!entry)
       return;
+    if (entry[0] === "/")
+      entry = entry.slice(1);
     if (pathToEntry[path])
       pathToEntry[path].add(entry);
     else
@@ -880,20 +882,22 @@ function routesToPaths(routes) {
   if (!routes)
     return { paths: ["/"], pathToEntry };
   const paths = /* @__PURE__ */ new Set();
+  const lazyPaths = /* @__PURE__ */ new Set();
   const getPaths = (routes2, prefix = "") => {
-    const parentPath = prefix;
     prefix = prefix.replace(/\/$/g, "");
     for (const route of routes2) {
       let path = route.path;
-      if (route.path != null) {
-        path = prefix && !route.path.startsWith("/") ? `${prefix}${route.path ? `/${route.path}` : ""}` : route.path;
-        paths.add(path);
-        addEntry(path, route.entry);
-        if (pathToEntry[parentPath]) {
-          const pathCopy = path;
-          pathToEntry[parentPath].forEach((entry) => addEntry(pathCopy, entry));
+      path = handlePath(path, prefix, route.entry);
+      if (route.getStaticPaths && path?.includes(":")) {
+        const staticPaths = route.getStaticPaths();
+        for (let staticPath of staticPaths) {
+          staticPath = handlePath(staticPath, prefix, route.entry);
+          if (Array.isArray(route.children))
+            getPaths(route.children, staticPath);
         }
       }
+      if (route.lazy)
+        lazyPaths.add(route.index ? prefix : path ?? "");
       if (route.index)
         addEntry(prefix, route.entry);
       if (Array.isArray(route.children))
@@ -901,7 +905,19 @@ function routesToPaths(routes) {
     }
   };
   getPaths(routes);
-  return { paths: Array.from(paths), pathToEntry };
+  return { paths: Array.from(paths), pathToEntry, lazyPaths: Array.from(lazyPaths) };
+  function handlePath(path, prefix, entry) {
+    if (path != null) {
+      path = prefix && !path.startsWith("/") ? `${prefix}${path ? `/${path}` : ""}` : path;
+      paths.add(path);
+      addEntry(path, entry);
+      if (pathToEntry[prefix]) {
+        const pathCopy = path;
+        pathToEntry[prefix].forEach((entry2) => addEntry(pathCopy, entry2));
+      }
+    }
+    return path;
+  }
 }
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.get("host")}`;
@@ -934,8 +950,15 @@ async function resolveAlias(config, entry) {
   return result || node_path.join(config.root, entry);
 }
 const { version } = JSON.parse(
-  node_fs.readFileSync(new URL("../../package.json", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.b0fd1823.cjs', document.baseURI).href)))).toString()
+  node_fs.readFileSync(new URL("../../package.json", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.677d2862.cjs', document.baseURI).href)))).toString()
 );
+function createRequest(path) {
+  const url = new URL(path, "http://vite-react-ssg.com");
+  url.search = "";
+  url.hash = "";
+  url.pathname = path;
+  return new Request(url.href);
+}
 
 async function getCritters(outDir, options = {}) {
   try {
@@ -1020,7 +1043,17 @@ async function render(routes, request, styleCollector) {
   ];
   const styleTag = styleCollector?.toString?.(appHTML) ?? "";
   const metaAttributes = metaStrings.filter(Boolean);
-  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag };
+  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag, routerContext: context };
+}
+async function preLoad(routes, paths) {
+  if (!paths || paths.length === 0)
+    return routes;
+  const { dataRoutes, query } = server_js.createStaticHandler(routes);
+  await Promise.all(paths.map(async (path) => {
+    const request = createRequest(path);
+    return query(request);
+  }));
+  return dataRoutes;
 }
 
 function renderPreloadLinks(document, modules, ssrManifest) {
@@ -1200,12 +1233,15 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
   const serverEntry = node_path.join(prefix, ssgOut, node_path.parse(ssrEntry).name + ext);
-  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.b0fd1823.cjs', document.baseURI).href)));
+  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.677d2862.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
-  const { paths, pathToEntry } = routesToPaths(routes);
+  const { lazyPaths } = routesToPaths(routes);
+  const dataRoutes = await preLoad([...routes], lazyPaths);
+  const { paths, pathToEntry } = routesToPaths(dataRoutes);
   let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
+  routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
   const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
@@ -1216,20 +1252,16 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   let indexHTML = await fs__default.readFile(node_path.join(out, "index.html"), "utf-8");
   indexHTML = rewriteScripts(indexHTML, script);
   const queue = new PQueue({ concurrency });
-  for (const route of routesPaths) {
+  for (const path of routesPaths) {
     queue.add(async () => {
       try {
-        const appCtx = await createRoot(false, route);
-        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
+        const appCtx = await createRoot(false, path);
+        const { initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx) || indexHTML;
-        const url = new URL(route, "http://vite-react-ssg.com");
-        url.search = "";
-        url.hash = "";
-        url.pathname = route;
-        const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
-        await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
+        const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
+        const request = createRequest(path);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(dataRoutes, request, styleCollector);
+        await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
           appHTML,
@@ -1240,24 +1272,24 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM.JSDOM(renderedHTML);
-        const modules = collectModulesForEntrys(manifest, pathToEntry?.[route]);
+        const modules = collectModulesForEntrys(manifest, pathToEntry?.[path]);
         renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         const html = jsdom.serialize();
-        let transformed = await onPageRendered?.(route, html, appCtx) || html;
+        let transformed = await onPageRendered?.(path, html, appCtx) || html;
         if (critters)
           transformed = await critters.process(transformed);
         if (styleTag)
           transformed = transformed.replace("<head>", `<head>${styleTag}`);
         const formatted = await formatHtml(transformed, formatting);
-        const relativeRouteFile = `${(route.endsWith("/") ? `${route}index` : route).replace(/^\//g, "")}.html`;
-        const filename = dirStyle === "nested" ? node_path.join(route.replace(/^\//g, ""), "index.html") : relativeRouteFile;
+        const relativeRouteFile = `${(path.endsWith("/") ? `${path}index` : path).replace(/^\//g, "")}.html`;
+        const filename = dirStyle === "nested" ? node_path.join(path.replace(/^\//g, ""), "index.html") : relativeRouteFile;
         await fs__default.ensureDir(node_path.join(out, node_path.dirname(filename)));
         await fs__default.writeFile(node_path.join(out, filename), formatted, "utf-8");
         config.logger.info(
           `${kolorist.dim(`${outDir}/`)}${kolorist.cyan(filename.padEnd(15, " "))}  ${kolorist.dim(getSize(formatted))}`
         );
       } catch (err) {
-        throw new Error(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.red(`Error on page: ${kolorist.cyan(route)}`)}
+        throw new Error(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.red(`Error on page: ${kolorist.cyan(path)}`)}
 ${err.stack}`);
       }
     });
@@ -1427,14 +1459,17 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes], createFetchRequest(req), styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector);
         metaAttributes.push(styleTag);
-        const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
+        const matchesEntries = routerContext.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`);
+        const mods = await Promise.all(
+          [entry, ...matchesEntries].map(async (entry2) => await viteServer.moduleGraph.getModuleByUrl(entry2))
+        );
         const assetsUrls = /* @__PURE__ */ new Set();
-        const collectAssets = async (mod2) => {
-          if (!mod2?.ssrTransformResult)
+        const collectAssets = async (mod) => {
+          if (!mod || !mod?.ssrTransformResult)
             return;
-          const { deps = [], dynamicDeps = [] } = mod2?.ssrTransformResult;
+          const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
           const allDeps = [...deps, ...dynamicDeps];
           for (const dep of allDeps) {
             if (dep.endsWith(".css")) {
@@ -1445,7 +1480,7 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
             }
           }
         };
-        await collectAssets(mod);
+        await Promise.all(mods.map(async (mod) => collectAssets(mod)));
         const preloadLink = [...assetsUrls].map((item) => createLink(item));
         metaAttributes.push(...preloadLink);
         const renderedHTML = await renderHTML({

package/dist/shared/{vite-react-ssg.b83f6ed3.mjs → vite-react-ssg.eb444549.mjs}

@@ -864,6 +864,8 @@ function routesToPaths(routes) {
   function addEntry(path, entry) {
     if (!entry)
       return;
+    if (entry[0] === "/")
+      entry = entry.slice(1);
     if (pathToEntry[path])
       pathToEntry[path].add(entry);
     else
@@ -872,20 +874,22 @@ function routesToPaths(routes) {
   if (!routes)
     return { paths: ["/"], pathToEntry };
   const paths = /* @__PURE__ */ new Set();
+  const lazyPaths = /* @__PURE__ */ new Set();
   const getPaths = (routes2, prefix = "") => {
-    const parentPath = prefix;
     prefix = prefix.replace(/\/$/g, "");
     for (const route of routes2) {
       let path = route.path;
-      if (route.path != null) {
-        path = prefix && !route.path.startsWith("/") ? `${prefix}${route.path ? `/${route.path}` : ""}` : route.path;
-        paths.add(path);
-        addEntry(path, route.entry);
-        if (pathToEntry[parentPath]) {
-          const pathCopy = path;
-          pathToEntry[parentPath].forEach((entry) => addEntry(pathCopy, entry));
+      path = handlePath(path, prefix, route.entry);
+      if (route.getStaticPaths && path?.includes(":")) {
+        const staticPaths = route.getStaticPaths();
+        for (let staticPath of staticPaths) {
+          staticPath = handlePath(staticPath, prefix, route.entry);
+          if (Array.isArray(route.children))
+            getPaths(route.children, staticPath);
         }
       }
+      if (route.lazy)
+        lazyPaths.add(route.index ? prefix : path ?? "");
       if (route.index)
         addEntry(prefix, route.entry);
       if (Array.isArray(route.children))
@@ -893,7 +897,19 @@ function routesToPaths(routes) {
     }
   };
   getPaths(routes);
-  return { paths: Array.from(paths), pathToEntry };
+  return { paths: Array.from(paths), pathToEntry, lazyPaths: Array.from(lazyPaths) };
+  function handlePath(path, prefix, entry) {
+    if (path != null) {
+      path = prefix && !path.startsWith("/") ? `${prefix}${path ? `/${path}` : ""}` : path;
+      paths.add(path);
+      addEntry(path, entry);
+      if (pathToEntry[prefix]) {
+        const pathCopy = path;
+        pathToEntry[prefix].forEach((entry2) => addEntry(pathCopy, entry2));
+      }
+    }
+    return path;
+  }
 }
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.get("host")}`;
@@ -928,6 +944,13 @@ async function resolveAlias(config, entry) {
 const { version } = JSON.parse(
   readFileSync(new URL("../../package.json", import.meta.url)).toString()
 );
+function createRequest(path) {
+  const url = new URL(path, "http://vite-react-ssg.com");
+  url.search = "";
+  url.hash = "";
+  url.pathname = path;
+  return new Request(url.href);
+}
 
 async function getCritters(outDir, options = {}) {
   try {
@@ -1012,7 +1035,17 @@ async function render(routes, request, styleCollector) {
   ];
   const styleTag = styleCollector?.toString?.(appHTML) ?? "";
   const metaAttributes = metaStrings.filter(Boolean);
-  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag };
+  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag, routerContext: context };
+}
+async function preLoad(routes, paths) {
+  if (!paths || paths.length === 0)
+    return routes;
+  const { dataRoutes, query } = createStaticHandler(routes);
+  await Promise.all(paths.map(async (path) => {
+    const request = createRequest(path);
+    return query(request);
+  }));
+  return dataRoutes;
 }
 
 function renderPreloadLinks(document, modules, ssrManifest) {
@@ -1196,8 +1229,11 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
-  const { paths, pathToEntry } = routesToPaths(routes);
+  const { lazyPaths } = routesToPaths(routes);
+  const dataRoutes = await preLoad([...routes], lazyPaths);
+  const { paths, pathToEntry } = routesToPaths(dataRoutes);
   let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
+  routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
   const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
@@ -1208,20 +1244,16 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   let indexHTML = await fs.readFile(join(out, "index.html"), "utf-8");
   indexHTML = rewriteScripts(indexHTML, script);
   const queue = new PQueue({ concurrency });
-  for (const route of routesPaths) {
+  for (const path of routesPaths) {
     queue.add(async () => {
       try {
-        const appCtx = await createRoot(false, route);
-        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = serializeState, getStyleCollector } = appCtx;
+        const appCtx = await createRoot(false, path);
+        const { initialState, triggerOnSSRAppRendered, transformState = serializeState, getStyleCollector } = appCtx;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx) || indexHTML;
-        const url = new URL(route, "http://vite-react-ssg.com");
-        url.search = "";
-        url.hash = "";
-        url.pathname = route;
-        const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
-        await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
+        const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
+        const request = createRequest(path);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(dataRoutes, request, styleCollector);
+        await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
           appHTML,
@@ -1232,24 +1264,24 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM(renderedHTML);
-        const modules = collectModulesForEntrys(manifest, pathToEntry?.[route]);
+        const modules = collectModulesForEntrys(manifest, pathToEntry?.[path]);
         renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         const html = jsdom.serialize();
-        let transformed = await onPageRendered?.(route, html, appCtx) || html;
+        let transformed = await onPageRendered?.(path, html, appCtx) || html;
         if (critters)
           transformed = await critters.process(transformed);
         if (styleTag)
           transformed = transformed.replace("<head>", `<head>${styleTag}`);
         const formatted = await formatHtml(transformed, formatting);
-        const relativeRouteFile = `${(route.endsWith("/") ? `${route}index` : route).replace(/^\//g, "")}.html`;
-        const filename = dirStyle === "nested" ? join(route.replace(/^\//g, ""), "index.html") : relativeRouteFile;
+        const relativeRouteFile = `${(path.endsWith("/") ? `${path}index` : path).replace(/^\//g, "")}.html`;
+        const filename = dirStyle === "nested" ? join(path.replace(/^\//g, ""), "index.html") : relativeRouteFile;
         await fs.ensureDir(join(out, dirname(filename)));
         await fs.writeFile(join(out, filename), formatted, "utf-8");
         config.logger.info(
           `${dim(`${outDir}/`)}${cyan(filename.padEnd(15, " "))}  ${dim(getSize(formatted))}`
         );
       } catch (err) {
-        throw new Error(`${gray("[vite-react-ssg]")} ${red(`Error on page: ${cyan(route)}`)}
+        throw new Error(`${gray("[vite-react-ssg]")} ${red(`Error on page: ${cyan(path)}`)}
 ${err.stack}`);
       }
     });
@@ -1419,14 +1451,17 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes], createFetchRequest(req), styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render([...routes], createFetchRequest(req), styleCollector);
         metaAttributes.push(styleTag);
-        const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
+        const matchesEntries = routerContext.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`);
+        const mods = await Promise.all(
+          [entry, ...matchesEntries].map(async (entry2) => await viteServer.moduleGraph.getModuleByUrl(entry2))
+        );
         const assetsUrls = /* @__PURE__ */ new Set();
-        const collectAssets = async (mod2) => {
-          if (!mod2?.ssrTransformResult)
+        const collectAssets = async (mod) => {
+          if (!mod || !mod?.ssrTransformResult)
             return;
-          const { deps = [], dynamicDeps = [] } = mod2?.ssrTransformResult;
+          const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
           const allDeps = [...deps, ...dynamicDeps];
           for (const dep of allDeps) {
             if (dep.endsWith(".css")) {
@@ -1437,7 +1472,7 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
             }
           }
         };
-        await collectAssets(mod);
+        await Promise.all(mods.map(async (mod) => collectAssets(mod)));
         const preloadLink = [...assetsUrls].map((item) => createLink(item));
         metaAttributes.push(...preloadLink);
         const renderedHTML = await renderHTML({

package/dist/{style-collectors.cjs → style-collectors/styled-components.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
+const styledComponents = require('styled-components');
+
 async function ssrCollector() {
-  const { ServerStyleSheet } = await import('styled-components');
-  const sheet = new ServerStyleSheet();
+  const sheet = new styledComponents.ServerStyleSheet();
   return {
     collect(app) {
       return sheet.collectStyles(app);
@@ -15,6 +16,5 @@ async function ssrCollector() {
     }
   };
 }
-const styledComponents = undefined.SSR ? ssrCollector : null;
 
-exports.getStyledComponentsCollector = styledComponents;
+module.exports = ssrCollector;

package/dist/{style-collectors.d.ts → style-collectors/styled-components.d.ts}

@@ -5,6 +5,5 @@ declare function ssrCollector(): Promise<{
     toString(): string;
     cleanup(): void;
 }>;
-declare const _default: typeof ssrCollector | null;
 
-export { _default as getStyledComponentsCollector };
+export { ssrCollector as default };

package/dist/{style-collectors.mjs → style-collectors/styled-components.mjs}

@@ -1,5 +1,6 @@
+import { ServerStyleSheet } from 'styled-components';
+
 async function ssrCollector() {
-  const { ServerStyleSheet } = await import('styled-components');
   const sheet = new ServerStyleSheet();
   return {
     collect(app) {
@@ -13,6 +14,5 @@ async function ssrCollector() {
     }
   };
 }
-const styledComponents = import.meta.env.SSR ? ssrCollector : null;
 
-export { styledComponents as getStyledComponentsCollector };
+export { ssrCollector as default };

package/dist/{types-408e974a.d.ts → types-c03d6a58.d.ts}

@@ -92,7 +92,7 @@ interface ViteReactSSGOptions {
     onPageRendered?: (route: string, renderedHTML: string, appCtx: ViteReactSSGContext<true>) => Promise<string | null | undefined> | string | null | undefined;
     onFinished?: () => Promise<void> | void;
     /**
-     * The application's root container `class`.
+     * The application's root container `id`.
      *
      * @default `root`
      */
@@ -142,9 +142,18 @@ interface CommonRouteOptions {
     /**
      * Used to obtain static resources through manifest
      *
-     * @example `src/pages/home.tsx
+     * @example `src/pages/home.tsx`
      */
     entry?: string;
+    /**
+     * The getStaticPaths() function should return an array of path
+     * to determine which paths will be pre-rendered by vite-react-ssg.
+     *
+     * This function is only valid for dynamic route.
+     *
+     * @example () => ['path1', 'path2']
+     */
+    getStaticPaths?: () => string[];
 }
 type NonIndexRouteRecord = Omit<NonIndexRouteObject, 'children'> & {
     children?: RouteRecord[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -31,10 +31,10 @@
       "require": "./dist/node.cjs",
       "import": "./dist/node.mjs"
     },
-    "./style-collectors": {
-      "types": "./dist/style-collectors.d.ts",
-      "require": "./dist/style-collectors.cjs",
-      "import": "./dist/style-collectors.mjs"
+    "./style-collectors/styled-components": {
+      "types": "./dist/style-collectors/styled-components.d.ts",
+      "require": "./dist/style-collectors/styled-components.cjs",
+      "import": "./dist/style-collectors/styled-components.mjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -45,8 +45,8 @@
       "node": [
         "./dist/node.d.ts"
       ],
-      "style-collectors": [
-        "./dist/style-collectors.d.ts"
+      "style-collectors/styled-components": [
+        "./dist/style-collectors/styled-components.d.ts"
       ]
     }
   },
@@ -87,6 +87,7 @@
     }
   },
   "dependencies": {
+    "@remix-run/web-fetch": "^4.3.5",
     "express": "^4.18.2",
     "fs-extra": "^11.1.1",
     "html-minifier": "^4.0.0",
@@ -117,7 +118,6 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
     "rimraf": "5.0.1",
-    "simple-git-hooks": "^2.8.1",
     "styled-components": "6.0.5",
     "typescript": "5.1.6",
     "unbuild": "^1.2.1",