create-jen-app 1.2.3 → 1.2.4

package/templates/static/lib/plugin/examples/analytics-plugin.js

@@ -0,0 +1,183 @@
+import { HookStage } from "../types.js";
+/**
+ * Create an analytics plugin.
+ */
+export function createAnalyticsPlugin(config) {
+  const events = [];
+  return {
+    name: "jen-analytics",
+    version: "1.0.0",
+    description: "Track pageviews and events with analytics provider",
+    async init(pluginContext) {
+      console.log(
+        `[Analytics Plugin] Initialized with provider: ${config.provider}`,
+      );
+    },
+    hooks: {
+      // Track pageviews
+      [HookStage.BEFORE_REQUEST]: async (context) => {
+        const path = context.request?.req?.url || "/";
+        const event = {
+          type: "pageview",
+          path,
+          timestamp: Date.now(),
+        };
+        events.push(event);
+        // Send to analytics provider
+        await trackEvent(event, config);
+      },
+      // Inject analytics script into rendered pages
+      [HookStage.AFTER_RENDER]: async (context) => {
+        const analyticsScript = generateAnalyticsScript(config);
+        let html = context.data?.html;
+        if (html) {
+          // Inject before closing body tag
+          html = html.replace("</body>", `${analyticsScript}</body>`);
+          if (context.mutate) {
+            context.mutate("html", html);
+          }
+        }
+      },
+      // Flush events before build
+      [HookStage.BEFORE_BUILD]: async (context) => {
+        console.log(`[Analytics Plugin] Flushing ${events.length} events...`);
+        for (const event of events) {
+          await trackEvent(event, config);
+        }
+        events.length = 0;
+      },
+    },
+  };
+}
+/**
+ * Track an analytics event.
+ */
+async function trackEvent(event, config) {
+  switch (config.provider) {
+    case "google-analytics":
+      await trackGoogleAnalytics(event, config);
+      break;
+    case "segment":
+      await trackSegment(event, config);
+      break;
+    case "mixpanel":
+      await trackMixpanel(event, config);
+      break;
+    case "custom":
+      if (config.customTrackerFn) {
+        await config.customTrackerFn(event);
+      }
+      break;
+  }
+}
+/**
+ * Track event in Google Analytics.
+ */
+async function trackGoogleAnalytics(event, config) {
+  // Mock implementation - in production, use the GA SDK
+  const trackingId = config.trackingId || "UA-XXXXXXXXX-X";
+  const params = new URLSearchParams({
+    v: "1", // API version
+    tid: trackingId,
+    cid: generateClientId(),
+    t: event.type === "pageview" ? "pageview" : "event",
+  });
+  if (event.type === "pageview" && event.path) {
+    params.append("dp", event.path);
+  }
+  if (event.type === "event" && event.eventName) {
+    params.append("ec", "engagement");
+    params.append("ea", event.eventName);
+  }
+  if (config.anonymizeIp) {
+    params.append("aip", "1");
+  }
+  console.log(
+    `[Analytics] GA: ${event.type} → ${event.path || event.eventName}`,
+  );
+  // In production: fetch("https://www.google-analytics.com/collect", { method: "POST", body: params });
+}
+/**
+ * Track event in Segment.
+ */
+async function trackSegment(event, config) {
+  // Mock implementation - in production, use the Segment SDK
+  const apiKey = config.apiKey || "YOUR_SEGMENT_API_KEY";
+  const payload = {
+    type: event.type === "pageview" ? "page" : "track",
+    userId: generateClientId(),
+    timestamp: new Date(event.timestamp).toISOString(),
+    context: {
+      library: { name: "jen.js" },
+    },
+  };
+  if (event.type === "pageview" && event.path) {
+    Object.assign(payload, {
+      name: "Page Viewed",
+      properties: { path: event.path },
+    });
+  }
+  if (event.type === "event" && event.eventName) {
+    Object.assign(payload, {
+      event: event.eventName,
+      properties: event.properties,
+    });
+  }
+  console.log(`[Analytics] Segment: ${event.type}`);
+  // In production: fetch("https://api.segment.io/v1/track", { method: "POST", body: JSON.stringify(payload) });
+}
+/**
+ * Track event in Mixpanel.
+ */
+async function trackMixpanel(event, config) {
+  // Mock implementation - in production, use the Mixpanel SDK
+  const token = config.apiKey || "YOUR_MIXPANEL_TOKEN";
+  const payload = {
+    event: event.type === "pageview" ? "Page View" : event.eventName || "Event",
+    properties: {
+      token,
+      distinct_id: generateClientId(),
+      time: event.timestamp,
+      ...(event.type === "pageview" && event.path ? { page: event.path } : {}),
+      ...event.properties,
+    },
+  };
+  console.log(`[Analytics] Mixpanel: ${payload.event}`);
+  // In production: fetch("https://api.mixpanel.com/track", { method: "POST", body: JSON.stringify([payload]) });
+}
+/**
+ * Generate analytics script to inject into HTML.
+ */
+function generateAnalyticsScript(config) {
+  switch (config.provider) {
+    case "google-analytics":
+      return `
+<script async src="https://www.googletagmanager.com/gtag/js?id=${config.trackingId || "UA-XXXXXXXXX-X"}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '${config.trackingId || "UA-XXXXXXXXX-X"}');
+</script>`;
+    case "segment":
+      return `
+<script>
+  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var t=analytics.methods[e];analytics[t]=analytics.factory(t)}analytics.load=function(e,t){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+e+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=t};analytics.SNIPPET_VERSION="4.4.0";analytics.load("${config.apiKey || "YOUR_SEGMENT_API_KEY"}");analytics.page();}}();
+</script>`;
+    case "mixpanel":
+      return `
+<script async src="//cdn.mxpnl.com/libs/mixpanel-latest.min.js"></script>
+<script>
+  mixpanel.init("${config.apiKey || "YOUR_MIXPANEL_TOKEN"}");
+  mixpanel.track("Page Viewed");
+</script>`;
+    default:
+      return "";
+  }
+}
+/**
+ * Generate a unique client ID.
+ */
+function generateClientId() {
+  return Math.random().toString(36).substring(2) + Date.now().toString(36);
+}

