create-jen-app 1.2.2 → 1.2.4

package/templates/static/lib/features/api/handler.js

@@ -0,0 +1,10 @@
+/*
+ * API Routes Handler
+ */
+/**
+ * Handle API routes with HTTP method dispatching
+ */
+export async function handleApiRoutes(context) {
+  // Stub implementation
+  // Routes are handled by the server middleware
+}

package/templates/static/lib/features/api/index.js

@@ -0,0 +1,5 @@
+/*
+ * API Routes Feature
+ * Handles HTTP method-based API endpoints
+ */
+export { handleApiRoutes } from "./handler.js";

package/templates/static/lib/features/api/types.js

@@ -0,0 +1,4 @@
+/*
+ * API Feature Types
+ */
+export {};

package/templates/static/lib/features/middleware/compiled.js

@@ -0,0 +1,7 @@
+/*
+ * Compiled Middleware Chain
+ */
+/**
+ * Compiled middleware chain for optimized execution
+ */
+export const compiledMiddlewareChain = [];

package/templates/static/lib/features/middleware/index.js

@@ -0,0 +1,5 @@
+/*
+ * Middleware Feature
+ * Express-style middleware pipeline
+ */
+export { compiledMiddlewareChain } from "./compiled.js";

package/templates/static/lib/features/middleware/types.js

@@ -0,0 +1,4 @@
+/*
+ * Middleware Feature Types
+ */
+export {};

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

@@ -0,0 +1,46 @@
+/**
+ * Fonts module for Jen.js
+ * Provides support for local and Google Fonts with automatic injection
+ * into SSR/SSG/ISR rendered pages.
+ *
+ * @example
+ * ```typescript
+ * // In jen.config.ts:
+ * import type { FrameworkConfig } from "jenjs";
+ *
+ * export default {
+ *   fonts: {
+ *     local: ["site/fonts/Inter-Regular.woff2"],
+ *     google: ["Roboto:400,700"],
+ *     preload: true,
+ *     display: "swap"
+ *   },
+ *   // ... rest of config
+ * } satisfies FrameworkConfig;
+ * ```
+ *
+ * The fonts are automatically injected during build and server initialization.
+ * To customize injection behavior, use the low-level API:
+ *
+ * @example
+ * ```typescript
+ * // In build.js or custom script:
+ * import { extractFonts } from "../fonts/loader.js";
+ * import { fontServeMiddleware } from "../fonts/inject.js";
+ *
+ * // Get fonts without auto-injection
+ * const { googleFontLinks, localFontsCSS } = extractFonts(fontsConfig, ".jen");
+ *
+ * // Customize before injecting
+ * const customCSS = localFontsCSS.replace(/display: swap/g, "display: optional");
+ *
+ * // Serve fonts with custom middleware
+ * const serveFonts = fontServeMiddleware("./.jen/cache/fonts");
+ * ```
+ */
+export { injectFonts, fontServeMiddleware } from "./inject.js";
+export {
+  processFonts,
+  generateGoogleFontLinks,
+  extractFonts,
+} from "./loader.js";

package/templates/static/lib/fonts/inject.js

