npm - vite-react-ssg - Versions diffs - 0.6.2 → 0.7.0-beta.1 - Mend

vite-react-ssg 0.6.2 → 0.7.0-beta.1

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 (21) hide show

package/LICENSE +21 -21
package/README.md +555 -555
package/bin/vite-react-ssg.js +3 -3
package/dist/chunks/jsdomGlobal.cjs +80 -79
package/dist/chunks/jsdomGlobal.mjs +80 -79
package/dist/client/single-page.cjs +1 -1
package/dist/client/single-page.mjs +1 -1
package/dist/index.cjs +31 -2
package/dist/index.d.cts +6 -0
package/dist/index.d.mts +6 -0
package/dist/index.d.ts +6 -0
package/dist/index.mjs +31 -2
package/dist/node/cli.cjs +4 -1
package/dist/node/cli.mjs +4 -1
package/dist/node.cjs +224 -85
package/dist/node.mjs +225 -86
package/dist/shared/vite-react-ssg.0408f7e1.cjs +72 -0
package/dist/shared/vite-react-ssg.054e813a.mjs +65 -0
package/dist/shared/{vite-react-ssg.a009fbf1.mjs → vite-react-ssg.579feabb.mjs} +1 -1
package/dist/shared/{vite-react-ssg.e6991406.cjs → vite-react-ssg.bee8a5a9.cjs} +1 -1
package/package.json +7 -12

package/dist/node.cjs CHANGED Viewed

@@ -6,12 +6,15 @@ const kolorist = require('kolorist');
 const fs = require('fs-extra');
 const vite = require('vite');
 const JSDOM = require('jsdom');
-const state = require('./shared/vite-react-ssg.e6991406.cjs');
+const state = require('./shared/vite-react-ssg.bee8a5a9.cjs');
+const remixRouter = require('./shared/vite-react-ssg.0408f7e1.cjs');
 const node_fs = require('node:fs');
 const React = require('react');
 const reactHelmetAsync = require('react-helmet-async');
 const node_stream = require('node:stream');
 const server = require('react-dom/server');
+const reactRouterDom = require('react-router-dom');
+const node_events = require('node:events');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -919,23 +922,6 @@ function createRequest(path) {
   url.pathname = path;
   return new Request(url.href);
 }
