create-jen-app 1.0.0 → 1.2.1

package/templates/static/lib/native/style-compiler.js

@@ -0,0 +1,36 @@
+/*
+ * 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/>.
+ */
+export async function compileScss(opts) {
+    // Placeholder: returns CSS placeholder
+    console.log(`[STYLE COMPILER] Compiling SCSS: ${opts.input}`);
+    const css = `
+    /* SCSS compiled from: ${opts.input} */
+    /* Note: Full SCSS compilation requires dart-sass or native Rust implementation */
+    body { margin: 0; padding: 0; }
+  `;
+    return css;
+}
+export async function compileCSS(input, minify = false) {
+    console.log(`[STYLE COMPILER] Processing CSS: ${input}`);
+    // Placeholder: returns input CSS
+    return input;
+}
+export async function watchStyles(input, output, onChange) {
+    // Placeholder watcher
+    console.log(`[STYLE COMPILER] Watching: ${input}`);
+}

package/templates/static/lib/plugin/loader.d.ts

@@ -0,0 +1,8 @@
+export interface Plugin {
+    name: string;
+    version?: string;
+    onBuild?: () => void | Promise<void>;
+    onServe?: () => void | Promise<void>;
+    onDeploy?: () => void | Promise<void>;
+}
+export declare function runPlugins(event?: "build" | "serve" | "deploy"): Promise<void>;

package/templates/static/lib/plugin/loader.js

@@ -0,0 +1,59 @@
+/*
+ * 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/>.
+ */
+// Plugin loader
+// Migrated from Python src/python/plugins.py
+import { readdirSync } from "node:fs";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { log } from "../shared/log.js";
+const PLUGIN_DIR = "src/plugin/plugins";
+export async function runPlugins(event = "build") {
+    log.info(`Running plugins (${event})...`);
+    try {
+        const files = readdirSync(PLUGIN_DIR);
+        for (const file of files) {
+            if (!file.endsWith(".ts") && !file.endsWith(".js"))
+                continue;
+            const pluginPath = join(process.cwd(), PLUGIN_DIR, file);
+            const pluginUrl = pathToFileURL(pluginPath).href;
+            try {
+                const module = (await import(pluginUrl));
+                const plugin = module.default;
+                if (!plugin)
+                    continue;
+                log.info(`  Loading plugin: ${plugin.name}`);
+                if (event === "build" && plugin.onBuild) {
+                    await plugin.onBuild();
+                }
+                else if (event === "serve" && plugin.onServe) {
+                    await plugin.onServe();
+                }
+                else if (event === "deploy" && plugin.onDeploy) {
+                    await plugin.onDeploy();
+                }
+            }
+            catch (err) {
+                log.error(`  Plugin error: ${file} - ${String(err)}`);
+            }
+        }
+        log.info("Plugins executed.");
+    }
+    catch (err) {
+        log.warn(`Plugin directory not found: ${PLUGIN_DIR}`);
+    }
+}

package/templates/static/lib/runtime/client-runtime.d.ts

@@ -0,0 +1 @@
+export declare function getFrameworkData(): any;

package/templates/static/lib/runtime/client-runtime.js

@@ -0,0 +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/>.
+ */
+export function getFrameworkData() {
+    const el = document.getElementById("__FRAMEWORK_DATA__");
+    if (!el)
+        return null;
+    try {
+        return JSON.parse(el.textContent || "null");
+    }
+    catch {
+        return null;
+    }
+}

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

@@ -0,0 +1 @@
+export declare const HMR_CLIENT_SCRIPT = "\n(function() {\n  console.log(\"[Jen.js] Connecting to HMR...\");\n  const evt = new EventSource(\"/__hmr\");\n\n  evt.onopen = () => console.log(\"[Jen.js] HMR Connected\");\n\n  evt.addEventListener(\"reload\", () => {\n    console.log(\"[Jen.js] Reloading...\");\n    window.location.reload();\n  });\n\n  evt.addEventListener(\"style-update\", (e) => {\n    const file = JSON.parse(e.data).file; // e.g., \"styles.css\"\n    console.log(\"[Jen.js] Style update:\", file);\n    \n    // Find matching link tags\n    const links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n    for (const link of links) {\n      const url = new URL(link.href);\n      if (url.pathname.endsWith(file)) {\n        // Force reload by updating query param\n        url.searchParams.set(\"t\", Date.now());\n        link.href = url.toString();\n        console.log(\"[Jen.js] Updated stylesheet:\", file);\n      }\n    }\n  });\n\n  evt.onerror = () => {\n    // console.log(\"[Jen.js] HMR disconnected, retrying...\");\n    // EventSource automatically retries\n  };\n})();\n";

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

@@ -0,0 +1,54 @@
+/*
+ * 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/>.
+ */
+// Client-side Hot Module Replacement (HMR) / Live Reload
+// Injected into the browser during development
+export const HMR_CLIENT_SCRIPT = `
+(function() {
+  console.log("[Jen.js] Connecting to HMR...");
+  const evt = new EventSource("/__hmr");
+
+  evt.onopen = () => console.log("[Jen.js] HMR Connected");
+
+  evt.addEventListener("reload", () => {
+    console.log("[Jen.js] Reloading...");
+    window.location.reload();
+  });
+
+  evt.addEventListener("style-update", (e) => {
+    const file = JSON.parse(e.data).file; // e.g., "styles.css"
+    console.log("[Jen.js] Style update:", file);
+    
+    // Find matching link tags
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+      const url = new URL(link.href);
+      if (url.pathname.endsWith(file)) {
+        // Force reload by updating query param
+        url.searchParams.set("t", Date.now());
+        link.href = url.toString();
+        console.log("[Jen.js] Updated stylesheet:", file);
+      }
+    }
+  });
+
+  evt.onerror = () => {
+    // console.log("[Jen.js] HMR disconnected, retrying...");
+    // EventSource automatically retries
+  };
+})();
+`;

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

