create-jen-app 1.2.2 → 1.2.4

package/templates/static/lib/build/island-hydration.js

@@ -1,62 +1,44 @@
-/*
- * 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/>.
- */
 /**
  * Creates an empty island registry for a request
  */
 export function createIslandRegistry() {
-    return { islands: [] };
+  return { islands: [] };
 }
 /**
  * Mark a component as an island (placeholder implementation)
  * In a real framework, this would be a decorator or a HOC
  */
 export function markIsland(name, props) {
-    const id = `island-${Math.random().toString(36).slice(2, 9)}`;
-    return `<div data-island="${name}" data-props='${JSON.stringify(props)}' id="${id}"></div>`;
+  const id = `island-${Math.random().toString(36).slice(2, 9)}`;
+  return `<div data-island="${name}" data-props='${JSON.stringify(props)}' id="${id}"></div>`;
 }
 /**
  * Extract islands from HTML string
  */
 export function extractIslandsFromHtml(html) {
-    const islands = [];
-    const regex = /data-island="([^"]+)" data-props='([^']+)' id="([^"]+)"/g;
-    let match;
-    while ((match = regex.exec(html)) !== null) {
-        islands.push({
-            component: match[1],
-            props: JSON.parse(match[2]),
-            id: match[3]
-        });
-    }
-    return islands;
+  const islands = [];
+  const regex = /data-island="([^"]+)" data-props='([^']+)' id="([^"]+)"/g;
+  let match;
+  while ((match = regex.exec(html)) !== null) {
+    islands.push({
+      component: match[1],
+      props: JSON.parse(match[2]),
+      id: match[3],
+    });
+  }
+  return islands;
 }
 /**
  * Inject hydration script into HTML
  */
 export function injectIslandScript(html, islands) {
-    if (islands.length === 0)
-        return html;
-    const script = `
+  if (islands.length === 0) return html;
+  const script = `
     <script type="module">
       import { hydrate } from '/__runtime/hydrate.js';
       const islands = ${JSON.stringify(islands)};
       islands.forEach(i => hydrate(i.component, i.id, i.props));
     </script>
   `;
-    return html.replace('</body>', `${script}</body>`);
+  return html.replace("</body>", `${script}</body>`);
 }

package/templates/static/lib/build/lazy-loader.js

@@ -0,0 +1,322 @@
+/**
+ * Lazy-loading manager for dynamic imports
+ *
+ * Detects and manages lazy-loaded modules:
+ * - Identifies dynamic imports and code-split boundaries
+ * - Generates lazy-loading metadata
+ * - Creates runtime helpers for loading
+ * - Implements prefetching/preloading strategies
+ */
+export class LazyLoader {
+  modules = new Map();
+  manifest;
+  constructor(strategy = "lazy") {
+    this.manifest = {
+      modules: [],
+      loadingStrategy: strategy,
+      prefetch: strategy !== "eager",
+      preload: strategy === "progressive",
+    };
+  }
+  /**
+   * Register a lazy-loaded module
+   *
+   * @example
+   * ```typescript
+   * lazyLoader.register({
+   *   id: "dashboard",
+   *   name: "Dashboard",
+   *   path: "src/pages/dashboard.tsx",
+   *   chunkName: "dashboard",
+   *   condition: "route === 'dashboard'"
+   * });
+   * ```
+   */
+  register(module) {
+    this.modules.set(module.id, module);
+    this.manifest.modules.push(module);
+  }
+  /**
+   * Detect lazy-loaded modules from source code
+   *
+   * Patterns detected:
+   * - import() dynamic imports
+   * - React.lazy() components
+   * - Preact lazy() components
+   * - @lazy-load comments
+   */
+  detectFromSource(source) {
+    const detected = [];
+    const patterns = {
+      // import("./path") or import('./path')
+      dynamicImport: /import\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
+      // @lazy-load:"name"
+      lazyComment: /@lazy-load:\s*"([^"]+)"/g,
+      // React.lazy(() => import(...))
+      reactLazy:
+        /React\.lazy\s*\(\s*\(\)\s*=>\s*import\s*\(\s*['"`]([^'"`]+)['"`]\s*\)\s*\)/g,
+    };
+    // Detect dynamic imports
+    let match;
+    const importRegex = patterns.dynamicImport;
+    while ((match = importRegex.exec(source)) !== null) {
+      const path = match[1];
+      detected.push({
+        id: path.replace(/[./]/g, "-"),
+        name: path.split("/").pop() || "unknown",
+        path,
+        chunkName:
+          path
+            .split("/")
+            .pop()
+            ?.replace(/\.[jt]sx?$/, "") || "chunk",
+      });
+    }
+    // Detect lazy-load comments
+    const commentRegex = patterns.lazyComment;
+    while ((match = commentRegex.exec(source)) !== null) {
+      const name = match[1];
+      detected.push({
+        id: name,
+        name,
+        path: name,
+        chunkName: name,
+      });
+    }
+    return detected;
+  }
+  /**
+   * Generate runtime lazy-loading helper code
+   */
+  generateRuntimeHelper() {
+    return `
+/**
+ * Auto-generated lazy-loading runtime helper
+ * Manages dynamic imports with caching and error handling
+ */
+
+// Cache for loaded modules
+const lazyCache = new Map();
+
+/**
+ * Load a lazy module by ID
+ * Returns cached module if already loaded
+ * Implements exponential backoff for failed loads
+ */
+export async function loadLazy(moduleId, moduleSpec) {
+  if (lazyCache.has(moduleId)) {
+    return lazyCache.get(moduleId);
+  }
+
+  let retries = 0;
+  const maxRetries = 3;
+  let lastError;
+
+  while (retries < maxRetries) {
+    try {
+      const module = await import(moduleSpec);
+      lazyCache.set(moduleId, module);
+      return module;
+    } catch (err) {
+      lastError = err;
+      retries++;
+      if (retries < maxRetries) {
+        // Exponential backoff: 100ms, 200ms, 400ms
+        await new Promise(r => setTimeout(r, 100 * Math.pow(2, retries - 1)));
+      }
+    }
+  }
+
+  console.error(\`Failed to load module \${moduleId}:\`, lastError);
+  throw lastError;
+}
+
+/**
+ * Prefetch a lazy module
+ * Useful for anticipated navigation or user interactions
+ */
+export function prefetchLazy(moduleId, moduleSpec) {
+  if (typeof window === 'undefined') return; // Server-side, skip
+  
+  const link = document.createElement('link');
+  link.rel = 'prefetch';
+  link.as = 'script';
+  link.href = moduleSpec;
+  document.head.appendChild(link);
+  
+  // Also start loading in background
+  loadLazy(moduleId, moduleSpec).catch(err => {
+    console.warn(\`Prefetch for \${moduleId} failed:\`, err);
+  });
+}
+
+/**
+ * Preload a lazy module immediately
+ * Used for critical lazy modules needed soon
+ */
+export function preloadLazy(moduleId, moduleSpec) {
+  if (typeof window === 'undefined') return; // Server-side, skip
+  
+  const link = document.createElement('link');
+  link.rel = 'preload';
+  link.as = 'script';
+  link.href = moduleSpec;
+  document.head.appendChild(link);
+  
+  return loadLazy(moduleId, moduleSpec);
+}
+
+/**
+ * Get lazy loading manifest
+ */
+export function getLazyManifest() {
+  return ${JSON.stringify(this.manifest, null, 2)};
+}
+`;
+  }
+  /**
+   * Generate lazy-loading manifest JSON
+   */
+  getManifest() {
+    return {
+      ...this.manifest,
+      modules: Array.from(this.modules.values()),
+    };
+  }
+  /**
+   * Generate HTML script tags for lazy-loaded modules
+   */
+  generateLazyScriptTags() {
+    let html = `<!-- Lazy-loaded module hints -->\n`;
+    for (const module of this.modules.values()) {
+      if (this.manifest.prefetch) {
+        html += `<link rel="prefetch" as="script" href="/${module.chunkName}.js">\n`;
+      }
+      if (this.manifest.preload) {
+        html += `<link rel="preload" as="script" href="/${module.chunkName}.js">\n`;
+      }
+    }
+    return html;
+  }
+  /**
+   * Generate Intersection Observer helper for visible-load pattern
+   *
+   * Lazy-loads components when they become visible in viewport
+   * Useful for components below the fold
+   */
+  generateVisibleLoadHelper() {
+    return `
+/**
+ * Load component when element becomes visible
+ * Useful for below-the-fold content
+ */
+export function loadWhenVisible(elementId, moduleId, moduleSpec) {
+  if (typeof window === 'undefined') return;
+  if (typeof IntersectionObserver === 'undefined') {
+    // Fallback: load immediately if IntersectionObserver not available
+    return loadLazy(moduleId, moduleSpec);
+  }
+
+  const element = document.getElementById(elementId);
+  if (!element) return;
+
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        observer.unobserve(entry.target);
+        loadLazy(moduleId, moduleSpec);
+      }
+    }
+  });
+
+  observer.observe(element);
+}
+
+/**
+ * Load component on user interaction
+ * Examples: hover, focus, click
+ */
+export function loadOnInteraction(elementId, moduleId, moduleSpec, events = ['mouseover', 'focus', 'click']) {
+  if (typeof window === 'undefined') return;
+  
+  const element = document.getElementById(elementId);
+  if (!element) return;
+
+  const listener = () => {
+    for (const event of events) {
+      element.removeEventListener(event, listener);
+    }
+    loadLazy(moduleId, moduleSpec);
+  };
+
+  for (const event of events) {
+    element.addEventListener(event, listener, { once: true });
+  }
+}
+`;
+  }
+  /**
+   * Generate loading state component for Preact
+   */
+  generateLoadingComponent() {
+    return `
+/**
+ * Loading component for lazy-loaded modules
+ * Shows while module is loading
+ */
+import { h } from 'preact';
+
+export function LazyLoading() {
+  return h('div', { class: 'lazy-loading' },
+    h('div', { class: 'spinner' }),
+    h('p', null, 'Loading...')
+  );
+}
+
+export function LazyError({ error, retry }) {
+  return h('div', { class: 'lazy-error' },
+    h('p', null, 'Failed to load component'),
+    h('pre', null, error?.message),
+    h('button', { onClick: retry }, 'Retry')
+  );
+}
+
+export function withLazyFallback(Component, LoadingComponent = LazyLoading) {
+  return function LazyComponent(props) {
+    return h('ErrorBoundary', null,
+      h('Suspense', { fallback: h(LoadingComponent) },
+        h(Component, props)
+      )
+    );
+  };
+}
+`;
+  }
+  /**
+   * Generate configuration report
+   */
+  generateReport() {
+    let report = "# Lazy-Loading Report\n\n";
+    report += "## Configuration\n";
+    report += `- Strategy: ${this.manifest.loadingStrategy}\n`;
+    report += `- Prefetch: ${this.manifest.prefetch}\n`;
+    report += `- Preload: ${this.manifest.preload}\n`;
+    report += `- Total modules: ${this.modules.size}\n\n`;
+    if (this.modules.size > 0) {
+      report += "## Modules\n";
+      for (const module of this.modules.values()) {
+        report += `- ${module.name} (${module.chunkName})\n`;
+        if (module.condition) {
+          report += `  Condition: ${module.condition}\n`;
+        }
+      }
+    }
+    return report;
+  }
+}
+/**
+ * Helper: Create lazy loader from config
+ */
+export function createLazyLoader(strategy = "lazy") {
+  return new LazyLoader(strategy);
+}