-function joinUrlSegments(a, b) {
-  if (!a || !b)
-    return a || b || "";
-  if (a[a.length - 1] === "/")
-    a = a.substring(0, a.length - 1);
-  if (b[0] !== "/")
-    b = `/${b}`;
-  return a + b;
-}
-function removeLeadingSlash(str) {
-  return str[0] === "/" ? str.slice(1) : str;
-}
-function withTrailingSlash(path) {
-  if (path[path.length - 1] !== "/")
-    return `${path}/`;
-  return path;
-}
 const dynamicRE = /[:*?]/;
 function isDynamicSegmentsRoute(route) {
   if (!route)
@@ -1050,6 +1036,7 @@ function extractHelmet(context, styleCollector) {
   return { htmlAttributes, bodyAttributes, metaAttributes, styleTag };
 }
+const SCRIPT_COMMENT_PLACEHOLDER = "/* SCRIPT_COMMENT_PLACEHOLDER */";
 async function renderHTML({
   rootContainerId,
   indexHTML,
@@ -1061,6 +1048,8 @@ async function renderHTML({
 }) {
   const stateScript = initialState ? `
 <script>window.__INITIAL_STATE__=${initialState}<\/script>` : "";
+  const scriptPlaceHolder = `
+<script>${SCRIPT_COMMENT_PLACEHOLDER}<\/script>`;
   const headStartTag = "<head>";
   const metaTags = metaAttributes.join("");
   indexHTML = indexHTML.replace(headStartTag, headStartTag + metaTags);
@@ -1072,7 +1061,7 @@ async function renderHTML({
   if (indexHTML.includes(container)) {
     return indexHTML.replace(
       container,
-      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}`
+      `<div id="${rootContainerId}" data-server-rendered="true">${appHTML}</div>${stateScript}${scriptPlaceHolder}`
     );
   }
   const html5Parser = await import('html5parser');
@@ -1093,7 +1082,7 @@ async function renderHTML({
   return renderedOutput;
 }
 async function detectEntry(root) {
-  const scriptSrcReg = /<script(?:.*?)src=["'](.+?)["'](?!<)(?:.*)\>(?:[\n\r\s]*?)(?:<\/script>)/img;
+  const scriptSrcReg = /<script(?:.*?)src=["'](.+?)["'](?!<)(?:.*)\>(?:[\n\r\s]*?)(?:<\/script>)/gim;
   const html = await fs__default.readFile(node_path.join(root, "index.html"), "utf-8");
   const scripts = [...html.matchAll(scriptSrcReg)];
   const [, entry] = scripts.find((matchResult) => {
@@ -1166,7 +1155,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const config = await vite.resolveConfig(viteConfig, "build", mode, mode);
   const cwd = process.cwd();
   const root = config.root || cwd;
-  const ssgOut = node_path.join(root, ".vite-react-ssg-temp", Math.random().toString(36).substring(2, 12));
+  const hash = Math.random().toString(36).substring(2, 12);
+  const ssgOut = node_path.join(root, ".vite-react-ssg-temp", hash);
   const outDir = config.build.outDir || "dist";
   const out = node_path.isAbsolute(outDir) ? outDir : node_path.join(root, outDir);
   const configBase = config.base;
@@ -1205,7 +1195,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   if (mock) {
     const { jsdomGlobal } = await import('./chunks/jsdomGlobal.cjs');
@@ -1230,7 +1221,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         }
       }
     },
-    mode: config.mode
+    mode: config.mode,
+    ssr: { noExternal: ["vite-react-ssg"] }
   }));
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
@@ -1254,6 +1246,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   indexHTML = rewriteScripts(indexHTML, script);
   const queue = new PQueue({ concurrency });
   const crittersQueue = new PQueue({ concurrency: 1 });
+  const staticLoaderDataManifest = {};
   for (const path of routesPaths) {
     queue.add(async () => {
       try {
@@ -1261,9 +1254,10 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         const { initialState, base, routes: routes2, triggerOnSSRAppRendered, transformState = state.serializeState, getStyleCollector, app } = appCtx;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
         const transformedIndexHTML = await onBeforePageRender?.(path, indexHTML, appCtx) || indexHTML;
-        const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`;
+        const fetchUrl = `${remixRouter.withTrailingSlash(base)}${remixRouter.removeLeadingSlash(path)}`;
         const request = createRequest(fetchUrl);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render(app ?? [...routes2], request, styleCollector, base);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes2], request, styleCollector, base);
+        staticLoaderDataManifest[path] = routerContext?.loaderData;
         await triggerOnSSRAppRendered?.(path, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1279,6 +1273,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         renderPreloadLinks(jsdom.window.document, modules, ssrManifest);
         const html = jsdom.serialize();
         let transformed = await onPageRendered?.(path, html, appCtx) || html;
+        transformed = transformed.replace(SCRIPT_COMMENT_PLACEHOLDER, `window.__VITE_REACT_SSG_HASH__ = '${hash}'`);
         if (critters) {
           transformed = await crittersQueue.add(() => critters.process(transformed));
           transformed = transformed.replace(/<link\srel="stylesheet"/g, '<link rel="stylesheet" crossorigin');
@@ -1300,6 +1295,7 @@ ${err.stack}`);
     });
   }
   await queue.start().onIdle();
+  await fs__default.writeFile(node_path.join(out, `static-loader-data-manifest-${hash}.json`), JSON.stringify(staticLoaderDataManifest, null, 2));
   await fs__default.remove(node_path.join(root, ".vite-react-ssg-temp"));
   const pwaPlugin = config.plugins.find((i) => i.name === "vite-plugin-pwa")?.api;
   if (pwaPlugin && !pwaPlugin.disabled && pwaPlugin.generateSW) {
@@ -1397,6 +1393,201 @@ function fromNodeRequest(nodeReq) {
   };
   return new Request(url.href, init);
 }
+async function toNodeRequest(res, nodeRes) {
+  nodeRes.statusCode = res.status;
+  nodeRes.statusMessage = res.statusText;
+  for (const [name, value] of res.headers) {
+    nodeRes.setHeader(name, value);
+  }
+  if (res.body) {
+    const responseBody = res.body;
+    const readable = node_stream.Readable.from(responseBody);
+    readable.pipe(nodeRes);
+    await node_events.once(readable, "end");
+  } else {
+    nodeRes.end();
+  }
+}
+function ssrServerPlugin({
+  template,
+  ssrEntry,
+  onBeforePageRender,
+  entry,
+  rootContainerId,
+  onPageRendered
+}) {
+  return {
+    name: "vite-react-ssg:dev-server-remix",
+    configureServer(server) {
+      const renderMiddleware = async (req, res, _next) => {
+        try {
+          const url = req.originalUrl;
+          const createRoot = await server.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
+          const appCtx = await createRoot(false, url);
+          const { routes, getStyleCollector, base, app } = appCtx;
+          const searchParams = new URLSearchParams(url.split("?")[1]);
+          if (!app && searchParams.has("_data")) {
+            const request = fromNodeRequest(req);
+            const url2 = new URL(request.url);
+            const routeId = decodeURIComponent(searchParams.get("_data"));
+            const matches = reactRouterDom.matchRoutes(
+              remixRouter.convertRoutesToDataRoutes([...routes], (route) => route),
+              {
+                pathname: url2.pathname,
+                search: url2.search,
+                hash: url2.hash,
+                state: null,
+                key: "default"
+              },
+              base
+            );
+            if (!matches) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const match = matches.find((m) => m.route.id === routeId);
+            if (!match) {
+              res.statusCode = 404;
+              res.end(`Route not found: ${routeId}`);
+              return;
+            }
+            const loader = match.route.loader ?? await match.route.lazy?.().then((m) => m.loader);
+            if (!loader) {
+              res.statusCode = 200;
+              res.end(`There is no loader for the route: ${routeId}`);
+              return;
+            }
+            const response = await callRouteLoader({
+              loader,
+              params: match.params,
+              request,
+              routeId
+            });
+            await toNodeRequest(response, res);
+            return;
+          }
+          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);
+          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))
+          );
+          const assetsUrls = /* @__PURE__ */ new Set();
+          const collectAssets = async (mod) => {
+            if (!mod || !mod?.ssrTransformResult)
+              return;
+            const { deps = [], dynamicDeps = [] } = mod?.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 server.moduleGraph.getModuleByUrl(dep);
+                depModule && await collectAssets(depModule);
+              }
+            }
+          };
+          await Promise.all(mods.map(async (mod) => collectAssets(mod)));
+          const preloadLink = [...assetsUrls].map((item) => createLink$1(remixRouter.joinUrlSegments(server.config.base, 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.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          const isDev = "pluginContainer" in server;
+          const headers = isDev ? server.config.server.headers : server.config.preview.headers;
+          vite.send(req, res, transformed, "html", { headers });
+        } catch (e) {
+          server.ssrFixStacktrace(e);
+          console.error(`[vite-react-ssg] error: ${e.stack}`);
+          res.statusCode = 500;
+          res.end(e.stack);
+        }
+      };
+      return () => {
+        server.middlewares.use(renderMiddleware);
+      };
+    }
+  };
+}
+async function callRouteLoader({
+  // loadContext,
+  loader,
+  params,
+  request,
+  routeId
+  // singleFetch,
+  // response,
+}) {
+  const result = await loader({
+    request: stripDataParam(stripIndexParam(request)),
+    // context: loadContext,
+    params
+    // Only provided when single fetch is enabled, and made available via
+    // `defineLoader` types, not `LoaderFunctionArgs`
+    // ...(singleFetch ? { response } : null),
+  });
+  if (result === void 0) {
+    throw new Error(
+      `You defined a loader for route "${routeId}" but didn't return anything from your \`loader\` function. Please return a value or \`null\`.`
+    );
+  }
+  return isResponse(result) ? result : reactRouterDom.json(result);
+}
+function isResponse(value) {
+  return value != null && typeof value.status === "number" && typeof value.statusText === "string" && typeof value.headers === "object" && typeof value.body !== "undefined";
+}
+function stripIndexParam(request) {
+  const url = new URL(request.url);
+  const indexValues = url.searchParams.getAll("index");
+  url.searchParams.delete("index");
+  const indexValuesToKeep = [];
+  for (const indexValue of indexValues) {
+    if (indexValue) {
+      indexValuesToKeep.push(indexValue);
+    }
+  }
+  for (const toKeep of indexValuesToKeep) {
+    url.searchParams.append("index", toKeep);
+  }
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
+function stripDataParam(request) {
+  const url = new URL(request.url);
+  url.searchParams.delete("_data");
+  const init = {
+    method: request.method,
+    body: request.body,
+    headers: request.headers,
+    signal: request.signal
+  };
+  if (init.body) {
+    init.duplex = "half";
+  }
+  return new Request(url.href, init);
+}
 async function dev(ssgOptions = {}, viteConfig = {}, customOptions) {
   const mode = process.env.MODE || process.env.NODE_ENV || ssgOptions.mode || "development";
@@ -1431,66 +1622,14 @@ ${err.stack}`
       ...viteConfig,
       plugins: [
         ...viteConfig.plugins ?? [],
-        {
-          name: "vite-react-ssg:dev-server-remix",
-          configureServer(server) {
-            return () => {
-              server.middlewares.use(async (req, res, _next) => {
-                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, getStyleCollector, base, app } = appCtx;
-                  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);
-                  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 viteServer.moduleGraph.getModuleByUrl(entry2))
-                  );
-                  const assetsUrls = /* @__PURE__ */ new Set();
-                  const collectAssets = async (mod) => {
-                    if (!mod || !mod?.ssrTransformResult)
-                      return;
-                    const { deps = [], dynamicDeps = [] } = mod?.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 Promise.all(mods.map(async (mod) => collectAssets(mod)));
-                  const preloadLink = [...assetsUrls].map((item) => createLink$1(joinUrlSegments(config.base, 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.statusCode = 200;
-                  res.setHeader("Content-Type", "text/html");
-                  res.end(transformed);
-                } catch (e) {
-                  viteServer.ssrFixStacktrace(e);
-                  console.error(`[vite-react-ssg] error: ${e.stack}`);
-                  res.statusCode = 500;
-                  res.end(e.stack);
-                }
-              });
-            };
-          }
-        }
+        ssrServerPlugin({
+          template,
+          ssrEntry,
+          onBeforePageRender,
+          onPageRendered,
+          entry,
+          rootContainerId
+        })
       ]
     });
     await viteServer.listen();