create-jen-app 1.2.3 → 1.2.4

package/templates/static/lib/auth/session.js

@@ -1,20 +1,3 @@
-/*
- * 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/>.
- */
 const SESSION_TIMEOUT = parseInt(process.env.SESSION_TIMEOUT ?? "86400000", 10); // 24 hours default
 /**
  * In-memory session manager

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

@@ -1,42 +1,50 @@
-/*
- * 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 { createHash } from "node:crypto";
 import { readFileSync, renameSync } from "node:fs";
 import { join, dirname, basename, extname } from "node:path";
+import { hashWithRust } from "./rust-hashing.js";
 export class AssetHasher {
-    /**
-     * Calculate hash of file content
-     */
-    static hashContent(content) {
-        return createHash("md5").update(content).digest("hex").slice(0, 10);
-    }
-    /**
-     * Rename file to include hash (e.g. style.css -> style.a1b2c3.css)
-     */
-    static hashFile(filePath) {
-        const content = readFileSync(filePath);
-        const hash = this.hashContent(content);
-        const dir = dirname(filePath);
-        const ext = extname(filePath);
-        const name = basename(filePath, ext);
-        const newName = `${name}.${hash}${ext}`;
-        const newPath = join(dir, newName);
-        renameSync(filePath, newPath);
-        return newName;
+  /**
+   * Calculate hash of file content
+   */
+  static hashContent(content) {
+    return createHash("md5").update(content).digest("hex").slice(0, 10);
+  }
+  /**
+   * High-performance hashing for directories using Rust utility.
+   * Useful during build for hashing all assets in bulk.
+   */
+  static async hashDirectory(dirPath) {
+    try {
+      const response = await hashWithRust({
+        path: dirPath,
+        algorithm: "sha256",
+        hashFileNames: false,
+      });
+      const result = {};
+      for (const h of response.hashes) {
+        // Rust returns relative path, map it to hash
+        result[h.path] = h.hash.slice(0, 10);
+      }
+      return result;
+    } catch (err) {
+      console.warn(
+        `[AssetHasher] Rust hashing failed, falling back to Node.js: ${err}`,
+      );
+      return {}; // Fallback would be implemented by caller or here
     }
+  }
+  /**
+   * Rename file to include hash (e.g. style.css -> style.a1b2c3.css)
+   */
+  static hashFile(filePath) {
+    const content = readFileSync(filePath);
+    const hash = this.hashContent(content);
+    const dir = dirname(filePath);
+    const ext = extname(filePath);
+    const name = basename(filePath, ext);
+    const newName = `${name}.${hash}${ext}`;
+    const newPath = join(dir, newName);
+    renameSync(filePath, newPath);
+    return newName;
+  }
 }

package/templates/static/lib/build/asset-manifest.js

