create-jen-app 0.1.0

package/templates/static/lib/runtime/islands.js

@@ -0,0 +1,89 @@
+/*
+ * 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/>.
+ */
+/**
+ * Mark a component as an interactive island.
+ * Wraps component with hydration metadata.
+ *
+ * Usage in route:
+ *   import { Island } from "jenjs";
+ *   const Counter = Island(CounterImpl, "load");
+ *
+ * Then use in JSX: <Counter count={5} />
+ *
+ * Server will:
+ * - Render the component to HTML
+ * - Emit hydration markers
+ * - Include serialized props
+ *
+ * Client will:
+ * - Discover islands from markers
+ * - Hydrate based on strategy
+ */
+export function Island(Component, strategy) {
+    // Mark component metadata for server-side detection
+    Component.__island = true;
+    Component.__hydrationStrategy = strategy;
+    return Component;
+}
+/**
+ * Generate island hydration markers for server-rendered HTML.
+ * Call this after SSR to inject island metadata.
+ */
+export function createIslandMarker(id, componentPath, strategy, props) {
+    const propsJson = JSON.stringify(props).replace(/</g, "\\u003c");
+    return `<!--__ISLAND_${strategy.toUpperCase()}__:${id}:${componentPath}:${propsJson}-->`;
+}
+/**
+ * Extract islands from server-rendered HTML.
+ * Called by client to discover islands and their hydration strategy.
+ */
+export function extractIslandsFromHtml(html) {
+    const islands = [];
+    // Match: <!--__ISLAND_LOAD__:id:componentPath:props-->
+    const regex = /<!--__ISLAND_(LOAD|IDLE|VISIBLE)__:([^:]+):([^:]+):(.+?)-->/g;
+    let match;
+    while ((match = regex.exec(html)) !== null) {
+        const strategy = match[1].toLowerCase();
+        const id = match[2];
+        const componentPath = match[3];
+        const propsStr = match[4].replace(/\\u003c/g, "<");
+        // Validate island ID and component path
+        if (!id || !componentPath) {
+            console.warn('Invalid island marker: missing id or componentPath');
+            continue;
+        }
+        try {
+            // Validate props is valid JSON
+            const props = JSON.parse(propsStr);
+            if (typeof props !== 'object' || props === null) {
+                console.warn(`Invalid props for island ${id}: expected object, got ${typeof props}`);
+                continue;
+            }
+            islands.push({
+                id,
+                component: componentPath,
+                strategy,
+                props,
+            });
+        }
+        catch (err) {
+            console.warn(`Failed to parse props for island ${id}:`, err instanceof Error ? err.message : String(err));
+        }
+    }
+    return islands;
+}

package/templates/static/lib/runtime/render.d.ts

@@ -0,0 +1,13 @@
+import type { FrameworkConfig } from "../core/config.js";
+import type { RouteEntry } from "../core/routes/scan.js";
+export declare function renderRouteToHtml(opts: {
+    config: FrameworkConfig;
+    route: RouteEntry;
+    req?: any;
+    res?: any;
+    url: URL;
+    params: Record<string, string>;
+    query: Record<string, string>;
+    headers: Record<string, string>;
+    cookies: Record<string, string>;
+}): Promise<string>;

package/templates/static/lib/runtime/render.js

