vite-react-ssg 0.0.2 → 0.1.0

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

@@ -1,10 +1,12 @@
 import { join, isAbsolute, parse, dirname } from 'node:path';
 import { createRequire } from 'node:module';
-import { gray, yellow, blue, dim, cyan, red, green } from 'kolorist';
+import { gray, yellow, blue, dim, cyan, red, green, bold, reset, bgLightCyan } from 'kolorist';
 import fs from 'fs-extra';
-import { resolveConfig, build as build$1, mergeConfig } from 'vite';
+import { resolveConfig, build as build$1, mergeConfig, createServer, version as version$1 } from 'vite';
 import { JSDOM } from 'jsdom';
 import { S as SiteMetadataDefaults, s as serializeState } from './vite-react-ssg.9d005d5e.mjs';
+import express from 'express';
+import { readFileSync } from 'node:fs';
 import React from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router-dom/server.js';
@@ -868,9 +870,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;
@@ -878,6 +881,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);
@@ -888,6 +895,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 || join(config.root, entry);
+}
+const { version } = JSON.parse(
+  readFileSync(new URL("../../package.json", import.meta.url)).toString()
+);
 
 async function getCritters(outDir, options = {}) {
   try {
@@ -958,17 +998,18 @@ async function render(routes, request) {
     throw context;
   const router = createStaticRouter(dataRoutes, context);
   const app = /* @__PURE__ */ React.createElement(HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React.createElement(SiteMetadataDefaults, null), /* @__PURE__ */ React.createElement(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) {
@@ -1004,7 +1045,7 @@ function renderPreloadLink(document, file) {
     });
   }
 }
-function createLink(document) {
+function createLink$1(document) {
   return document.createElement("link");
 }
 function setAttrs(el, attrs) {
@@ -1016,11 +1057,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.readFile(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("*"));
 }
@@ -1112,18 +1210,21 @@ async function build(ssgOptions = {}, viteConfig = {}) {
       try {
         const appCtx = await createRoot(false, route);
         const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = 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(renderedHTML);
@@ -1164,59 +1265,11 @@ ${gray("[vite-react-ssg]")} ${green("Build finished.")}`);
   }, waitInSeconds * 1e3);
   timeout.unref();
 }
-async function detectEntry(root) {
-  const scriptSrcReg = /<script(?:.*?)src=["'](.+?)["'](?!<)(?:.*)\>(?:[\n\r\s]*?)(?:<\/script>)/img;
-  const html = await fs.readFile(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 || 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');
@@ -1252,4 +1305,184 @@ function collectModules(manifest, entry, mods = /* @__PURE__ */ new Set()) {
   return mods;
 }
 
-export { build as b };
+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(
+    dim(green("  \u279C")) + dim("  press ") + bold("h") + 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(
+        [
+          "",
+          bold("  Shortcuts"),
+          ...shortcuts.map(
+            (shortcut2) => dim("  press ") + bold(shortcut2.key) + 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 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.readFile(join(root, "index.html"), "utf-8");
+  let viteServer;
+  globalThis.__ssr_start_time = performance.now();
+  createServer$1().then((app) => {
+    const port = viteServer.config.server.port || 5173;
+    const server = app.listen(port, () => {
+      printServerInfo(viteServer);
+      bindShortcuts(viteServer, server);
+    });
+  });
+  async function createServer$1() {
+    process.env.__DEV_MODE_SSR = "true";
+    const app = express();
+    viteServer = await 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 ${reset(bold(`${Math.round(
+        // @ts-expect-error global var
+        performance.now() - globalThis.__ssr_start_time
+      )}ms`))}`;
+    }
+    info(
+      `
+ ${bgLightCyan(` VITE-REACT-SSG v${version} `)}`,
+      { clear: !server.config.logger.hasWarned }
+    );
+    info(
+      `${cyan(`
+  VITE v${version$1}`) + dim(ssrReadyMessage)}
+`
+    );
+  }
+  info(
+    green("  dev server running at:")
+  );
+  printUrls(url, info);
+}
+function printUrls(url, info) {
+  const colorUrl = (url2) => cyan(url2.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`));
+  info(`  ${green("\u279C")}  ${bold("Local")}:   ${colorUrl(url)}`);
+}
+
+export { build as b, dev as d };