vite-react-ssg 0.0.2 → 0.1.0

package/dist/shared/{vite-react-ssg.0e1b881e.cjs → vite-react-ssg.823b31c9.cjs}

@@ -7,6 +7,8 @@ const fs = require('fs-extra');
 const vite = require('vite');
 const JSDOM = require('jsdom');
 const SiteMetadataDefaults = require('./vite-react-ssg.4ca822c0.cjs');
+const express = require('express');
+const node_fs = require('node:fs');
 const React = require('react');
 const reactHelmetAsync = require('react-helmet-async');
 const server_js = require('react-router-dom/server.js');
@@ -16,6 +18,7 @@ const server = require('react-dom/server');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+const express__default = /*#__PURE__*/_interopDefaultCompat(express);
 const React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function getDefaultExportFromCjs (x) {
@@ -875,9 +878,10 @@ function routesToPaths(routes) {
       pathToEntry[path] = /* @__PURE__ */ new Set([entry]);
   }
   if (!routes)
-    return { paths: ["/"] };
+    return { paths: ["/"], pathToEntry };
   const paths = /* @__PURE__ */ new Set();
   const getPaths = (routes2, prefix = "") => {
+    const parentPath = prefix;
     prefix = prefix.replace(/\/$/g, "");
     for (const route of routes2) {
       let path = route.path;
@@ -885,6 +889,10 @@ function routesToPaths(routes) {
         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));
+        }
       }
       if (route.index)
         addEntry(prefix, route.entry);
@@ -895,6 +903,39 @@ function routesToPaths(routes) {
   getPaths(routes);
   return { paths: Array.from(paths), pathToEntry };
 }
+function createFetchRequest(req) {
+  const origin = `${req.protocol}://${req.get("host")}`;
+  const url = new URL(req.originalUrl || req.url, origin);
+  const controller = new AbortController();
+  req.on("close", () => controller.abort());
+  const headers = new Headers();
+  for (const [key, values] of Object.entries(req.headers)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values)
+          headers.append(key, value);
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+  const init = {
+    method: req.method,
+    headers,
+    signal: controller.signal
+  };
+  if (req.method !== "GET" && req.method !== "HEAD")
+    init.body = req.body;
+  return new Request(url.href, init);
+}
+async function resolveAlias(config, entry) {
+  const resolver = config.createResolver();
+  const result = await resolver(entry, config.root);
+  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.823b31c9.cjs', document.baseURI).href)))).toString()
+);
 
 async function getCritters(outDir, options = {}) {
   try {
@@ -965,17 +1006,18 @@ async function render(routes, request) {
     throw context;
   const router = server_js.createStaticRouter(dataRoutes, context);
   const app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React__default.createElement(SiteMetadataDefaults.SiteMetadataDefaults, null), /* @__PURE__ */ React__default.createElement(server_js.StaticRouterProvider, { router, context }));
-  const appHtml = await renderStaticApp(app);
+  const appHTML = await renderStaticApp(app);
   const { helmet } = helmetContext;
-  helmet.htmlAttributes.toString();
-  helmet.bodyAttributes.toString();
-  [
+  const htmlAttributes = helmet.htmlAttributes.toString();
+  const bodyAttributes = helmet.bodyAttributes.toString();
+  const metaStrings = [
     helmet.title.toString(),
     helmet.meta.toString(),
     helmet.link.toString(),
     helmet.script.toString()
   ];
-  return appHtml;
+  const metaAttributes = metaStrings.filter(Boolean);
+  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
 }
 
 function renderPreloadLinks(document, modules, ssrManifest) {
@@ -1011,7 +1053,7 @@ function renderPreloadLink(document, file) {
     });
   }
 }