@@ -0,0 +1,183 @@
+/*
+ * 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 { createRouteMiddlewareContext, executeRouteMiddleware, } from "../core/middleware-hooks.js";
+import { createIslandMarker } from "./islands.js";
+import { h } from "preact";
+import renderToString from "preact-render-to-string";
+import { pathToFileURL } from "node:url";
+import { join } from "node:path";
+import { mkdirSync, existsSync } from "node:fs";
+import esbuild from "esbuild";
+import { vueEsbuildPlugin, svelteEsbuildPlugin } from "../compilers/esbuild-plugins.js";
+function escapeHtml(s) {
+    return s
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+function getCachePath(filePath) {
+    const cacheDir = join(process.cwd(), "node_modules", ".jen", "cache");
+    if (!existsSync(cacheDir)) {
+        mkdirSync(cacheDir, { recursive: true });
+    }
+    // Flatten path to avoid directory structure issues
+    const flatName = filePath.replace(/[\\/:]/g, "_").replace(/^_+/, "");
+    return join(cacheDir, flatName + ".mjs");
+}
+export async function renderRouteToHtml(opts) {
+    const { config, route, url, params, query, headers, cookies } = opts;
+    // Transpile route file if needed
+    let moduleUrl = route.filePath;
+    const ext = route.filePath.slice(-4).toLowerCase();
+    const requiresTranspile = [".tsx", ".ts", ".vue", ".svelte"].some((e) => route.filePath.toLowerCase().endsWith(e));
+    if (requiresTranspile) {
+        const outfile = getCachePath(route.filePath);
+        await esbuild.build({
+            entryPoints: [route.filePath],
+            outfile,
+            format: "esm",
+            platform: "node", // Use node platform for SSR to support built-ins
+            target: "es2022",
+            bundle: true, // Bundle to resolve local imports (simple)
+            external: ["preact", "preact-render-to-string", "jenjs"], // Keep framework externals
+            write: true,
+            plugins: [vueEsbuildPlugin(), svelteEsbuildPlugin()],
+        });
+        moduleUrl = outfile;
+    }
+    // Cache busting for dynamic import
+    let mod;
+    try {
+        mod = await import(pathToFileURL(moduleUrl).href + "?t=" + Date.now());
+    }
+    catch (err) {
+        throw new Error(`Failed to import route module ${route.filePath}: ${err instanceof Error ? err.message : String(err)}`);
+    }
+    // Execute route middleware if present (only in server context)
+    let middlewareData = {};
+    if (opts.req && opts.res) {
+        const middlewareCtx = createRouteMiddlewareContext({
+            req: opts.req,
+            res: opts.res,
+            url,
+            params,
+            query,
+            headers,
+            cookies,
+        });
+        const middlewares = [];
+        if (mod.middleware) {
+            if (Array.isArray(mod.middleware)) {
+                middlewares.push(...mod.middleware);
+            }
+            else {
+                middlewares.push(mod.middleware);
+            }
+        }
+        try {
+            await executeRouteMiddleware(middlewares, middlewareCtx);
+            middlewareData = middlewareCtx.data || {};
+        }
+        catch (err) {
+            if (err.message === "__REDIRECT__" || err.message === "__JSON__") {
+                // Already sent response
+                throw err;
+            }
+            throw err;
+        }
+    }
+    const loaderCtx = {
+        url,
+        params,
+        query,
+        headers,
+        cookies,
+        data: middlewareData, // Pass middleware data to loader
+    };
+    let data = null;
+    if (typeof mod.loader === "function") {
+        data = await mod.loader(loaderCtx);
+    }
+    if (!mod.default) {
+        throw new Error(`Route module ${route.filePath} does not export a default component`);
+    }
+    const Page = mod.default;
+    // Check if hydration is disabled
+    const shouldHydrate = mod.hydrate !== false;
+    const app = h(Page, { data, params, query });
+    let bodyHtml = renderToString(app);
+    // If this module exports island components, add hydration markers
+    // Look for components marked with __island metadata
+    for (const [key, value] of Object.entries(mod)) {
+        if (typeof value === "function" &&
+            value.__island &&
+            value.__hydrationStrategy) {
+            const strategy = value.__hydrationStrategy;
+            const componentPath = route.filePath;
+            const islandId = `island-${Math.random().toString(36).slice(2, 9)}`;
+            const marker = createIslandMarker(islandId, componentPath, strategy, {});
+            // Mark location in HTML for client to find
+            // Note: In a real implementation, we'd track island renders more carefully
+        }
+    }
+    const headParts = [];
+    headParts.push(...config.inject.head);
+    if (mod.Head) {
+        try {
+            const headNode = h(mod.Head, { data, params, query });
+            const headHtml = renderToString(headNode);
+            headParts.push(headHtml);
+        }
+        catch (err) {
+            console.error(`Failed to render Head component for ${route.filePath}:`, err instanceof Error ? err.message : String(err));
+        }
+    }
+    headParts.push(`<link rel="stylesheet" href="/styles.css">`);
+    // Build HTML
+    let html = `<!doctype html>
+<html>
+<head>
+${headParts.join("\n")}
+</head>
+<body>
+<div id="app">${bodyHtml}</div>`;
+    // Only inject hydration script if enabled
+    if (shouldHydrate) {
+        // Serialize framework data with proper escaping
+        // Escape </script to prevent script injection
+        const frameworkDataStr = JSON.stringify({ data, params, query }, null, 2).replace(/<\/script/gi, "<\\/script");
+        const hydrateFile = `/__hydrate?file=${encodeURIComponent(route.filePath)}`;
+        html += `
+  <script id="__FRAMEWORK_DATA__" type="application/json">
+  ${frameworkDataStr}
+  </script>
+  <script type="module">
+  import { hydrateClient } from "/__runtime/hydrate.js";
+  import { initializeIslands } from "/__runtime/island-hydration-client.js";
+  hydrateClient(${JSON.stringify(hydrateFile)});
+  initializeIslands();
+  </script>`;
+    }
+    html += `
+${config.inject.bodyEnd.join("\n")}
+</body>
+</html>`;
+    return html;
+}

package/templates/static/lib/server/api-routes.d.ts

@@ -0,0 +1,44 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+/**
+ * API route handler context.
+ */
+export interface ApiRouteContext {
+    req: IncomingMessage;
+    res: ServerResponse;
+    url: URL;
+    method: string;
+    query: Record<string, string>;
+    body: any;
+    params: Record<string, string>;
+}
+/**
+ * API handler function.
+ * Return Response, string, or object (auto JSON).
+ */
+export type ApiHandler = (ctx: ApiRouteContext) => Promise<Response | string | Record<string, any> | null> | Response | string | Record<string, any> | null;
+/**
+ * API route module.
+ * Export GET, POST, PUT, DELETE, etc.
+ */
+export interface ApiRouteModule {
+    GET?: ApiHandler;
+    POST?: ApiHandler;
+    PUT?: ApiHandler;
+    DELETE?: ApiHandler;
+    PATCH?: ApiHandler;
+    HEAD?: ApiHandler;
+    OPTIONS?: ApiHandler;
+}
+/**
+ * Try to handle an API route.
+ * Returns true if handled (success or error), false if no route found.
+ *
+ * Routes:
+ *   /api/hello → site/api/hello.ts (GET, POST, etc.)
+ *   /api/users/123 → site/api/users/[id].ts
+ */
+export declare function tryHandleApiRoute(opts: {
+    req: IncomingMessage;
+    res: ServerResponse;
+    siteDir: string;
+}): Promise<boolean>;

