create-jen-app 1.2.2 → 1.2.4

package/templates/static/lib/cli/templates/ssg/jen.config.js

@@ -1,49 +1,32 @@
-/*
- * 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/>.
- */
 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",
-    },
+  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/static/lib/cli/templates/ssg/site/index.js

@@ -1,4 +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." })] }));
+  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/static/lib/cli/templates/ssr/jen.config.js

@@ -1,49 +1,32 @@
-/*
- * 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/>.
- */
 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",
-    },
+  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/static/lib/cli/templates/ssr/site/index.js

@@ -1,4 +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." })] }));
+  return _jsxs("div", {
+    children: [
+      _jsx("h1", { children: "Welcome to My SSR App" }),
+      _jsx("p", { children: "This page is rendered on the server." }),
+    ],
+  });
 }

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "preact/jsx-runtime";
+/**
+ * Image component that renders a responsive picture element with lazy loading support
+ *
+ * @example
+ * ```tsx
+ * <Image src="/image.png" alt="Description" width={800} height={600} />
+ * <Image src="/image.png" alt="Description" loading="eager" className="hero-image" />
+ * ```
+ *
+ * @remarks
+ * Future enhancement: Add WebP and AVIF format support via source elements
+ * Example with future format support:
+ * ```tsx
+ * <picture>
+ *   <source srcSet="image.avif" type="image/avif" />
+ *   <source srcSet="image.webp" type="image/webp" />
+ *   <img src="image.png" ... />
+ * </picture>
+ * ```
+ */
+export function Image({
+  src,
+  alt,
+  width,
+  height,
+  loading = "lazy",
+  className,
+}) {
+  return _jsx("picture", {
+    children: _jsx("img", {
+      src: src,
+      alt: alt,
+      width: width,
+      height: height,
+      loading: loading,
+      className: className,
+      decoding: "async",
+    }),
+  });
+}

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

@@ -0,0 +1,190 @@
+"use client";
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from "preact/hooks";
+const prefetched = new Set();
+/**
+ * Checks if a click event should trigger default browser behavior
+ */
+function isModifiedEvent(event) {
+  const target = event.currentTarget?.getAttribute("target");
+  return (
+    (target && target !== "_self") ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey ||
+    event.button === 1 // middle click
+  );
+}
+/**
+ * Checks if URL is internal
+ */
+function isLocalUrl(href) {
+  if (!href.startsWith("/")) {
+    return false;
+  }
+  try {
+    // Ensure it's a valid local URL
+    const url = new URL(
+      href,
+      typeof window !== "undefined" ? window.location.href : "http://localhost",
+    );
+    return (
+      url.hostname ===
+      (typeof window !== "undefined" ? window.location.hostname : "localhost")
+    );
+  } catch {
+    return true; // Assume local if parsing fails
+  }
+}
+/**
+ * Prefetch a page
+ */
+function prefetchPage(href) {
+  if (typeof window === "undefined" || !isLocalUrl(href)) {
+    return;
+  }
+  if (prefetched.has(href)) {
+    return;
+  }
+  prefetched.add(href);
+  // Use Intersection Observer + fetch to prefetch
+  const link = document.createElement("link");
+  link.rel = "prefetch";
+  link.href = href;
+  document.head.appendChild(link);
+}
+/**
+ * Navigate to URL using client-side routing
+ */
+function navigateTo(href, replace = false) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (!isLocalUrl(href)) {
+    if (replace) {
+      window.location.replace(href);
+    } else {
+      window.location.href = href;
+    }
+    return;
+  }
+  // Dispatch custom navigation event
+  window.dispatchEvent(
+    new CustomEvent("jen:navigate", {
+      detail: { href, replace },
+    }),
+  );
+  // Fallback: use history API
+  if (replace) {
+    window.history.replaceState({ href }, "", href);
+  } else {
+    window.history.pushState({ href }, "", href);
+  }
+  // Scroll to top if enabled
+  window.scrollTo(0, 0);
+}
+/**
+ * Handles link click events
+ */
+function handleLinkClick(event, href, replace = false, onClick) {
+  const target = event.currentTarget;
+  // Call custom handler if provided
+  if (onClick) {
+    onClick(event);
+  }
+  // Allow modified clicks (meta, ctrl, shift, alt) and downloads
+  if (isModifiedEvent(event) || target?.hasAttribute("download")) {
+    return;
+  }
+  // Prevent default for local URLs
+  if (isLocalUrl(href)) {
+    event.preventDefault();
+    navigateTo(href, replace);
+  }
+}
+/**
+ * Link component for client-side navigation
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about">About</Link>
+ * <Link href="/blog/post-1" prefetch scroll={false}>Read More</Link>
+ * ```
+ */
+export function Link({
+  href,
+  replace = false,
+  scroll = true,
+  prefetch = true,
+  children,
+  onClick,
+  onMouseEnter,
+  onTouchStart,
+  ...props
+}) {
+  const linkRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  // Set up Intersection Observer for visibility detection
+  useEffect(() => {
+    if (typeof window === "undefined" || !prefetch) {
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    });
+    if (linkRef.current) {
+      observer.observe(linkRef.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [prefetch]);
+  // Prefetch when visible
+  useEffect(() => {
+    if (isVisible && prefetch && isLocalUrl(href)) {
+      prefetchPage(href);
+    }
+  }, [isVisible, href, prefetch]);
+  // Handle mouse enter for prefetch on hover
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (onMouseEnter) {
+        onMouseEnter(e);
+      }
+      if (isLocalUrl(href)) {
+        prefetchPage(href);
+      }
+    },
+    [href, onMouseEnter],
+  );
+  // Handle touch start for prefetch on touch
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (onTouchStart) {
+        onTouchStart(e);
+      }
+      if (isLocalUrl(href)) {
+        prefetchPage(href);
+      }
+    },
+    [href, onTouchStart],
+  );
+  // Handle click
+  const handleClick = useCallback(
+    (e) => {
+      handleLinkClick(e, href, replace, onClick);
+    },
+    [href, replace, onClick],
+  );
+  return _jsx("a", {
+    ref: linkRef,
+    href: href,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onTouchStart: handleTouchStart,
+    ...props,
+    children: children,
+  });
+}
+export default Link;

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,
+  );
+}