create-jen-app 1.2.2 → 1.2.4

package/templates/ssr-isr/lib/build/ssg-pipeline.js

@@ -0,0 +1,113 @@
+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";
+import { log } from "../shared/log.js";
+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);
+  }
+  /**
+   * 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");
+    }
+  }
+  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);
+      }
+    }
+  }
+}

package/templates/{static → ssr-isr}/lib/build-tools/build-site.d.ts

@@ -1,6 +1,6 @@
 export interface BuildOptions {
-    minify?: boolean;
-    sourcemap?: boolean;
-    optimize?: boolean;
+  minify?: boolean;
+  sourcemap?: boolean;
+  optimize?: boolean;
 }
 export declare function buildSite(opts?: BuildOptions): Promise<void>;

package/templates/ssr-isr/lib/build-tools/build-site.js

@@ -0,0 +1,36 @@
+// Site build utilities
+// Migrated from Python src/python/build.py
+import { copyFileSync, rmSync, mkdirSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { log } from "../shared/log.js";
+function copyDir(src, dst) {
+  if (!readdirSync(src, { withFileTypes: true }).length) return;
+  mkdirSync(dst, { recursive: true });
+  for (const file of readdirSync(src, { withFileTypes: true })) {
+    const srcPath = join(src, file.name);
+    const dstPath = join(dst, file.name);
+    if (file.isDirectory()) {
+      copyDir(srcPath, dstPath);
+    } else {
+      copyFileSync(srcPath, dstPath);
+    }
+  }
+}
+export async function buildSite(opts = {}) {
+  log.info("Building site...");
+  const srcDir = "site";
+  const distDir = "dist";
+  // Clean dist
+  try {
+    rmSync(distDir, { recursive: true, force: true });
+  } catch {}
+  // Copy assets
+  copyDir(srcDir, distDir);
+  log.info(`Copied ${srcDir} → ${distDir}`);
+  // Minify if requested
+  if (opts.minify) {
+    log.info("Minifying assets...");
+    // Placeholder: integrate image/font minifiers
+  }
+  log.info("Build complete.");
+}

package/templates/ssr-isr/lib/cache/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Cache layer module providing two implementations:
+ * - MemoryCache: In-memory Map-based cache for single-process deployments.
+ * - RedisCache: API contract for distributed caching (requires external redis library).
+ *
+ * Choose MemoryCache for development/testing or single-instance production.
+ * Choose RedisCache for multi-process or distributed environments (must install redis separately).
+ */
+export * from "./memory";
+export * from "./redis";

package/templates/ssr-isr/lib/cache/index.js

@@ -0,0 +1,10 @@
+/**
+ * Cache layer module providing two implementations:
+ * - MemoryCache: In-memory Map-based cache for single-process deployments.
+ * - RedisCache: API contract for distributed caching (requires external redis library).
+ *
+ * Choose MemoryCache for development/testing or single-instance production.
+ * Choose RedisCache for multi-process or distributed environments (must install redis separately).
+ */
+export * from "./memory";
+export * from "./redis";

package/templates/ssr-isr/lib/cache/memory.d.ts

@@ -0,0 +1,33 @@
+/**
+ * In-memory cache implementation using a JavaScript Map.
+ * Stores key-value pairs with optional time-to-live (TTL) expiration.
+ * Useful for development, testing, or single-process deployments.
+ * Not suitable for multi-process environments (values isolated per process).
+ * Note: Expired entries are deleted asynchronously via setTimeout; memory is not
+ * compacted if clear() or delete() are never called on expired keys.
+ */
+export declare class MemoryCache {
+  /** Internal store mapping cache keys to arbitrary values. */
+  private store;
+  /**
+   * Store a value in cache with optional time-to-live.
+   * If TTL is specified, the entry is automatically deleted after ttlMs milliseconds.
+   * @param key - Cache key identifier.
+   * @param value - Value to store (can be any type; recommend serializable for consistency).
+   * @param ttlMs - Time-to-live in milliseconds. If omitted, entry persists until delete() or process restart.
+   */
+  set(key: string, value: any, ttlMs?: number): void;
+  /**
+   * Retrieve a value from cache.
+   * Returns undefined if key does not exist or has expired.
+   * @param key - Cache key identifier.
+   * @returns Stored value or undefined if not found.
+   */
+  get(key: string): any;
+  /**
+   * Remove a value from cache.
+   * Safe to call on non-existent keys (no-op).
+   * @param key - Cache key identifier.
+   */
+  delete(key: string): void;
+}