@@ -0,0 +1 @@
+export declare function hydrateClient(entryPath: string): Promise<void>;

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

@@ -0,0 +1,45 @@
+/*
+ * 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 { hydrate } from "preact";
+import { h } from "preact";
+import { getFrameworkData } from "./client-runtime.js";
+export async function hydrateClient(entryPath) {
+    try {
+        const data = getFrameworkData();
+        const mod = await import(entryPath);
+        if (!mod.default) {
+            console.error(`Failed to hydrate: route module does not export default component`);
+            return;
+        }
+        const Page = mod.default;
+        const app = h(Page, {
+            data: data?.data ?? null,
+            params: data?.params ?? {},
+            query: data?.query ?? {},
+        });
+        const root = document.getElementById("app");
+        if (!root) {
+            console.error("Failed to hydrate: #app element not found in DOM");
+            return;
+        }
+        hydrate(app, root);
+    }
+    catch (err) {
+        console.error("Hydration failed:", err instanceof Error ? err.message : String(err));
+    }
+}

package/templates/static/lib/runtime/island-hydration-client.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Initialize island hydration
+ * Called by framework at page load
+ */
+export declare function initializeIslands(): void;

package/templates/static/lib/runtime/island-hydration-client.js

@@ -0,0 +1,132 @@
+/*
+ * 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 { hydrate } from "preact";
+import { h } from "preact";
+/**
+ * Extract islands from HTML markers
+ * Format: <!--__ISLAND_LOAD__:id:componentPath:props-->
+ */
+function extractIslands() {
+    const islands = [];
+    const html = document.documentElement.outerHTML;
+    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 component = match[3];
+        const propsStr = match[4].replace(/\\u003c/g, "<");
+        try {
+            islands.push({
+                id,
+                component,
+                strategy,
+                props: JSON.parse(propsStr),
+            });
+        }
+        catch {
+            console.warn(`Failed to parse island ${id}`);
+        }
+    }
+    return islands;
+}
+/**
+ * Hydrate a single island
+ */
+async function hydrateIsland(island) {
+    const target = document.getElementById(island.id);
+    if (!target) {
+        console.warn(`Island target #${island.id} not found`);
+        return;
+    }
+    try {
+        // Import the hydration module for this route
+        const hydrationUrl = `/__hydrate?file=${encodeURIComponent(island.component)}`;
+        const mod = await import(hydrationUrl);
+        const Component = mod.default;
+        if (!Component) {
+            console.warn(`Component not exported from ${island.component}`);
+            return;
+        }
+        const app = h(Component, island.props);
+        hydrate(app, target);
+    }
+    catch (err) {
+        console.error(`Failed to hydrate island ${island.id}:`, err);
+    }
+}
+/**
+ * Hydrate islands based on strategy
+ */
+function hydrateWithStrategy(islands) {
+    for (const island of islands) {
+        switch (island.strategy) {
+            case "load":
+                // Hydrate immediately
+                hydrateIsland(island);
+                break;
+            case "idle":
+                // Hydrate when browser is idle
+                if ("requestIdleCallback" in window) {
+                    requestIdleCallback(() => hydrateIsland(island));
+                }
+                else {
+                    // Fallback: hydrate after a delay
+                    setTimeout(() => hydrateIsland(island), 2000);
+                }
+                break;
+            case "visible":
+                // Hydrate when element is visible
+                if ("IntersectionObserver" in window) {
+                    const target = document.getElementById(island.id);
+                    if (target) {
+                        const observer = new IntersectionObserver((entries) => {
+                            if (entries[0].isIntersecting) {
+                                hydrateIsland(island);
+                                observer.disconnect();
+                            }
+                        }, { threshold: 0.1 });
+                        observer.observe(target);
+                    }
+                }
+                else {
+                    // Fallback: hydrate after delay
+                    setTimeout(() => hydrateIsland(island), 3000);
+                }
+                break;
+        }
+    }
+}
+/**
+ * Initialize island hydration
+ * Called by framework at page load
+ */
+export function initializeIslands() {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+            const islands = extractIslands();
+            hydrateWithStrategy(islands);
+        });
+    }
+    else {
+        const islands = extractIslands();
+        hydrateWithStrategy(islands);
+    }
+}
+// Auto-initialize on import
+initializeIslands();

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

@@ -0,0 +1,46 @@
+export type HydrationStrategy = "load" | "idle" | "visible";
+export interface IslandProps {
+    "client:load"?: boolean;
+    "client:idle"?: boolean;
+    "client:visible"?: boolean;
+}
+/**
+ * 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 declare function Island<P extends Record<string, any>>(Component: any, strategy: HydrationStrategy): any;
+/**
+ * Detect islands in a component tree (called by server renderer).
+ * Returns array of island metadata to inject into HTML.
+ */
+export interface DetectedIsland {
+    id: string;
+    component: string;
+    strategy: HydrationStrategy;
+    props: any;
+}
+/**
+ * Generate island hydration markers for server-rendered HTML.
+ * Call this after SSR to inject island metadata.
+ */
+export declare function createIslandMarker(id: string, componentPath: string, strategy: HydrationStrategy, props: any): string;
+/**
+ * Extract islands from server-rendered HTML.
+ * Called by client to discover islands and their hydration strategy.
+ */
+export declare function extractIslandsFromHtml(html: string): DetectedIsland[];

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>;