create-jen-app 1.2.3 → 1.2.4

package/templates/static/lib/build/script-optimizer.js

@@ -0,0 +1,285 @@
+/**
+ * Script optimizer for bundles: tree-shaking, code splitting, lazy-loading, auto-hashing, cache-busting
+ *
+ * Provides:
+ * - Automatic dead code elimination via feature gates
+ * - Intelligent code splitting (vendor, runtime, common, lazy)
+ * - Lazy-loading detection and chunk extraction
+ * - Content-based auto-hashing for cache-busting
+ * - Manifest generation for asset reference
+ */
+export class ScriptOptimizer {
+  config;
+  chunks = new Map();
+  hashLength;
+  constructor(config = {}, hashLength = 12) {
+    this.config = {
+      treeShaking: true,
+      codeSplitting: true,
+      lazyLoading: true,
+      autoHashing: true,
+      cacheBusting: true,
+      splitChunks: {
+        vendor: true,
+        runtime: true,
+        common: true,
+        minSize: 20000,
+      },
+      ...config,
+    };
+    this.hashLength = hashLength;
+  }
+  /**
+   * Generate esbuild configuration for optimized bundling
+   */
+  generateEsbuildConfig() {
+    const config = {
+      minify: true,
+      format: "esm",
+      target: "es2015",
+      treeShaking: this.config.treeShaking,
+    };
+    // Configure code splitting with manual chunks
+    if (this.config.codeSplitting) {
+      config.splitting = true;
+      config.chunkNames = "[name]-[hash]";
+      // Manual chunk boundaries for predictable splitting
+      const manualChunks = {};
+      if (this.config.splitChunks?.vendor) {
+        manualChunks.vendor = [
+          "preact",
+          "preact/compat",
+          "preact/hooks",
+          "preact/compat/scheduler",
+        ];
+      }
+      if (this.config.splitChunks?.runtime) {
+        manualChunks.runtime = [
+          "../runtime/hydrate.js",
+          "../runtime/render.js",
+        ];
+      }
+      if (Object.keys(manualChunks).length > 0) {
+        config.manualChunks = manualChunks;
+      }
+    }
+    return config;
+  }
+  /**
+   * Detect lazy-loaded modules from AST comments
+   *
+   * @example
+   * ```
+   * // @lazy-load:"dashboard"
+   * const Dashboard = () => import('./dashboard.js');
+   * ```
+   */
+  detectLazyModules(source) {
+    const lazyMap = new Map();
+    const regex = /@lazy-load:"([^"]+)"/g;
+    let match;
+    while ((match = regex.exec(source)) !== null) {
+      const chunkName = match[1];
+      lazyMap.set(chunkName, chunkName);
+    }
+    return lazyMap;
+  }
+  /**
+   * Generate lazy-loading wrapper for dynamic imports
+   *
+   * Wraps dynamic imports with automatic chunk naming and loading feedback
+   */
+  generateLazyLoadWrapper(moduleId, chunkName) {
+    return `
+/**
+ * Auto-generated lazy-loading wrapper for chunk: ${chunkName}
+ * Provides loading state management and error handling
+ */
+export const load${this.toPascalCase(chunkName)} = () => {
+  const [loaded, setLoaded] = window.__lazyCache = window.__lazyCache || {};
+  
+  if (loaded['${chunkName}']) {
+    return Promise.resolve(loaded['${chunkName}']);
+  }
+  
+  return import(/* webpackChunkName: "${chunkName}" */ '${moduleId}')
+    .then(mod => {
+      loaded['${chunkName}'] = mod;
+      return mod;
+    })
+    .catch(err => {
+      console.error('Failed to load ${chunkName}:', err);
+      throw err;
+    });
+};
+`;
+  }
+  /**
+   * Generate hash for content with configurable length
+   */
+  hashContent(content) {
+    const crypto = require("node:crypto");
+    return crypto
+      .createHash("md5")
+      .update(content)
+      .digest("hex")
+      .slice(0, this.hashLength);
+  }
+  /**
+   * Generate hashed filename for cache-busting
+   *
+   * @example
+   * ```
+   * hashFilename("app.js", "a1b2c3d4e5f6g7h8i9j0")
+   * // Returns: "app.a1b2c3d4e5f6.js"
+   * ```
+   */
+  hashFilename(original, hash) {
+    const parts = original.split(".");
+    const ext = parts.pop();
+    const name = parts.join(".");
+    return `${name}.${hash}.${ext}`;
+  }
+  /**
+   * Register an optimized chunk for tracking
+   */
+  registerChunk(metadata) {
+    const hash = this.hashContent(metadata.path);
+    const hashedFilename = this.hashFilename(metadata.path, hash);
+    this.chunks.set(metadata.id, {
+      id: metadata.id,
+      filename: metadata.path,
+      hashedFilename,
+      size: metadata.size,
+      isLazy: metadata.isLazy ?? false,
+      dependencies: metadata.dependencies,
+    });
+  }
+  /**
+   * Get registered chunks
+   */
+  getChunks() {
+    return Array.from(this.chunks.values());
+  }
+  /**
+   * Generate manifest for asset lookups
+   *
+   * Maps original filenames to hashed versions for SSR/SSG rendering
+   */
+  generateManifest() {
+    const manifest = {};
+    for (const chunk of this.chunks.values()) {
+      manifest[chunk.filename] = chunk.hashedFilename;
+    }
+    return manifest;
+  }
+  /**
+   * Generate HTML script tags with optimized loading strategies
+   */
+  generateScriptTags(chunks, options = {}) {
+    const tags = [];
+    for (const chunk of chunks) {
+      // Add preload hint for non-lazy chunks (before script tag)
+      if (options.preload && !chunk.isLazy) {
+        tags.push(
+          `<link rel="preload" as="script" href="/${chunk.hashedFilename}">`,
+        );
+      }
+      let tag = `<script type="module"`;
+      if (options.defer) tag += ` defer`;
+      if (options.async && chunk.isLazy) tag += ` async`;
+      if (options.integrity) {
+        const hash = this.hashContent(chunk.filename);
+        tag += ` integrity="sha256-${hash}"`;
+      }
+      tag += ` src="/${chunk.hashedFilename}"></script>`;
+      tags.push(tag);
+    }
+    return tags;
+  }
+  /**
+   * Generate cache-busting strategy documentation
+   */
+  generateCacheBustingStrategy() {
+    return `
+# Cache-Busting Strategy
+
+## File Versioning
+- Hash: ${this.hashLength}-character content-based hash
+- Pattern: \`filename.{hash}.ext\`
+- Example: \`app.a1b2c3d4e5.js\`
+
+## Cache Control Headers
+- Hashed assets: \`public, max-age=31536000, immutable\`
+- Main bundle: \`public, max-age=3600\`
+- HTML pages: \`public, max-age=0, must-revalidate\`
+
+## Invalidation
+- Content change → new hash → new filename → automatic cache miss
+- No manual cache purging required
+- CDN respects Cache-Control headers
+
+## Manifest
+Reference \`manifest.json\` for filename lookups:
+\`\`\`json
+{
+  "app.js": "app.a1b2c3d4e5f6.js",
+  "vendor.js": "vendor.f6e5d4c3b2a1.js"
+}
+\`\`\`
+`;
+  }
+  /**
+   * Helper: convert string to PascalCase
+   */
+  toPascalCase(str) {
+    return str
+      .split(/[-_]/)
+      .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+      .join("");
+  }
+}
+/**
+ * esbuild plugin for automatic script optimization
+ */
+export function scriptOptimizerPlugin(config = {}, hashLength = 12) {
+  const optimizer = new ScriptOptimizer(config, hashLength);
+  return {
+    name: "script-optimizer",
+    setup(build) {
+      // Intercept onLoad to detect lazy modules
+      build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
+        try {
+          const fs = require("node:fs");
+          const source = fs.readFileSync(args.path, "utf8");
+          const lazyModules = optimizer.detectLazyModules(source);
+          if (lazyModules.size > 0) {
+            // Mark for lazy loading via build metadata
+            return {
+              contents: source,
+              loader: args.path.endsWith(".ts") ? "ts" : "js",
+            };
+          }
+          return undefined;
+        } catch {
+          return undefined;
+        }
+      });
+      // After bundling, generate manifest
+      build.onEnd((result) => {
+        if (result.errors.length === 0) {
+          const manifest = optimizer.generateManifest();
+          const manifestPath = require("node:path").join(
+            process.cwd(),
+            build.initialOptions.outdir || "dist",
+            "manifest.json",
+          );
+          require("node:fs").writeFileSync(
+            manifestPath,
+            JSON.stringify(manifest, null, 2),
+          );
+        }
+      });
+    },
+  };
+}