package/templates/ssr-isr/lib/cache/memory.js

@@ -0,0 +1,40 @@
+/**
+ * In-memory cache implementation using a JavaScript Map.
+ * Stores key-value pairs with optional time-to-live (TTL) expiration.
+ * Useful for development, testing, or single-process deployments.
+ * Not suitable for multi-process environments (values isolated per process).
+ * Note: Expired entries are deleted asynchronously via setTimeout; memory is not
+ * compacted if clear() or delete() are never called on expired keys.
+ */
+export class MemoryCache {
+  /** Internal store mapping cache keys to arbitrary values. */
+  store = new Map();
+  /**
+   * Store a value in cache with optional time-to-live.
+   * If TTL is specified, the entry is automatically deleted after ttlMs milliseconds.
+   * @param key - Cache key identifier.
+   * @param value - Value to store (can be any type; recommend serializable for consistency).
+   * @param ttlMs - Time-to-live in milliseconds. If omitted, entry persists until delete() or process restart.
+   */
+  set(key, value, ttlMs) {
+    this.store.set(key, value);
+    if (ttlMs) setTimeout(() => this.store.delete(key), ttlMs);
+  }
+  /**
+   * Retrieve a value from cache.
+   * Returns undefined if key does not exist or has expired.
+   * @param key - Cache key identifier.
+   * @returns Stored value or undefined if not found.
+   */
+  get(key) {
+    return this.store.get(key);
+  }
+  /**
+   * Remove a value from cache.
+   * Safe to call on non-existent keys (no-op).
+   * @param key - Cache key identifier.
+   */
+  delete(key) {
+    this.store.delete(key);
+  }
+}

package/templates/ssr-isr/lib/cache/redis.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Placeholder Redis cache implementation.
+ * The framework does not include the Redis library; users must install it separately.
+ * This class provides the API contract; actual implementation requires external redis library.
+ * Install with: npm install redis
+ *
+ * Usage example:
+ *   import { RedisCache } from "jenjs";
+ *   const cache = new RedisCache();
+ *   await cache.connect();
+ *   await cache.set("key", { data: "value" }, 3600);
+ *   const val = await cache.get("key");
+ *
+ * Suitable for distributed/multi-process deployments where shared cache is needed.
+ */
+export declare class RedisCache {
+  /**
+   * Connect to Redis server.
+   * Requires external redis library to be installed.
+   * @throws Always throws if called without external library.
+   */
+  connect(): Promise<void>;
+  /**
+   * Store a value in Redis with optional time-to-live.
+   * @param key - Cache key identifier.
+   * @param value - Value to store (should be serializable to JSON).
+   * @param ttlSec - Time-to-live in seconds. If omitted, key persists indefinitely.
+   * @throws Always throws if called without external library.
+   */
+  set(key: string, value: any, ttlSec?: number): Promise<void>;
+  /**
+   * Retrieve a value from Redis.
+   * @param key - Cache key identifier.
+   * @returns Stored value or undefined if key does not exist.
+   * @throws Always throws if called without external library.
+   */
+  get(key: string): Promise<void>;
+  /**
+   * Delete a value from Redis.
+   * Safe to call on non-existent keys (no-op in Redis).
+   * @param key - Cache key identifier.
+   * @throws Always throws if called without external library.
+   */
+  delete(key: string): Promise<void>;
+}

package/templates/ssr-isr/lib/cache/redis.js