@@ -1,38 +1,21 @@
-/*
- * 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 { writeFileSync, readFileSync, existsSync } from "node:fs";
 import { join } from "node:path";
 export class AssetManifest {
-    manifest = {};
-    manifestPath;
-    constructor(distDir) {
-        this.manifestPath = join(distDir, "manifest.json");
-        if (existsSync(this.manifestPath)) {
-            this.manifest = JSON.parse(readFileSync(this.manifestPath, "utf8"));
-        }
-    }
-    set(original, hashed) {
-        this.manifest[original] = hashed;
-    }
-    get(original) {
-        return this.manifest[original];
-    }
-    save() {
-        writeFileSync(this.manifestPath, JSON.stringify(this.manifest, null, 2));
+  manifest = {};
+  manifestPath;
+  constructor(distDir) {
+    this.manifestPath = join(distDir, "manifest.json");
+    if (existsSync(this.manifestPath)) {
+      this.manifest = JSON.parse(readFileSync(this.manifestPath, "utf8"));
     }
+  }
+  set(original, hashed) {
+    this.manifest[original] = hashed;
+  }
+  get(original) {
+    return this.manifest[original];
+  }
+  save() {
+    writeFileSync(this.manifestPath, JSON.stringify(this.manifest, null, 2));
+  }
 }

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

@@ -1,150 +1,295 @@
-/*
- * 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 { join } from "node:path";
+import {
+  mkdirSync,
+  rmSync,
+  writeFileSync,
+  existsSync,
+  copyFileSync,
+  readdirSync,
+  statSync,
+  readFileSync,
+  renameSync,
+} from "node:fs";
+import { join, dirname, basename, extname } from "node:path";
+import { fileURLToPath } from "node:url";
 import esbuild from "esbuild";
 import { createScssCompiler } from "../css/compiler.js";
-import { vueEsbuildPlugin, svelteEsbuildPlugin, } from "../compilers/esbuild-plugins.js";
+import {
+  vueEsbuildPlugin,
+  svelteEsbuildPlugin,
+} from "../compilers/esbuild-plugins.js";
 import { scanRoutes } from "../core/routes/scan.js";
 import { resolveDistPath } from "../core/paths.js";
 import { log } from "../shared/log.js";
 import { renderRouteToHtml } from "../runtime/render.js";
+import { injectFonts } from "../fonts/inject.js";
+import { AssetHasher } from "./asset-hashing.js";
+// Get __dirname for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 /**
  * Recursively copies a directory and all its contents.
  * Used to copy static assets from the source directory to the build output.
- * Creates the destination directory structure as needed.
- *
- * @param src The source directory path.
- * @param dst The destination directory path.
  */
 function copyDir(src, dst) {
-    if (!existsSync(src))
-        return;
-    mkdirSync(dst, { recursive: true });
-    for (const name of readdirSync(src)) {
-        const sp = join(src, name);
-        const dp = join(dst, name);
-        const st = statSync(sp);
-        if (st.isDirectory())
-            copyDir(sp, dp);
-        else
-            copyFileSync(sp, dp);
-    }
+  if (!existsSync(src)) return;
+  mkdirSync(dst, { recursive: true });
+  for (const name of readdirSync(src)) {
+    const sp = join(src, name);
+    const dp = join(dst, name);
+    const st = statSync(sp);
+    if (st.isDirectory()) copyDir(sp, dp);
+    else copyFileSync(sp, dp);
+  }
+}
+/**
+ * FIXED: Mock Response/Request to prevent crashes during SSG
+ * when components or middleware call res.setHeader()
+ */
+function createSsgMocks() {
+  return {
+    req: {
+      headers: {},
+      method: "GET",
+      url: "/",
+      cookies: {},
+    },
+    res: {
+      setHeader: () => {},
+      getHeader: () => {},
+      getHeaders: () => ({}),
+      removeHeader: () => {},
+      writeHead: () => ({}),
+      end: () => {},
+      statusCode: 200,
+    },
+  };
 }
 /**
  * Builds a static site by pre-rendering all routes to HTML files.
- * This is the core static site generation (SSG) function that runs at build time.
- * It performs the following steps:
- * 1. Clears the previous build output directory
- * 2. Discovers all route files in the configured site directory
- * 3. Renders each route to a static HTML file
- * 4. Copies static assets from the source directory
- * 5. Bundles Vue and Svelte components for client-side rehydration
- * 6. Compiles SCSS to CSS for the global stylesheet
- *
- * Routes are rendered with empty req/res objects (SSG mode) to avoid middleware execution.
- * This produces pure static HTML that can be served by any web server.
- * Hydration scripts are still injected if the route has hydrate:true, allowing for
- * optional client-side interactivity in otherwise static pages.
- *
- * @param opts Configuration object.
- * @param opts.config The Jen.js framework configuration.
- * @throws Logs warnings for missing assets or component bundling failures but does not stop the build.
  */
 export async function buildSite(opts) {
-    const { config } = opts;
-    // Clear and recreate the dist directory for a clean build.
-    const dist = resolveDistPath(config);
-    rmSync(dist, { recursive: true, force: true });
-    mkdirSync(dist, { recursive: true });
-    // Discover all routes and pre-render each to a static HTML file.
-    const routes = scanRoutes(config);
-    log.info(`Building SSG: ${routes.length} routes`);
-    for (const r of routes) {
-        // Create a synthetic URL for each route. Used as the request URL during rendering.
-        const url = new URL("http://localhost" + r.urlPath);
-        // Render the route to HTML. Empty req/res indicates SSG mode (no middleware execution).
-        const html = await renderRouteToHtml({
-            config,
-            route: r,
-            req: {},
-            res: {},
-            url,
-            params: {},
-            query: {},
-            headers: {},
-            cookies: {},
-        });
-        // Calculate output path. Root route goes to index.html, nested routes get their own directories.
-        const outPath = r.urlPath === "/"
-            ? join(dist, "index.html")
-            : join(dist, r.urlPath.slice(1), "index.html");
-        mkdirSync(join(outPath, ".."), { recursive: true });
-        writeFileSync(outPath, html, "utf8");
-        log.info(`SSG: ${r.urlPath} -> ${outPath}`);
+  const { config } = opts;
+  const { req, res } = createSsgMocks();
+  // Inject fonts configuration into config.inject.head
+  injectFonts(config);
+  // Clear and recreate the dist directory for a clean build.
+  const dist = resolveDistPath(config);
+  rmSync(dist, { recursive: true, force: true });
+  mkdirSync(dist, { recursive: true });
+  // Discover all routes and pre-render each to a static HTML file.
+  const routes = scanRoutes(config);
+  log.info(`Building SSG: ${routes.length} routes`);
+  for (const r of routes) {
+    // Create a synthetic URL for each route.
+    const url = new URL("http://localhost" + r.urlPath);
+    // Render the route to HTML.
+    let html = await renderRouteToHtml({
+      config,
+      route: r,
+      req, // Using fixed mocks
+      res, // Using fixed mocks
+      url,
+      params: {},
+      query: {},
+      headers: {},
+      cookies: {},
+    });
+    // Inject polyfills and Preact runtime script tags
+    const polyfillsScript = `<script src="/polyfills.js"></script>`;
+    const preactScript = `<script type="module" src="/preact-runtime.js"></script>`;
+    const injectedScripts = `${polyfillsScript}${preactScript}`;
+    // FIXED: Case-insensitive injection for </body>
+    const bodyRegex = /<\/body>/i;
+    if (bodyRegex.test(html)) {
+      html = html.replace(bodyRegex, (match) => `${injectedScripts}${match}`);
+    } else {
+      html = html + injectedScripts;
     }
-    // Copy static assets from the source assets directory to the built site.
-    copyDir(join(process.cwd(), config.siteDir, "assets"), join(dist, "assets"));
-    // Bundle Vue and Svelte components found in the site directory.
-    // These are transpiled to JavaScript modules for client-side use in interactive pages.
-    const siteSourceDir = join(process.cwd(), config.siteDir);
-    const vueFiles = readdirSync(siteSourceDir, { recursive: true }).filter((f) => String(f).endsWith(".vue") || String(f).endsWith(".svelte"));
-    if (vueFiles.length > 0) {
-        log.info(`Found ${vueFiles.length} Vue/Svelte components, bundling...`);
+    // Calculate output path.
+    const outPath =
+      r.urlPath === "/"
+        ? join(dist, "index.html")
+        : join(dist, r.urlPath.replace(/\/$/, ""), "index.html");
+    mkdirSync(dirname(outPath), { recursive: true });
+    writeFileSync(outPath, html, "utf8");
+    log.info(`SSG: ${r.urlPath} -> ${outPath}`);
+  }
+  // Copy static assets
+  const assetsSrc = join(process.cwd(), config.siteDir, "assets");
+  const assetsDst = join(dist, "assets");
+  copyDir(assetsSrc, assetsDst);
+  // Asset hashing with Rust utility if enabled
+  if (config.build?.hashAssets) {
+    log.info("Hashing assets with Rust...");
+    const hashes = await AssetHasher.hashDirectory(assetsDst);
+    log.info(`Hashed ${Object.keys(hashes).length} assets.`);
+    const manifest = {};
+    // Rename assets with their hashes and build manifest for HTML updating
+    for (const [relPath, hash] of Object.entries(hashes)) {
+      const fullPath = join(assetsDst, relPath);
+      const ext = extname(fullPath);
+      const dir = dirname(fullPath);
+      const name = basename(fullPath, ext);
+      const newFileName = `${name}.${hash}${ext}`;
+      const newPath = join(dir, newFileName);
+      // Store the mapping for HTML link replacement (normalized for web)
+      const oldPublicPath = `/assets/${relPath}`.replace(/\\/g, "/");
+      const newPublicPath =
+        `/assets/${join(dirname(relPath), newFileName)}`.replace(/\\/g, "/");
+      manifest[oldPublicPath] = newPublicPath;
+      if (existsSync(fullPath)) {
         try {
-            await esbuild.build({
-                entryPoints: vueFiles.map((f) => join(siteSourceDir, String(f))),
-                outdir: join(dist, "components"),
-                format: "esm",
-                target: "es2022",
-                bundle: false,
-                plugins: [vueEsbuildPlugin(), svelteEsbuildPlugin()],
-                external: ["preact", "vue", "svelte"],
-                logLevel: "info",
-            });
-            log.info("Vue/Svelte components bundled successfully.");
+          renameSync(fullPath, newPath);
+        } catch (err) {
+          log.warn(`Failed to rename asset ${relPath}: ${err.message}`);
         }
-        catch (err) {
-            log.warn(`Failed to bundle Vue/Svelte components: ${err.message}`);
+      }
+    }
+    // FIXED: Update HTML files with new hashed paths so assets don't 404
+    const htmlFiles = readdirSync(dist, { recursive: true })
+      .filter((f) => String(f).endsWith(".html"))
+      .map((f) => join(dist, String(f)));
+    for (const file of htmlFiles) {
+      let content = readFileSync(file, "utf8");
+      let changed = false;
+      for (const [oldPath, newPath] of Object.entries(manifest)) {
+        if (content.includes(oldPath)) {
+          content = content.split(oldPath).join(newPath);
+          changed = true;
         }
+      }
+      if (changed) writeFileSync(file, content);
     }
-    // Compile the global SCSS file to CSS.
-    // This stylesheet is injected into every page and contains framework-wide styles.
-    // Minification is enabled for production builds.
-    const scssPath = join(process.cwd(), config.css.globalScss);
-    if (existsSync(scssPath)) {
-        const compiler = createScssCompiler();
-        const result = compiler.compile({
-            inputPath: scssPath,
-            minified: true,
+    if (config.build?.generateManifest) {
+      writeFileSync(
+        join(dist, "asset-manifest.json"),
+        JSON.stringify(hashes, null, 2),
+      );
+      log.info("Generated asset-manifest.json");
+    }
+  }
+  // Bundle Vue and Svelte components
+  if (config.features?.compilers !== false) {
+    const siteSourceDir = join(process.cwd(), config.siteDir);
+    const componentFiles = readdirSync(siteSourceDir, {
+      recursive: true,
+    }).filter((f) => /\.(vue|svelte)$/.test(String(f)));
+    if (componentFiles.length > 0) {
+      log.info(
+        `Found ${componentFiles.length} Vue/Svelte components, bundling...`,
+      );
+      try {
+        await esbuild.build({
+          entryPoints: componentFiles.map((f) =>
+            join(siteSourceDir, String(f)),
+          ),
+          outdir: join(dist, "components"),
+          format: "esm",
+          target: "es2022",
+          bundle: true, // Increased to true to resolve internal deps
+          plugins: [vueEsbuildPlugin(), svelteEsbuildPlugin()],
+          external: ["preact", "vue", "svelte"],
+          logLevel: "info",
         });
-        if (result.error) {
-            log.error(`SCSS Compilation Failed: ${result.error}`);
-            writeFileSync(join(dist, "styles.css"), "/* SCSS Compilation Failed */");
-        }
-        else {
-            writeFileSync(join(dist, "styles.css"), result.css);
-            log.info(`Compiled global SCSS: ${config.css.globalScss}`);
-        }
+        log.info("Vue/Svelte components bundled successfully.");
+      } catch (err) {
+        log.warn(`Failed to bundle Vue/Svelte components: ${err.message}`);
+      }
+    }
+  }
+  // Bundle polyfills
+  const polyfillsPaths = [
+    join(process.cwd(), "src/runtime/polyfills.js"),
+    join(process.cwd(), "../src/runtime/polyfills.js"),
+    join(process.cwd(), "../../src/runtime/polyfills.js"),
+  ];
+  let polyfillsPath = null;
+  for (const path of polyfillsPaths) {
+    if (existsSync(path)) {
+      polyfillsPath = path;
+      break;
+    }
+  }
+  if (polyfillsPath) {
+    log.info("Bundling polyfills for backwards compatibility...");
+    const polyfillsMetaPath = join(dist, "polyfills-meta.json");
+    try {
+      const polyfillsMeta = await esbuild.build({
+        entryPoints: [polyfillsPath],
+        outfile: join(dist, "polyfills.js"),
+        format: "iife",
+        target: "es2015",
+        bundle: true,
+        minify: true,
+        sourcemap: false,
+        logLevel: "info",
+        metafile: true,
+      });
+      if (polyfillsMeta.metafile) {
+        writeFileSync(
+          polyfillsMetaPath,
+          JSON.stringify(polyfillsMeta.metafile, null, 2),
+        );
+      }
+      log.info("✅ Polyfills bundled: polyfills.js");
+    } catch (err) {
+      log.warn(`Failed to bundle polyfills: ${err.message}`);
+    }
+  }
+  // Bundle Preact runtime
+  const preactBundleEntry = join(
+    process.cwd(),
+    ".jen",
+    "preact-runtime-entry.js",
+  );
+  mkdirSync(dirname(preactBundleEntry), { recursive: true });
+  writeFileSync(
+    preactBundleEntry,
+    `export * from 'preact'; export * from 'preact/hooks'; export * from 'preact/compat';
+    if (typeof window !== 'undefined') { window.__PREACT_BUNDLE__ = true; }`,
+  );
+  log.info("Bundling Preact runtime...");
+  const preactMetaPath = join(dist, "preact-runtime-meta.json");
+  try {
+    const preactMeta = await esbuild.build({
+      entryPoints: [preactBundleEntry],
+      outfile: join(dist, "preact-runtime.js"),
+      format: "esm",
+      target: "es2015",
+      bundle: true,
+      minify: true,
+      sourcemap: false,
+      logLevel: "info",
+      metafile: true,
+    });
+    if (preactMeta.metafile) {
+      writeFileSync(
+        preactMetaPath,
+        JSON.stringify(preactMeta.metafile, null, 2),
+      );
     }
-    else {
-        log.warn(`Global SCSS file not found: ${scssPath}`);
-        writeFileSync(join(dist, "styles.css"), "/* No global SCSS found */");
+    log.info("Preact runtime bundled: preact-runtime.js");
+  } catch (err) {
+    log.warn(`Failed to bundle Preact runtime: ${err.message}`);
+  }
+  // Compile global SCSS
+  const scssPath = join(process.cwd(), config.css.globalScss);
+  if (existsSync(scssPath)) {
+    const compiler = createScssCompiler();
+    const result = compiler.compile({
+      inputPath: scssPath,
+      minified: true,
+    });
+    if (result.error) {
+      log.error(`SCSS Compilation Failed: ${result.error}`);
+      writeFileSync(join(dist, "styles.css"), "/* SCSS Compilation Failed */");
+    } else {
+      writeFileSync(join(dist, "styles.css"), result.css);
+      log.info(`Compiled global SCSS: ${config.css.globalScss}`);
     }
-    log.info("Build complete.");
+  } else {
+    log.warn(`Global SCSS file not found: ${scssPath}`);
+    writeFileSync(join(dist, "styles.css"), "/* No global SCSS found */");
+  }
+  log.info("Build complete.");
 }