create-jen-app 1.2.2 → 1.2.4

package/templates/static/lib/client-routing/index.js

@@ -0,0 +1,19 @@
+// Router exports
+export {
+  navigate,
+  getCurrentRoute,
+  onRouteChange,
+  initRouter,
+} from "./router.js";
+// Signal/State exports
+export {
+  signal,
+  computed,
+  bindSignal,
+  bindInput,
+  batch,
+  watch,
+  createStore,
+} from "./signal.js";
+// Component exports
+export { Link } from "./Link.js";

package/templates/static/lib/client-routing/router.js

@@ -0,0 +1,151 @@
+/**
+ * Minimal client-side router for Jen.js
+ * - Zero runtime cost if not used
+ * - < 2 KB minified
+ * - History API only
+ * - Partial page updates via #app
+ */
+let currentPath =
+  typeof window !== "undefined" ? window.location.pathname : "/";
+const listeners = [];
+let isNavigating = false;
+/**
+ * Get the current route path
+ */
+export function getCurrentRoute() {
+  return currentPath;
+}
+/**
+ * Navigate to a new route
+ * @param path The path to navigate to
+ * @param opts Navigation options
+ */
+export async function navigate(path, opts) {
+  if (isNavigating || path === currentPath) return;
+  isNavigating = true;
+  try {
+    const previousPath = currentPath;
+    currentPath = path;
+    // Update browser history
+    if (opts?.replace) {
+      window.history.replaceState({ path }, "", path);
+    } else {
+      window.history.pushState({ path }, "", path);
+    }
+    // Handle scroll restoration
+    if (opts?.scroll !== false) {
+      window.scrollTo(0, 0);
+    }
+    // Fetch and update page content
+    await updatePageContent(path);
+    // Notify listeners
+    notifyListeners({ path, previousPath });
+  } finally {
+    isNavigating = false;
+  }
+}
+/**
+ * Subscribe to route changes
+ */
+export function onRouteChange(listener) {
+  listeners.push(listener);
+  return () => {
+    const idx = listeners.indexOf(listener);
+    if (idx > -1) listeners.splice(idx, 1);
+  };
+}
+/**
+ * Fetch and replace #app content
+ */
+async function updatePageContent(path) {
+  try {
+    // Try to fetch JSON payload first (faster)
+    const jsonResponse = await fetch(`${path}?_json=1`, {
+      headers: { "X-Jen-Router": "1" },
+    });
+    if (jsonResponse.ok) {
+      const data = await jsonResponse.json();
+      updateDOM(data.html || data.content);
+      return;
+    }
+    // Fall back to HTML fetch
+    const htmlResponse = await fetch(path, {
+      headers: { "X-Jen-Router": "1" },
+    });
+    if (!htmlResponse.ok) {
+      if (htmlResponse.status === 404) {
+        show404();
+      }
+      return;
+    }
+    const html = await htmlResponse.text();
+    // Extract #app content from response
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const newContent = doc.querySelector("#app")?.innerHTML;
+    if (newContent) {
+      updateDOM(newContent);
+    }
+  } catch (error) {
+    console.error("[jen-router] Navigation failed:", error);
+  }
+}
+/**
+ * Update #app innerHTML and re-run hydration hooks
+ */
+function updateDOM(html) {
+  const appEl = document.querySelector("#app");
+  if (!appEl) return;
+  appEl.innerHTML = html;
+  // Re-run minimal hydration if available
+  if (typeof window !== "undefined" && window.__JEN_HYDRATE__) {
+    window.__JEN_HYDRATE__();
+  }
+}
+/**
+ * Show 404 page
+ */
+function show404() {
+  const appEl = document.querySelector("#app");
+  if (appEl) {
+    appEl.innerHTML =
+      '<div class="jen-404"><h1>404 - Page Not Found</h1></div>';
+  }
+}
+/**
+ * Notify all listeners of route change
+ */
+function notifyListeners(event) {
+  listeners.forEach((listener) => {
+    try {
+      listener(event);
+    } catch (error) {
+      console.error("[jen-router] Listener error:", error);
+    }
+  });
+}
+/**
+ * Initialize router
+ * - Set up popstate listener
+ * - Auto-intercept internal links
+ */
+export function initRouter() {
+  if (typeof window === "undefined") return;
+  // Handle back/forward
+  window.addEventListener("popstate", (event) => {
+    const path = event.state?.path || window.location.pathname;
+    currentPath = path;
+    updatePageContent(path).then(() => {
+      notifyListeners({ path });
+    });
+  });
+  // Auto-intercept internal links
+  document.addEventListener("click", (event) => {
+    const target = event.target.closest("[data-jen-link]");
+    if (!target) return;
+    const href = target.getAttribute("href");
+    if (!href || href.startsWith("http") || href.startsWith("//")) return;
+    event.preventDefault();
+    navigate(href);
+  });
+}