-function createLink(document) {
+function createLink$1(document) {
   return document.createElement("link");
 }
 function setAttrs(el, attrs) {
@@ -1023,11 +1065,68 @@ function appendLink(document, attrs) {
   const exits = document.head.querySelector(`link[href='${attrs.file}']`);
   if (exits)
     return;
-  const link = createLink(document);
+  const link = createLink$1(document);
   setAttrs(link, attrs);
   document.head.appendChild(link);
 }
 
+async function renderHTML({
+  rootContainerId,
+  indexHTML,
+  appHTML,
+  metaAttributes,
+  bodyAttributes,
+  htmlAttributes,
+  initialState
+}) {
+  const stateScript = initialState ? `
+<script>window.__INITIAL_STATE__=${initialState}<\/script>` : "";
+  const headStartTag = "<head>";
+  const metaTags = metaAttributes.join("");
+  indexHTML = indexHTML.replace(headStartTag, headStartTag + metaTags);
+  const bodyStartTag = "<body";
+  indexHTML = indexHTML.replace(bodyStartTag, `${bodyStartTag} ${bodyAttributes}`);
+  const htmlStartTag = "<html";
+  indexHTML = indexHTML.replace(htmlStartTag, `${htmlStartTag} ${htmlAttributes}`);
+  const container = `<div id="${rootContainerId}"></div>`;
+  if (indexHTML.includes(container)) {
+    return indexHTML.replace(
+      container,
+      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}`
+    );
+  }
+  const html5Parser = await import('html5parser');
+  const ast = html5Parser.parse(indexHTML);
+  let renderedOutput;
+  html5Parser.walk(ast, {
+    enter: (node) => {
+      if (!renderedOutput && node?.type === html5Parser.SyntaxKind.Tag && Array.isArray(node.attributes) && node.attributes.length > 0 && node.attributes.some((attr) => attr.name.value === "id" && attr.value?.value === rootContainerId)) {
+        const attributesStringified = [...node.attributes.map(({ name: { value: name }, value }) => `${name}="${value.value}"`)].join(" ");
+        const indexHTMLBefore = indexHTML.slice(0, node.start);
+        const indexHTMLAfter = indexHTML.slice(node.end);
+        renderedOutput = `${indexHTMLBefore}<${node.name} ${attributesStringified} data-server-rendered="true">${appHTML}</${node.name}>${stateScript}${indexHTMLAfter}`;
+      }
+    }
+  });
+  if (!renderedOutput)
+    throw new Error(`Could not find a tag with id="${rootContainerId}" to replace it with server-side rendered HTML`);
+  return renderedOutput;
+}
+async function detectEntry(root) {
+  const scriptSrcReg = /<script(?:.*?)src=["'](.+?)["'](?!<)(?:.*)\>(?:[\n\r\s]*?)(?:<\/script>)/img;
+  const html = await fs__default.readFile(node_path.join(root, "index.html"), "utf-8");
+  const scripts = [...html.matchAll(scriptSrcReg)];
+  const [, entry] = scripts.find((matchResult) => {
+    const [script] = matchResult;
+    const [, scriptType] = script.match(/.*\stype=(?:'|")?([^>'"\s]+)/i) || [];
+    return scriptType === "module";
+  }) || [];
+  return entry || "src/main.ts";
+}
+function createLink(href) {
+  return `<link rel="stylesheet" href="${href}">`;
+}
+
 function DefaultIncludedRoutes(paths, _routes) {
   return paths.filter((i) => !i.includes(":") && !i.includes("*"));
 }
@@ -1098,7 +1197,7 @@ 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.0e1b881e.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.823b31c9.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
@@ -1119,18 +1218,21 @@ async function build(ssgOptions = {}, viteConfig = {}) {
       try {
         const appCtx = await createRoot(false, route);
         const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState } = appCtx;
-        const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx);
+        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 = await render([...routes2], request);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
           appHTML,
-          indexHTML,
+          indexHTML: transformedIndexHTML,
+          metaAttributes,
+          bodyAttributes,
+          htmlAttributes,
           initialState: null
         });
         const jsdom = new JSDOM.JSDOM(renderedHTML);
@@ -1171,59 +1273,11 @@ ${kolorist.gray("[vite-react-ssg]")} ${kolorist.green("Build finished.")}`);
   }, waitInSeconds * 1e3);
   timeout.unref();
 }