@@ -0,0 +1,125 @@
+import { extractFonts } from "./loader.js";
+/**
+ * Injects font-related HTML and CSS into the framework config.
+ * This is called automatically during build and server initialization.
+ * Modifies config.inject.head to include font links and CSS.
+ *
+ * Fully hackable: Call this function in custom build scripts to control
+ * exactly how fonts are injected, or skip it entirely for manual control.
+ *
+ * @param config Jen.js framework config (modified in place)
+ * @param cacheDir Cache directory for fonts (default: config.build?.cacheDir or ".jen")
+ *
+ * @example
+ * ```typescript
+ * // In build.js or server.js, customize font injection:
+ * import { injectFonts } from "../fonts/inject.js";
+ * import type { FrameworkConfig } from "../core/config.js";
+ *
+ * export async function setupFonts(config: FrameworkConfig) {
+ *   // Inject fonts with custom cache location
+ *   injectFonts(config, "./my-custom-cache");
+ *
+ *   // Further customize injected content
+ *   config.inject.head = config.inject.head.map(tag => {
+ *     if (tag.includes("fonts.googleapis.com")) {
+ *       // Add crossorigin to Google Fonts link
+ *       return tag.replace("<link", '<link crossorigin');
+ *     }
+ *     return tag;
+ *   });
+ *
+ *   return config;
+ * }
+ * ```
+ */
+export function injectFonts(config, cacheDir) {
+  const fontsCacheDir = cacheDir ?? config.build?.cacheDir ?? ".jen";
+  const fonts = config.fonts;
+  if (!fonts) {
+    return; // No fonts configured
+  }
+  const { googleFontLinks, localFontsCSS } = extractFonts(fonts, fontsCacheDir);
+  // Initialize inject.head if not already present
+  if (!config.inject) {
+    config.inject = { head: [], bodyEnd: [] };
+  }
+  if (!config.inject.head) {
+    config.inject.head = [];
+  }
+  // Add Google Fonts link (if any)
+  if (googleFontLinks) {
+    config.inject.head.push(googleFontLinks);
+  }
+  // Add local fonts CSS as <style> tag (if any)
+  if (localFontsCSS) {
+    const styleTag = `<style>${localFontsCSS}</style>`;
+    config.inject.head.push(styleTag);
+  }
+}
+/**
+ * Middleware for serving local fonts with proper cache headers.
+ * Used in development and production servers to serve fonts with appropriate
+ * HTTP headers for long-term caching.
+ *
+ * @param cacheDir Cache directory where fonts are stored
+ * @returns Middleware function compatible with Node.js http.Server
+ *
+ * @example
+ * ```typescript
+ * import { fontServeMiddleware } from "../fonts/inject.js";
+ * import { createServer } from "node:http";
+ *
+ * const server = createServer();
+ * const fontsMiddleware = fontServeMiddleware("./.jen/cache/fonts");
+ *
+ * server.on("request", async (req, res) => {
+ *   if (req.url?.startsWith("/fonts/")) {
+ *     await fontsMiddleware(req, res);
+ *     return;
+ *   }
+ *   // Handle other routes
+ * });
+ * ```
+ */
+export function fontServeMiddleware(cacheDir) {
+  return async (req, res) => {
+    if (!req.url?.startsWith("/fonts/")) {
+      return false;
+    }
+    const { readFileSync, existsSync } = await import("node:fs");
+    const { basename, join } = await import("node:path");
+    const fontPath = basename(req.url);
+    // Security: Prevent directory traversal attacks
+    if (fontPath.includes("..") || fontPath.includes("/")) {
+      res.statusCode = 400;
+      res.end("Invalid font path");
+      return true;
+    }
+    const fullPath = join(cacheDir, fontPath);
+    if (!existsSync(fullPath)) {
+      return false; // Not a font file, let other middleware handle it
+    }
+    try {
+      const content = readFileSync(fullPath);
+      const ext = fontPath.split(".").pop()?.toLowerCase();
+      const mimeTypes = {
+        ttf: "font/ttf",
+        otf: "font/otf",
+        woff: "font/woff",
+        woff2: "font/woff2",
+      };
+      const mimeType = mimeTypes[ext || ""] || "application/octet-stream";
+      res.statusCode = 200;
+      res.setHeader("content-type", mimeType);
+      res.setHeader("cache-control", "public, max-age=31536000, immutable");
+      res.setHeader("access-control-allow-origin", "*");
+      res.end(content);
+      return true;
+    } catch (err) {
+      res.statusCode = 500;
+      res.end("Font serving error");
+      return true;
+    }
+  };
+}

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

