vite-react-ssg 0.0.1 → 0.0.2

package/README.md

@@ -31,7 +31,7 @@ Static-site generation for React on Vite.
 import { ViteReactSSG } from 'vite-react-ssg'
 import routes from './App.tsx'
 
-export const createApp = ViteReactSSG(
+export const createRoot = ViteReactSSG(
   // react-router-dom data routes
   { routes },
   // function to have custom setups
@@ -41,6 +41,46 @@ export const createApp = ViteReactSSG(
 )
 ```
 
+```tsx
+// src/App.tsx
+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',
+  },
+]
+```
+
 ## Critical CSS
 
 Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
@@ -121,8 +161,8 @@ export default {
 
 ## Roadmap
 
+- [x] Preload assets
 - [ ] SSR under dev
-- [ ] Preload assets
 - [ ] Initial State
 - [ ] Document head
 - [ ] More Client components, such as `<ClientOnly />`

package/dist/index.cjs

@@ -25,7 +25,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     rootContainer = "#root"
   } = options;
   const isClient = typeof window !== "undefined";
-  async function createApp(client = false, routePath) {
+  async function createRoot(client = false, routePath) {
     const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes) : void 0;
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
@@ -63,11 +63,11 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   if (isClient) {
     (async () => {
       const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
-      const { router } = await createApp(true);
+      const { router } = await createRoot(true);
       client.hydrateRoot(container, /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, null, /* @__PURE__ */ React__default.createElement(SiteMetadataDefaults.SiteMetadataDefaults, null), /* @__PURE__ */ React__default.createElement(reactRouterDom.RouterProvider, { router })));
     })();
   }
-  return createApp;
+  return createRoot;
 }
 
 exports.Head = SiteMetadataDefaults.Head;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-fa5fe9c2.js';
+import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-82f34756.js';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, b as ViteReactSSGOptions } from './types-82f34756.js';
 import { ReactNode } from 'react';
 import { HelmetProps } from 'react-helmet-async';
 import 'critters';
@@ -11,4 +12,4 @@ declare function Head(props: Props): JSX.Element;
 
 declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
 
-export { Head, ViteReactSSG };
+export { Head, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };

package/dist/index.mjs

@@ -20,7 +20,7 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
     rootContainer = "#root"
   } = options;
   const isClient = typeof window !== "undefined";
-  async function createApp(client = false, routePath) {
+  async function createRoot(client = false, routePath) {
     const browserRouter = client ? createBrowserRouter(routerOptions.routes) : void 0;
     const appRenderCallbacks = [];
     const onSSRAppRendered = client ? () => {
@@ -58,11 +58,11 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   if (isClient) {
     (async () => {
       const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
-      const { router } = await createApp(true);
+      const { router } = await createRoot(true);
       hydrateRoot(container, /* @__PURE__ */ React.createElement(HelmetProvider, null, /* @__PURE__ */ React.createElement(SiteMetadataDefaults, null), /* @__PURE__ */ React.createElement(RouterProvider, { router })));
     })();
   }
-  return createApp;
+  return createRoot;
 }
 
 export { ViteReactSSG };

package/dist/node/cli.cjs

@@ -3,7 +3,7 @@
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const build = require('../shared/vite-react-ssg.1128b41a.cjs');
+const build = require('../shared/vite-react-ssg.0e1b881e.cjs');
 require('node:path');
 require('node:module');
 require('fs-extra');

package/dist/node/cli.mjs

@@ -1,7 +1,7 @@
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build } from '../shared/vite-react-ssg.c2c344c3.mjs';
+import { b as build } from '../shared/vite-react-ssg.f66e4ba5.mjs';
 import 'node:path';
 import 'node:module';
 import 'fs-extra';

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const build = require('./shared/vite-react-ssg.1128b41a.cjs');
+const build = require('./shared/vite-react-ssg.0e1b881e.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');

package/dist/node.d.ts

@@ -1,7 +1,6 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './types-fa5fe9c2.js';
+import { b as ViteReactSSGOptions } from './types-82f34756.js';
 import 'critters';
-import 'react';
 import 'react-router-dom';
 
 declare function build(ssgOptions?: Partial<ViteReactSSGOptions>, viteConfig?: InlineConfig): Promise<void>;

package/dist/node.mjs

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

package/dist/shared/{vite-react-ssg.1128b41a.cjs → vite-react-ssg.0e1b881e.cjs}

@@ -865,8 +865,17 @@ function getSize(str) {
   return `${(str.length / 1024).toFixed(2)} KiB`;
 }
 function routesToPaths(routes) {
+  const pathToEntry = {};
+  function addEntry(path, entry) {
+    if (!entry)
+      return;
+    if (pathToEntry[path])
+      pathToEntry[path].add(entry);
+    else
+      pathToEntry[path] = /* @__PURE__ */ new Set([entry]);
+  }
   if (!routes)
-    return ["/"];
+    return { paths: ["/"] };
   const paths = /* @__PURE__ */ new Set();
   const getPaths = (routes2, prefix = "") => {
     prefix = prefix.replace(/\/$/g, "");
@@ -875,13 +884,16 @@ function routesToPaths(routes) {
       if (route.path != null) {
         path = prefix && !route.path.startsWith("/") ? `${prefix}${route.path ? `/${route.path}` : ""}` : route.path;
         paths.add(path);
+        addEntry(path, route.entry);
       }
+      if (route.index)
+        addEntry(prefix, route.entry);
       if (Array.isArray(route.children))
         getPaths(route.children, path);
     }
   };
   getPaths(routes);
-  return Array.from(paths);
+  return { paths: Array.from(paths), pathToEntry };
 }
 
 async function getCritters(outDir, options = {}) {
@@ -1048,6 +1060,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   buildLog("Build for client...");
   await vite.build(vite.mergeConfig(viteConfig, {
     build: {
+      manifest: true,
       ssrManifest: true,
       rollupOptions: {
         input: {
@@ -1085,26 +1098,27 @@ 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.1128b41a.cjs', document.baseURI).href)));
-  const { createApp, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
+  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.0e1b881e.cjs', document.baseURI).href)));
+  const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
-  const { routes } = await createApp(false);
-  let routesPaths = includeAllRoutes ? routesToPaths(routes) : await includedRoutes(routesToPaths(routes), routes || []);
+  const { routes } = await createRoot(false);
+  const { paths, pathToEntry } = routesToPaths(routes);
+  let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
   const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
   if (critters)
     console.log(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `critters`")}`);
   const ssrManifest = JSON.parse(await fs__default.readFile(node_path.join(out, "ssr-manifest.json"), "utf-8"));
