vite-react-ssg 0.1.1 → 0.2.0

package/README.md

@@ -6,8 +6,6 @@ Static-site generation for React on Vite.
 
 ## Install
 
-> **This library requires Node.js version >= 17**
-> or `Request` is available
 <pre>
 <b>npm i -D vite-react-ssg</b> <em>react-router-dom</em>
 </pre>
@@ -176,11 +174,14 @@ Use the `getStyleCollector` option to specify an SSR/SSG style collector. Curren
 
 ```tsx
 import { ViteReactSSG } from 'vite-react-ssg'
-import { getStyledComponentsCollector } from 'vite-react-ssg/style-collectors'
+import getStyledComponentsCollector from 'vite-react-ssg/style-collectors/styled-components'
 import { routes } from './App.js'
 import './index.css'
 
-export const createRoot = ViteReactSSG({ routes }, () => {}, { getStyleCollector: getStyledComponentsCollector })
+export const createRoot = ViteReactSSG(
+  { routes },
+  () => { },
+  { getStyleCollector: getStyledComponentsCollector })
 ```
 
 You can provide your own by looking at the [implementation](./src/style-collectors/) of any of the existing collectors.

package/dist/node/cli.cjs

@@ -3,7 +3,8 @@
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const dev = require('../shared/vite-react-ssg.8cbf43cc.cjs');
+const webFetch = require('@remix-run/web-fetch');
+const dev = require('../shared/vite-react-ssg.b0fd1823.cjs');
 require('node:path');
 require('node:module');
 require('fs-extra');
@@ -22,6 +23,44 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const yargs__default = /*#__PURE__*/_interopDefaultCompat(yargs);
 
+class NodeRequest extends webFetch.Request {
+  constructor(info, init) {
+    super(info, init);
+  }
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return new NodeRequest(this);
+  }
+}
+class NodeResponse extends webFetch.Response {
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return super.clone();
+  }
+}
+const fetch = (info, init) => {
+  init = {
+    // Disable compression handling so people can return the result of a fetch
+    // directly in the loader without messing with the Content-Encoding header.
+    compress: false,
+    ...init
+  };
+  return webFetch.fetch(info, init);
+};
+
+function installGlobals() {
+  global.Headers = webFetch.Headers;
+  global.Request = NodeRequest;
+  global.Response = NodeResponse;
+  global.fetch = fetch;
+  global.FormData = webFetch.FormData;
+}
+
+installGlobals();
 yargs__default(helpers.hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").command(
   "build",
   "Build SSG",

package/dist/node/cli.mjs

@@ -1,7 +1,8 @@
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build, d as dev } from '../shared/vite-react-ssg.5291bf32.mjs';
+import { Request, Response, fetch as fetch$1, Headers, FormData } from '@remix-run/web-fetch';
+import { b as build, d as dev } from '../shared/vite-react-ssg.b83f6ed3.mjs';
 import 'node:path';
 import 'node:module';
 import 'fs-extra';
@@ -16,6 +17,44 @@ import 'react-router-dom/server.js';
 import 'node:stream';
 import 'react-dom/server';
 