package/templates/static/lib/server/api-routes.js

@@ -0,0 +1,196 @@
+/*
+ * 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 { existsSync } from "node:fs";
+import { join, basename } from "node:path";
+import esbuild from "esbuild";
+import { pathToFileURL } from "node:url";
+const apiCacheDir = join(process.cwd(), "node_modules", ".jen", "api-cache");
+/**
+ * Transpile API route file (TS → JS).
+ */
+async function transpileApiRoute(filePath) {
+    const outfile = join(apiCacheDir, basename(filePath).replace(/\.ts$/, `.${Date.now()}.mjs`));
+    await esbuild.build({
+        entryPoints: [filePath],
+        outfile,
+        format: "esm",
+        platform: "node",
+        target: "es2022",
+        bundle: true,
+        external: ["preact", "preact-render-to-string", "jenjs"],
+        write: true,
+    });
+    return outfile;
+}
+/**
+ * Try to handle an API route.
+ * Returns true if handled (success or error), false if no route found.
+ *
+ * Routes:
+ *   /api/hello → site/api/hello.ts (GET, POST, etc.)
+ *   /api/users/123 → site/api/users/[id].ts
+ */
+export async function tryHandleApiRoute(opts) {
+    const { req, res, siteDir } = opts;
+    const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const method = (req.method ?? "GET").toUpperCase();
+    // Must start with /api/
+    if (!url.pathname.startsWith("/api/"))
+        return false;
+    const pathParts = url.pathname
+        .slice("/api/".length)
+        .split("/")
+        .filter(Boolean);
+    if (pathParts.length === 0) {
+        res.statusCode = 404;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "API route not found" }));
+        return true;
+    }
+    // Try exact match first: /api/hello → api/hello.ts
+    let apiFile = null;
+    let routeParams = {};
+    const exactPath = join(process.cwd(), siteDir, "api", `${pathParts.join("/")}.ts`);
+    if (existsSync(exactPath)) {
+        apiFile = exactPath;
+    }
+    else {
+        // Try dynamic route: /api/users/123 → api/users/[id].ts
+        const basePath = join(process.cwd(), siteDir, "api");
+        for (let i = pathParts.length; i >= 1; i--) {
+            const staticSegments = pathParts.slice(0, i);
+            const dynamicSegments = pathParts.slice(i);
+            const tryDynamic = join(basePath, ...staticSegments.map((s) => `[${s}]`), `[${staticSegments[staticSegments.length - 1]}].ts`);
+            // Actually, try: api/[id].ts for /api/123
+            // and api/users/[id].ts for /api/users/123
+            // Simple approach: check api/[param].ts
+            if (staticSegments.length === 0 && dynamicSegments.length === 1) {
+                const paramFile = join(basePath, `[${dynamicSegments[0]}].ts`);
+                if (existsSync(paramFile)) {
+                    apiFile = paramFile;
+                    routeParams[dynamicSegments[0]] = dynamicSegments[0];
+                    break;
+                }
+            }
+        }
+    }
+    if (!apiFile) {
+        res.statusCode = 404;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "API route not found" }));
+        return true;
+    }
+    // Transpile if TS
+    let moduleUrl = apiFile;
+    if (apiFile.endsWith(".ts")) {
+        moduleUrl = await transpileApiRoute(apiFile);
+    }
+    // Load module
+    let mod;
+    try {
+        mod = await import(pathToFileURL(moduleUrl).href + `?t=${Date.now()}`);
+    }
+    catch (err) {
+        res.statusCode = 500;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({
+            error: "Failed to load API route",
+            details: err.message,
+        }));
+        return true;
+    }
+    // Find handler for method
+    const handler = mod[method];
+    if (!handler) {
+        res.statusCode = 405;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.setHeader("allow", Object.keys(mod).join(", "));
+        res.end(JSON.stringify({ error: `${method} not allowed` }));
+        return true;
+    }
+    // Read body
+    const body = await readRequestBody(req);
+    // Build context
+    const ctx = {
+        req,
+        res,
+        url,
+        method,
+        query: Object.fromEntries(url.searchParams.entries()),
+        body,
+        params: routeParams,
+    };
+    // Execute handler
+    try {
+        const result = await handler(ctx);
+        // Handler already sent response
+        if (res.writableEnded)
+            return true;
+        // Handle Response
+        if (result instanceof Response) {
+            res.statusCode = result.status;
+            result.headers.forEach((v, k) => res.setHeader(k, v));
+            const buf = Buffer.from(await result.arrayBuffer());
+            res.end(buf);
+            return true;
+        }
+        // Handle string
+        if (typeof result === "string") {
+            res.statusCode = 200;
+            res.setHeader("content-type", "text/plain; charset=utf-8");
+            res.end(result);
+            return true;
+        }
+        // Handle object (JSON)
+        res.statusCode = 200;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify(result ?? null));
+        return true;
+    }
+    catch (err) {
+        res.statusCode = 500;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "Internal server error", details: err.message }));
+        return true;
+    }
+}
+/**
+ * Read request body (shared with old API handler).
+ */
+async function readRequestBody(req) {
+    const method = (req.method ?? "GET").toUpperCase();
+    if (method === "GET" || method === "HEAD")
+        return null;
+    const chunks = [];
+    for await (const chunk of req) {
+        chunks.push(Buffer.from(chunk));
+    }
+    if (chunks.length === 0)
+        return null;
+    const raw = Buffer.concat(chunks).toString("utf8");
+    const ct = (req.headers["content-type"] ?? "").toString();
+    if (ct.includes("application/json")) {
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return { __raw: raw };
+        }
+    }
+    return { __raw: raw };
+}