+  const manifest = JSON.parse(await fs__default.readFile(node_path.join(out, "manifest.json"), "utf-8"));
   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) {
-    console.log("\u{1F680} ~ file: build.ts:132 ~ build ~ routesPaths:", routesPaths);
     queue.add(async () => {
       try {
-        const appCtx = await createApp(false, route);
-        const { app: innerApp, routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState } = appCtx;
+        const appCtx = await createRoot(false, route);
+        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx);
         const url = new URL(route, "http://vite-react-ssg.com");
         url.search = "";
@@ -1120,7 +1134,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM.JSDOM(renderedHTML);
-        renderPreloadLinks(jsdom.window.document, /* @__PURE__ */ new Set(), ssrManifest);
+        const modules = collectModulesForEntrys(manifest, pathToEntry?.[route]);
+        renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(route, html, appCtx) || html;
         if (critters)
@@ -1219,8 +1234,29 @@ async function formatHtml(html, formatting) {
       minifyJS: true,
       minifyCSS: true
     });
+  } else if (formatting === "prettify") {
+    const prettier = (await import('prettier/esm/standalone.mjs')).default;
+    const parserHTML = (await import('prettier/esm/parser-html.mjs')).default;
+    return prettier.format(html, { semi: false, parser: "html", plugins: [parserHTML] });
   }
   return html;
 }
