create-jen-app 1.2.3 → 1.2.4

package/templates/static/lib/client/PWA.js

@@ -0,0 +1,46 @@
+"use client";
+import {
+  jsx as _jsx,
+  Fragment as _Fragment,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
+import { useEffect } from "preact/hooks";
+/**
+ * PWA (Progressive Web App) setup component
+ *
+ * @example
+ * ```tsx
+ * // With defaults
+ * <PWA />
+ *
+ * // With custom paths
+ * <PWA manifestPath="/app/manifest.json" swPath="/app/sw.js" />
+ * ```
+ *
+ * @remarks
+ * Automatically registers the service worker on component mount.
+ * Service worker errors are logged to console but don't break the app.
+ */
+export function PWA({ manifestPath = "/manifest.json", swPath = "/sw.js" }) {
+  useEffect(() => {
+    // Register service worker in browser
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .register(swPath)
+        .catch((err) =>
+          console.error("Service worker registration failed:", err),
+        );
+    }
+  }, [swPath]);
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx("link", { rel: "manifest", href: manifestPath }),
+      _jsx("meta", { name: "theme-color", content: "#000000" }),
+      _jsx("meta", { name: "apple-mobile-web-app-capable", content: "yes" }),
+      _jsx("meta", {
+        name: "apple-mobile-web-app-status-bar-style",
+        content: "black-translucent",
+      }),
+    ],
+  });
+}

package/templates/static/lib/client/Seo.js

@@ -0,0 +1,97 @@
+"use client";
+import {
+  jsx as _jsx,
+  Fragment as _Fragment,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
+import { useEffect } from "preact/hooks";
+/**
+ * SEO component that injects meta tags into the document head
+ *
+ * @example
+ * ```tsx
+ * <Seo
+ *   title="My Page"
+ *   description="Page description"
+ *   canonical="https://example.com/page"
+ *   ogImage="https://example.com/og-image.png"
+ * />
+ * ```
+ *
+ * @remarks
+ * Works both server-side and client-side. On server, ensure this component
+ * is rendered during SSR to include meta tags in the HTML head.
+ * On client, uses DOM manipulation to update existing meta tags.
+ */
+export function Seo({
+  title,
+  description,
+  keywords,
+  canonical,
+  ogTitle,
+  ogDescription,
+  ogImage,
+  twitterCard,
+}) {
+  useEffect(() => {
+    // Update title tag
+    document.title = title;
+    // Helper to set or create meta tags
+    const setMeta = (name, content, property = false) => {
+      const attr = property ? "property" : "name";
+      let meta = document.querySelector(`meta[${attr}="${name}"]`);
+      if (!meta) {
+        meta = document.createElement("meta");
+        meta.setAttribute(attr, name);
+        document.head.appendChild(meta);
+      }
+      meta.content = content;
+    };
+    // Set meta tags
+    if (description) setMeta("description", description);
+    if (keywords) setMeta("keywords", keywords);
+    if (canonical) {
+      let link = document.querySelector('link[rel="canonical"]');
+      if (!link) {
+        link = document.createElement("link");
+        link.rel = "canonical";
+        document.head.appendChild(link);
+      }
+      link.href = canonical;
+    }
+    // Open Graph tags
+    if (ogTitle) setMeta("og:title", ogTitle, true);
+    if (ogDescription) setMeta("og:description", ogDescription, true);
+    if (ogImage) setMeta("og:image", ogImage, true);
+    setMeta("og:type", "website", true);
+    // Twitter tags
+    if (twitterCard) setMeta("twitter:card", twitterCard);
+  }, [
+    title,
+    description,
+    keywords,
+    canonical,
+    ogTitle,
+    ogDescription,
+    ogImage,
+    twitterCard,
+  ]);
+  // Server-side rendering: return meta tags
+  // Note: In Jen.js SSR context, render these elements to be included in head
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx("title", { children: title }),
+      description &&
+        _jsx("meta", { name: "description", content: description }),
+      keywords && _jsx("meta", { name: "keywords", content: keywords }),
+      canonical && _jsx("link", { rel: "canonical", href: canonical }),
+      ogTitle && _jsx("meta", { property: "og:title", content: ogTitle }),
+      ogDescription &&
+        _jsx("meta", { property: "og:description", content: ogDescription }),
+      ogImage && _jsx("meta", { property: "og:image", content: ogImage }),
+      _jsx("meta", { property: "og:type", content: "website" }),
+      twitterCard &&
+        _jsx("meta", { name: "twitter:card", content: twitterCard }),
+    ],
+  });
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Client-side components for Jen.js
+ */
+export { Link } from "./Link.js";
+export { Image } from "./Image.js";
+export { Seo } from "./Seo.js";
+export { PWA } from "./PWA.js";
+export { useRouter } from "./useRouter.js";
+export { useNavigation } from "./useNavigation.js";

