create-jen-app 1.2.2 → 1.2.4

package/templates/static/lib/devtools/event-logger.js

@@ -0,0 +1,67 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+export class EventLogger {
+  logs = [];
+  maxLogs = 1000;
+  log(source, type, data) {
+    const entry = {
+      id: Math.random().toString(36).substr(2, 9),
+      timestamp: Date.now(),
+      source,
+      type: type,
+      message: this.serializeMessage(data),
+      data,
+    };
+    this.logs.push(entry);
+    // Keep only the last N logs
+    if (this.logs.length > this.maxLogs) {
+      this.logs.shift();
+    }
+  }
+  getLogs() {
+    return [...this.logs];
+  }
+  getLogsSince(timestamp) {
+    return this.logs.filter((log) => log.timestamp >= timestamp);
+  }
+  getLogsBySource(source) {
+    return this.logs.filter((log) => log.source === source);
+  }
+  getLogsByType(type) {
+    return this.logs.filter((log) => log.type === type);
+  }
+  clear() {
+    this.logs = [];
+  }
+  search(query) {
+    const lowerQuery = query.toLowerCase();
+    return this.logs.filter(
+      (log) =>
+        log.source.toLowerCase().includes(lowerQuery) ||
+        log.message.toLowerCase().includes(lowerQuery),
+    );
+  }
+  serializeMessage(data) {
+    if (Array.isArray(data)) {
+      return data.map((d) => this.serializeValue(d)).join(" ");
+    }
+    return this.serializeValue(data);
+  }
+  serializeValue(value) {
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+    if (typeof value === "boolean") return String(value);
+    if (typeof value === "object") {
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return "[Object]";
+      }
+    }
+    return String(value);
+  }
+}

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

@@ -0,0 +1,9 @@
+export { DevTools, initDevTools, getDevTools } from "./devtools.js";
+export { getHTML, getStyles, injectStyles } from "./ui.js";
+export { createEventBus } from "./event-bus.js";
+export { PersistenceManager } from "./persistence.js";
+export { ComponentTreeManager } from "./component-tree.js";
+export { EventLogger } from "./event-logger.js";
+export { PerformanceMonitor } from "./performance.js";
+export { SearchManager } from "./search.js";
+export { PluginSystem, createPlugin } from "./plugins.js";

package/templates/static/lib/devtools/integration.js

@@ -0,0 +1,149 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+import { injectStyles } from "./ui.js";
+/**
+ * Enhanced component wrapper that automatically registers with DevTools
+ */
+export function withDevTools(Component, devtools) {
+  return function WrappedComponent(props) {
+    const id = `${Component.name}-${Math.random().toString(36).substr(2, 9)}`;
+    // Get the rendered element ref
+    let el = null;
+    // Register component with DevTools
+    setTimeout(() => {
+      const element = document.querySelector(`[data-component-id="${id}"]`);
+      if (element) {
+        el = element;
+        devtools.registerComponent(
+          id,
+          Component.name || "Anonymous",
+          el,
+          props,
+          {},
+        );
+      }
+    }, 0);
+    // Render original component with tracking div
+    return {
+      vnode: Component(props),
+      wrapper: id,
+    };
+  };
+}
+/**
+ * Hook for tracking state updates in components
+ */
+export function useDevToolsIntegration(componentName, devtools) {
+  const id = `${componentName}-${Math.random().toString(36).substr(2, 9)}`;
+  return {
+    componentId: id,
+    trackState: (state) => {
+      devtools.updateComponentState(id, state);
+    },
+    trackEvent: (eventName, data) => {
+      devtools.logEvent(id, eventName, data);
+    },
+  };
+}
+/**
+ * Auto-initialize DevTools on the page
+ */
+export function autoInitDevTools(options) {
+  // Only enable in development
+  if (typeof process !== "undefined" && process.env.NODE_ENV === "production") {
+    return null;
+  }
+  // Inject styles
+  injectStyles();
+  // Dynamic import to avoid circular dependencies
+  return import("./devtools.js").then(({ initDevTools }) => {
+    return initDevTools({
+      enabled: options?.enabled ?? true,
+    });
+  });
+}
+/**
+ * Create a monitored event listener
+ */
+export function createMonitoredListener(
+  devtools,
+  componentId,
+  eventName,
+  handler,
+) {
+  return (event) => {
+    devtools.logEvent(componentId, eventName, {
+      type: event.type,
+      target: event.target?.tagName,
+      timestamp: Date.now(),
+    });
+    handler(event);
+  };
+}
+/**
+ * Monitor DOM mutations for a component
+ */
+export function monitorDOMChanges(devtools, componentId, element) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      devtools.logEvent(componentId, "dom-mutation", {
+        type: mutation.type,
+        target:
+          mutation.target instanceof HTMLElement
+            ? mutation.target.tagName
+            : "unknown",
+        addedNodes: mutation.addedNodes.length,
+        removedNodes: mutation.removedNodes.length,
+      });
+    });
+  });
+  observer.observe(element, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true,
+  });
+  return observer;
+}
+/**
+ * Create a devtools-aware logging function
+ */
+export function createLogger(devtools, componentId) {
+  return {
+    log: (...args) => {
+      console.log(...args);
+      devtools.logEvent(componentId, "console:log", args);
+    },
+    error: (...args) => {
+      console.error(...args);
+      devtools.logEvent(componentId, "console:error", args);
+    },
+    warn: (...args) => {
+      console.warn(...args);
+      devtools.logEvent(componentId, "console:warn", args);
+    },
+    debug: (...args) => {
+      console.debug?.(...args);
+      devtools.logEvent(componentId, "console:debug", args);
+    },
+    info: (...args) => {
+      console.info?.(...args);
+      devtools.logEvent(componentId, "console:info", args);
+    },
+  };
+}
+/**
+ * Monitor performance of a component render
+ */
+export function measureComponentRender(devtools, componentName, renderFn) {
+  const start = performance.now();
+  const result = renderFn();
+  const duration = performance.now() - start;
+  devtools.logEvent(componentName, "render", {
+    duration,
+    timestamp: Date.now(),
+  });
+  return result;
+}