package/templates/static/lib/build/minifier.js

@@ -1,65 +1,46 @@
-/*
- * 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 * as esbuild from 'esbuild';
-import { log } from '../shared/log.js';
+import * as esbuild from "esbuild";
+import { log } from "../shared/log.js";
 export class Minifier {
-    /**
-     * Minify JavaScript/TypeScript using esbuild
-     */
-    static async minifyJs(code, options = {}) {
-        try {
-            const result = await esbuild.transform(code, {
-                loader: 'js',
-                minify: true,
-                legalComments: 'none',
-                ...options
-            });
-            return result.code;
-        }
-        catch (err) {
-            log.error('Minification failed (JS)');
-            throw err;
-        }
+  /**
+   * Minify JavaScript/TypeScript using esbuild
+   */
+  static async minifyJs(code, options = {}) {
+    try {
+      const result = await esbuild.transform(code, {
+        loader: "js",
+        minify: true,
+        legalComments: "none",
+        ...options,
+      });
+      return result.code;
+    } catch (err) {
+      log.error("Minification failed (JS)");
+      throw err;
     }
-    /**
-     * Minify CSS using esbuild
-     */
-    static async minifyCss(code) {
-        try {
-            const result = await esbuild.transform(code, {
-                loader: 'css',
-                minify: true
-            });
-            return result.code;
-        }
-        catch (err) {
-            log.error('Minification failed (CSS)');
-            throw err;
-        }
-    }
-    /**
-     * Minify HTML (basic regex/string-based, as esbuild doesn't handle HTML)
-     */
-    static minifyHtml(html) {
-        return html
-            .replace(/<!--[\s\S]*?-->/g, '') // Remove comments
-            .replace(/>\s+</g, '><') // Remove whitespace between tags
-            .replace(/\s{2,}/g, ' ') // Collapse multiple whitespaces
-            .trim();
+  }
+  /**
+   * Minify CSS using esbuild
+   */
+  static async minifyCss(code) {
+    try {
+      const result = await esbuild.transform(code, {
+        loader: "css",
+        minify: true,
+      });
+      return result.code;
+    } catch (err) {
+      log.error("Minification failed (CSS)");
+      throw err;
     }
+  }
+  /**
+   * Minify HTML (basic regex/string-based, as esbuild doesn't handle HTML)
+   */
+  static minifyHtml(html) {
+    return html
+      .replace(/<!--[\s\S]*?-->/g, "") // Remove comments
+      .replace(/>\s+</g, "><") // Remove whitespace between tags
+      .replace(/\s{2,}/g, " ") // Collapse multiple whitespaces
+      .trim();
+  }
 }

package/templates/static/lib/build/page-renderer.js

@@ -1,45 +1,28 @@
-/*
- * 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 { renderRouteToHtml } from '../runtime/render.js';
-import { Minifier } from './minifier.js';
+import { renderRouteToHtml } from "../runtime/render.js";
+import { Minifier } from "./minifier.js";
 export class PageRenderer {
-    /**
-     * Render a route to a full HTML string, including minification if requested
-     */
-    static async render(ctx, minify = false) {
-        // 1. Core Preact render
-        let html = await renderRouteToHtml({
-            config: ctx.config,
-            route: ctx.route,
-            req: {},
-            res: {},
-            url: ctx.url,
-            params: ctx.params,
-            query: ctx.query,
-            headers: ctx.headers,
-            cookies: ctx.cookies
-        });
-        // 2. Post-processing (Layout injection, hydration script injection)
-        // Note: Hydration logic is handled by island-hydration.ts usually
-        // 3. Optional Minification
-        if (minify) {
-            html = Minifier.minifyHtml(html);
-        }
-        return html;
+  /**
+   * Render a route to a full HTML string, including minification if requested
+   */
+  static async render(ctx, minify = false) {
+    // 1. Core Preact render
+    let html = await renderRouteToHtml({
+      config: ctx.config,
+      route: ctx.route,
+      req: {},
+      res: {},
+      url: ctx.url,
+      params: ctx.params,
+      query: ctx.query,
+      headers: ctx.headers,
+      cookies: ctx.cookies,
+    });
+    // 2. Post-processing (Layout injection, hydration script injection)
+    // Note: Hydration logic is handled by island-hydration.ts usually
+    // 3. Optional Minification
+    if (minify) {
+      html = Minifier.minifyHtml(html);
     }
+    return html;
+  }
 }

package/templates/static/lib/build/production-build.js

@@ -1,30 +1,13 @@
-/*
- * 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 { SSGPipeline } from './ssg-pipeline.js';
-import { log } from '../shared/log.js';
+import { SSGPipeline } from "./ssg-pipeline.js";
+import { log } from "../shared/log.js";
 export class ProductionBuilder {
-    /**
-     * Run the production build sequence
-     */
-    static async build(opts) {
-        log.info('--- PRODUCTION BUILD START ---');
-        const pipeline = new SSGPipeline(opts.config);
-        await pipeline.run();
-        log.info('--- PRODUCTION BUILD COMPLETE ---');
-    }
+  /**
+   * Run the production build sequence
+   */
+  static async build(opts) {
+    log.info("--- PRODUCTION BUILD START ---");
+    const pipeline = new SSGPipeline(opts.config);
+    await pipeline.run();
+    log.info("--- PRODUCTION BUILD COMPLETE ---");
+  }
 }

