@stacksjs/stx 0.2.158 → 0.2.160

package/dist/build-externalize.d.ts

@@ -18,6 +18,12 @@
  * runtime is byte-identical everywhere and becomes a single asset, while
  * per-page CSS dedupes only where pages genuinely share a stylesheet.
  *
+ * The rewrite itself is `externalizeHtml`, which touches no filesystem. SSR has
+ * the same problem in a worse form — a static build inlines the runtime once
+ * per page, a server inlines it once per *request* — and it cannot use a
+ * post-pass over a directory because there are no files. Sharing the pure
+ * function means the two paths cannot drift into rewriting HTML differently.
+ *
  * @module build-externalize
  */
 /** Where externalized assets are written, relative to the output directory. */
@@ -30,6 +36,33 @@ export interface ExternalizeResult {
     /** Bytes removed from HTML (before any compression). */
     bytesInlined: number;
 }
+/** A blob lifted out of the HTML, ready to be written or served. */
+export interface ExternalizedAsset {
+    /** Content-addressed filename, e.g. `runtime.1a2b3c4d.js`. */
+    filename: string;
+    contents: string;
+    /** MIME type, so a server can respond without re-deriving it from the name. */
+    contentType: string;
+}
+export interface ExternalizeHtmlResult {
+    html: string;
+    /** Distinct assets this page referenced. Deduped within the page. */
+    assets: ExternalizedAsset[];
+    /** Bytes removed from the HTML, before any compression. */
+    bytesInlined: number;
+}
+/**
+ * Lift the shared blobs out of one HTML document.
+ *
+ * Pure: returns the rewritten HTML and the assets it extracted, and writes
+ * nothing. Callers decide whether those assets become files on disk or entries
+ * in a server's cache.
+ *
+ * Safe to run twice — a tag that is already a `src`/`href` reference has no
+ * inline body to match, so a second pass extracts nothing and returns the input
+ * unchanged.
+ */
+export declare function externalizeHtml(html: string, basePath?: string): ExternalizeHtmlResult;
 /**
  * Rewrite every HTML file under `outDir`, moving the signals runtime and the
  * generated stylesheet into `_stx/` and linking to them.

package/dist/build-externalize.js

@@ -18,46 +18,63 @@ function listHtmlFiles(dir) {
     walk(dir);
   return found;
 }
-export function externalizeSharedAssets(outDir) {
-  const result = { pages: 0, assets: 0, bytesInlined: 0 }, assetDir = path.join(outDir, EXTERNALIZED_ASSET_DIR), written = new Set, writeAsset = (filename, contents) => {
-    if (written.has(filename))
-      return;
-    written.add(filename);
-    fs.mkdirSync(assetDir, { recursive: !0 });
-    fs.writeFileSync(path.join(assetDir, filename), contents);
-    result.assets++;
-  };
-  for (const file of listHtmlFiles(outDir)) {
-    const original = fs.readFileSync(file, "utf8");
-    let html = original;
-    html = html.replace(/<script\b([^>]*\bdata-stx-runtime\b[^>]*)>([\s\S]*?)<\/script>/gi, (whole, attrs, body) => {
-      if (/\bsrc\s*=/.test(attrs) || !body.trim())
-        return whole;
-      const filename = `runtime.${contentHash(body)}.js`;
-      writeAsset(filename, body);
-      result.bytesInlined += body.length;
-      return `<script data-stx-runtime src="/${EXTERNALIZED_ASSET_DIR}/${filename}"></script>`;
-    });
-    html = html.replace(/<script\b([^>]*\bdata-stx-router\b[^>]*)>([\s\S]*?)<\/script>/gi, (whole, attrs, body) => {
-      if (/\bsrc\s*=/.test(attrs) || !body.trim())
-        return whole;
-      const filename = `router.${contentHash(body)}.js`;
-      writeAsset(filename, body);
-      result.bytesInlined += body.length;
-      return `<script data-stx-router src="/${EXTERNALIZED_ASSET_DIR}/${filename}"></script>`;
-    });
-    html = html.replace(/<style\b([^>]*\bdata-crosswind=(?:"generated"|'generated')[^>]*)>([\s\S]*?)<\/style>/gi, (whole, _attrs, css) => {
-      if (!css.trim())
+const BLOB_KINDS = [
+  {
+    pattern: /<script\b([^>]*\bdata-stx-runtime\b[^>]*)>([\s\S]*?)<\/script>/gi,
+    prefix: "runtime",
+    extension: "js",
+    contentType: "text/javascript; charset=utf-8",
+    replace: (href) => `<script data-stx-runtime src="${href}"></script>`
+  },
+  {
+    pattern: /<script\b([^>]*\bdata-stx-router\b[^>]*)>([\s\S]*?)<\/script>/gi,
+    prefix: "router",
+    extension: "js",
+    contentType: "text/javascript; charset=utf-8",
+    replace: (href) => `<script data-stx-router src="${href}"></script>`
+  },
+  {
+    pattern: /<style\b([^>]*\bdata-crosswind=(?:"generated"|'generated')[^>]*)>([\s\S]*?)<\/style>/gi,
+    prefix: "crosswind",
+    extension: "css",
+    contentType: "text/css; charset=utf-8",
+    replace: (href) => `<link data-crosswind="generated" rel="stylesheet" href="${href}">`
+  }
+];
+export function externalizeHtml(html, basePath = `/${EXTERNALIZED_ASSET_DIR}`) {
+  const assets = [], seen = new Set;
+  let bytesInlined = 0, out = html;
+  for (const kind of BLOB_KINDS)
+    out = out.replace(kind.pattern, (whole, attrs, body) => {
+      if (/\b(?:src|href)\s*=/.test(attrs) || !body.trim())
         return whole;
-      const filename = `crosswind.${contentHash(css)}.css`;
-      writeAsset(filename, css);
-      result.bytesInlined += css.length;
-      return `<link data-crosswind="generated" rel="stylesheet" href="/${EXTERNALIZED_ASSET_DIR}/${filename}">`;
+      const filename = `${kind.prefix}.${contentHash(body)}.${kind.extension}`;
+      if (!seen.has(filename)) {
+        seen.add(filename);
+        assets.push({ filename, contents: body, contentType: kind.contentType });
+      }
+      bytesInlined += body.length;
+      return kind.replace(`${basePath}/${filename}`);
     });
-    if (html !== original) {
-      fs.writeFileSync(file, html);
-      result.pages++;
+  return { html: out, assets, bytesInlined };
+}
+export function externalizeSharedAssets(outDir) {
+  const result = { pages: 0, assets: 0, bytesInlined: 0 }, assetDir = path.join(outDir, EXTERNALIZED_ASSET_DIR), written = new Set;
+  for (const file of listHtmlFiles(outDir)) {
+    const original = fs.readFileSync(file, "utf8"), { html, assets, bytesInlined } = externalizeHtml(original);
+    if (html === original)
+      continue;
+    for (const asset of assets) {
+      if (written.has(asset.filename))
+        continue;
+      written.add(asset.filename);
+      fs.mkdirSync(assetDir, { recursive: !0 });
+      fs.writeFileSync(path.join(assetDir, asset.filename), asset.contents);
+      result.assets++;
     }
+    fs.writeFileSync(file, html);
+    result.bytesInlined += bytesInlined;
+    result.pages++;
   }
   return result;
 }