@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/production-build.js

@@ -0,0 +1,596 @@
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync, statSync } from "node:fs";
+import { basename, dirname, extname, join, relative, resolve } from "node:path";
+import { gzipSync } from "node:zlib";
+const defaultConfig = {
+  outDir: "dist",
+  publicPath: "/",
+  sourcemaps: !0,
+  minify: {
+    js: !0,
+    css: !0,
+    html: !0,
+    dropConsole: !0,
+    dropDebugger: !0,
+    mangle: !0
+  },
+  splitting: {
+    vendor: !0,
+    minSize: 20000,
+    maxSize: 250000,
+    chunkNames: "deterministic"
+  },
+  css: {
+    extract: !0,
+    minify: !0,
+    filename: "assets/[name].[hash].css"
+  },
+  assets: {
+    inlineLimit: 4096,
+    filename: "assets/[name].[hash][ext]",
+    hash: !0,
+    hashLength: 8,
+    include: ["png", "jpg", "jpeg", "gif", "svg", "webp", "woff", "woff2", "ttf", "eot"]
+  },
+  compression: {
+    gzip: !0,
+    brotli: !0,
+    threshold: 1024,
+    deleteOriginal: !1
+  }
+};
+
+export class ProductionBuild {
+  config;
+  startTime = 0;
+  outputs = [];
+  chunks = [];
+  assets = [];
+  warnings = [];
+  errors = [];
+  moduleGraph = new Map;
+  assetHashes = new Map;
+  constructor(config) {
+    this.config = { ...defaultConfig, ...config };
+  }
+  async build() {
+    this.startTime = Date.now();
+    this.outputs = [];
+    this.chunks = [];
+    this.assets = [];
+    this.warnings = [];
+    this.errors = [];
+    try {
+      this.ensureDir(this.config.outDir);
+      await this.runPluginHook("setup");
+      await this.runPluginHook("buildStart");
+      const entries = this.collectEntries();
+      for (const [name, path] of entries)
+        await this.buildEntry(name, path);
+      if (this.config.css?.extract)
+        await this.extractCss();
+      await this.processAssets();
+      if (this.config.splitting)
+        await this.performCodeSplitting();
+      if (this.config.minify)
+        await this.minifyOutputs();
+      if (this.config.sourcemaps)
+        await this.generateSourceMaps();
+      await this.fingerprintAssets();
+      if (this.config.compression)
+        await this.compressOutputs();
+      if (this.config.analyze)
+        await this.analyzeBundle();
+      const result = this.getResult();
+      await this.runPluginHook("buildEnd", result);
+      return result;
+    } catch (error) {
+      this.errors.push(String(error));
+      return this.getResult();
+    }
+  }
+  collectEntries() {
+    const entries = new Map, { entry } = this.config;
+    if (typeof entry === "string")
+      entries.set("main", entry);
+    else if (Array.isArray(entry))
+      entry.forEach((e, i) => {
+        const name = basename(e, extname(e));
+        entries.set(name, e);
+      });
+    else if (typeof entry === "object")
+      Object.entries(entry).forEach(([name, path]) => {
+        entries.set(name, path);
+      });
+    return entries;
+  }
+  async buildEntry(name, entryPath) {
+    if (!await Bun.file(entryPath).exists()) {
+      this.errors.push(`Entry point not found: ${entryPath}`);
+      return;
+    }
+    const content = await Bun.file(entryPath).text(), ext = extname(entryPath);
+    let outputContent = content, outputType = "js";
+    if (ext === ".stx" || ext === ".html") {
+      outputType = "html";
+      outputContent = await this.processTemplate(content, entryPath);
+    } else if (ext === ".css") {
+      outputType = "css";
+      outputContent = await this.processCss(content, entryPath);
+    } else if (ext === ".js" || ext === ".ts") {
+      outputType = "js";
+      outputContent = await this.processScript(content, entryPath);
+    }
+    outputContent = await this.runPluginTransform(outputContent, entryPath);
+    const hash = this.generateHash(outputContent), outputName = this.getOutputName(name, outputType, hash), outputPath = join(this.config.outDir, outputName);
+    this.ensureDir(dirname(outputPath));
+    await Bun.write(outputPath, outputContent);
+    this.outputs.push({
+      path: outputPath,
+      type: outputType,
+      size: Buffer.byteLength(outputContent),
+      hash,
+      sources: [entryPath],
+      isEntry: !0
+    });
+  }
+  resolveRelativePath(from, to) {
+    if (to.startsWith("/"))
+      return join(dirname(from), "..", to);
+    return join(dirname(from), to);
+  }
+  async processTemplate(content, filePath) {
+    let output = content;
+    const scripts = [], styles = [];
+    output = output.replace(/<script\b([^>]*)\bstx-inline\b([^>]*)(?:><\/script>|><\/script>|\/>)/gi, (match, before, after) => {
+      const srcMatch = (before + after).match(/src=["']([^"']+)["']/);
+      if (srcMatch) {
+        const srcPath = this.resolveRelativePath(filePath, srcMatch[1]);
+        if (existsSync(srcPath)) {
+          const externalContent = readFileSync(srcPath, "utf-8");
+          scripts.push(`// Source: ${srcMatch[1]}
+${externalContent}`);
+        } else
+          this.warnings.push(`External script not found: ${srcPath}`);
+      }
+      return "";
+    });
+    output = output.replace(/<link\b([^>]*)\bstx-inline\b([^>]*)(?:\/>|>)/gi, (match, before, after) => {
+      const hrefMatch = (before + after).match(/href=["']([^"']+)["']/);
+      if (hrefMatch) {
+        const hrefPath = this.resolveRelativePath(filePath, hrefMatch[1]);
+        if (existsSync(hrefPath)) {
+          const externalContent = readFileSync(hrefPath, "utf-8");
+          styles.push(`/* Source: ${hrefMatch[1]} */
+${externalContent}`);
+        } else
+          this.warnings.push(`External stylesheet not found: ${hrefPath}`);
+      }
+      return "";
+    });
+    output = output.replace(/<script\b(?![^>]*\bstx-inline\b)([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, code) => {
+      if (/\bsrc=/.test(attrs))
+        return match;
+      if (code.trim())
+        scripts.push(code);
+      return "";
+    });
+    output = output.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, (match, css) => {
+      if (css.trim())
+        styles.push(css);
+      return "";
+    });
+    if (scripts.length > 0) {
+      const processedScript = scripts.join(`
+
+`), scriptHash = this.generateHash(processedScript).slice(0, 8), scriptFile = `assets/app.${scriptHash}.js`, scriptPath = join(this.config.outDir, scriptFile);
+      this.ensureDir(dirname(scriptPath));
+      await Bun.write(scriptPath, processedScript);
+      this.outputs.push({
+        path: scriptPath,
+        type: "js",
+        size: Buffer.byteLength(processedScript),
+        hash: scriptHash,
+        sources: [filePath]
+      });
+      const pbBodyIdx = output.lastIndexOf("</body>");
+      if (pbBodyIdx !== -1)
+        output = output.slice(0, pbBodyIdx) + `<script src="${this.config.publicPath}${scriptFile}"></script>
+` + output.slice(pbBodyIdx);
+    }
+    if (styles.length > 0) {
+      const processedStyle = styles.join(`
+
+`), styleHash = this.generateHash(processedStyle).slice(0, 8), styleFile = `assets/app.${styleHash}.css`, stylePath = join(this.config.outDir, styleFile);
+      this.ensureDir(dirname(stylePath));
+      await Bun.write(stylePath, processedStyle);
+      this.outputs.push({
+        path: stylePath,
+        type: "css",
+        size: Buffer.byteLength(processedStyle),
+        hash: styleHash,
+        sources: [filePath]
+      });
+      output = output.replace("</head>", `<link rel="stylesheet" href="${this.config.publicPath}${styleFile}">
+</head>`);
+    }
+    return output;
+  }
+  async processCss(content, filePath) {
+    let output = content;
+    if (typeof this.config.minify === "object" && this.config.minify.css)
+      output = this.minifyCss(output);
+    return output;
+  }
+  async processScript(content, filePath) {
+    let output = content;
+    if (this.config.define)
+      for (const [key, value] of Object.entries(this.config.define))
+        output = output.replace(new RegExp(key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), value);
+    return output;
+  }
+  async extractCss() {
+    const cssContents = [];
+    for (const output of this.outputs)
+      if (output.type === "css") {
+        const content = await Bun.file(output.path).text();
+        cssContents.push(content);
+      }
+    if (cssContents.length === 0)
+      return;
+    const combinedCss = cssContents.join(`
+`), hash = this.generateHash(combinedCss).slice(0, 8), filename = (this.config.css?.filename || "assets/[name].[hash].css").replace("[name]", "styles").replace("[hash]", hash), outputPath = join(this.config.outDir, filename);
+    this.ensureDir(dirname(outputPath));
+    await Bun.write(outputPath, combinedCss);
+    this.outputs.push({
+      path: outputPath,
+      type: "css",
+      size: Buffer.byteLength(combinedCss),
+      hash
+    });
+  }
+  async processAssets() {
+    const assetsDir = join(dirname(this.config.outDir), "public");
+    if (!existsSync(assetsDir))
+      return;
+    const assetOptions = this.config.assets || {}, include = assetOptions.include || [];
+    this.walkDir(assetsDir, (filePath) => {
+      const ext = extname(filePath).slice(1).toLowerCase();
+      if (!include.includes(ext))
+        return;
+      const content = readFileSync(filePath), size = content.length;
+      if (assetOptions.inlineLimit && size < assetOptions.inlineLimit)
+        return;
+      const hash = assetOptions.hash ? this.generateHash(content).slice(0, assetOptions.hashLength || 8) : "", filename = (assetOptions.filename || "assets/[name].[hash][ext]").replace("[name]", basename(filePath, extname(filePath))).replace("[hash]", hash).replace("[ext]", extname(filePath)), outputPath = join(this.config.outDir, filename);
+      this.ensureDir(dirname(outputPath));
+      writeFileSync(outputPath, content);
+      this.assetHashes.set(filePath, filename);
+      this.assets.push({
+        name: basename(filePath),
+        file: filename,
+        size,
+        source: filePath
+      });
+      this.outputs.push({
+        path: outputPath,
+        type: "asset",
+        size,
+        hash,
+        sources: [filePath]
+      });
+    });
+  }
+  async performCodeSplitting() {
+    if ((typeof this.config.splitting === "object" ? this.config.splitting : {}).vendor) {
+      const vendorModules = [];
+      this.chunks.push({
+        name: "vendor",
+        file: "assets/vendor.js",
+        size: 0,
+        modules: vendorModules,
+        isVendor: !0,
+        imports: [],
+        dynamicImports: []
+      });
+    }
+  }
+  async minifyOutputs() {
+    const minifyOptions = typeof this.config.minify === "object" ? this.config.minify : {};
+    for (const output of this.outputs) {
+      const content = await Bun.file(output.path).text();
+      let minified = content;
+      if (output.type === "js" && minifyOptions.js)
+        minified = this.minifyJs(content);
+      else if (output.type === "css" && minifyOptions.css)
+        minified = this.minifyCss(content);
+      else if (output.type === "html" && minifyOptions.html)
+        minified = this.minifyHtml(content);
+      if (minified !== content) {
+        await Bun.write(output.path, minified);
+        output.size = Buffer.byteLength(minified);
+      }
+    }
+  }
+  minifyJs(code) {
+    const minifyOptions = typeof this.config.minify === "object" ? this.config.minify : {};
+    let minified = code;
+    minified = minified.replace(/\/\*[\s\S]*?\*\//g, "");
+    minified = minified.replace(/\/\/.*$/gm, "");
+    if (minifyOptions.dropConsole)
+      minified = minified.replace(/console\.(log|debug|info|warn)\([^)]*\);?/g, "");
+    if (minifyOptions.dropDebugger)
+      minified = minified.replace(/debugger;?/g, "");
+    minified = minified.replace(/\s+/g, " ");
+    minified = minified.replace(/\s*([{};,:])\s*/g, "$1");
+    minified = minified.replace(/;\}/g, "}");
+    return minified.trim();
+  }
+  minifyCss(css) {
+    let minified = css;
+    minified = minified.replace(/\/\*[\s\S]*?\*\//g, "");
+    minified = minified.replace(/\s+/g, " ");
+    minified = minified.replace(/\s*([{};:,>+~])\s*/g, "$1");
+    minified = minified.replace(/;}/g, "}");
+    minified = minified.replace(/[^{}]+\{\s*\}/g, "");
+    return minified.trim();
+  }
+  minifyHtml(html) {
+    let minified = html;
+    minified = minified.replace(/<!--(?!\[if)[\s\S]*?-->/g, "");
+    minified = minified.replace(/>\s+</g, "><");
+    minified = minified.replace(/\s+>/g, ">");
+    minified = minified.replace(/<\s+/g, "<");
+    minified = minified.replace(/\s{2,}/g, " ");
+    return minified.trim();
+  }
+  async generateSourceMaps() {
+    if (!this.config.sourcemaps)
+      return;
+    for (const output of this.outputs)
+      if (output.type === "js" || output.type === "css") {
+        const content = await Bun.file(output.path).text(), sourcesContent = [];
+        for (const s of output.sources || [])
+          if (await Bun.file(s).exists())
+            sourcesContent.push(await Bun.file(s).text());
+          else
+            sourcesContent.push(null);
+        const sourceMap = {
+          version: 3,
+          file: basename(output.path),
+          sources: output.sources || [],
+          sourcesContent,
+          mappings: "",
+          names: []
+        }, mapPath = `${output.path}.map`;
+        await Bun.write(mapPath, JSON.stringify(sourceMap));
+        const markerBytes = new Uint8Array([
+          10,
+          47,
+          47,
+          35,
+          32,
+          115,
+          111,
+          117,
+          114,
+          99,
+          101,
+          77,
+          97,
+          112,
+          112,
+          105,
+          110,
+          103,
+          85,
+          82,
+          76,
+          61
+        ]), payload = this.config.sourcemaps === "inline" ? `data:application/json;base64,${Buffer.from(JSON.stringify(sourceMap)).toString("base64")}` : basename(mapPath);
+        if (this.config.sourcemaps !== "hidden")
+          await Bun.write(output.path, Buffer.concat([
+            Buffer.from(content),
+            Buffer.from(markerBytes),
+            Buffer.from(payload)
+          ]));
+        this.outputs.push({
+          path: mapPath,
+          type: "map",
+          size: statSync(mapPath).size
+        });
+      }
+  }
+  async fingerprintAssets() {
+    for (const output of this.outputs)
+      if (output.type === "html") {
+        let content = await Bun.file(output.path).text();
+        for (const [original, fingerprinted] of this.assetHashes) {
+          const relativePath = relative(dirname(output.path), original);
+          content = content.replace(new RegExp(relativePath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), `${this.config.publicPath}${fingerprinted}`);
+        }
+        await Bun.write(output.path, content);
+      }
+  }
+  async compressOutputs() {
+    const compression = this.config.compression || {}, threshold = compression.threshold || 1024;
+    for (const output of this.outputs) {
+      if (output.type === "map")
+        continue;
+      if (output.size < threshold)
+        continue;
+      const content = Buffer.from(await Bun.file(output.path).arrayBuffer());
+      if (compression.gzip) {
+        const gzipped = gzipSync(content, { level: 9 }), gzipPath = `${output.path}.gz`;
+        await Bun.write(gzipPath, gzipped);
+        output.gzipSize = gzipped.length;
+      }
+      if (compression.brotli)
+        try {
+          const { brotliCompressSync } = await import("node:zlib"), brotlied = brotliCompressSync(content);
+          await Bun.write(`${output.path}.br`, brotlied);
+        } catch {}
+    }
+  }
+  async analyzeBundle() {
+    const analyzeOptions = typeof this.config.analyze === "object" ? this.config.analyze : {}, format = analyzeOptions.format || "text", analysis = {
+      outputs: this.outputs.map((o) => ({
+        path: relative(this.config.outDir, o.path),
+        type: o.type,
+        size: o.size,
+        gzipSize: o.gzipSize,
+        sizeFormatted: this.formatSize(o.size),
+        gzipSizeFormatted: o.gzipSize ? this.formatSize(o.gzipSize) : void 0
+      })),
+      chunks: this.chunks,
+      assets: this.assets,
+      totalSize: this.outputs.reduce((sum, o) => sum + o.size, 0),
+      totalGzipSize: this.outputs.reduce((sum, o) => sum + (o.gzipSize || 0), 0)
+    };
+    let output;
+    if (format === "json")
+      output = JSON.stringify(analysis, null, 2);
+    else if (format === "html")
+      output = this.generateAnalysisHtml(analysis);
+    else
+      output = this.generateAnalysisText(analysis);
+    const filename = analyzeOptions.filename || `bundle-analysis.${format === "html" ? "html" : format === "json" ? "json" : "txt"}`, outputPath = join(this.config.outDir, filename);
+    await Bun.write(outputPath, output);
+    console.log(`
+\uD83D\uDCCA Bundle Analysis`);
+    console.log("\u2500".repeat(50));
+    for (const o of analysis.outputs) {
+      const gzipInfo = o.gzipSizeFormatted ? ` (gzip: ${o.gzipSizeFormatted})` : "";
+      console.log(`  ${o.path}: ${o.sizeFormatted}${gzipInfo}`);
+    }
+    console.log("\u2500".repeat(50));
+    console.log(`  Total: ${this.formatSize(analysis.totalSize)} (gzip: ${this.formatSize(analysis.totalGzipSize)})`);
+    console.log("");
+  }
+  generateAnalysisHtml(analysis) {
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <title>Bundle Analysis</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
+    h1 { color: #333; }
+    table { width: 100%; border-collapse: collapse; margin: 20px 0; }
+    th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
+    th { background: #f5f5f5; }
+    .size { font-family: monospace; text-align: right; }
+    .bar { height: 20px; background: #4CAF50; border-radius: 4px; }
+    .summary { background: #e3f2fd; padding: 20px; border-radius: 8px; margin: 20px 0; }
+  </style>
+</head>
+<body>
+  <h1>\uD83D\uDCCA Bundle Analysis</h1>
+  <div class="summary">
+    <strong>Total Size:</strong> ${this.formatSize(analysis.totalSize)}<br>
+    <strong>Gzipped:</strong> ${this.formatSize(analysis.totalGzipSize)}<br>
+    <strong>Files:</strong> ${analysis.outputs.length}
+  </div>
+  <table>
+    <thead>
+      <tr><th>File</th><th>Type</th><th class="size">Size</th><th class="size">Gzip</th><th>%</th></tr>
+    </thead>
+    <tbody>
+      ${analysis.outputs.map((o) => `
+        <tr>
+          <td>${o.path}</td>
+          <td>${o.type}</td>
+          <td class="size">${o.sizeFormatted}</td>
+          <td class="size">${o.gzipSizeFormatted || "-"}</td>
+          <td><div class="bar" style="width: ${Math.round(o.size / analysis.totalSize * 100)}%"></div></td>
+        </tr>
+      `).join("")}
+    </tbody>
+  </table>
+</body>
+</html>`;
+  }
+  generateAnalysisText(analysis) {
+    const lines = ["Bundle Analysis", "=".repeat(50), ""];
+    for (const o of analysis.outputs) {
+      lines.push(`${o.path}`);
+      lines.push(`  Size: ${o.sizeFormatted}${o.gzipSizeFormatted ? ` (gzip: ${o.gzipSizeFormatted})` : ""}`);
+      lines.push("");
+    }
+    lines.push("=".repeat(50));
+    lines.push(`Total: ${this.formatSize(analysis.totalSize)} (gzip: ${this.formatSize(analysis.totalGzipSize)})`);
+    return lines.join(`
+`);
+  }
+  async runPluginHook(hook, arg) {
+    if (!this.config.plugins)
+      return;
+    for (const plugin of this.config.plugins) {
+      const fn = plugin[hook];
+      if (typeof fn === "function")
+        await fn.call(plugin, arg || this);
+    }
+  }
+  async runPluginTransform(code, id) {
+    if (!this.config.plugins)
+      return code;
+    let result = code;
+    for (const plugin of this.config.plugins)
+      if (plugin.transform) {
+        const transformed = await plugin.transform(result, id);
+        if (transformed != null)
+          result = transformed;
+      }
+    return result;
+  }
+  generateHash(content) {
+    return createHash("sha256").update(content).digest("hex");
+  }
+  getOutputName(name, type, hash) {
+    const ext = type === "html" ? ".html" : type === "css" ? ".css" : type === "js" ? ".js" : "";
+    return `${name}.${hash.slice(0, 8)}${ext}`;
+  }
+  formatSize(bytes) {
+    if (bytes < 1024)
+      return `${bytes} B`;
+    if (bytes < 1048576)
+      return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / 1048576).toFixed(2)} MB`;
+  }
+  ensureDir(dir) {
+    if (!existsSync(dir))
+      mkdirSync(dir, { recursive: !0 });
+  }
+  walkDir(dir, callback) {
+    if (!existsSync(dir))
+      return;
+    const entries = readdirSync(dir, { withFileTypes: !0 });
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      if (entry.isDirectory())
+        this.walkDir(fullPath, callback);
+      else
+        callback(fullPath);
+    }
+  }
+  getResult() {
+    const duration = Date.now() - this.startTime, totalSize = this.outputs.reduce((sum, o) => sum + o.size, 0), gzipSize = this.outputs.reduce((sum, o) => sum + (o.gzipSize || 0), 0);
+    return {
+      outputs: this.outputs,
+      duration,
+      totalSize,
+      gzipSize,
+      chunks: this.chunks,
+      assets: this.assets,
+      warnings: this.warnings,
+      errors: this.errors
+    };
+  }
+}
+export async function build(config) {
+  return new ProductionBuild(config).build();
+}
+export function createProductionBuild(config) {
+  return new ProductionBuild(config);
+}
+export function defineConfig(config) {
+  return { ...defaultConfig, ...config };
+}

package/dist/production-builder.d.ts

@@ -0,0 +1,42 @@
+import { type ManifestAssets } from './manifest';
+/**
+ * Build the stx application for production.
+ *
+ * Produces a `.output/` directory with:
+ * - `public/__stx/` — fingerprinted runtime and router JS
+ * - `public/assets/` — bundled CSS
+ * - `public/<user files>` — copied verbatim from the project's `publicDir`
+ *   (default: `public/`). Source images, fonts, robots.txt, sitemap.xml, etc.
+ * - `server/pages/` — compiled template JSON files
+ * - `server/fragments/` — SPA navigation fragments
+ * - `manifest.json` — route map and asset hashes
+ *
+ * Reads `stx.config.ts` once at the start for `publicDir`, `componentsDir`,
+ * `layoutsDir`, `partialsDir`, and `app.head`. Direct option overrides take
+ * precedence over the config file.
+ */
+export declare function buildForProduction(options?: ProductionBuildOptions): Promise<ProductionBuildResult>;
+/**
+ * Production build configuration.
+ *
+ * Most fields are optional and fall back to `stx.config.ts` if not provided.
+ * Resolution order for each field: explicit option → config file → default.
+ */
+export declare interface ProductionBuildOptions {
+  root?: string
+  outputDir?: string
+  debug?: boolean
+  componentsDir?: string
+  partialsDir?: string
+  layoutsDir?: string
+  publicDir?: string
+}
+/**
+ * Result of a production build.
+ */
+export declare interface ProductionBuildResult {
+  pageCount: number
+  assets: ManifestAssets
+  outputDir: string
+  duration: number
+}