package/templates/static/lib/devtools/performance.js

@@ -0,0 +1,84 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+export class PerformanceMonitor {
+  fps = [];
+  renderTimes = [];
+  updateCount = 0;
+  startTime = performance.now();
+  maxMetrics = 60; // Keep 60 data points
+  start() {
+    // Monitor performance periodically
+    setInterval(() => {
+      this.recordMetrics();
+    }, 1000);
+  }
+  recordFPS(fps) {
+    this.fps.push(fps);
+    if (this.fps.length > this.maxMetrics) {
+      this.fps.shift();
+    }
+  }
+  recordRenderTime(duration) {
+    this.renderTimes.push(duration);
+    if (this.renderTimes.length > this.maxMetrics) {
+      this.renderTimes.shift();
+    }
+  }
+  recordUpdate() {
+    this.updateCount++;
+  }
+  recordMetrics() {
+    // Record memory usage if available
+    const memory = performance.memory;
+    if (memory) {
+      // Memory is in bytes, convert to MB
+      const memoryMb = Math.round(memory.usedJSHeapSize / 1024 / 1024);
+      return {
+        fps: [...this.fps],
+        renderTime: [...this.renderTimes],
+        updateCount: this.updateCount,
+        memoryUsage: memoryMb,
+        timestamp: performance.now() - this.startTime,
+      };
+    }
+  }
+  getMetrics() {
+    const memory = performance.memory;
+    const memoryMb = memory
+      ? Math.round(memory.usedJSHeapSize / 1024 / 1024)
+      : 0;
+    return {
+      fps: [...this.fps],
+      renderTime: [...this.renderTimes],
+      updateCount: this.updateCount,
+      memoryUsage: memoryMb,
+      timestamp: performance.now() - this.startTime,
+    };
+  }
+  getAverageFPS() {
+    if (this.fps.length === 0) return 0;
+    return Math.round(this.fps.reduce((a, b) => a + b, 0) / this.fps.length);
+  }
+  getAverageRenderTime() {
+    if (this.renderTimes.length === 0) return 0;
+    return Math.round(
+      this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length,
+    );
+  }
+  getLastFPS() {
+    return this.fps.length > 0 ? this.fps[this.fps.length - 1] : 0;
+  }
+  getLastRenderTime() {
+    return this.renderTimes.length > 0
+      ? this.renderTimes[this.renderTimes.length - 1]
+      : 0;
+  }
+  reset() {
+    this.fps = [];
+    this.renderTimes = [];
+    this.updateCount = 0;
+    this.startTime = performance.now();
+  }
+}

package/templates/static/lib/devtools/persistence.js

@@ -0,0 +1,57 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+const STORAGE_KEY = "__jen_devtools_config__";
+export class PersistenceManager {
+  loadConfig() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? JSON.parse(stored) : {};
+    } catch {
+      return {};
+    }
+  }
+  saveConfig(config) {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+    } catch (e) {
+      console.error("Failed to save DevTools config:", e);
+    }
+  }
+  loadComponentState(componentId) {
+    try {
+      const stored = localStorage.getItem(`__jen_component_${componentId}__`);
+      return stored ? JSON.parse(stored) : null;
+    } catch {
+      return null;
+    }
+  }
+  saveComponentState(componentId, state) {
+    try {
+      localStorage.setItem(
+        `__jen_component_${componentId}__`,
+        JSON.stringify(state),
+      );
+    } catch (e) {
+      console.error("Failed to save component state:", e);
+    }
+  }
+  clearComponentState(componentId) {
+    try {
+      localStorage.removeItem(`__jen_component_${componentId}__`);
+    } catch (e) {
+      console.error("Failed to clear component state:", e);
+    }
+  }
+  clearAll() {
+    try {
+      const keys = Object.keys(localStorage).filter((k) =>
+        k.startsWith("__jen_"),
+      );
+      keys.forEach((key) => localStorage.removeItem(key));
+    } catch (e) {
+      console.error("Failed to clear storage:", e);
+    }
+  }
+}