package/templates/static/lib/plugin/examples/cdn-upload-plugin.js

@@ -0,0 +1,94 @@
+import { HookStage } from "../types.js";
+/**
+ * Create a CDN upload plugin.
+ */
+export function createCDNUploadPlugin(config) {
+  return {
+    name: "jen-cdn-upload",
+    version: "1.0.0",
+    description: "Upload optimized assets to CDN after build",
+    async init(pluginContext) {
+      console.log(`[CDN Plugin] Initialized with provider: ${config.provider}`);
+    },
+    hooks: {
+      // Hook after build completes to upload assets
+      [HookStage.AFTER_BUILD]: async (context) => {
+        console.log("[CDN Plugin] Build completed, uploading assets...");
+        // Get the list of optimized assets from the build context
+        const { distDir } = context.config;
+        const assets = context.data?.assets || [];
+        for (const asset of assets) {
+          try {
+            const cdnUrl = await uploadAsset(asset, config);
+            console.log(`[CDN Plugin] Uploaded: ${asset.path} → ${cdnUrl}`);
+            // Update the asset URL in the manifest
+            if (!context.data?.assetUrls) {
+              context.data = { ...context.data, assetUrls: {} };
+            }
+            context.data.assetUrls[asset.path] = cdnUrl;
+          } catch (error) {
+            console.error(
+              `[CDN Plugin] Failed to upload ${asset.path}:`,
+              error,
+            );
+            throw error;
+          }
+        }
+      },
+      // Hook to inject CDN URLs into HTML
+      [HookStage.AFTER_RENDER]: async (context) => {
+        const assetUrls = context.data?.assetUrls || {};
+        if (Object.keys(assetUrls).length > 0) {
+          // Update HTML with CDN URLs
+          let html = context.data?.html;
+          for (const [localPath, cdnUrl] of Object.entries(assetUrls)) {
+            html = html?.replace(new RegExp(localPath, "g"), cdnUrl);
+          }
+          if (context.mutate) {
+            context.mutate("html", html);
+          }
+        }
+      },
+    },
+  };
+}
+/**
+ * Upload a single asset to the configured CDN.
+ */
+async function uploadAsset(file, config) {
+  switch (config.provider) {
+    case "cloudinary":
+      return uploadToCloudinary(file, config);
+    case "aws-s3":
+      return uploadToS3(file, config);
+    case "custom":
+      if (config.customUploadFn) {
+        return config.customUploadFn(file);
+      }
+      throw new Error("Custom upload function not provided");
+    default:
+      throw new Error(`Unsupported CDN provider: ${config.provider}`);
+  }
+}
+/**
+ * Upload to Cloudinary.
+ */
+async function uploadToCloudinary(file, config) {
+  // This is a mock implementation
+  // In production, use the Cloudinary SDK
+  const cloudName = config.cloudName || "demo";
+  const filename = file.path.split("/").pop() || "asset";
+  // Mock response - in reality, call Cloudinary API
+  return `https://res.cloudinary.com/${cloudName}/image/upload/v1/${filename}`;
+}
+/**
+ * Upload to AWS S3.
+ */
+async function uploadToS3(file, config) {
+  // This is a mock implementation
+  // In production, use the AWS SDK
+  const bucket = config.bucket || "my-assets";
+  const key = file.path;
+  // Mock response - in reality, call S3 API
+  return `https://${bucket}.s3.amazonaws.com/${key}`;
+}

