vite-react-ssg 0.7.0-beta.2 → 0.7.1

package/README.md

@@ -71,8 +71,7 @@ export const createRoot = ViteReactSSG(
 import React from 'react'
 import type { RouteRecord } from 'vite-react-ssg'
 import './App.css'
-
-const Layout = React.lazy(() => import('./Layout'))
+import Layout from './Layout'
 
 export const routes: RouteRecord[] = [
   {
@@ -82,19 +81,18 @@ export const routes: RouteRecord[] = [
     children: [
       {
         path: 'a',
-        Component: React.lazy(() => import('./pages/a')),
-        entry: 'src/pages/a.tsx',
+        lazy: () => import('./pages/a'),
       },
       {
         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',
+        lazy: () => {
+          const Component = await import('./pages/nest/[b]')
+          return { Component }
+        },
         // To determine which paths will be pre-rendered
         getStaticPaths: () => ['nest/b1', 'nest/b2'],
       },
@@ -136,13 +134,6 @@ export const createRoot = ViteReactSSG(<App />)
 
 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
@@ -157,9 +148,16 @@ const route = {
   entry: 'src/pages/nest/[b].tsx',
   // To determine which paths will be pre-rendered
   getStaticPaths: () => ['nest/b1', 'nest/b2'],
-},
+}
 ```
 
+#### `entry`
+
+**You are not required to use this field. It is only necessary when "prehydration style loss" occurs.**
+It should be the path from root to the target file.
+
+eg: `src/pages/page1.tsx`
+
 ## lazy
 
 These options work well with the `lazy` field.
@@ -175,8 +173,6 @@ export function Component() {
 export function getStaticPaths() {
   return ['page1', 'page2']
 }
-
-export const entry = 'src/pages/[page].tsx'
 ```
 
 ```ts
@@ -195,6 +191,46 @@ See [example](./examples/lazy-pages/src/App.tsx).
 
 You can use react-router-dom's `loader` to fetch data at build time and use `useLoaderData` to get the data in the component.
 
+In production, the `loader` will only be executed at build time, and the data will be fetched by the manifest generated at build time during the browser navigations .
+
+In the development environment, the `loader` also runs only on the server.It provides data to the HTML during initial server rendering, and during browser route navigations , it makes calls to the server by initiating a fetch on the service.
+
+```tsx
+import { useLoaderData } from 'react-router-dom'
+
+export default function Docs() {
+  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>
+
+  return (
+    <>
+      <div>{data.key}</div>
+      {/* eslint-disable-next-line react-dom/no-dangerously-set-innerhtml */}
+      <div dangerouslySetInnerHTML={{ __html: data.packageCodeHtml }} style={{ textAlign: 'start' }}></div>
+    </>
+  )
+}
+
+export const Component = Docs
+
+export const entry = 'src/pages/json.tsx'
+
+export async function loader() {
+  // The code here will not be executed on the client side, and the modules imported will not be sent to the client.
+  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')
+  const { codeToHtml } = await import('shiki')
+  const packageJsonHtml = await codeToHtml(packageJson, { lang: 'json', theme: 'vitesse-light' })
+
+  return {
+    ...json,
+    packageCodeHtml: packageJsonHtml,
+  }
+}
+```
+
 See [example | with-loader](./examples/with-loader/src/pages/[docs].tsx).
 
 ## `<ClientOnly/>`

package/dist/client/single-page.d.cts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.870c683b.cjs';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.870c683b.cjs';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.4d155759.cjs';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.4d155759.cjs';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.cjs';
 import 'critters';
 import 'react-router-dom';

package/dist/client/single-page.d.mts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.870c683b.mjs';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.870c683b.mjs';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.4d155759.mjs';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.4d155759.mjs';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.mjs';
 import 'critters';
 import 'react-router-dom';

package/dist/client/single-page.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.870c683b.js';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.870c683b.js';
+import { V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from '../shared/vite-react-ssg.4d155759.js';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, c as RouterOptions, S as StyleCollector, b as ViteReactSSGOptions } from '../shared/vite-react-ssg.4d155759.js';
 export { C as ClientOnly, H as Head } from '../shared/vite-react-ssg.faf3855a.js';
 import 'critters';
 import 'react-router-dom';

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.870c683b.cjs';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.cjs';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.4d155759.cjs';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.cjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.cjs';
 import React from 'react';
 import { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.870c683b.mjs';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.mjs';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.4d155759.mjs';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.mjs';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.mjs';
 import React from 'react';
 import { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.870c683b.js';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.js';
+import { c as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './shared/vite-react-ssg.4d155759.js';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, R as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.js';
 export { C as ClientOnly, H as Head } from './shared/vite-react-ssg.faf3855a.js';
 import React from 'react';
 import { LinkProps, NavLinkProps } from 'react-router-dom';

package/dist/node.cjs

@@ -850,19 +850,8 @@ function getSize(str) {
   return `${(str.length / 1024).toFixed(2)} KiB`;
 }
 async function routesToPaths(routes) {
-  const pathToEntry = {};
-  function addEntry(path, entry) {
-    if (!entry)
-      return;
-    if (entry[0] === "/")
-      entry = entry.slice(1);
-    if (pathToEntry[path])
-      pathToEntry[path].add(entry);
-    else
-      pathToEntry[path] = /* @__PURE__ */ new Set([entry]);
-  }
   if (!routes || routes.length === 0)
-    return { paths: ["/"], pathToEntry };
+    return { paths: ["/"] };
   const paths = /* @__PURE__ */ new Set();
   const getPaths = async (routes2, prefix = "") => {
     prefix = prefix.replace(/\/$/g, "");
@@ -877,19 +866,16 @@ async function routesToPaths(routes) {
         }
       }
       let path = route.path;
-      path = handlePath(path, prefix, route.entry);
+      path = handlePath(path, prefix);
       if (route.getStaticPaths && isDynamicSegmentsRoute(path)) {
         const staticPaths = await route.getStaticPaths();
         for (let staticPath of staticPaths) {
-          staticPath = handlePath(staticPath, prefix, route.entry);
+          staticPath = handlePath(staticPath, prefix);
           if (Array.isArray(route.children))
             await getPaths(route.children, staticPath);
         }
       }
-      if (route.index)
-        addEntry(prefix, route.entry);
       if (route.index && !path) {
-        addEntry("/", route.entry);
         paths.add("/");
       }
       if (Array.isArray(route.children))
@@ -897,16 +883,11 @@ async function routesToPaths(routes) {
     }
   };
   await getPaths(routes);
-  return { paths: Array.from(paths), pathToEntry };
-  function handlePath(path, prefix, entry) {
+  return { paths: Array.from(paths) };
+  function handlePath(path, prefix) {
     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;
   }
@@ -1029,8 +1010,12 @@ function extractHelmet(context, styleCollector) {
   const { helmet } = context;
   const htmlAttributes = helmet.htmlAttributes.toString();
   const bodyAttributes = helmet.bodyAttributes.toString();
+  let titleString = helmet.title.toString();
+  if (titleString.split(">")[1] === "</title") {
+    titleString = "";
+  }
   const metaStrings = [
-    helmet.title.toString(),
+    titleString,
     helmet.meta.toString(),
     helmet.link.toString(),
     helmet.script.toString()
@@ -1100,18 +1085,10 @@ function createLink$1(href) {
   return `<link rel="stylesheet" href="${href}">`;
 }
 
-function renderPreloadLinks(document, modules, ssrManifest) {
+function renderPreloadLinks(document, assets) {
   const seen = /* @__PURE__ */ new Set();
-  const preloadLinks = [];
-  Array.from(modules).forEach((id) => {
-    const files = ssrManifest[id] || [];
-    files.forEach((file) => {
-      if (!preloadLinks.includes(file))
-        preloadLinks.push(file);
-    });
-  });
-  if (preloadLinks) {
-    preloadLinks.forEach((file) => {
+  if (assets) {
+    assets.forEach((file) => {
       if (!seen.has(file)) {
         seen.add(file);
         renderPreloadLink(document, file);
@@ -1132,6 +1109,21 @@ function renderPreloadLink(document, file) {
       href: file,
       crossOrigin: ""
     });
+  } else if (file.endsWith(".woff") || file.endsWith(".woff2") || file.endsWith(".ttf")) {
+    appendLink(document, {
+      rel: "preload",
+      as: "font",
+      type: "font/woff2",
+      href: file,
+      crossOrigin: ""
+    });
+  } else if (file.endsWith(".png") || file.endsWith(".jpg") || file.endsWith(".jpeg") || file.endsWith(".webp") || file.endsWith(".gif") || file.endsWith(".ico") || file.endsWith(".svg")) {
+    appendLink(document, {
+      rel: "preload",
+      as: "image",
+      href: file,
+      crossOrigin: ""
+    });
   }
 }
 function createLink(document) {
@@ -1151,6 +1143,69 @@ function appendLink(document, attrs) {
   document.head.appendChild(link);
 }
 
+const DYNAMIC_IMPORT_REGEX = /import\("([^)]+)"\)/g;
+function collectAssets({
+  routes,
+  locationArg,
+  base,
+  serverManifest,
+  manifest,
+  ssrManifest
+}) {
+  const matches = reactRouterDom.matchRoutes([...routes], locationArg, base);
+  const routeEntries = matches?.map((item) => item.route.entry).filter(Boolean) ?? [];
+  const dynamicImports = /* @__PURE__ */ new Set();
+  matches?.forEach((item) => {
+    let lazyStr = "";
+    if (item.route.lazy) {
+      lazyStr += item.route.lazy.toString();
+    }
+    if (item.route.Component?._payload?._result) {
+      lazyStr += item.route.Component._payload._result.toString();
+    }
+    const match = lazyStr.matchAll(DYNAMIC_IMPORT_REGEX);
+    for (const m of match) {
+      dynamicImports.add(m[1].split("/").at(-1) ?? "");
+    }
+  });
+  const entries = /* @__PURE__ */ new Set();
+  routeEntries.forEach((e) => entries.add(e));
+  const manifestEntries = [...Object.entries(serverManifest)];
+  dynamicImports.forEach((name) => {
+    const result = manifestEntries.find(([_, value]) => value.file.endsWith(name));
+    if (result) {
+      entries.add(result[0]);
+    }
+  });
+  const modules = collectModulesForEntries(manifest, entries);
+  const assets = /* @__PURE__ */ new Set();
+  Array.from(modules).forEach((id) => {
+    const files = ssrManifest[id] || [];
+    files.forEach((file) => {
+      assets.add(file);
+    });
+  });
+  return assets;
+}
+function collectModulesForEntries(manifest, entries) {
+  const mods = /* @__PURE__ */ new Set();
+  if (!entries)
+    return mods;
+  for (const entry of entries)
+    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;
+}
+
+const dotVitedir = Number.parseInt(vite.version) >= 5 ? [".vite"] : [];
 function DefaultIncludedRoutes(paths, _routes) {
   return paths.filter((i) => !i.includes(":") && !i.includes("*"));
 }
@@ -1220,6 +1275,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   await vite.build(vite.mergeConfig(viteConfig, {
     build: {
       ssr: ssrEntry,
+      manifest: true,
       outDir: ssgOut,
       minify: false,
       cssCodeSplit: false,
@@ -1239,11 +1295,12 @@ 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 serverManifest = JSON.parse(await fs__default.readFile(node_path.join(ssgOut, ...dotVitedir, "manifest.json"), "utf-8"));
   const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('node.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 } = await routesToPaths(routes);
+  const { paths } = await routesToPaths(routes);
   let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
   routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
@@ -1251,7 +1308,6 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: configBase, ...crittersOptions }) : void 0;
   if (critters)
     console.log(`${kolorist.gray("[vite-react-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `critters`")}`);
-  const dotVitedir = Number.parseInt(vite.version) >= 5 ? [".vite"] : [];
   const ssrManifest = JSON.parse(await fs__default.readFile(node_path.join(out, ...dotVitedir, "ssr-manifest.json"), "utf-8"));
   const manifest = JSON.parse(await fs__default.readFile(node_path.join(out, ...dotVitedir, "manifest.json"), "utf-8"));
   let indexHTML = await fs__default.readFile(node_path.join(out, "index.html"), "utf-8");
@@ -1268,6 +1324,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
         const fetchUrl = `${remixRouter.withTrailingSlash(base)}${remixRouter.removeLeadingSlash(path)}`;
         const request = createRequest(fetchUrl);
+        const assets = !app ? collectAssets({ routes: [...routes2], locationArg: fetchUrl, base, serverManifest, manifest, ssrManifest }) : /* @__PURE__ */ new Set();
         const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes2], request, styleCollector, base);
         staticLoaderDataManifest[path] = routerContext?.loaderData;
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
@@ -1281,8 +1338,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM.JSDOM(renderedHTML);
-        const modules = collectModulesForEntrys(manifest, pathToEntry?.[path]);
-        renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
+        renderPreloadLinks(jsdom.window.document, assets);
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(path, html, appCtx) || html;
         transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`);
@@ -1356,23 +1412,6 @@ async function formatHtml(html, formatting) {
   }
   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;
-}
 
 function invariant(value, message) {
   if (value === false || value === null || typeof value === "undefined") {
@@ -1488,11 +1527,10 @@ function ssrServerPlugin({
           const indexHTML = await server.transformIndexHtml(url, template);
           const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
           const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
+          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
           metaAttributes.push(styleTag);
-          const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
           const mods = await Promise.all(
-            [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
+            [ssrEntry, entry].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
           );
           const assetsUrls = /* @__PURE__ */ new Set();
           const collectAssets = async (mod) => {
@@ -1501,7 +1539,7 @@ function ssrServerPlugin({
             const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
             const allDeps = [...deps, ...dynamicDeps];
             for (const dep of allDeps) {
-              if (dep.endsWith(".css")) {
+              if (dep.endsWith(".css") || dep.endsWith(".scss") || dep.endsWith(".sass") || dep.endsWith(".less")) {
                 assetsUrls.add(dep);
               } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
                 const depModule = await server.moduleGraph.getModuleByUrl(dep);

package/dist/node.d.cts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.cjs';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.cjs';
 import 'critters';
 import 'react';
 import 'react-router-dom';

package/dist/node.d.mts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.mjs';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.mjs';
 import 'critters';
 import 'react';
 import 'react-router-dom';

package/dist/node.d.ts

@@ -1,5 +1,5 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.870c683b.js';
+import { b as ViteReactSSGOptions } from './shared/vite-react-ssg.4d155759.js';
 import 'critters';
 import 'react';
 import 'react-router-dom';

package/dist/node.mjs

@@ -843,19 +843,8 @@ function getSize(str) {
   return `${(str.length / 1024).toFixed(2)} KiB`;
 }
 async function routesToPaths(routes) {
-  const pathToEntry = {};
-  function addEntry(path, entry) {
-    if (!entry)
-      return;
-    if (entry[0] === "/")
-      entry = entry.slice(1);
-    if (pathToEntry[path])
-      pathToEntry[path].add(entry);
-    else
-      pathToEntry[path] = /* @__PURE__ */ new Set([entry]);
-  }
   if (!routes || routes.length === 0)
-    return { paths: ["/"], pathToEntry };
+    return { paths: ["/"] };
   const paths = /* @__PURE__ */ new Set();
   const getPaths = async (routes2, prefix = "") => {
     prefix = prefix.replace(/\/$/g, "");
@@ -870,19 +859,16 @@ async function routesToPaths(routes) {
         }
       }
       let path = route.path;
-      path = handlePath(path, prefix, route.entry);
+      path = handlePath(path, prefix);
       if (route.getStaticPaths && isDynamicSegmentsRoute(path)) {
         const staticPaths = await route.getStaticPaths();
         for (let staticPath of staticPaths) {
-          staticPath = handlePath(staticPath, prefix, route.entry);
+          staticPath = handlePath(staticPath, prefix);
           if (Array.isArray(route.children))
             await getPaths(route.children, staticPath);
         }
       }
-      if (route.index)
-        addEntry(prefix, route.entry);
       if (route.index && !path) {
-        addEntry("/", route.entry);
         paths.add("/");
       }
       if (Array.isArray(route.children))
@@ -890,16 +876,11 @@ async function routesToPaths(routes) {
     }
   };
   await getPaths(routes);
-  return { paths: Array.from(paths), pathToEntry };
-  function handlePath(path, prefix, entry) {
+  return { paths: Array.from(paths) };
+  function handlePath(path, prefix) {
     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;
   }
@@ -1022,8 +1003,12 @@ function extractHelmet(context, styleCollector) {
   const { helmet } = context;
   const htmlAttributes = helmet.htmlAttributes.toString();
   const bodyAttributes = helmet.bodyAttributes.toString();
+  let titleString = helmet.title.toString();
+  if (titleString.split(">")[1] === "</title") {
+    titleString = "";
+  }
   const metaStrings = [
-    helmet.title.toString(),
+    titleString,
     helmet.meta.toString(),
     helmet.link.toString(),
     helmet.script.toString()
@@ -1093,18 +1078,10 @@ function createLink$1(href) {
   return `<link rel="stylesheet" href="${href}">`;
 }
 
-function renderPreloadLinks(document, modules, ssrManifest) {
+function renderPreloadLinks(document, assets) {
   const seen = /* @__PURE__ */ new Set();
-  const preloadLinks = [];
-  Array.from(modules).forEach((id) => {
-    const files = ssrManifest[id] || [];
-    files.forEach((file) => {
-      if (!preloadLinks.includes(file))
-        preloadLinks.push(file);
-    });
-  });
-  if (preloadLinks) {
-    preloadLinks.forEach((file) => {
+  if (assets) {
+    assets.forEach((file) => {
       if (!seen.has(file)) {
         seen.add(file);
         renderPreloadLink(document, file);
@@ -1125,6 +1102,21 @@ function renderPreloadLink(document, file) {
       href: file,
       crossOrigin: ""
     });
+  } else if (file.endsWith(".woff") || file.endsWith(".woff2") || file.endsWith(".ttf")) {
+    appendLink(document, {
+      rel: "preload",
+      as: "font",
+      type: "font/woff2",
+      href: file,
+      crossOrigin: ""
+    });
+  } else if (file.endsWith(".png") || file.endsWith(".jpg") || file.endsWith(".jpeg") || file.endsWith(".webp") || file.endsWith(".gif") || file.endsWith(".ico") || file.endsWith(".svg")) {
+    appendLink(document, {
+      rel: "preload",
+      as: "image",
+      href: file,
+      crossOrigin: ""
+    });
   }
 }
 function createLink(document) {
@@ -1144,6 +1136,69 @@ function appendLink(document, attrs) {
   document.head.appendChild(link);
 }
 
+const DYNAMIC_IMPORT_REGEX = /import\("([^)]+)"\)/g;
+function collectAssets({
+  routes,
+  locationArg,
+  base,
+  serverManifest,
+  manifest,
+  ssrManifest
+}) {
+  const matches = matchRoutes([...routes], locationArg, base);
+  const routeEntries = matches?.map((item) => item.route.entry).filter(Boolean) ?? [];
+  const dynamicImports = /* @__PURE__ */ new Set();
+  matches?.forEach((item) => {
+    let lazyStr = "";
+    if (item.route.lazy) {
+      lazyStr += item.route.lazy.toString();
+    }
+    if (item.route.Component?._payload?._result) {
+      lazyStr += item.route.Component._payload._result.toString();
+    }
+    const match = lazyStr.matchAll(DYNAMIC_IMPORT_REGEX);
+    for (const m of match) {
+      dynamicImports.add(m[1].split("/").at(-1) ?? "");
+    }
+  });
+  const entries = /* @__PURE__ */ new Set();
+  routeEntries.forEach((e) => entries.add(e));
+  const manifestEntries = [...Object.entries(serverManifest)];
+  dynamicImports.forEach((name) => {
+    const result = manifestEntries.find(([_, value]) => value.file.endsWith(name));
+    if (result) {
+      entries.add(result[0]);
+    }
+  });
+  const modules = collectModulesForEntries(manifest, entries);
+  const assets = /* @__PURE__ */ new Set();
+  Array.from(modules).forEach((id) => {
+    const files = ssrManifest[id] || [];
+    files.forEach((file) => {
+      assets.add(file);
+    });
+  });
+  return assets;
+}
+function collectModulesForEntries(manifest, entries) {
+  const mods = /* @__PURE__ */ new Set();
+  if (!entries)
+    return mods;
+  for (const entry of entries)
+    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;
+}
+
+const dotVitedir = Number.parseInt(version$1) >= 5 ? [".vite"] : [];
 function DefaultIncludedRoutes(paths, _routes) {
   return paths.filter((i) => !i.includes(":") && !i.includes("*"));
 }
@@ -1213,6 +1268,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   await build$1(mergeConfig(viteConfig, {
     build: {
       ssr: ssrEntry,
+      manifest: true,
       outDir: ssgOut,
       minify: false,
       cssCodeSplit: false,
@@ -1232,11 +1288,12 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
   const serverEntry = join(prefix, ssgOut, parse(ssrEntry).name + ext);
+  const serverManifest = JSON.parse(await fs.readFile(join(ssgOut, ...dotVitedir, "manifest.json"), "utf-8"));
   const _require = createRequire(import.meta.url);
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
-  const { paths, pathToEntry } = await routesToPaths(routes);
+  const { paths } = await routesToPaths(routes);
   let routesPaths = includeAllRoutes ? paths : await includedRoutes(paths, routes || []);
   routesPaths = DefaultIncludedRoutes(routesPaths);
   routesPaths = Array.from(new Set(routesPaths));
@@ -1244,7 +1301,6 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const critters = crittersOptions !== false ? await getCritters(outDir, { publicPath: configBase, ...crittersOptions }) : void 0;
   if (critters)
     console.log(`${gray("[vite-react-ssg]")} ${blue("Critical CSS generation enabled via `critters`")}`);
-  const dotVitedir = Number.parseInt(version$1) >= 5 ? [".vite"] : [];
   const ssrManifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, "ssr-manifest.json"), "utf-8"));
   const manifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, "manifest.json"), "utf-8"));
   let indexHTML = await fs.readFile(join(out, "index.html"), "utf-8");
@@ -1261,6 +1317,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
         const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`;
         const request = createRequest(fetchUrl);
+        const assets = !app ? collectAssets({ routes: [...routes2], locationArg: fetchUrl, base, serverManifest, manifest, ssrManifest }) : /* @__PURE__ */ new Set();
         const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes2], request, styleCollector, base);
         staticLoaderDataManifest[path] = routerContext?.loaderData;
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
@@ -1274,8 +1331,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
           initialState: null
         });
         const jsdom = new JSDOM(renderedHTML);
-        const modules = collectModulesForEntrys(manifest, pathToEntry?.[path]);
-        renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
+        renderPreloadLinks(jsdom.window.document, assets);
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(path, html, appCtx) || html;
         transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`);
@@ -1349,23 +1405,6 @@ async function formatHtml(html, formatting) {
   }
   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;
-}
 
 function invariant(value, message) {
   if (value === false || value === null || typeof value === "undefined") {
@@ -1481,11 +1520,10 @@ function ssrServerPlugin({
           const indexHTML = await server.transformIndexHtml(url, template);
           const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
           const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
+          const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes], fromNodeRequest(req), styleCollector, base);
           metaAttributes.push(styleTag);
-          const matchesEntries = routerContext?.matches.map((match) => match.route.entry).filter((entry2) => !!entry2).map((entry2) => entry2[0] === "/" ? entry2 : `/${entry2}`) ?? [];
           const mods = await Promise.all(
-            [ssrEntry, entry, ...matchesEntries].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
+            [ssrEntry, entry].map(async (entry2) => await server.moduleGraph.getModuleByUrl(entry2))
           );
           const assetsUrls = /* @__PURE__ */ new Set();
           const collectAssets = async (mod) => {
@@ -1494,7 +1532,7 @@ function ssrServerPlugin({
             const { deps = [], dynamicDeps = [] } = mod?.ssrTransformResult;
             const allDeps = [...deps, ...dynamicDeps];
             for (const dep of allDeps) {
-              if (dep.endsWith(".css")) {
+              if (dep.endsWith(".css") || dep.endsWith(".scss") || dep.endsWith(".sass") || dep.endsWith(".less")) {
                 assetsUrls.add(dep);
               } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
                 const depModule = await server.moduleGraph.getModuleByUrl(dep);

package/dist/shared/{vite-react-ssg.870c683b.d.cts → vite-react-ssg.4d155759.d.cts}

@@ -140,6 +140,8 @@ interface CommonRouteOptions {
     /**
      * Used to obtain static resources through manifest
      *
+     * **You are not required to use this field. It is only necessary when "prehydration style loss" occurs.**
+     *
      * @example `src/pages/home.tsx`
      */
     entry?: string;

package/dist/shared/{vite-react-ssg.870c683b.d.mts → vite-react-ssg.4d155759.d.mts}

@@ -140,6 +140,8 @@ interface CommonRouteOptions {
     /**
      * Used to obtain static resources through manifest
      *
+     * **You are not required to use this field. It is only necessary when "prehydration style loss" occurs.**
+     *
      * @example `src/pages/home.tsx`
      */
     entry?: string;

package/dist/shared/{vite-react-ssg.870c683b.d.ts → vite-react-ssg.4d155759.d.ts}

@@ -140,6 +140,8 @@ interface CommonRouteOptions {
     /**
      * Used to obtain static resources through manifest
      *
+     * **You are not required to use this field. It is only necessary when "prehydration style loss" occurs.**
+     *
      * @example `src/pages/home.tsx`
      */
     entry?: string;

package/package.json

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