+function collectModulesForEntrys(manifest, entrys) {
+  const mods = /* @__PURE__ */ new Set();
+  if (!entrys)
+    return mods;
+  for (const entry of entrys)
+    collectModules(manifest, entry, mods);
+  return mods;
+}
+function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
+  if (!entry)
+    return mods;
+  mods.add(entry);
+  manifest[entry]?.dynamicImports?.forEach((item) => {
+    collectModules(manifest, item, mods);
+  });
+  return mods;
+}
 
 exports.build = build;

package/dist/shared/{vite-react-ssg.c2c344c3.mjs → vite-react-ssg.f66e4ba5.mjs}

@@ -858,8 +858,17 @@ function getSize(str) {
   return `${(str.length / 1024).toFixed(2)} KiB`;
 }
 function routesToPaths(routes) {
+  const pathToEntry = {};
+  function addEntry(path, entry) {
+    if (!entry)
+      return;
+    if (pathToEntry[path])
+      pathToEntry[path].add(entry);
+    else
+      pathToEntry[path] = /* @__PURE__ */ new Set([entry]);
+  }
   if (!routes)
-    return ["/"];
+    return { paths: ["/"] };
   const paths = /* @__PURE__ */ new Set();
   const getPaths = (routes2, prefix = "") => {
     prefix = prefix.replace(/\/$/g, "");
@@ -868,13 +877,16 @@ function routesToPaths(routes) {
       if (route.path != null) {
         path = prefix && !route.path.startsWith("/") ? `${prefix}${route.path ? `/${route.path}` : ""}` : route.path;
         paths.add(path);
+        addEntry(path, route.entry);
       }
+      if (route.index)
+        addEntry(prefix, route.entry);
       if (Array.isArray(route.children))
         getPaths(route.children, path);
     }
   };
   getPaths(routes);
-  return Array.from(paths);
+  return { paths: Array.from(paths), pathToEntry };
 }
 
 async function getCritters(outDir, options = {}) {
@@ -1041,6 +1053,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   buildLog("Build for client...");
   await build$1(mergeConfig(viteConfig, {
     build: {
+      manifest: true,
       ssrManifest: true,
       rollupOptions: {
         input: {
@@ -1079,25 +1092,26 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const ext = format === "esm" ? ".mjs" : ".cjs";
   const serverEntry = join(prefix, ssgOut, parse(ssrEntry).name + ext);
   const _require = createRequire(import.meta.url);
-  const { createApp, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
+  const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
-  const { routes } = await createApp(false);
-  let routesPaths = includeAllRoutes ? routesToPaths(routes) : await includedRoutes(routesToPaths(routes), routes || []);
+  const { routes } = await createRoot(false);
+  const { paths, pathToEntry } = routesToPaths(routes);
+  let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
   routesPaths = Array.from(new Set(routesPaths));
   buildLog("Rendering Pages...", routesPaths.length);
   const critters = crittersOptions !== false ? await getCritters(outDir, crittersOptions) : void 0;
   if (critters)
     console.log(`${gray("[vite-react-ssg]")} ${blue("Critical CSS generation enabled via `critters`")}`);
   const ssrManifest = JSON.parse(await fs.readFile(join(out, "ssr-manifest.json"), "utf-8"));
+  const manifest = JSON.parse(await fs.readFile(join(out, "manifest.json"), "utf-8"));
   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) {
-    console.log("\u{1F680} ~ file: build.ts:132 ~ build ~ routesPaths:", routesPaths);
     queue.add(async () => {
       try {
-        const appCtx = await createApp(false, route);
-        const { app: innerApp, routes: routes2, initialState, triggerOnSSRAppRendered, transformState = serializeState } = appCtx;
+        const appCtx = await createRoot(false, route);
+        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = serializeState } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx);
         const url = new URL(route, "http://vite-react-ssg.com");
         url.search = "";
@@ -1113,7 +1127,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM(renderedHTML);
-        renderPreloadLinks(jsdom.window.document, /* @__PURE__ */ new Set(), ssrManifest);
+        const modules = collectModulesForEntrys(manifest, pathToEntry?.[route]);
+        renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(route, html, appCtx) || html;
         if (critters)
@@ -1212,8 +1227,29 @@ async function formatHtml(html, formatting) {
       minifyJS: true,
       minifyCSS: true
     });
+  } else if (formatting === "prettify") {
+    const prettier = (await import('prettier/esm/standalone.mjs')).default;
+    const parserHTML = (await import('prettier/esm/parser-html.mjs')).default;
+    return prettier.format(html, { semi: false, parser: "html", plugins: [parserHTML] });
   }
   return html;
 }
+function collectModulesForEntrys(manifest, entrys) {
+  const mods = /* @__PURE__ */ new Set();
+  if (!entrys)
+    return mods;
+  for (const entry of entrys)
+    collectModules(manifest, entry, mods);
+  return mods;
+}
+function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
+  if (!entry)
+    return mods;
+  mods.add(entry);
+  manifest[entry]?.dynamicImports?.forEach((item) => {
+    collectModules(manifest, item, mods);
+  });
+  return mods;
+}
 
 export { build as b };

package/dist/{types-fa5fe9c2.d.ts → types-82f34756.d.ts}

@@ -1,6 +1,5 @@
 import { Options } from 'critters';
-import { ReactNode } from 'react';
-import { RouteObject, createBrowserRouter } from 'react-router-dom';
+import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
 
 type Router = ReturnType<typeof createBrowserRouter>;
 interface ViteReactSSGOptions {
@@ -31,6 +30,8 @@ interface ViteReactSSGOptions {
     /**
      * Apply formatter to the generated index file.
      *
+     * **It will cause Hydration Failed.**
+     *
      * @default 'none'
      */
     formatting?: 'minify' | 'prettify' | 'none';
@@ -103,7 +104,6 @@ interface ViteReactSSGOptions {
     concurrency?: number;
 }
 interface ViteReactSSGContext<HasRouter extends boolean = true> {
-    app?: ReactNode;
     router?: HasRouter extends true ? Router : undefined;
     routes: HasRouter extends true ? Readonly<RouteRecord[]> : undefined;
     routerOptions: RouterOptions;
@@ -127,7 +127,19 @@ interface ViteReactSSGClientOptions {
      */
     rootContainer?: string | Element;
 }
-type RouteRecord = RouteObject & {};
+interface CommonRouteOptions {
+    /**
+     * Used to obtain static resources through manifest
+     *
+     * @example `src/pages/home.tsx
+     */
+    entry?: string;
+}
+type NonIndexRouteRecord = Omit<NonIndexRouteObject, 'children'> & {
+    children?: RouteRecord[];
+} & CommonRouteOptions;
+type IndexRouteRecord = IndexRouteObject & CommonRouteOptions;
+type RouteRecord = NonIndexRouteRecord | IndexRouteRecord;
 interface RouterOptions {
     routes: RouteRecord[];
     createFetchRequest?: <T>(req: T) => Request;
@@ -138,4 +150,4 @@ declare module 'vite' {
     }
 }
 
-export { RouterOptions as R, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b };
+export { IndexRouteRecord as I, NonIndexRouteRecord as N, RouterOptions as R, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b, RouteRecord as c };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -80,23 +80,24 @@
     "html5parser": "^2.0.2",
     "jsdom": "^22.1.0",
     "kolorist": "^1.8.0",
+    "prettier": "^3.0.0",
     "react-helmet-async": "^1.3.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@ririd/eslint-config": "0.5.1",
+    "@ririd/eslint-config": "0.6.0",
     "@types/fs-extra": "^11.0.1",
     "@types/html-minifier": "^4.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.15.11",
+    "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@types/react-helmet-async": "^1.0.3",
     "@types/yargs": "^17.0.24",
     "bumpp": "^9.1.0",
     "critters": "^0.0.19",
-    "eslint": "^8.40.0",
-    "esno": "^0.16.3",
+    "eslint": "^8.45.0",
+    "esno": "^0.17.0",
     "p-queue": "^7.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -105,7 +106,7 @@
     "simple-git-hooks": "^2.8.1",
     "typescript": "5.1.6",
     "unbuild": "^1.2.1",
-    "vite": "^4.3.9",
+    "vite": "^4.4.0",
     "vite-plugin-pwa": "^0.16.4",
     "vitest": "0.33.0"
   }