package/templates/static/lib/plugin/loader.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/>.
- */
 // Plugin loader
 // Migrated from Python src/python/plugins.py
 import { readdirSync } from "node:fs";

package/templates/static/lib/plugin/plugin-manager.js

@@ -0,0 +1,177 @@
+import { log } from "../shared/log.js";
+/**
+ * Central plugin manager for Jen.js framework.
+ *
+ * Manages plugin loading, hook registration, and execution.
+ * Plugins can hook into any stage of the build, dev, or request lifecycle.
+ *
+ * @example
+ * ```typescript
+ * const manager = new PluginManager(config, "development");
+ * await manager.loadPlugins([myPlugin]);
+ * await manager.emitHook("beforeBuild", { config, data: {} });
+ * ```
+ */
+export class PluginManager {
+  plugins = [];
+  hooks = new Map();
+  config;
+  mode;
+  rootDir;
+  initialized = false;
+  constructor(config, rootDir, mode = "development") {
+    this.config = config;
+    this.rootDir = rootDir;
+    this.mode = mode;
+  }
+  /**
+   * Load plugins from configuration or explicit list.
+   */
+  async loadPlugins(plugins = []) {
+    try {
+      for (const plugin of plugins) {
+        const resolved =
+          typeof plugin === "string"
+            ? await this.resolvePlugin(plugin)
+            : plugin;
+        this.plugins.push(resolved);
+        log.info(`[Plugin] Loaded: ${resolved.name}@${resolved.version}`);
+      }
+      this.initialized = true;
+    } catch (error) {
+      log.error(
+        `[Plugin] Failed to load plugins: ${error instanceof Error ? error.message : String(error)}`,
+      );
+      throw error;
+    }
+  }
+  /**
+   * Resolve a plugin by name (from node_modules or path).
+   */
+  async resolvePlugin(pluginName) {
+    try {
+      // Try to import from node_modules
+      const imported = await import(pluginName);
+      return imported.default || imported;
+    } catch {
+      // Try to import from relative path
+      const path = pluginName.startsWith("/")
+        ? pluginName
+        : `${this.rootDir}/${pluginName}`;
+      const imported = await import(path);
+      return imported.default || imported;
+    }
+  }
+  /**
+   * Initialize all loaded plugins.
+   */
+  async initialize() {
+    if (!this.initialized) {
+      throw new Error("Plugins must be loaded before initialization");
+    }
+    const context = {
+      config: this.config,
+      rootDir: this.rootDir,
+      mode: this.mode,
+      onHook: (stage, handler) => this.registerHook(stage, handler),
+      emitHook: (stage, context) => this.emitHook(stage, context),
+    };
+    for (const plugin of this.plugins) {
+      if (plugin.init) {
+        try {
+          await plugin.init(context);
+          log.info(`[Plugin] Initialized: ${plugin.name}`);
+        } catch (error) {
+          log.error(
+            `[Plugin] Initialization failed for ${plugin.name}: ${error instanceof Error ? error.message : String(error)}`,
+          );
+          throw error;
+        }
+      }
+      // Register plugin hooks
+      if (plugin.hooks) {
+        for (const [stage, handler] of Object.entries(plugin.hooks)) {
+          if (handler) {
+            this.registerHook(stage, handler);
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Register a hook handler for a specific stage.
+   */
+  registerHook(stage, handler) {
+    if (!this.hooks.has(stage)) {
+      this.hooks.set(stage, []);
+    }
+    this.hooks.get(stage).push(handler);
+  }
+  /**
+   * Emit a hook event, executing all registered handlers.
+   */
+  async emitHook(stage, context) {
+    const handlers = this.hooks.get(stage) || [];
+    if (handlers.length === 0) {
+      return;
+    }
+    try {
+      // Execute hooks sequentially by default
+      for (const handler of handlers) {
+        try {
+          await handler(context);
+        } catch (error) {
+          log.error(
+            `[Plugin Hook] Error in ${stage}: ${error instanceof Error ? error.message : String(error)}`,
+          );
+          throw error;
+        }
+      }
+    } catch (error) {
+      log.error(`[Plugin] Hook execution failed for stage: ${stage}`);
+      throw error;
+    }
+  }
+  /**
+   * Get all registered plugins.
+   */
+  getPlugins() {
+    return [...this.plugins];
+  }
+  /**
+   * Get handlers for a specific hook stage.
+   */
+  getHooks(stage) {
+    return this.hooks.get(stage) || [];
+  }
+  /**
+   * Check if a hook stage has handlers registered.
+   */
+  hasHook(stage) {
+    return this.hooks.has(stage) && this.hooks.get(stage).length > 0;
+  }
+}
+/**
+ * Global plugin manager instance (singleton).
+ */
+let globalPluginManager = null;
+/**
+ * Get or create the global plugin manager.
+ */
+export function getPluginManager(config, rootDir, mode) {
+  if (!globalPluginManager) {
+    if (!config || !rootDir) {
+      throw new Error(
+        "Plugin manager not initialized. Call getPluginManager with config and rootDir",
+      );
+    }
+    globalPluginManager = new PluginManager(config, rootDir, mode);
+  }
+  return globalPluginManager;
+}
+/**
+ * Reset the global plugin manager (for testing).
+ */
+export function resetPluginManager() {
+  globalPluginManager = null;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Plugin lifecycle and hook system.
+ * Plugins hook into key stages of build, dev, and request handling.
+ */
+/**
+ * Hookable stages available to plugins.
+ */
+export var HookStage;
+(function (HookStage) {
+  // Build lifecycle
+  HookStage["BEFORE_BUILD"] = "beforeBuild";
+  HookStage["AFTER_BUILD"] = "afterBuild";
+  HookStage["BEFORE_ASSET_OPTIMIZE"] = "beforeAssetOptimize";
+  HookStage["AFTER_ASSET_OPTIMIZE"] = "afterAssetOptimize";
+  HookStage["BEFORE_RENDER"] = "beforeRender";
+  HookStage["AFTER_RENDER"] = "afterRender";
+  // Request lifecycle
+  HookStage["BEFORE_REQUEST"] = "beforeRequest";
+  HookStage["AFTER_REQUEST"] = "afterRequest";
+  // Response generation
+  HookStage["BEFORE_RESPONSE"] = "beforeResponse";
+  HookStage["AFTER_RESPONSE"] = "afterResponse";
+  // Cache operations
+  HookStage["BEFORE_CACHE"] = "beforeCache";
+  HookStage["AFTER_CACHE"] = "afterCache";
+  // Custom stage (plugins can register their own)
+  HookStage["CUSTOM"] = "custom";
+})(HookStage || (HookStage = {}));

package/templates/static/lib/runtime/client-runtime.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/>.
- */
 /**
  * Retrieve framework data injected by the server into the page HTML.
  * The server embeds loader result data, route params, and query parameters

package/templates/static/lib/runtime/hmr.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/>.
- */
 /**
  * Client-side Hot Module Replacement (HMR) / Live Reload code.
  * This script is injected into the browser during development mode.

package/templates/static/lib/runtime/hydrate.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 { hydrate } from "preact";
 import { h } from "preact";
 import { getFrameworkData } from "./client-runtime.js";

package/templates/static/lib/runtime/island-hydration-client.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 { hydrate } from "preact";
 import { h } from "preact";
 /**

package/templates/static/lib/runtime/islands.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/>.
- */
 /**
  * Mark a component as an interactive island for partial hydration.
  * Islands are components that require client-side interactivity while the rest of the page