package/templates/static/lib/build/rust-hashing.js

@@ -0,0 +1,71 @@
+import { spawn } from "node:child_process";
+import { join } from "node:path";
+import { readdirSync, existsSync } from "node:fs";
+/**
+ * High-performance hashing using Rust utility
+ */
+export async function hashWithRust(options) {
+  return new Promise((resolve, reject) => {
+    // Binary is expected in lib/ relative to the project root
+    const libDir = join(process.cwd(), "lib");
+    if (!existsSync(libDir)) {
+      reject(new Error(`Binary directory not found: ${libDir}`));
+      return;
+    }
+    // Look for a file named 'utils' with any extension (e.g. utils.exe, utils.bin, or just utils)
+    let binaryName;
+    try {
+      const files = readdirSync(libDir);
+      binaryName = files.find((f) => f === "utils" || f.startsWith("utils."));
+    } catch (err) {
+      reject(new Error(`Failed to list binary directory: ${err.message}`));
+      return;
+    }
+    if (!binaryName) {
+      reject(
+        new Error(
+          `Could not find 'utils' binary in ${libDir}. Ensure the Rust utility is compiled and placed in lib/.`,
+        ),
+      );
+      return;
+    }
+    const binaryPath = join(libDir, binaryName);
+    const child = spawn(binaryPath, [], {
+      stdio: ["pipe", "pipe", "inherit"],
+    });
+    let stdout = "";
+    child.stdout.on("data", (data) => {
+      stdout += data.toString();
+    });
+    child.on("error", (err) => {
+      reject(new Error(`Failed to start Rust utility: ${err.message}`));
+    });
+    child.on("close", (code) => {
+      if (code !== 0 && !stdout) {
+        reject(new Error(`Rust utility exited with code ${code}`));
+        return;
+      }
+      try {
+        const response = JSON.parse(stdout);
+        if (response.ok) {
+          resolve(response);
+        } else {
+          reject(
+            new Error(response.error || "Unknown error from Rust utility"),
+          );
+        }
+      } catch (e) {
+        reject(new Error(`Failed to parse Rust utility output: ${stdout}`));
+      }
+    });
+    // Send command via stdin
+    const request = {
+      command: "hash",
+      path: options.path,
+      algorithm: options.algorithm || "sha256",
+      hashFileNames: options.hashFileNames || false,
+    };
+    child.stdin.write(JSON.stringify(request));
+    child.stdin.end();
+  });
+}