package/templates/static/lib/build/ssg-pipeline.js

@@ -1,21 +1,12 @@
-/*
- * This file is part of Jen.js.
- * Copyright (C) 2026 oopsio
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
- */
-import { mkdirSync, rmSync, writeFileSync, existsSync, copyFileSync, readdirSync, statSync, } from "node:fs";
+import {
+  mkdirSync,
+  rmSync,
+  writeFileSync,
+  existsSync,
+  copyFileSync,
+  readdirSync,
+  statSync,
+} from "node:fs";
 import { join } from "node:path";
 import { scanRoutes } from "../core/routes/scan.js";
 import { resolveDistPath } from "../core/paths.js";
@@ -24,96 +15,99 @@ import { PageRenderer } from "./page-renderer.js";
 import { AssetHasher } from "./asset-hashing.js";
 import { createScssCompiler } from "../css/compiler.js";
 export class SSGPipeline {
-    config;
-    dist;
-    constructor(config) {
-        this.config = config;
-        this.dist = resolveDistPath(config);
+  config;
+  dist;
+  constructor(config) {
+    this.config = config;
+    this.dist = resolveDistPath(config);
+  }
+  /**
+   * Run the full SSG Pipeline
+   */
+  async run() {
+    log.info("Starting SSG Pipeline (Enterprise Build)");
+    // 1. Prepare dist
+    this.prepareDist();
+    // 2. Process Assets
+    await this.processAssets();
+    // 3. Compile Styles
+    const cssPath = await this.compileStyles();
+    // 4. Render Pages
+    await this.renderPages();
+    log.info("Pipeline complete.");
+  }
+  prepareDist() {
+    rmSync(this.dist, { recursive: true, force: true });
+    mkdirSync(this.dist, { recursive: true });
+  }
+  async processAssets() {
+    const assetDir = join(process.cwd(), this.config.siteDir, "assets");
+    const targetDir = join(this.dist, "assets");
+    if (existsSync(assetDir)) {
+      this.copyRecursive(assetDir, targetDir);
+      log.info("Assets copied to dist");
     }
-    /**
-     * Run the full SSG Pipeline
-     */
-    async run() {
-        log.info("Starting SSG Pipeline (Enterprise Build)");
-        // 1. Prepare dist
-        this.prepareDist();
-        // 2. Process Assets
-        await this.processAssets();
-        // 3. Compile Styles
-        const cssPath = await this.compileStyles();
-        // 4. Render Pages
-        await this.renderPages();
-        log.info("Pipeline complete.");
+  }
+  async compileStyles() {
+    const scssPath = join(process.cwd(), this.config.css.globalScss);
+    if (!existsSync(scssPath)) return null;
+    const compiler = createScssCompiler();
+    const result = compiler.compile({
+      inputPath: scssPath,
+      minified: true,
+    });
+    if (result.error) {
+      log.error(`SCSS Failed: ${result.error}`);
+      return null;
     }
-    prepareDist() {
-        rmSync(this.dist, { recursive: true, force: true });
-        mkdirSync(this.dist, { recursive: true });
+    const cssFile = join(this.dist, "styles.css");
+    writeFileSync(cssFile, result.css);
+    // Hash the CSS
+    const hashedName = AssetHasher.hashFile(cssFile);
+    log.info(`Styles compiled and hashed: ${hashedName}`);
+    return hashedName;
+  }
+  async renderPages() {
+    const routes = scanRoutes(this.config);
+    for (const r of routes) {
+      try {
+        const url = new URL("http://localhost" + r.urlPath);
+        const html = await PageRenderer.render(
+          {
+            config: this.config,
+            route: r,
+            url,
+            params: {},
+            query: {},
+            headers: {},
+            cookies: {},
+          },
+          true,
+        );
+        const outDir = join(
+          this.dist,
+          r.urlPath === "/" ? "" : r.urlPath.slice(1),
+        );
+        mkdirSync(outDir, { recursive: true });
+        writeFileSync(join(outDir, "index.html"), html);
+        log.info(`Rendered ${r.urlPath}`);
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        log.error(`Failed to render ${r.urlPath}: ${errorMsg}`);
+        throw err;
+      }
     }
-    async processAssets() {
-        const assetDir = join(process.cwd(), this.config.siteDir, "assets");
-        const targetDir = join(this.dist, "assets");
-        if (existsSync(assetDir)) {
-            this.copyRecursive(assetDir, targetDir);
-            log.info("Assets copied to dist");
-        }
-    }
-    async compileStyles() {
-        const scssPath = join(process.cwd(), this.config.css.globalScss);
-        if (!existsSync(scssPath))
-            return null;
-        const compiler = createScssCompiler();
-        const result = compiler.compile({
-            inputPath: scssPath,
-            minified: true,
-        });
-        if (result.error) {
-            log.error(`SCSS Failed: ${result.error}`);
-            return null;
-        }
-        const cssFile = join(this.dist, "styles.css");
-        writeFileSync(cssFile, result.css);
-        // Hash the CSS
-        const hashedName = AssetHasher.hashFile(cssFile);
-        log.info(`Styles compiled and hashed: ${hashedName}`);
-        return hashedName;
-    }
-    async renderPages() {
-        const routes = scanRoutes(this.config);
-        for (const r of routes) {
-            try {
-                const url = new URL("http://localhost" + r.urlPath);
-                const html = await PageRenderer.render({
-                    config: this.config,
-                    route: r,
-                    url,
-                    params: {},
-                    query: {},
-                    headers: {},
-                    cookies: {},
-                }, true);
-                const outDir = join(this.dist, r.urlPath === "/" ? "" : r.urlPath.slice(1));
-                mkdirSync(outDir, { recursive: true });
-                writeFileSync(join(outDir, "index.html"), html);
-                log.info(`Rendered ${r.urlPath}`);
-            }
-            catch (err) {
-                const errorMsg = err instanceof Error ? err.message : String(err);
-                log.error(`Failed to render ${r.urlPath}: ${errorMsg}`);
-                throw err;
-            }
-        }
-    }
-    copyRecursive(src, dst) {
-        mkdirSync(dst, { recursive: true });
-        for (const name of readdirSync(src)) {
-            const sp = join(src, name);
-            const dp = join(dst, name);
-            if (statSync(sp).isDirectory()) {
-                this.copyRecursive(sp, dp);
-            }
-            else {
-                copyFileSync(sp, dp);
-            }
-        }
+  }
+  copyRecursive(src, dst) {
+    mkdirSync(dst, { recursive: true });
+    for (const name of readdirSync(src)) {
+      const sp = join(src, name);
+      const dp = join(dst, name);
+      if (statSync(sp).isDirectory()) {
+        this.copyRecursive(sp, dp);
+      } else {
+        copyFileSync(sp, dp);
+      }
     }
+  }
 }