@@ -0,0 +1,196 @@
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { basename, extname, join, resolve } from "node:path";
+import { log } from "../shared/log.js";
+/**
+ * Processes and copies local font files to cache directory.
+ * Generates @font-face CSS for each font file.
+ * Supports .ttf, .woff, .woff2, .otf formats.
+ *
+ * @param config Fonts configuration from jen.config
+ * @param cacheDir Directory to store cached fonts (usually .jen/cache/fonts)
+ * @returns CSS string with @font-face declarations for all local fonts
+ *
+ * @hackable Override or extend this in build scripts:
+ * ```typescript
+ * import { processFonts } from "../fonts/loader.js";
+ * const css = processFonts(config, customCacheDir);
+ * // Modify CSS as needed before injecting
+ * ```
+ */
+export function processFonts(config, cacheDir) {
+  if (!config?.local || config.local.length === 0) {
+    return "";
+  }
+  const fontCacheDir = join(cacheDir, "fonts");
+  mkdirSync(fontCacheDir, { recursive: true });
+  let css = "";
+  const fontWeightMap = {
+    thin: "100",
+    hairline: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+  };
+  for (const fontPath of config.local) {
+    const fullPath = resolve(fontPath);
+    if (!existsSync(fullPath)) {
+      log.warn(`Font file not found: ${fontPath}`);
+      continue;
+    }
+    const filename = basename(fontPath);
+    const ext = extname(fontPath).toLowerCase();
+    const destPath = join(fontCacheDir, filename);
+    // Copy font file to cache
+    try {
+      copyFileSync(fullPath, destPath);
+      log.info(`Cached font: ${filename}`);
+    } catch (err) {
+      log.warn(`Failed to copy font ${filename}: ${err.message}`);
+      continue;
+    }
+    // Parse font properties from filename
+    // Convention: FontName-Weight-Style.ext or FontName-Weight.ext or FontName.ext
+    // Examples: Roboto-Regular.woff2, Roboto-Bold-Italic.woff2, Inter-700.woff2
+    const nameWithoutExt = filename.slice(0, -ext.length);
+    const parts = nameWithoutExt.split("-");
+    let fontName = parts[0];
+    let fontWeight = "400";
+    let fontStyle = "normal";
+    if (parts.length > 1) {
+      const weightPart = parts[1].toLowerCase();
+      const stylePart = parts[2]?.toLowerCase() ?? "";
+      // Map weight names to numeric values
+      if (fontWeightMap[weightPart]) {
+        fontWeight = fontWeightMap[weightPart];
+      } else if (/^\d+$/.test(weightPart)) {
+        fontWeight = weightPart;
+      }
+      // Detect italic/oblique
+      if (stylePart.includes("italic") || weightPart.includes("italic")) {
+        fontStyle = "italic";
+      } else if (
+        stylePart.includes("oblique") ||
+        weightPart.includes("oblique")
+      ) {
+        fontStyle = "oblique";
+      }
+    }
+    // Map format to correct font type
+    const formatMap = {
+      ".ttf": "truetype",
+      ".otf": "opentype",
+      ".woff": "woff",
+      ".woff2": "woff2",
+    };
+    const format = formatMap[ext] || "truetype";
+    const display = config.display ?? "swap";
+    // Generate @font-face rule
+    css += `@font-face {
+  font-family: "${fontName}";
+  src: url("/fonts/${filename}") format("${format}");
+  font-weight: ${fontWeight};
+  font-style: ${fontStyle};
+  font-display: ${display};
+}
+`;
+  }
+  return css;
+}
+/**
+ * Generates HTML link tags for Google Fonts.
+ * Parses font specifications like "Roboto:400,700" and constructs appropriate URLs.
+ * Includes preload links if enabled in config.
+ *
+ * @param config Fonts configuration from jen.config
+ * @returns HTML string with <link> tags for Google Fonts and optional preload links
+ *
+ * @hackable Override in config or extend in server.js:
+ * ```typescript
+ * // Custom variant handling or URL construction
+ * const links = generateGoogleFontLinks(config);
+ * // Modify before injection
+ * ```
+ */
+export function generateGoogleFontLinks(config) {
+  if (!config?.google || config.google.length === 0) {
+    return "";
+  }
+  const display = config.display ?? "swap";
+  const params = new URLSearchParams();
+  // Normalize font specs and extract families
+  const families = config.google.map((spec) => {
+    const [family, weights] = spec.split(":");
+    if (weights) {
+      // Convert weight spec like "400,700" or "400,400i,600,700" to Google Fonts format
+      // "400" -> "wght@400", "400,700" -> "wght@400;700", "400i" -> "ital,wght@0,400; 1,400"
+      const variants = weights.split(",");
+      let italic = false;
+      let normalWeights = [];
+      let italicWeights = [];
+      for (const v of variants) {
+        if (v.includes("i")) {
+          italic = true;
+          italicWeights.push(v.replace("i", ""));
+        } else {
+          normalWeights.push(v);
+        }
+      }
+      let spec = `${family}`;
+      if (italic) {
+        spec += `:ital@1`;
+        if (italicWeights.length > 0)
+          spec += `,wght@${italicWeights.join(";")}`;
+      }
+      if (normalWeights.length > 0) {
+        spec += `:wght@${normalWeights.join(";")}`;
+      }
+      return spec;
+    }
+    return family;
+  });
+  params.set("family", families.join("&family="));
+  params.set("display", display);
+  const googleFontsUrl = `https://fonts.googleapis.com/css2?${params.toString()}`;
+  let html = `<link rel="stylesheet" href="${googleFontsUrl}">`;
+  // Add preload links if enabled (for critical fonts)
+  if (config.preload) {
+    const preloadFonts = config.google.slice(0, 2); // Preload first 2 fonts only for performance
+    for (const spec of preloadFonts) {
+      const [family] = spec.split(":");
+      // Preload the most common weight (400)
+      html += `\n<link rel="preconnect" href="https://fonts.googleapis.com">`;
+      html += `\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`;
+    }
+  }
+  return html;
+}
+/**
+ * Extracts font links and CSS for injection into the HTML <head>.
+ * Combines local fonts (@font-face CSS) and Google Fonts (link tags).
+ * Fully hackable - can be extended in server.js or build scripts.
+ *
+ * @param config Fonts configuration from jen.config
+ * @param cacheDir Cache directory path for local fonts
+ * @returns Object with googleFontLinks and localFontsCSS for head injection
+ *
+ * @example
+ * ```typescript
+ * const { googleFontLinks, localFontsCSS } = extractFonts(config, ".jen/cache");
+ * // Add custom processing
+ * const modifiedCSS = localFontsCSS.replace(/display: swap/g, "display: optional");
+ * ```
+ */
+export function extractFonts(config, cacheDir) {
+  const localFontsCSS = processFonts(config, cacheDir);
+  const googleFontLinks = generateGoogleFontLinks(config);
+  return {
+    googleFontLinks,
+    localFontsCSS,
+  };
+}