package/templates/static/lib/devtools/plugins.js

@@ -0,0 +1,97 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+export class PluginSystem {
+  plugins = new Map();
+  factories = new Map();
+  eventBus;
+  constructor(eventBus) {
+    this.eventBus = eventBus;
+  }
+  register(name, factory) {
+    if (this.plugins.has(name)) {
+      console.warn(`Plugin "${name}" is already registered`);
+      return;
+    }
+    this.factories.set(name, factory);
+    this.eventBus.emit("plugin:registered", { name });
+  }
+  load(name, devtools) {
+    if (this.plugins.has(name)) {
+      console.warn(`Plugin "${name}" is already loaded`);
+      return false;
+    }
+    const factory = this.factories.get(name);
+    if (!factory) {
+      console.error(`Plugin "${name}" not found`);
+      return false;
+    }
+    try {
+      const plugin = factory(devtools);
+      plugin.setup();
+      this.plugins.set(name, plugin);
+      this.eventBus.emit("plugin:loaded", { name });
+      return true;
+    } catch (e) {
+      console.error(`Failed to load plugin "${name}":`, e);
+      return false;
+    }
+  }
+  unload(name) {
+    const plugin = this.plugins.get(name);
+    if (!plugin) {
+      console.warn(`Plugin "${name}" is not loaded`);
+      return false;
+    }
+    try {
+      if (plugin.teardown) {
+        plugin.teardown();
+      }
+      this.plugins.delete(name);
+      this.eventBus.emit("plugin:unloaded", { name });
+      return true;
+    } catch (e) {
+      console.error(`Failed to unload plugin "${name}":`, e);
+      return false;
+    }
+  }
+  get(name) {
+    return this.plugins.get(name);
+  }
+  getAll() {
+    return Array.from(this.plugins.values());
+  }
+  getRegistered() {
+    return Array.from(this.factories.keys());
+  }
+  loadAll(devtools) {
+    let allSuccess = true;
+    for (const name of this.factories.keys()) {
+      if (!this.load(name, devtools)) {
+        allSuccess = false;
+      }
+    }
+    return allSuccess;
+  }
+  unloadAll() {
+    let allSuccess = true;
+    for (const name of Array.from(this.plugins.keys())) {
+      if (!this.unload(name)) {
+        allSuccess = false;
+      }
+    }
+    return allSuccess;
+  }
+}
+/**
+ * Create a custom plugin easily
+ */
+export function createPlugin(config) {
+  return () => ({
+    name: config.name,
+    version: config.version,
+    setup: config.setup,
+    teardown: config.teardown,
+  });
+}

package/templates/static/lib/devtools/search.js

@@ -0,0 +1,89 @@
+/*
+ * This file is part of Jen.js.
+ * Copyright (C) 2026 oopsio
+ */
+export class SearchManager {
+  tree;
+  constructor(tree) {
+    this.tree = tree;
+  }
+  search(query) {
+    if (!query || query.length === 0) {
+      return [];
+    }
+    const lowerQuery = query.toLowerCase();
+    const allComponents = this.tree.getAllComponents();
+    return allComponents.filter((component) => {
+      // Search by component name
+      if (component.name.toLowerCase().includes(lowerQuery)) {
+        return true;
+      }
+      // Search by component type
+      if (component.type.toLowerCase().includes(lowerQuery)) {
+        return true;
+      }
+      // Search by props
+      for (const [key, value] of Object.entries(component.props)) {
+        if (
+          key.toLowerCase().includes(lowerQuery) ||
+          this.valueMatches(value, lowerQuery)
+        ) {
+          return true;
+        }
+      }
+      // Search by state
+      for (const [key, value] of Object.entries(component.state)) {
+        if (
+          key.toLowerCase().includes(lowerQuery) ||
+          this.valueMatches(value, lowerQuery)
+        ) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  valueMatches(value, query) {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (typeof value === "string") {
+      return value.toLowerCase().includes(query);
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value).toLowerCase().includes(query);
+    }
+    if (typeof value === "object") {
+      try {
+        const json = JSON.stringify(value).toLowerCase();
+        return json.includes(query);
+      } catch {
+        return false;
+      }
+    }
+    return false;
+  }
+  searchByName(name) {
+    const lowerName = name.toLowerCase();
+    return this.tree
+      .getAllComponents()
+      .filter((c) => c.name.toLowerCase().includes(lowerName));
+  }
+  searchByType(type) {
+    const lowerType = type.toLowerCase();
+    return this.tree
+      .getAllComponents()
+      .filter((c) => c.type.toLowerCase().includes(lowerType));
+  }
+  searchByProp(propName, propValue) {
+    return this.tree.getAllComponents().filter((c) => {
+      if (!(propName in c.props)) {
+        return false;
+      }
+      if (propValue === undefined) {
+        return true;
+      }
+      return c.props[propName] === propValue;
+    });
+  }
+}