-async function detectEntry(root) {
-  const scriptSrcReg = /<script(?:.*?)src=["'](.+?)["'](?!<)(?:.*)\>(?:[\n\r\s]*?)(?:<\/script>)/img;
-  const html = await fs__default.readFile(node_path.join(root, "index.html"), "utf-8");
-  const scripts = [...html.matchAll(scriptSrcReg)];
-  const [, entry] = scripts.find((matchResult) => {
-    const [script] = matchResult;
-    const [, scriptType] = script.match(/.*\stype=(?:'|")?([^>'"\s]+)/i) || [];
-    return scriptType === "module";
-  }) || [];
-  return entry || "src/main.ts";
-}
-async function resolveAlias(config, entry) {
-  const resolver = config.createResolver();
-  const result = await resolver(entry, config.root);
-  return result || node_path.join(config.root, entry);
-}
 function rewriteScripts(indexHTML, mode) {
   if (!mode || mode === "sync")
     return indexHTML;
   return indexHTML.replace(/<script type="module" /g, `<script type="module" ${mode} `);
 }
-async function renderHTML({
-  rootContainerId,
-  indexHTML,
-  appHTML,
-  initialState
-}) {
-  const stateScript = initialState ? `
-<script>window.__INITIAL_STATE__=${initialState}<\/script>` : "";
-  const container = `<div id="${rootContainerId}"></div>`;
-  if (indexHTML.includes(container)) {
-    return indexHTML.replace(
-      container,
-      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}`
-    );
-  }
-  const html5Parser = await import('html5parser');
-  const ast = html5Parser.parse(indexHTML);
-  let renderedOutput;
-  html5Parser.walk(ast, {
-    enter: (node) => {
-      if (!renderedOutput && node?.type === html5Parser.SyntaxKind.Tag && Array.isArray(node.attributes) && node.attributes.length > 0 && node.attributes.some((attr) => attr.name.value === "id" && attr.value?.value === rootContainerId)) {
-        const attributesStringified = [...node.attributes.map(({ name: { value: name }, value }) => `${name}="${value.value}"`)].join(" ");
-        const indexHTMLBefore = indexHTML.slice(0, node.start);
-        const indexHTMLAfter = indexHTML.slice(node.end);
-        renderedOutput = `${indexHTMLBefore}<${node.name} ${attributesStringified} data-server-rendered="true">${appHTML}</${node.name}>${stateScript}${indexHTMLAfter}`;
-      }
-    }
-  });
-  if (!renderedOutput)
-    throw new Error(`Could not find a tag with id="${rootContainerId}" to replace it with server-side rendered HTML`);
-  return renderedOutput;
-}
 async function formatHtml(html, formatting) {
   if (formatting === "minify") {
     const htmlMinifier = await import('html-minifier');
@@ -1259,4 +1313,185 @@ function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
   return mods;
 }
 
+const SHORTCUTS = [
+  {
+    key: "u",
+    description: "show server url",
+    action(vite, _) {
+      vite.config.logger.info("");
+      printServerInfo(vite, true);
+    }
+  },
+  {
+    key: "c",
+    description: "clear console",
+    action(vite, _) {
+      vite.config.logger.clearScreen("error");
+    }
+  },
+  {
+    key: "q",
+    description: "quit",
+    action(_, server) {
+      server.close(() => process.exit());
+    }
+  }
+];
+function bindShortcuts(viteServer, server) {
+  if (!process.stdin.isTTY || process.env.CI)
+    return;
+  viteServer.config.logger.info(
+    kolorist.dim(kolorist.green("  \u279C")) + kolorist.dim("  press ") + kolorist.bold("h") + kolorist.dim(" to show help")
+  );
+  const shortcuts = SHORTCUTS;
+  let actionRunning = false;
+  const onInput = async (input) => {
+    if (input === "" || input === "") {
+      try {
+        await server.close();
+      } finally {
+        process.exit(1);
+      }
+      return;
+    }
+    if (actionRunning)
+      return;
+    if (input === "h") {
+      viteServer.config.logger.info(
+        [
+          "",
+          kolorist.bold("  Shortcuts"),
+          ...shortcuts.map(
+            (shortcut2) => kolorist.dim("  press ") + kolorist.bold(shortcut2.key) + kolorist.dim(` to ${shortcut2.description}`)
+          )
+        ].join("\n")
+      );
+    }
+    const shortcut = shortcuts.find((shortcut2) => shortcut2.key === input);
+    if (!shortcut)
+      return;
+    actionRunning = true;
+    await shortcut.action(viteServer, server);
+    actionRunning = false;
+  };
+  process.stdin.setRawMode(true);
+  process.stdin.on("data", onInput).setEncoding("utf8").resume();
+  server.on("close", () => {
+    process.stdin.off("data", onInput).pause();
+  });
+}
+
+async function dev(ssgOptions = {}, viteConfig = {}) {
+  const mode = process.env.MODE || process.env.NODE_ENV || ssgOptions.mode || "development";
+  const config = await vite.resolveConfig(viteConfig, "serve", mode, mode);
+  const cwd = process.cwd();
+  const root = config.root || cwd;
+  const {
+    entry = await detectEntry(root),
+    onBeforePageRender,
+    onPageRendered,
+    rootContainerId = "root"
+  } = Object.assign({}, config.ssgOptions || {}, ssgOptions);
+  const ssrEntry = await resolveAlias(config, entry);
+  const template = await fs__default.readFile(node_path.join(root, "index.html"), "utf-8");
+  let viteServer;
+  globalThis.__ssr_start_time = performance.now();
+  createServer().then((app) => {
+    const port = viteServer.config.server.port || 5173;
+    const server = app.listen(port, () => {
+      printServerInfo(viteServer);
+      bindShortcuts(viteServer, server);
+    });
+  });
+  async function createServer() {
+    process.env.__DEV_MODE_SSR = "true";
+    const app = express__default();
+    viteServer = await vite.createServer({
+      // ...options,
+      server: { middlewareMode: true },
+      appType: "custom"
+    });
+    app.use(viteServer.middlewares);
+    app.use("*", async (req, res) => {
+      try {
+        const url = req.originalUrl;
+        const indexHTML = await viteServer.transformIndexHtml(url, template);
+        const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
+        const appCtx = await createRoot(false, url);
+        const { routes } = appCtx;
+        const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req));
+        const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
+        const assetsUrls = /* @__PURE__ */ new Set();
+        const collectAssets = async (mod2) => {
+          if (!mod2?.ssrTransformResult)
+            return;
+          const { deps = [], dynamicDeps = [] } = mod2?.ssrTransformResult;
+          const allDeps = [...deps, ...dynamicDeps];
+          for (const dep of allDeps) {
+            if (dep.endsWith(".css")) {
+              assetsUrls.add(dep);
+            } else if (dep.endsWith(".ts") || dep.endsWith(".tsx")) {
+              const depModule = await viteServer.moduleGraph.getModuleByUrl(dep);
+              depModule && await collectAssets(depModule);
+            }
+          }
+        };
+        await collectAssets(mod);
+        const preloadLink = [...assetsUrls].map((item) => createLink(item));
+        metaAttributes.push(...preloadLink);
+        const renderedHTML = await renderHTML({
+          rootContainerId,
+          appHTML,
+          indexHTML: transformedIndexHTML,
+          metaAttributes,
+          bodyAttributes,
+          htmlAttributes,
+          initialState: null
+        });
+        const transformed = await onPageRendered?.(url, renderedHTML, appCtx) || renderedHTML;
+        res.status(200).set({ "Content-Type": "text/html" }).end(transformed);
+      } catch (e) {
+        viteServer.ssrFixStacktrace(e);
+        console.error(`[vite-react-ssg] error: ${e.stack}`);
+        res.status(500).end(e.stack);
+      }
+    });
+    return app;
+  }
+}
+async function printServerInfo(server, onlyUrl = false) {
+  const info = server.config.logger.info;
+  const port = server.config.server.port || 5173;
+  const url = `http://localhost:${port}/`;
+  if (!onlyUrl) {
+    let ssrReadyMessage = " -- SSR";
+    if (globalThis.__ssr_start_time) {
+      ssrReadyMessage += ` ready in ${kolorist.reset(kolorist.bold(`${Math.round(
+        // @ts-expect-error global var
+        performance.now() - globalThis.__ssr_start_time
+      )}ms`))}`;
+    }
+    info(
+      `
+ ${kolorist.bgLightCyan(` VITE-REACT-SSG v${version} `)}`,
+      { clear: !server.config.logger.hasWarned }
+    );
+    info(
+      `${kolorist.cyan(`
+  VITE v${vite.version}`) + kolorist.dim(ssrReadyMessage)}
+`
+    );
+  }
+  info(
+    kolorist.green("  dev server running at:")
+  );
+  printUrls(url, info);
+}
+function printUrls(url, info) {
+  const colorUrl = (url2) => kolorist.cyan(url2.replace(/:(\d+)\//, (_, port) => `:${kolorist.bold(port)}/`));
+  info(`  ${kolorist.green("\u279C")}  ${kolorist.bold("Local")}:   ${colorUrl(url)}`);
+}
+
 exports.build = build;
+exports.dev = dev;

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

@@ -126,6 +126,14 @@ interface ViteReactSSGClientOptions {
      * @default `#root`
      */
     rootContainer?: string | Element;
+    /**
+     * Use SSR during development.
+     *
+     * If false, the 'dev' script in 'package.json' needs to be set to `"vite"`.
+     *
+     * @default true
+     */
+    ssrWhenDev?: boolean;
 }
 interface CommonRouteOptions {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -75,6 +75,7 @@
     }
   },
   "dependencies": {
+    "express": "^4.18.2",
     "fs-extra": "^11.1.1",
     "html-minifier": "^4.0.0",
     "html5parser": "^2.0.2",
@@ -86,6 +87,7 @@
   },
   "devDependencies": {
     "@ririd/eslint-config": "0.6.0",
+    "@types/express": "^4.17.17",
     "@types/fs-extra": "^11.0.1",
     "@types/html-minifier": "^4.0.2",
     "@types/jsdom": "^21.1.1",