package/templates/static/lib/fonts/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,22 +1,52 @@
-/*
- * This file is part of Jen.js.
- * Copyright (C) 2026 oopsio
+/**
+ * GraphQL integration utilities for Jen.js applications.
  *
- * 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.
+ * Jen.js does not include GraphQL as a built-in dependency. This module provides
+ * a placeholder for GraphQL query execution and can be extended with custom implementations
+ * that use your chosen GraphQL library.
  *
- * 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.
+ * To integrate GraphQL:
+ * 1. Install: npm install graphql
+ * 2. Import the graphql library: import { graphql } from 'graphql';
+ * 3. Implement query execution using your schema
+ * 4. Use in API routes or loaders
  *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ * @example
+ * // In an API route:
+ * import { runQuery } from '../graphql';
+ *
+ * export default {
+ *   handler: async (ctx) => {
+ *     const result = await runQuery(ctx.body.query, ctx.body.variables);
+ *     ctx.response.json(result);
+ *   }
+ * };
+ */
+/**
+ * Execute a GraphQL query.
+ * This is a placeholder function that must be implemented with your GraphQL library.
+ *
+ * @param query The GraphQL query string.
+ * @param variables Optional variables object for parameterized queries.
+ * @returns The query result object with data and errors (if any).
+ * @throws Error indicating GraphQL library must be installed.
+ *
+ * @example
+ * // Once graphql is installed:
+ * import { graphql } from 'graphql';
+ * import { schema } from './schema';
+ *
+ * export async function runQuery(query: string, variables?: any) {
+ *   const result = await graphql({
+ *     schema,
+ *     source: query,
+ *     variableValues: variables
+ *   });
+ *   return result;
+ * }
  */