package/templates/static/lib/server/api.d.ts

@@ -0,0 +1,6 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+export declare function tryHandleApiRoute(opts: {
+    req: IncomingMessage;
+    res: ServerResponse;
+    siteDir: string;
+}): Promise<boolean>;

package/templates/static/lib/server/api.js

@@ -0,0 +1,124 @@
+/*
+ * 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 { existsSync } from "node:fs";
+import { join, normalize } from "node:path";
+import { pathToFileURL } from "node:url";
+const MAX_BODY_SIZE = 1024 * 1024; // 1MB
+const VALID_ROUTE_PATTERN = /^[a-zA-Z0-9_\-/]+$/; // Only alphanumeric, underscore, hyphen, forward slash
+function isValidRouteName(name) {
+    if (!name || name.length > 255)
+        return false;
+    if (name.includes("..") || name.includes("\\") || name.startsWith("/"))
+        return false;
+    return VALID_ROUTE_PATTERN.test(name);
+}
+export async function tryHandleApiRoute(opts) {
+    const { req, res, siteDir } = opts;
+    const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    if (!url.pathname.startsWith("/api/"))
+        return false;
+    // /api/hello -> site/api/(hello).ts
+    let name = url.pathname.slice("/api/".length) || "home";
+    // Security: Validate route name to prevent path traversal
+    if (!isValidRouteName(name)) {
+        res.statusCode = 400;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "Invalid API route format" }));
+        return true;
+    }
+    const file = join(process.cwd(), siteDir, "api", `(${name}).ts`);
+    // Ensure the resolved path is within the api directory (prevent directory traversal)
+    const apiDir = normalize(join(process.cwd(), siteDir, "api"));
+    if (!normalize(file).startsWith(apiDir)) {
+        res.statusCode = 403;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "Forbidden" }));
+        return true;
+    }
+    if (!existsSync(file)) {
+        res.statusCode = 404;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "Not found" }));
+        return true;
+    }
+    // Use pathToFileURL to handle Windows paths correctly
+    const mod = await import(pathToFileURL(file).href + `?t=${Date.now()}`);
+    const handler = mod?.default;
+    if (typeof handler !== "function") {
+        res.statusCode = 500;
+        res.setHeader("content-type", "application/json; charset=utf-8");
+        res.end(JSON.stringify({ error: "API route missing default export function" }));
+        return true;
+    }
+    const body = await readBody(req);
+    const ctx = {
+        req,
+        res,
+        url,
+        method: req.method ?? "GET",
+        query: Object.fromEntries(url.searchParams.entries()),
+        body,
+    };
+    const out = await handler(ctx);
+    if (res.writableEnded)
+        return true;
+    if (out instanceof Response) {
+        res.statusCode = out.status;
+        out.headers.forEach((v, k) => res.setHeader(k, v));
+        const buf = Buffer.from(await out.arrayBuffer());
+        res.end(buf);
+        return true;
+    }
+    if (typeof out === "string") {
+        res.statusCode = 200;
+        res.setHeader("content-type", "text/plain; charset=utf-8");
+        res.end(out);
+        return true;
+    }
+    res.statusCode = 200;
+    res.setHeader("content-type", "application/json; charset=utf-8");
+    res.end(JSON.stringify(out ?? null));
+    return true;
+}
+async function readBody(req) {
+    const method = (req.method ?? "GET").toUpperCase();
+    if (method === "GET" || method === "HEAD")
+        return null;
+    const chunks = [];
+    let totalSize = 0;
+    for await (const chunk of req) {
+        totalSize += chunk.length;
+        if (totalSize > MAX_BODY_SIZE) {
+            throw new Error(`Request body exceeds maximum size of ${MAX_BODY_SIZE} bytes`);
+        }
+        chunks.push(Buffer.from(chunk));
+    }
+    if (chunks.length === 0)
+        return null;
+    const raw = Buffer.concat(chunks).toString("utf8");
+    const ct = req.headers["content-type"] ?? "";
+    if (typeof ct === "string" && ct.includes("application/json")) {
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return { __raw: raw };
+        }
+    }
+    return { __raw: raw };
+}

package/templates/static/lib/server/app.d.ts

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import type { FrameworkConfig } from "../core/config.js";
+type AppMode = "dev" | "prod";
+export declare function createApp(opts: {
+    config: FrameworkConfig;
+    mode: AppMode;
+}): Promise<{
+    handle(req: IncomingMessage, res: ServerResponse): Promise<void>;
+}>;
+export {};