+class NodeRequest extends Request {
+  constructor(info, init) {
+    super(info, init);
+  }
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return new NodeRequest(this);
+  }
+}
+class NodeResponse extends Response {
+  get headers() {
+    return super.headers;
+  }
+  clone() {
+    return super.clone();
+  }
+}
+const fetch = (info, init) => {
+  init = {
+    // Disable compression handling so people can return the result of a fetch
+    // directly in the loader without messing with the Content-Encoding header.
+    compress: false,
+    ...init
+  };
+  return fetch$1(info, init);
+};
+
+function installGlobals() {
+  global.Headers = Headers;
+  global.Request = NodeRequest;
+  global.Response = NodeResponse;
+  global.fetch = fetch;
+  global.FormData = FormData;
+}
+
+installGlobals();
 yargs(hideBin(process.argv)).scriptName("vite-react-ssg").usage("$0 [args]").command(
   "build",
   "Build SSG",

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const dev = require('./shared/vite-react-ssg.8cbf43cc.cjs');
+const dev = require('./shared/vite-react-ssg.b0fd1823.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.5291bf32.mjs';
+export { b as build, d as dev } from './shared/vite-react-ssg.b83f6ed3.mjs';
 import 'node:path';
 import 'node:module';
 import 'kolorist';

package/dist/shared/{vite-react-ssg.8cbf43cc.cjs → vite-react-ssg.b0fd1823.cjs}

@@ -934,7 +934,7 @@ async function resolveAlias(config, entry) {
   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.8cbf43cc.cjs', document.baseURI).href)))).toString()
+  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.b0fd1823.cjs', document.baseURI).href)))).toString()
 );
 
 async function getCritters(outDir, options = {}) {
@@ -1019,9 +1019,8 @@ async function render(routes, request, styleCollector) {
     helmet.script.toString()
   ];
   const styleTag = styleCollector?.toString?.(appHTML) ?? "";
-  metaStrings.push(styleTag);
   const metaAttributes = metaStrings.filter(Boolean);
-  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
+  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag };
 }
 
 function renderPreloadLinks(document, modules, ssrManifest) {
@@ -1201,7 +1200,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.8cbf43cc.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.b0fd1823.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
@@ -1229,7 +1228,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         url.hash = "";
         url.pathname = route;
         const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request, styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1247,6 +1246,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         let transformed = await onPageRendered?.(route, html, appCtx) || html;
         if (critters)
           transformed = await critters.process(transformed);
+        if (styleTag)
+          transformed = transformed.replace("<head>", `<head>${styleTag}`);
         const formatted = await formatHtml(transformed, formatting);
         const relativeRouteFile = `${(route.endsWith("/") ? `${route}index` : route).replace(/^\//g, "")}.html`;
         const filename = dirStyle === "nested" ? node_path.join(route.replace(/^\//g, ""), "index.html") : relativeRouteFile;
@@ -1426,7 +1427,8 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req), styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes], createFetchRequest(req), styleCollector);
+        metaAttributes.push(styleTag);
         const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
         const assetsUrls = /* @__PURE__ */ new Set();
         const collectAssets = async (mod2) => {

package/dist/shared/{vite-react-ssg.5291bf32.mjs → vite-react-ssg.b83f6ed3.mjs}

@@ -1011,9 +1011,8 @@ async function render(routes, request, styleCollector) {
     helmet.script.toString()
   ];
   const styleTag = styleCollector?.toString?.(appHTML) ?? "";
-  metaStrings.push(styleTag);
   const metaAttributes = metaStrings.filter(Boolean);
-  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
+  return { appHTML, htmlAttributes, bodyAttributes, metaAttributes, styleTag };
 }
 
 function renderPreloadLinks(document, modules, ssrManifest) {
@@ -1221,7 +1220,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         url.hash = "";
         url.pathname = route;
         const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request, styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes2], request, styleCollector);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1239,6 +1238,8 @@ async function build(ssgOptions = {}, viteConfig = {}) {
         let transformed = await onPageRendered?.(route, html, appCtx) || html;
         if (critters)
           transformed = await critters.process(transformed);
+        if (styleTag)
+          transformed = transformed.replace("<head>", `<head>${styleTag}`);
         const formatted = await formatHtml(transformed, formatting);
         const relativeRouteFile = `${(route.endsWith("/") ? `${route}index` : route).replace(/^\//g, "")}.html`;
         const filename = dirStyle === "nested" ? join(route.replace(/^\//g, ""), "index.html") : relativeRouteFile;
@@ -1418,7 +1419,8 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
         const styleCollector = getStyleCollector ? await getStyleCollector() : null;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req), styleCollector);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag } = await render([...routes], createFetchRequest(req), styleCollector);
+        metaAttributes.push(styleTag);
         const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
         const assetsUrls = /* @__PURE__ */ new Set();
         const collectAssets = async (mod2) => {

package/dist/{style-collectors.cjs → style-collectors/styled-components.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
+const styledComponents = require('styled-components');
+
 async function ssrCollector() {
-  const { ServerStyleSheet } = await import('styled-components');
-  const sheet = new ServerStyleSheet();
+  const sheet = new styledComponents.ServerStyleSheet();
   return {
     collect(app) {
       return sheet.collectStyles(app);
@@ -15,6 +16,5 @@ async function ssrCollector() {
     }
   };
 }
-const styledComponents = undefined.SSR ? ssrCollector : null;
 
-exports.getStyledComponentsCollector = styledComponents;
+module.exports = ssrCollector;

package/dist/{style-collectors.d.ts → style-collectors/styled-components.d.ts}

@@ -5,6 +5,5 @@ declare function ssrCollector(): Promise<{
     toString(): string;
     cleanup(): void;
 }>;
-declare const _default: typeof ssrCollector | null;
 
-export { _default as getStyledComponentsCollector };
+export { ssrCollector as default };

package/dist/{style-collectors.mjs → style-collectors/styled-components.mjs}

@@ -1,5 +1,6 @@
+import { ServerStyleSheet } from 'styled-components';
+
 async function ssrCollector() {
-  const { ServerStyleSheet } = await import('styled-components');
   const sheet = new ServerStyleSheet();
   return {
     collect(app) {
@@ -13,6 +14,5 @@ async function ssrCollector() {
     }
   };
 }
-const styledComponents = import.meta.env.SSR ? ssrCollector : null;
 
-export { styledComponents as getStyledComponentsCollector };
+export { ssrCollector as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -31,10 +31,10 @@
       "require": "./dist/node.cjs",
       "import": "./dist/node.mjs"
     },
-    "./style-collectors": {
-      "types": "./dist/style-collectors.d.ts",
-      "require": "./dist/style-collectors.cjs",
-      "import": "./dist/style-collectors.mjs"
+    "./style-collectors/styled-components": {
+      "types": "./dist/style-collectors/styled-components.d.ts",
+      "require": "./dist/style-collectors/styled-components.cjs",
+      "import": "./dist/style-collectors/styled-components.mjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -45,8 +45,8 @@
       "node": [
         "./dist/node.d.ts"
       ],
-      "style-collectors": [
-        "./dist/style-collectors.d.ts"
+      "style-collectors/styled-components": [
+        "./dist/style-collectors/styled-components.d.ts"
       ]
     }
   },
@@ -87,6 +87,7 @@
     }
   },
   "dependencies": {
+    "@remix-run/web-fetch": "^4.3.5",
     "express": "^4.18.2",
     "fs-extra": "^11.1.1",
     "html-minifier": "^4.0.0",