-// GraphQL utilities - external GraphQL library not included
-// Users should implement with their own graphql library (e.g., npm install graphql)
 export async function runQuery(query, variables) {
-    throw new Error("GraphQL implementation requires external library. Install: npm install graphql");
+  throw new Error(
+    "GraphQL implementation requires external library. Install: npm install graphql",
+  );
 }

package/templates/static/lib/graphql/resolvers.js

@@ -1,26 +1,49 @@
-/*
- * This file is part of Jen.js.
- * Copyright (C) 2026 oopsio
+/**
+ * GraphQL resolvers placeholder module.
  *
- * 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.
+ * Jen.js provides basic example resolvers to demonstrate the pattern.
+ * Replace these with your actual resolvers that implement your application logic.
  *
- * 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.
+ * Resolvers are functions that return the data for each field in your GraphQL schema.
+ * They have access to the parent value, arguments, context, and field info.
  *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ * @example
+ * // Custom resolver with database integration:
+ * import { db } from '../jdb';
+ *
+ * export const resolvers = {
+ *   users: async () => {
+ *     const users = db.collection('users');
+ *     return await users.find({});
+ *   },
+ *   createUser: async ({ name, email }: { name: string; email: string }) => {
+ *     const users = db.collection('users');
+ *     return await users.insert({ name, email });
+ *   }
+ * };
  */
+/** In-memory user store for example resolvers. Replace with database queries. */
 const users = [];
+/**
+ * Example resolvers for user queries and mutations.
+ * These are simple demonstrations using an in-memory store.
+ * In a real application, resolvers should query your database (JDB, etc.).
+ */
 export const resolvers = {
-    users: () => users,
-    createUser: ({ name, email }) => {
-        const user = { id: (users.length + 1).toString(), name, email };
-        users.push(user);
-        return user;
-    },
+  /**
+   * Query all users.
+   * @returns Array of all users.
+   */
+  users: () => users,
+  /**
+   * Create a new user.
+   * @param name User's full name.
+   * @param email User's email address.
+   * @returns The created user object with an ID.
+   */
+  createUser: ({ name, email }) => {
+    const user = { id: (users.length + 1).toString(), name, email };
+    users.push(user);
+    return user;
+  },
 };

package/templates/static/lib/graphql/schema.js

@@ -1,20 +1,35 @@
-/*
- * This file is part of Jen.js.
- * Copyright (C) 2026 oopsio
+/**
+ * GraphQL schema placeholder module.
  *
- * 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.
+ * Jen.js does not include GraphQL as a built-in dependency to keep the framework lightweight.
+ * GraphQL support is opt-in: users can integrate GraphQL by installing the graphql package
+ * and defining their own schemas in this module or elsewhere in their application.
  *
- * 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.
+ * To use GraphQL with Jen.js:
+ * 1. Install the graphql package: npm install graphql
+ * 2. Define your schema using the graphql library
+ * 3. Create API routes that execute queries against the schema
  *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ * @example
+ * // Install: npm install graphql
+ * // src/graphql/schema.ts
+ *
+ * import { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLField } from 'graphql';
+ *
+ * export const schema = new GraphQLSchema({
+ *   query: new GraphQLObjectType({
+ *     name: 'Query',
+ *     fields: {
+ *       hello: {
+ *         type: GraphQLString,
+ *         resolve: () => 'Hello, World!'
+ *       }
+ *     }
+ *   })
+ * });
+ */
+/**
+ * Placeholder export for the GraphQL schema.
+ * Replace with your actual schema once graphql is installed.
  */
-// GraphQL schema - external GraphQL library not included
-// Users should implement with their own graphql library (e.g., npm install graphql)
 export const schema = null;

package/templates/static/lib/i18n/en.json

@@ -1,4 +1,4 @@
 {
-    "hello": "Hello",
-    "welcome": "Welcome"
+  "hello": "Hello",
+  "welcome": "Welcome"
 }

package/templates/static/lib/i18n/es.json

@@ -1,4 +1,4 @@
 {
-    "hello": "Hola",
-    "welcome": "Bienvenido"
+  "hello": "Hola",
+  "welcome": "Bienvenido"
 }