@@ -0,0 +1,61 @@
+/**
+ * Placeholder Redis cache implementation.
+ * The framework does not include the Redis library; users must install it separately.
+ * This class provides the API contract; actual implementation requires external redis library.
+ * Install with: npm install redis
+ *
+ * Usage example:
+ *   import { RedisCache } from "jenjs";
+ *   const cache = new RedisCache();
+ *   await cache.connect();
+ *   await cache.set("key", { data: "value" }, 3600);
+ *   const val = await cache.get("key");
+ *
+ * Suitable for distributed/multi-process deployments where shared cache is needed.
+ */
+export class RedisCache {
+  /**
+   * Connect to Redis server.
+   * Requires external redis library to be installed.
+   * @throws Always throws if called without external library.
+   */
+  async connect() {
+    throw new Error(
+      "Redis implementation requires external library. Install: npm install redis",
+    );
+  }
+  /**
+   * Store a value in Redis with optional time-to-live.
+   * @param key - Cache key identifier.
+   * @param value - Value to store (should be serializable to JSON).
+   * @param ttlSec - Time-to-live in seconds. If omitted, key persists indefinitely.
+   * @throws Always throws if called without external library.
+   */
+  async set(key, value, ttlSec) {
+    throw new Error(
+      "Redis implementation requires external library. Install: npm install redis",
+    );
+  }
+  /**
+   * Retrieve a value from Redis.
+   * @param key - Cache key identifier.
+   * @returns Stored value or undefined if key does not exist.
+   * @throws Always throws if called without external library.
+   */
+  async get(key) {
+    throw new Error(
+      "Redis implementation requires external library. Install: npm install redis",
+    );
+  }
+  /**
+   * Delete a value from Redis.
+   * Safe to call on non-existent keys (no-op in Redis).
+   * @param key - Cache key identifier.
+   * @throws Always throws if called without external library.
+   */
+  async delete(key) {
+    throw new Error(
+      "Redis implementation requires external library. Install: npm install redis",
+    );
+  }
+}

package/templates/ssr-isr/lib/cli/banner.d.ts

@@ -0,0 +1,5 @@
+export declare function printBanner(
+  port: number,
+  env: string,
+  version?: string,
+): void;

package/templates/ssr-isr/lib/cli/banner.js

@@ -0,0 +1,28 @@
+// Stylized CLI Banner for Jen.js
+// Matches the visual style requested (Purple/Cyan gradient feel)
+const RES = "\x1b[0m";
+const PURPLE = "\x1b[38;2;200;128;255m"; // #C880FF
+const CYAN = "\x1b[38;2;86;194;201m"; // #56C2C9
+const GRAY = "\x1b[90m";
+const BOLD = "\x1b[1m";
+const DIM = "\x1b[2m";
+export function printBanner(port, env, version = "1.0.0") {
+  // Clear screen mostly
+  // console.log("\x1b[2J\x1b[3J\x1b[H");
+  console.log();
+  console.log(`  ${PURPLE}       __               ${CYAN}   _     ${RES}`);
+  console.log(`  ${PURPLE}      / /__  ____       ${CYAN}  (_)____${RES}`);
+  console.log(`  ${PURPLE} __  / / _ \/ __ \      ${CYAN} / / ___/${RES}`);
+  console.log(
+    `  ${PURPLE}/ /_/ /  __/ / / /${GRAY}_____${CYAN}/ / (__  )${RES}`,
+  );
+  console.log(`  ${PURPLE}\____/\___/_/ /_/${GRAY}_____/${CYAN}_/____/ ${RES}`);
+  console.log();
+  console.log(`  ${GRAY}Jen.js Framework ${DIM}v${version}${RES}`);
+  console.log();
+  console.log(
+    `  ${GRAY}➜${RES}  ${BOLD}Local:${RES}   ${CYAN}http://localhost:${port}/${RES}`,
+  );
+  console.log(`  ${GRAY}➜${RES}  ${BOLD}Mode:${RES}    ${PURPLE}${env}${RES}`);
+  console.log();
+}

package/templates/ssr-isr/lib/cli/templates/ssg/jen.config.js

