meno-core 1.0.4 → 1.0.5

package/lib/client/index.ts

@@ -1,5 +1,5 @@
 /**
- * @meno/core/client exports
+ * meno-core/client exports
  * Core client-side utilities for page rendering and routing
  * Does NOT include editor-specific code (that's in @meno/studio)
  */

package/lib/client/scripts/ScriptExecutor.test.ts

@@ -8,13 +8,11 @@ describe("ScriptExecutor", () => {
   let componentRegistry: ComponentRegistry;
   let elementRegistry: ElementRegistry;
   let scriptExecutor: ScriptExecutor;
-  let injectedScripts: Map<string, { id: string; textContent: string }>;
-  let originalDocument: typeof document;
+  let executedCode: string[];
+  let originalFunction: typeof Function;
+  let functionSpy: ReturnType<typeof spyOn>;
 
   beforeEach(() => {
-    // Save original document
-    originalDocument = global.document;
-
     componentRegistry = new ComponentRegistry();
     elementRegistry = new ElementRegistry();
     scriptExecutor = new ScriptExecutor({
@@ -22,38 +20,25 @@ describe("ScriptExecutor", () => {
       elementRegistry,
     });
 
-    // Track injected script tags
-    injectedScripts = new Map();
-
-    // Mock document for script tag injection
-    global.document = {
-      createElement: mock((tag: string) => {
-        const element = {
-          tagName: tag.toUpperCase(),
-          id: '',
-          type: '',
-          textContent: '',
-        };
-        return element;
-      }),
-      getElementById: mock((id: string) => {
-        const script = injectedScripts.get(id);
-        return script ? { id: script.id, remove: () => injectedScripts.delete(id) } : null;
-      }),
-      body: {
-        appendChild: mock((script: any) => {
-          if (script.tagName === 'SCRIPT') {
-            injectedScripts.set(script.id, { id: script.id, textContent: script.textContent });
-          }
-        }),
-      },
-    } as any;
+    // Track executed code by intercepting Function constructor
+    executedCode = [];
+    originalFunction = global.Function;
+    functionSpy = spyOn(global, "Function").mockImplementation(((...args: any[]) => {
+      if (args.length > 0 && typeof args[args.length - 1] === 'string') {
+        const code = args[args.length - 1];
+        // Only track ScriptExecutor calls (they contain "Component:" comment)
+        if (code.includes('Component:')) {
+          executedCode.push(code);
+        }
+      }
+      // Return a function that executes the code
+      return originalFunction(...args) as any;
+    }) as unknown as FunctionConstructor);
   });
 
   afterEach(() => {
-    injectedScripts.clear();
-    // Restore original document
-    global.document = originalDocument;
+    functionSpy.mockRestore();
+    executedCode = [];
   });
 
   describe("constructor", () => {
@@ -80,7 +65,7 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      expect(injectedScripts.size).toBe(0);
+      expect(executedCode.length).toBe(0);
     });
 
     test("should execute JavaScript without templates once", () => {
@@ -97,11 +82,9 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      expect(injectedScripts.size).toBe(1);
-      const script = injectedScripts.get("meno-script-TestComponent");
-      expect(script).toBeDefined();
-      expect(script!.textContent).toContain("Component: TestComponent");
-      expect(script!.textContent).toContain("console.log('test');");
+      expect(executedCode.length).toBe(1);
+      expect(executedCode[0]).toContain("Component: TestComponent");
+      expect(executedCode[0]).toContain("console.log('test');");
     });
 
     // Template-based tests require full ElementRegistry from @meno/studio
@@ -118,8 +101,8 @@ describe("ScriptExecutor", () => {
       componentRegistry.register("TestComponent", componentDef);
 
       // Register component instances with props
-      const mockElement1 = originalDocument.createElement("div");
-      const mockElement2 = originalDocument.createElement("div");
+      const mockElement1 = document.createElement("div");
+      const mockElement2 = document.createElement("div");
       elementRegistry.register([0], mockElement1, "TestComponent", true, {
         name: "Instance1",
       });
@@ -129,8 +112,8 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      // Each instance gets its own script tag
-      expect(injectedScripts.size).toBe(2);
+      // Each instance gets its own execution
+      expect(executedCode.length).toBe(2);
     });
 
     test("should execute JavaScript without templates only once for multiple instances", () => {
@@ -146,8 +129,8 @@ describe("ScriptExecutor", () => {
       componentRegistry.register("TestComponent", componentDef);
 
       // Register multiple instances
-      const mockElement1 = originalDocument.createElement("div");
-      const mockElement2 = originalDocument.createElement("div");
+      const mockElement1 = document.createElement("div");
+      const mockElement2 = document.createElement("div");
       elementRegistry.register([0], mockElement1, "TestComponent", true, {
         name: "Instance1",
       });
@@ -157,12 +140,10 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      // Should only inject one script (no templates - executes once per component type)
-      expect(injectedScripts.size).toBe(1);
-      const script = injectedScripts.get("meno-script-TestComponent");
-      expect(script).toBeDefined();
-      expect(script!.textContent).toContain("Component: TestComponent");
-      expect(script!.textContent).toContain("console.log('test');");
+      // Should only execute once (no templates - executes once per component type)
+      expect(executedCode.length).toBe(1);
+      expect(executedCode[0]).toContain("Component: TestComponent");
+      expect(executedCode[0]).toContain("console.log('test');");
     });
 
     test.skip("should handle multiple components with mixed template/non-template JavaScript (requires @meno/studio ElementRegistry)", () => {
@@ -187,16 +168,16 @@ describe("ScriptExecutor", () => {
       componentRegistry.register("Component1", componentDef1);
       componentRegistry.register("Component2", componentDef2);
 
-      const mockElement = originalDocument.createElement("div");
+      const mockElement = document.createElement("div");
       elementRegistry.register([0], mockElement, "Component2", true, {
         name: "Component2Instance",
       });
 
       scriptExecutor.execute();
 
-      // Component1: 1 script tag (no templates)
-      // Component2: 1 script tag (with templates, 1 instance)
-      expect(injectedScripts.size).toBe(2);
+      // Component1: 1 execution (no templates)
+      // Component2: 1 execution (with templates, 1 instance)
+      expect(executedCode.length).toBe(2);
     });
 
     test("should handle fallback for components without instances", () => {
@@ -326,11 +307,9 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.execute();
 
-      expect(injectedScripts.size).toBe(1);
-      const script = injectedScripts.get("meno-script-TestComponent");
-      expect(script).toBeDefined();
-      expect(script!.textContent).toContain("(function()");
-      expect(script!.textContent).toContain("})();");
+      expect(executedCode.length).toBe(1);
+      expect(executedCode[0]).toContain("(function()");
+      expect(executedCode[0]).toContain("})();");
     });
   });
 
@@ -359,12 +338,10 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.executeForComponent("Component1");
 
-      // Only Component1 should be injected
-      expect(injectedScripts.size).toBe(1);
-      const script = injectedScripts.get("meno-script-Component1");
-      expect(script).toBeDefined();
-      expect(script!.textContent).toContain("Component: Component1");
-      expect(script!.textContent).toContain("console.log('Component1');");
+      // Only Component1 should be executed
+      expect(executedCode.length).toBe(1);
+      expect(executedCode[0]).toContain("Component: Component1");
+      expect(executedCode[0]).toContain("console.log('Component1');");
     });
 
     test.skip("should execute JavaScript with templates for specific component (requires @meno/studio ElementRegistry)", () => {
@@ -379,8 +356,8 @@ describe("ScriptExecutor", () => {
 
       componentRegistry.register("TestComponent", componentDef);
 
-      const mockElement1 = originalDocument.createElement("div");
-      const mockElement2 = originalDocument.createElement("div");
+      const mockElement1 = document.createElement("div");
+      const mockElement2 = document.createElement("div");
       elementRegistry.register([0], mockElement1, "TestComponent", true, {
         name: "Instance1",
       });
@@ -390,8 +367,8 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.executeForComponent("TestComponent");
 
-      // Each instance gets its own script tag
-      expect(injectedScripts.size).toBe(2);
+      // Each instance gets its own execution
+      expect(executedCode.length).toBe(2);
     });
 
     test("should skip if component has no JavaScript", () => {
@@ -407,7 +384,7 @@ describe("ScriptExecutor", () => {
 
       scriptExecutor.executeForComponent("TestComponent");
 
-      expect(injectedScripts.size).toBe(0);
+      expect(executedCode.length).toBe(0);
     });
 
     test("should handle non-existent component gracefully", () => {

package/lib/client/scripts/ScriptExecutor.ts

@@ -42,7 +42,6 @@ function generateDestructure(
 export class ScriptExecutor {
   private componentRegistry: ComponentRegistry;
   private elementRegistry: ElementRegistry;
-  private injectedScripts: Set<string> = new Set();
 
   constructor(config: ScriptExecutorConfig) {
     this.componentRegistry = config.componentRegistry;
@@ -50,54 +49,31 @@ export class ScriptExecutor {
   }
 
   /**
-   * Inject JavaScript as a separate script tag for browser-level isolation
-   * Each component gets its own script tag - syntax errors in one don't affect others
-   * @param jsCode - JavaScript code to inject
-   * @param componentName - Component name for identification
-   * @param instanceId - Optional instance ID for per-instance scripts
+   * Execute JavaScript code via new Function() with error isolation
+   * Uses new Function() instead of script tags to avoid CSP violations
+   * Each component is wrapped in try-catch for isolation
+   * @param jsCode - JavaScript code to execute
+   * @param componentName - Component name for error reporting
    * @private
    */
-  private injectScriptTag(jsCode: string, componentName: string, instanceId?: string): void {
+  private executeWrappedJS(jsCode: string, componentName: string): void {
     if (!jsCode || !jsCode.trim()) return;
-    if (typeof document === 'undefined') return;
 
-    const scriptId = instanceId
-      ? `meno-script-${componentName}-${instanceId}`
-      : `meno-script-${componentName}`;
+    const wrappedJS = `(function() {
+      // Component: ${componentName}
+      try {
+        ${jsCode}
+      } catch (e) {
+        console.error('[Meno] Runtime error in ' + ${JSON.stringify(componentName)} + ':', e);
+      }
+    })();`;
 
-    // Remove existing script with same ID to allow re-execution
-    const existing = document.getElementById(scriptId);
-    if (existing) {
-      existing.remove();
+    try {
+      new Function(wrappedJS)();
+    } catch (syntaxError) {
+      // Syntax errors caught here - doesn't affect other components
+      console.error(`[Meno] Syntax error in ${componentName}:`, syntaxError);
     }
-
-    const script = document.createElement('script');
-    script.id = scriptId;
-    script.type = 'text/javascript';
-    script.textContent = `(function() {
-  // Component: ${componentName}${instanceId ? ` (instance: ${instanceId})` : ''}
-  try {
-    ${jsCode}
-  } catch (e) {
-    console.error('[Meno] Error in ${componentName}:', e);
-  }
-})();`;
-
-    document.body.appendChild(script);
-    this.injectedScripts.add(scriptId);
-  }
-
-  /**
-   * Execute JavaScript code via script tag injection for browser-level isolation
-   * @param jsCode - JavaScript code to execute
-   * @param componentName - Component name for identification
-   * @param rootPath - Optional root path for instance-specific scripts
-   * @private
-   */
-  private executeWrappedJS(jsCode: string, componentName: string, rootPath?: string): void {
-    // Convert rootPath to a safe ID (replace special chars)
-    const instanceId = rootPath ? rootPath.replace(/[^a-zA-Z0-9]/g, '-') : undefined;
-    this.injectScriptTag(jsCode, componentName, instanceId);
   }
 
   /**
@@ -117,10 +93,10 @@ export class ScriptExecutor {
 
       try {
         const processedJS = processCodeTemplates(originalJS, props);
-        this.executeWrappedJS(processedJS, componentName, rootPath);
+        this.executeWrappedJS(processedJS, `${componentName} (instance: ${rootPath})`);
       } catch (templateError) {
         // Fallback to original JS if template processing fails (similar to StyleInjector)
-        this.executeWrappedJS(originalJS, componentName, rootPath);
+        this.executeWrappedJS(originalJS, `${componentName} (instance: ${rootPath})`);
       }
     } catch (e) {
       logRuntimeError('ScriptExecutor.executeInstanceJS', e, { componentName, rootPath });
@@ -144,17 +120,28 @@ export class ScriptExecutor {
   ): void {
     const destructure = generateDestructure(defineVars, interfaceDef);
 
-    const initJS = `var elements = document.querySelectorAll('[data-component="${componentName}"]');
-elements.forEach(function(el) {
-  var propsStr = el.getAttribute('data-props');
-  var props = propsStr ? JSON.parse(propsStr) : {};
-  (function(el, props) {
-    ${destructure}
-    ${js}
-  })(el, props);
-});`;
-
-    this.injectScriptTag(initJS, componentName + '-init');
+    const wrappedJS = `(function() {
+      // Component: ${componentName} (defineVars)
+      try {
+        var elements = document.querySelectorAll('[data-component="${componentName}"]');
+        elements.forEach(function(el) {
+          var propsStr = el.getAttribute('data-props');
+          var props = propsStr ? JSON.parse(propsStr) : {};
+          (function(el, props) {
+            ${destructure}
+            ${js}
+          })(el, props);
+        });
+      } catch (e) {
+        console.error('[Meno] Runtime error in ${componentName}:', e);
+      }
+    })();`;
+
+    try {
+      new Function(wrappedJS)();
+    } catch (syntaxError) {
+      console.error(`[Meno] Syntax error in ${componentName}:`, syntaxError);
+    }
   }
 
   /**
@@ -317,20 +304,5 @@ elements.forEach(function(el) {
       logRuntimeError('ScriptExecutor.executeForElement', e, { componentName });
     }
   }
-
-  /**
-   * Remove all injected script tags (for cleanup on unmount/navigation)
-   */
-  cleanup(): void {
-    if (typeof document === 'undefined') return;
-
-    for (const scriptId of this.injectedScripts) {
-      const script = document.getElementById(scriptId);
-      if (script) {
-        script.remove();
-      }
-    }
-    this.injectedScripts.clear();
-  }
 }
 

package/lib/server/createServer.ts

@@ -1,6 +1,6 @@
 /**
  * Server Factory
- * Creates a configurable Bun server for @meno/core
+ * Creates a configurable Bun server for meno-core
  * Can be extended by @meno/studio for editor functionality
  */
 

package/lib/server/index.ts

@@ -1,5 +1,5 @@
 /**
- * @meno/core/server exports
+ * meno-core/server exports
  * Core server-side utilities for SSR and read APIs
  * Does NOT include editor-specific routes (that's in @meno/studio)
  */

package/lib/server/routes/api/core-routes.ts

@@ -1,6 +1,6 @@
 /**
  * Core API Routes (Read-only)
- * These routes are part of @meno/core and handle read operations
+ * These routes are part of meno-core and handle read operations
  */
 
 import { API_ROUTES } from '../../../shared/constants';

package/lib/server/routes/api/index.ts

@@ -50,7 +50,7 @@ export async function handleApiRoutes(
 }
 
 /**
- * Handle only core API routes (for @meno/core without editor)
+ * Handle only core API routes (for meno-core without editor)
  */
 export async function handleCoreOnlyApiRoutes(
   req: Request,

package/lib/shared/index.ts

@@ -1,5 +1,5 @@
 /**
- * @meno/core shared exports
+ * meno-core shared exports
  * Re-exports all types, constants, and utilities from shared modules
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"

package/tsconfig.json

@@ -5,8 +5,8 @@
     "outDir": "./dist",
     "baseUrl": ".",
     "paths": {
-      "@meno/core": ["./lib/shared/index.ts"],
-      "@meno/core/*": ["./lib/*"]
+      "meno-core": ["./lib/shared/index.ts"],
+      "meno-core/*": ["./lib/*"]
     }
   },
   "include": ["lib/**/*", "entries/**/*", "bin/**/*"],

package/vite.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@meno/core': path.resolve(__dirname, 'lib/shared/index.ts'),
+      'meno-core': path.resolve(__dirname, 'lib/shared/index.ts'),
     },
   },
 })