vite-react-ssg 0.0.3 → 0.1.1

package/dist/shared/{vite-react-ssg.a5dfecac.cjs → vite-react-ssg.8cbf43cc.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) {
@@ -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.8cbf43cc.cjs', document.baseURI).href)))).toString()
+);
 
 async function getCritters(outDir, options = {}) {
   try {
@@ -962,14 +998,16 @@ class WritableAsPromise extends node_stream.Writable {
   }
 }
 
-async function render(routes, request) {
+async function render(routes, request, styleCollector) {
   const { dataRoutes, query } = server_js.createStaticHandler(routes);
   const context = await query(request);
   const helmetContext = {};
   if (context instanceof Response)
     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 }));
+  let 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 }));
+  if (styleCollector)
+    app = styleCollector.collect(app);
   const appHTML = await renderStaticApp(app);
   const { helmet } = helmetContext;
   const htmlAttributes = helmet.htmlAttributes.toString();
@@ -980,6 +1018,8 @@ async function render(routes, request) {
     helmet.link.toString(),
     helmet.script.toString()
   ];
+  const styleTag = styleCollector?.toString?.(appHTML) ?? "";
+  metaStrings.push(styleTag);
   const metaAttributes = metaStrings.filter(Boolean);
   return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
 }
@@ -1017,7 +1057,7 @@ function renderPreloadLink(document, file) {
     });
   }
 }
-function createLink(document) {
+function createLink$1(document) {
   return document.createElement("link");
 }
 function setAttrs(el, attrs) {
@@ -1029,11 +1069,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 +1201,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.8cbf43cc.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
@@ -1124,19 +1221,20 @@ async function build(ssgOptions = {}, viteConfig = {}) {
     queue.add(async () => {
       try {
         const appCtx = await createRoot(false, route);
-        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState } = appCtx;
-        const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx);
+        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
+        const styleCollector = getStyleCollector ? await getStyleCollector() : null;
+        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, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request, styleCollector);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
           appHTML,
-          indexHTML,
+          indexHTML: transformedIndexHTML,
           metaAttributes,
           bodyAttributes,
           htmlAttributes,
@@ -1180,69 +1278,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 +1318,186 @@ 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, 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 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/style-collectors.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+async function ssrCollector() {
+  const { ServerStyleSheet } = await import('styled-components');
+  const sheet = new ServerStyleSheet();
+  return {
+    collect(app) {
+      return sheet.collectStyles(app);
+    },
+    toString() {
+      return sheet.getStyleTags();
+    },
+    cleanup() {
+      sheet.seal();
+    }
+  };
+}
+const styledComponents = undefined.SSR ? ssrCollector : null;
+
+exports.getStyledComponentsCollector = styledComponents;

package/dist/style-collectors.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+
+declare function ssrCollector(): Promise<{
+    collect(app: ReactElement): JSX.Element;
+    toString(): string;
+    cleanup(): void;
+}>;
+declare const _default: typeof ssrCollector | null;
+
+export { _default as getStyledComponentsCollector };

package/dist/style-collectors.mjs

@@ -0,0 +1,18 @@
+async function ssrCollector() {
+  const { ServerStyleSheet } = await import('styled-components');
+  const sheet = new ServerStyleSheet();
+  return {
+    collect(app) {
+      return sheet.collectStyles(app);
+    },
+    toString() {
+      return sheet.getStyleTags();
+    },
+    cleanup() {
+      sheet.seal();
+    }
+  };
+}
+const styledComponents = import.meta.env.SSR ? ssrCollector : null;
+
+export { styledComponents as getStyledComponentsCollector };

package/dist/{types-82f34756.d.ts → types-408e974a.d.ts}

@@ -1,4 +1,5 @@
 import { Options } from 'critters';
+import { ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
 
 type Router = ReturnType<typeof createBrowserRouter>;
@@ -116,6 +117,7 @@ interface ViteReactSSGContext<HasRouter extends boolean = true> {
      * Current router path on SSG, `undefined` on client side.
      */
     routePath?: string;
+    getStyleCollector: (() => StyleCollector | Promise<StyleCollector>) | null;
 }
 interface ViteReactSSGClientOptions {
     transformState?: (state: any) => any;
@@ -126,6 +128,15 @@ 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;
+    getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null;
 }
 interface CommonRouteOptions {
     /**
@@ -144,10 +155,15 @@ interface RouterOptions {
     routes: RouteRecord[];
     createFetchRequest?: <T>(req: T) => Request;
 }
+interface StyleCollector {
+    collect: (app: ReactElement) => ReactElement;
+    toString: (html: string) => string;
+    cleanup?: () => void;
+}
 declare module 'vite' {
     interface UserConfig {
         ssgOptions?: ViteReactSSGOptions;
     }
 }
 
-export { IndexRouteRecord as I, NonIndexRouteRecord as N, RouterOptions as R, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b, RouteRecord as c };
+export { IndexRouteRecord as I, NonIndexRouteRecord as N, RouterOptions as R, StyleCollector as S, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b, RouteRecord as c };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -30,6 +30,11 @@
       "types": "./dist/node.d.ts",
       "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"
     }
   },
   "main": "./dist/index.mjs",
@@ -39,6 +44,9 @@
     "*": {
       "node": [
         "./dist/node.d.ts"
+      ],
+      "style-collectors": [
+        "./dist/style-collectors.d.ts"
       ]
     }
   },
@@ -64,6 +72,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.14.1",
+    "styled-components": "^6.0.0",
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
@@ -72,9 +81,13 @@
     },
     "react-router-dom": {
       "optional": true
+    },
+    "styled-components": {
+      "optional": true
     }
   },
   "dependencies": {
+    "express": "^4.18.2",
     "fs-extra": "^11.1.1",
     "html-minifier": "^4.0.0",
     "html5parser": "^2.0.2",
@@ -86,6 +99,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",
@@ -104,10 +118,11 @@
     "react-router-dom": "^6.14.1",
     "rimraf": "5.0.1",
     "simple-git-hooks": "^2.8.1",
+    "styled-components": "6.0.5",
     "typescript": "5.1.6",
     "unbuild": "^1.2.1",
     "vite": "^4.4.0",
     "vite-plugin-pwa": "^0.16.4",
     "vitest": "0.33.0"
   }
-}
+}