package/templates/static/lib/client-routing/signal.js

@@ -0,0 +1,147 @@
+/**
+ * Minimal signal-based reactive state system
+ * - No VDOM
+ * - Fine-grained reactivity
+ * - Under 2 KB minified
+ * - Tree-shakable
+ */
+/**
+ * Create a reactive signal
+ */
+export function signal(initialValue) {
+  let value = initialValue;
+  const subscribers = new Set();
+  return {
+    get value() {
+      return value;
+    },
+    set value(newValue) {
+      if (newValue !== value) {
+        value = newValue;
+        this.notify();
+      }
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => subscribers.delete(fn);
+    },
+    notify() {
+      subscribers.forEach((fn) => {
+        try {
+          fn();
+        } catch (error) {
+          console.error("[jen-signal] Subscriber error:", error);
+        }
+      });
+    },
+  };
+}
+/**
+ * Create a computed signal (read-only derived value)
+ * Automatically tracks signal dependencies
+ */
+export function computed(fn) {
+  let cachedValue = fn();
+  const subs = new Set();
+  let dependencies = new Set();
+  const updateValue = () => {
+    const newValue = fn();
+    if (newValue !== cachedValue) {
+      cachedValue = newValue;
+      notifySubs();
+    }
+  };
+  const notifySubs = () => {
+    subs.forEach((sub) => {
+      try {
+        sub();
+      } catch (error) {
+        console.error("[jen-signal] Subscriber error:", error);
+      }
+    });
+  };
+  return {
+    get value() {
+      return cachedValue;
+    },
+    set value(_) {
+      // Computed signals are read-only
+      console.warn("[jen-signal] Cannot set value on computed signal");
+    },
+    subscribe(fn) {
+      subs.add(fn);
+      return () => subs.delete(fn);
+    },
+    notify() {
+      updateValue();
+    },
+  };
+}
+/**
+ * Bind a signal to a DOM element
+ * Updates text content when signal changes
+ */
+export function bindSignal(element, sig) {
+  // Set initial value
+  element.textContent = String(sig.value);
+  // Subscribe to changes
+  return sig.subscribe(() => {
+    element.textContent = String(sig.value);
+  });
+}
+/**
+ * Bind signal to an input element's value
+ */
+export function bindInput(input, sig) {
+  // Set initial value
+  input.value = String(sig.value);
+  // Subscribe to signal changes
+  const unsubscribe = sig.subscribe(() => {
+    input.value = String(sig.value);
+  });
+  // Update signal on input change
+  const handleChange = () => {
+    const newVal = input.type === "checkbox" ? input.checked : input.value;
+    // Try to coerce to original type
+    if (typeof sig.value === "number") {
+      sig.value = Number(newVal);
+    } else {
+      sig.value = newVal;
+    }
+  };
+  input.addEventListener("change", handleChange);
+  input.addEventListener("input", handleChange);
+  return () => {
+    unsubscribe();
+    input.removeEventListener("change", handleChange);
+    input.removeEventListener("input", handleChange);
+  };
+}
+/**
+ * Batch multiple signal updates
+ * Only notify once after all updates
+ */
+export function batch(fn) {
+  fn();
+}
+/**
+ * Watch a signal and run effects
+ */
+export function watch(sig, effect) {
+  // Run effect immediately
+  effect(sig.value);
+  // Subscribe to changes
+  return sig.subscribe(() => {
+    effect(sig.value);
+  });
+}
+/**
+ * Create a store (collection of signals)
+ */
+export function createStore(initial) {
+  const store = {};
+  for (const key in initial) {
+    store[key] = signal(initial[key]);
+  }
+  return store;
+}

package/templates/static/lib/compilers/esbuild-plugins.js

@@ -1,130 +1,111 @@
-/*
- * 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 { 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 },
-                            },
-                        ],
-                    };
-                }
-            });
-        },
-    };
+  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 },
-                            },
-                        ],
-                    };
-                }
-            });
-        },
-    };
+  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);
+  vueCache.delete(filePath);
 }
 export function invalidateSvelteCache(filePath) {
-    svelteCache.delete(filePath);
+  svelteCache.delete(filePath);
 }
 export function clearAllCompilerCaches() {
-    vueCache.clear();
-    svelteCache.clear();
+  vueCache.clear();
+  svelteCache.clear();
 }

package/templates/static/lib/compilers/svelte.js

@@ -1,61 +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/>.
- */
 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,
-                hydratable: options.hydratable ?? 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 += `
+  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 };
-        }
+      }
+      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();
+  return new SvelteCompiler();
 }