@@ -0,0 +1,32 @@
+const config = {
+  siteDir: "site",
+  distDir: "dist",
+  routes: {
+    fileExtensions: [".tsx", ".jsx", ".ts", ".js"],
+    routeFilePattern: /^\((.+)\)\.(t|j)sx?$/,
+    enableIndexFallback: true,
+  },
+  rendering: {
+    defaultMode: "ssg",
+    defaultRevalidateSeconds: 60,
+  },
+  assets: {
+    publicDir: "site/assets",
+    cacheControl: "public, max-age=31536000, immutable",
+  },
+  inject: {
+    head: [
+      `<meta charset="utf-8">`,
+      `<meta name="viewport" content="width=device-width, initial-scale=1">`,
+    ],
+    bodyEnd: [],
+  },
+  css: {
+    globalScss: "site/styles/global.scss",
+  },
+  server: {
+    port: 3000,
+    hostname: "0.0.0.0",
+  },
+};
+export default config;

package/templates/ssr-isr/lib/cli/templates/ssg/site/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+export default function Home() {
+  return _jsxs("div", {
+    children: [
+      _jsx("h1", { children: "Welcome to My SSG App" }),
+      _jsx("p", { children: "This page was generated from the SSG template." }),
+    ],
+  });
+}

package/templates/ssr-isr/lib/cli/templates/ssr/jen.config.js

@@ -0,0 +1,32 @@
+const config = {
+  siteDir: "site",
+  distDir: "dist",
+  routes: {
+    fileExtensions: [".tsx", ".jsx", ".ts", ".js"],
+    routeFilePattern: /^\((.+)\)\.(t|j)sx?$/,
+    enableIndexFallback: true,
+  },
+  rendering: {
+    defaultMode: "ssr",
+    defaultRevalidateSeconds: 60,
+  },
+  assets: {
+    publicDir: "site/assets",
+    cacheControl: "public, max-age=31536000, immutable",
+  },
+  inject: {
+    head: [
+      `<meta charset="utf-8">`,
+      `<meta name="viewport" content="width=device-width, initial-scale=1">`,
+    ],
+    bodyEnd: [],
+  },
+  css: {
+    globalScss: "site/styles/global.scss",
+  },
+  server: {
+    port: 3000,
+    hostname: "0.0.0.0",
+  },
+};
+export default config;

package/templates/ssr-isr/lib/cli/templates/ssr/site/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+export default function Home() {
+  return _jsxs("div", {
+    children: [
+      _jsx("h1", { children: "Welcome to My SSR App" }),
+      _jsx("p", { children: "This page is rendered on the server." }),
+    ],
+  });
+}

package/templates/ssr-isr/lib/compilers/esbuild-plugins.js

@@ -0,0 +1,111 @@
+import { readFileSync } from "node:fs";
+import { createVueCompiler } from "./vue.js";
+import { createSvelteCompiler } from "./svelte.js";
+const vueCache = new Map();
+const svelteCache = new Map();
+export function vueEsbuildPlugin() {
+  const compiler = createVueCompiler();
+  return {
+    name: "vue",
+    setup(build) {
+      build.onLoad({ filter: /\.vue$/ }, async (args) => {
+        try {
+          // Check cache
+          if (vueCache.has(args.path)) {
+            return {
+              contents: vueCache.get(args.path),
+              loader: "js",
+            };
+          }
+          const source = readFileSync(args.path, "utf-8");
+          const result = compiler.compile(source, {
+            filename: args.path,
+            id: args.path.replace(/[^a-z0-9]/gi, "_"),
+          });
+          if (result.error) {
+            return {
+              errors: [
+                {
+                  text: `Vue compilation failed: ${result.error}`,
+                  location: { file: args.path, line: 1, column: 0 },
+                },
+              ],
+            };
+          }
+          vueCache.set(args.path, result.code);
+          return {
+            contents: result.code,
+            loader: "js",
+          };
+        } catch (err) {
+          return {
+            errors: [
+              {
+                text: `Vue plugin error: ${String(err)}`,
+                location: { file: args.path, line: 1, column: 0 },
+              },
+            ],
+          };
+        }
+      });
+    },
+  };
+}
+export function svelteEsbuildPlugin() {
+  const compiler = createSvelteCompiler();
+  return {
+    name: "svelte",
+    setup(build) {
+      build.onLoad({ filter: /\.svelte$/ }, async (args) => {
+        try {
+          // Check cache
+          if (svelteCache.has(args.path)) {
+            return {
+              contents: svelteCache.get(args.path),
+              loader: "js",
+            };
+          }
+          const source = readFileSync(args.path, "utf-8");
+          const result = compiler.compile(source, {
+            filename: args.path,
+            dev: process.env.NODE_ENV !== "production",
+          });
+          if (result.error) {
+            return {
+              errors: [
+                {
+                  text: `Svelte compilation failed: ${result.error}`,
+                  location: { file: args.path, line: 1, column: 0 },
+                },
+              ],
+            };
+          }
+          svelteCache.set(args.path, result.code);
+          return {
+            contents: result.code,
+            loader: "js",
+          };
+        } catch (err) {
+          return {
+            errors: [
+              {
+                text: `Svelte plugin error: ${String(err)}`,
+                location: { file: args.path, line: 1, column: 0 },
+              },
+            ],
+          };
+        }
+      });
+    },
+  };
+}
+export function invalidateVueCache(filePath) {
+  vueCache.delete(filePath);
+}
+export function invalidateSvelteCache(filePath) {
+  svelteCache.delete(filePath);
+}
+export function clearAllCompilerCaches() {
+  vueCache.clear();
+  svelteCache.clear();
+}

