npm - vite-react-ssg - Versions diffs - 0.0.3 → 0.1.0 - Mend

vite-react-ssg 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/LICENSE +21 -21
package/README.md +292 -238
package/bin/vite-react-ssg.js +3 -3
package/dist/chunks/jsdomGlobal.cjs +79 -79
package/dist/chunks/jsdomGlobal.mjs +79 -79
package/dist/index.cjs +37 -2
package/dist/index.d.ts +9 -3
package/dist/index.mjs +44 -10
package/dist/node/cli.cjs +29 -5
package/dist/node/cli.mjs +28 -4
package/dist/node.cjs +5 -2
package/dist/node.d.ts +4 -2
package/dist/node.mjs +3 -1
package/dist/shared/{vite-react-ssg.524ba00d.mjs → vite-react-ssg.7ee042ba.mjs} +279 -65
package/dist/shared/{vite-react-ssg.a5dfecac.cjs → vite-react-ssg.823b31c9.cjs} +279 -63
package/dist/{types-82f34756.d.ts → types-25b96ed0.d.ts} +8 -0
package/package.json +4 -2

package/dist/shared/{vite-react-ssg.a5dfecac.cjs → vite-react-ssg.823b31c9.cjs} RENAMED Viewed

@@ -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) {
@@ -900,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 {
@@ -1017,7 +1053,7 @@ function renderPreloadLink(document, file) {
     });
   }
 }
-function createLink(document) {
+function createLink$1(document) {
   return document.createElement("link");
 }
 function setAttrs(el, attrs) {
@@ -1029,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("*"));
 }
@@ -1104,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.a5dfecac.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);
@@ -1125,7 +1218,7 @@ 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 = "";
@@ -1136,7 +1229,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const renderedHTML = await renderHTML({
           rootContainerId,
           appHTML,
-          indexHTML,
+          indexHTML: transformedIndexHTML,
           metaAttributes,
           bodyAttributes,
           htmlAttributes,
@@ -1180,69 +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,
-  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 formatHtml(html, formatting) {
   if (formatting === "minify") {
     const htmlMinifier = await import('html-minifier');
@@ -1278,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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.0.3",
+  "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",
@@ -110,4 +112,4 @@
     "vite-plugin-pwa": "^0.16.4",
     "vitest": "0.33.0"
   }
-}
+}