package/templates/static/lib/client/useNavigation.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "preact/hooks";
+/**
+ * Hook to track navigation state
+ */
+export function useNavigation() {
+  const [isNavigating, setIsNavigating] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleNavigateStart = () => {
+      setIsNavigating(true);
+    };
+    const handleNavigateEnd = () => {
+      setIsNavigating(false);
+    };
+    window.addEventListener("jen:navigate:start", handleNavigateStart);
+    window.addEventListener("jen:navigate:end", handleNavigateEnd);
+    return () => {
+      window.removeEventListener("jen:navigate:start", handleNavigateStart);
+      window.removeEventListener("jen:navigate:end", handleNavigateEnd);
+    };
+  }, []);
+  return { isNavigating };
+}

package/templates/static/lib/client/useRouter.js

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "preact/hooks";
+/**
+ * Hook to access current route and navigate
+ */
+export function useRouter() {
+  const [state, setState] = useState(() => ({
+    pathname: typeof window !== "undefined" ? window.location.pathname : "/",
+    search: typeof window !== "undefined" ? window.location.search : "",
+    hash: typeof window !== "undefined" ? window.location.hash : "",
+  }));
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handlePopState = () => {
+      setState({
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+      });
+    };
+    const handleNavigate = (event) => {
+      const { href } = event.detail;
+      setState({
+        pathname: new URL(href, window.location.href).pathname,
+        search: new URL(href, window.location.href).search,
+        hash: new URL(href, window.location.href).hash,
+      });
+    };
+    window.addEventListener("popstate", handlePopState);
+    window.addEventListener("jen:navigate", handleNavigate);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+      window.removeEventListener("jen:navigate", handleNavigate);
+    };
+  }, []);
+  const push = useCallback((href) => {
+    window.dispatchEvent(
+      new CustomEvent("jen:navigate", {
+        detail: { href, replace: false },
+      }),
+    );
+    window.history.pushState({ href }, "", href);
+    setState({
+      pathname: new URL(href, window.location.href).pathname,
+      search: new URL(href, window.location.href).search,
+      hash: new URL(href, window.location.href).hash,
+    });
+  }, []);
+  const replace = useCallback((href) => {
+    window.dispatchEvent(
+      new CustomEvent("jen:navigate", {
+        detail: { href, replace: true },
+      }),
+    );
+    window.history.replaceState({ href }, "", href);
+    setState({
+      pathname: new URL(href, window.location.href).pathname,
+      search: new URL(href, window.location.href).search,
+      hash: new URL(href, window.location.href).hash,
+    });
+  }, []);
+  return { ...state, push, replace };
+}

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

@@ -0,0 +1,17 @@
+import { h } from "preact";
+/**
+ * Link component for client-side routing
+ * Compiles to <a data-jen-link> at build time
+ * Router auto-intercepts clicks
+ */
+export function Link({ href, children, ...props }) {
+  return h(
+    "a",
+    {
+      href,
+      "data-jen-link": true,
+      ...props,
+    },
+    children,
+  );
+}

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,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/>.
- */
 import { readFileSync } from "node:fs";
 import { createVueCompiler } from "./vue.js";
 import { createSvelteCompiler } from "./svelte.js";

package/templates/static/lib/compilers/svelte.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/>.
- */
 import { compile as svelteCompile } from "svelte/compiler";
 import { log } from "../shared/log.js";
 export class SvelteCompiler {

package/templates/static/lib/compilers/vue.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/>.
- */
 import {
   parse,
   compileScript,

package/templates/static/lib/core/config.js

@@ -1,18 +1 @@
-/*
- * 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 {};