package/templates/ssr-isr/lib/compilers/svelte.d.ts

@@ -0,0 +1,18 @@
+export interface SvelteCompileOptions {
+  filename?: string;
+  dev?: boolean;
+  minified?: boolean;
+  hydratable?: boolean;
+}
+export interface SvelteCompileResult {
+  code: string;
+  css?: {
+    code: string;
+    map?: any;
+  };
+  error?: string;
+}
+export declare class SvelteCompiler {
+  compile(source: string, options: SvelteCompileOptions): SvelteCompileResult;
+}
+export declare function createSvelteCompiler(): SvelteCompiler;

package/templates/ssr-isr/lib/compilers/svelte.js

@@ -0,0 +1,44 @@
+import { compile as svelteCompile } from "svelte/compiler";
+import { log } from "../shared/log.js";
+export class SvelteCompiler {
+  compile(source, options) {
+    try {
+      const filename = options.filename || "component.svelte";
+      const result = svelteCompile(source, {
+        filename,
+        dev: options.dev ?? false,
+        css: "injected", // Inject CSS at runtime instead of extracting
+        preserveComments: !options.minified,
+        preserveWhitespace: !options.minified,
+      });
+      if (result.warnings && result.warnings.length > 0) {
+        result.warnings.forEach((w) => {
+          log.warn(`[Svelte] ${filename}: ${w.message}`);
+        });
+      }
+      // Build module code
+      let code = result.js.code;
+      // If CSS is generated, inject it
+      if (result.css && result.css.code.trim()) {
+        const escapedCss = result.css.code
+          .replace(/"/g, '\\"')
+          .replace(/\n/g, "\\n");
+        code += `
+if (typeof window !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = "${escapedCss}";
+  document.head.appendChild(style);
+}
+`;
+      }
+      return { code };
+    } catch (err) {
+      const message = err.message || String(err);
+      log.error(`[Svelte] Compilation error: ${message}`);
+      return { code: "", error: message };
+    }
+  }
+}
+export function createSvelteCompiler() {
+  return new SvelteCompiler();
+}

package/templates/ssr-isr/lib/compilers/vue.d.ts

@@ -0,0 +1,15 @@
+export interface VueCompileOptions {
+  id?: string;
+  filename?: string;
+  minified?: boolean;
+  sourceMap?: boolean;
+}
+export interface VueCompileResult {
+  code: string;
+  bindings?: Record<string, any>;
+  error?: string;
+}
+export declare class VueCompiler {
+  compile(source: string, options: VueCompileOptions): VueCompileResult;
+}
+export declare function createVueCompiler(): VueCompiler;