lego-dom 1.0.0 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lego-dom",
-  "version": "1.0.0",
+  "version": "1.3.4",
   "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",
@@ -22,17 +22,19 @@
   "author": "Tersoo Ortserga",
   "scripts": {
     "test": "vitest run",
+    "build": "esbuild main.js --minify --outfile=main.min.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
+    "esbuild": "^0.27.2",
     "jsdom": "^22.0.0",
     "vitepress": "^1.6.4",
     "vitest": "^1.0.0"
   },
   "peerDependencies": {
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": ">=4.0.0"
   },
   "peerDependenciesMeta": {
     "vite": {

package/parse-lego.js

@@ -14,33 +14,61 @@ export function parseLego(content, filename = 'component.lego') {
     template: '',
     script: '',
     style: '',
-    stylesAttr: '', // Stores the value of the b-styles attribute
+    stylesAttr: '',
     componentName: deriveComponentName(filename)
   };
 
-  // Updated to capture attributes on the template tag (like b-styles)
-  const templateMatch = content.match(/<template([\s\S]*?)>([\s\S]*?)<\/template>/);
-  if (templateMatch) {
-    const attrs = templateMatch[1];
-    result.template = templateMatch[2].trim();
+  let remaining = content;
 
-    // Extract b-styles value from the attributes string
-    const bStylesMatch = attrs.match(/b-styles=["']([^"']+)["']/);
-    if (bStylesMatch) {
-      result.stylesAttr = bStylesMatch[1];
+  // Regex to match the start tag of a section, handling attributes with quotes correctly
+  // <(template|script|style) matches the tag name
+  // \b ensures we don't match templates inside "template-foo"
+  // (?: ... )* loops over attributes
+  // \s+ requires space before attributes
+  // (?:[^>"']|"[^"]*"|'[^']*')* matches attribute content, respecting quotes to skip >
+  const startTagRegex = /<(template|script|style)\b((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/i;
+
+  while (remaining) {
+    const match = remaining.match(startTagRegex);
+    if (!match) break;
+
+    const tagName = match[1].toLowerCase();
+    const attrs = match[2]; // Captures all attributes
+    const fullMatch = match[0];
+    const startIndex = match.index;
+
+    // Find the corresponding closing tag
+    const closeTag = `</${tagName}>`;
+
+    // Content starts after the opening tag
+    const contentStart = startIndex + fullMatch.length;
+
+    // Find the closing tag starting from where content began
+    const contentEnd = remaining.indexOf(closeTag, contentStart);
+
+    if (contentEnd === -1) {
+      // If no closing tag found, we can't safely parse this block
+      console.warn(`[Lego] Unclosed <${tagName}> tag in ${filename}`);
+      break;
     }
-  }
 
-  // Extract script section
-  const scriptMatch = content.match(/<script>([\s\S]*?)<\/script>/);
-  if (scriptMatch) {
-    result.script = scriptMatch[1].trim();
-  }
+    const innerContent = remaining.slice(contentStart, contentEnd);
+
+    if (tagName === 'template') {
+      result.template = innerContent.trim();
+      // Extract b-styles attribute if present
+      const bStylesMatch = attrs.match(/b-styles=["']([^"']+)["']/);
+      if (bStylesMatch) {
+        result.stylesAttr = bStylesMatch[1];
+      }
+    } else if (tagName === 'script') {
+      result.script = innerContent.trim();
+    } else if (tagName === 'style') {
+      result.style = innerContent.trim();
+    }
 
-  // Extract style section
-  const styleMatch = content.match(/<style>([\s\S]*?)<\/style>/);
-  if (styleMatch) {
-    result.style = styleMatch[1].trim();
+    // Advance past this block (content + closing tag)
+    remaining = remaining.slice(contentEnd + closeTag.length);
   }
 
   return result;
@@ -59,7 +87,6 @@ export function deriveComponentName(filename) {
 
 /**
  * Generate Lego.define() code from parsed .lego file
- * Updated to include the 4th argument for styles
  * @param {object} parsed - Parsed .lego file object
  * @returns {string} - JavaScript code string
  */
@@ -88,7 +115,7 @@ export function generateDefineCall(parsed) {
     }
   }
 
-  // Generate the Lego.define call with the new 4th argument (stylesAttr)
+  // Generate the Lego.define call
   return `Lego.define('${componentName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode}, '${stylesAttr}');`;
 }
 

package/tests/error.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+
+// Setup Mock DOM
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+Object.defineProperty(global, 'navigator', {
+  value: dom.window.navigator,
+  writable: true,
+  configurable: true
+});
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('LegoDOM Error Handling', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    await window.Lego.init(document.body);
+  });
+
+  it('should catch errors in rendering and call onError', async () => {
+    const errorSpy = vi.fn();
+    window.Lego.config.onError = errorSpy;
+
+    // Define a component that throws an error when accessing a property used in template
+    window.Lego.define('error-comp', '<div>[[ throwErr() ]]</div>', {
+      throwErr() {
+        throw new Error('Render Failure');
+      }
+    });
+
+    const el = document.createElement('error-comp');
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    expect(errorSpy).toHaveBeenCalled();
+    expect(errorSpy.mock.calls[0][1]).toBe('render-error');
+  });
+
+  it('should catch errors in event handlers', async () => {
+    const errorSpy = vi.fn();
+    window.Lego.config.onError = errorSpy;
+
+    window.Lego.define('btn-error', '<button @click="crash()">Crash</button>', {
+      crash() { throw new Error('Boom'); }
+    });
+
+    const el = document.createElement('btn-error');
+    document.body.appendChild(el);
+    await new Promise(r => setTimeout(r, 100));
+
+    el.shadowRoot.querySelector('button').click();
+
+    expect(errorSpy).toHaveBeenCalled();
+    expect(errorSpy.mock.calls[0][1]).toBe('event-handler');
+  });
+});

package/tests/main.test.js

@@ -54,7 +54,7 @@ describe('Lego JS Node Environment Tests', () => {
   });
 
   it('should reactively update text content', async () => {
-    window.Lego.define('test-comp', '<span>{{msg}}</span>');
+    window.Lego.define('test-comp', '<span>[[msg]]</span>');
     const el = document.createElement('test-comp');
     el.setAttribute('b-data', "{ msg: 'hello' }");
     document.body.appendChild(el);
@@ -74,7 +74,7 @@ describe('Lego JS Node Environment Tests', () => {
   });
 
   it('should prevent XSS via auto-escaping', async () => {
-    window.Lego.define('xss-comp', '<div>{{code}}</div>');
+    window.Lego.define('xss-comp', '<div>[[code]]</div>');
     const el = document.createElement('xss-comp');
     el.setAttribute('b-data', "{ code: '<script>alert(1)</script>' }");
     document.body.appendChild(el);

package/tests/memory.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+Object.defineProperty(global, 'navigator', {
+  value: dom.window.navigator,
+  writable: true,
+  configurable: true
+});
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('LegoDOM Memory Management', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    await window.Lego.init(document.body);
+  });
+
+  it('should cleanup activeComponents when elements are removed', async () => {
+    window.Lego.define('mem-comp', '<div>Hi</div>');
+
+    // Mount
+    const el = document.createElement('mem-comp');
+    document.body.appendChild(el);
+    await new Promise(r => setTimeout(r, 100)); // Wait for observer
+
+    expect(window.Lego.getActiveComponentsCount()).toBe(1);
+
+    // Unmount
+    el.remove();
+    await new Promise(r => setTimeout(r, 100)); // Wait for observer
+
+    expect(window.Lego.getActiveComponentsCount()).toBe(0);
+  });
+
+  it('should cleanup nested components recursively', async () => {
+    window.Lego.define('parent-comp', '<child-comp></child-comp>');
+    window.Lego.define('child-comp', '<span>Child</span>');
+
+    const el = document.createElement('parent-comp');
+    document.body.appendChild(el);
+    await new Promise(r => setTimeout(r, 100));
+
+    expect(window.Lego.getActiveComponentsCount()).toBe(2); // Parent + Child
+
+    el.remove();
+    await new Promise(r => setTimeout(r, 100));
+
+    expect(window.Lego.getActiveComponentsCount()).toBe(0);
+  });
+});

package/tests/monitoring.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+import { Monitoring } from '../monitoring-plugin.js';
+
+// Setup Mock DOM with Performance API
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+global.performance = {
+  mark: vi.fn(),
+  measure: vi.fn(),
+  getEntriesByName: vi.fn(() => [{ duration: 20 }]), // Mock 20ms render
+  clearMarks: vi.fn(),
+  clearMeasures: vi.fn()
+};
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('LegoDOM Monitoring Plugin', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    await window.Lego.init(document.body);
+    Monitoring.install(window.Lego, { reportToConsole: false });
+    window.Lego.metrics.reset();
+  });
+
+  it('should track render count and duration', async () => {
+    window.Lego.define('monitor-test', '<div>[[ msg ]]</div>');
+    const el = document.createElement('monitor-test');
+    el.setAttribute('b-data', "{ msg: 'hello' }");
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const metrics = window.Lego.metrics.get();
+    expect(metrics.renders).toBeGreaterThan(0);
+
+    const stats = metrics.components.get('monitor-test');
+    expect(stats).toBeDefined();
+    expect(stats.count).toBe(1);
+    // Since we mocked getEntriesByName to return 20ms
+    expect(stats.avg).toBe(20);
+    expect(metrics.slowRenders).toBe(1); // 20ms > 16ms threshold
+  });
+
+  it('should track errors via the hooked onError handler', async () => {
+    window.Lego.define('monitor-error', '<div>[[ throwErr() ]]</div>', {
+      throwErr() { throw new Error('Monitor Fail'); }
+    });
+
+    const el = document.createElement('monitor-error');
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const metrics = window.Lego.metrics.get();
+    expect(metrics.errors).toBe(1);
+  });
+});

package/tests/naming.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+Object.defineProperty(global, 'navigator', { value: dom.window.navigator });
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.fetch = vi.fn();
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('Component Naming Policy', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const define = (filename) => {
+    const sfc = `<template><div>Test</div></template>`;
+    window.Lego.defineSFC(sfc, filename);
+  };
+
+  it('should support kebab-case (standard)', () => {
+    define('user-card.lego');
+    expect(document.querySelector('user-card')).toBeDefined();
+  });
+
+  it('should auto-convert PascalCase to kebab-case', () => {
+    define('UserProfile.lego');
+    const el = document.createElement('user-profile');
+    document.body.appendChild(el);
+    expect(el.shadowRoot).toBeDefined();
+  });
+
+  it('should auto-convert camelCase to kebab-case', () => {
+    define('navBar.lego');
+    const el = document.createElement('nav-bar');
+    document.body.appendChild(el);
+    expect(el.shadowRoot).toBeDefined();
+  });
+
+  it('should auto-convert snake_case to kebab-case', () => {
+    define('data_table.lego');
+    const el = document.createElement('data-table');
+    document.body.appendChild(el);
+    expect(el.shadowRoot).toBeDefined();
+  });
+
+  it('should throw error for single-word PascalCase (no hyphen result)', () => {
+    expect(() => define('Button.lego')).toThrow(/Invalid component definition/);
+  });
+
+  it('should throw error for single-word lowercase', () => {
+    expect(() => define('table.lego')).toThrow(/Invalid component definition/);
+  });
+
+  it('should throw error for single-word brand name', () => {
+    expect(() => define('adidas.lego')).toThrow(/Invalid component definition/);
+  });
+});

package/tests/parse-lego.test.js

@@ -15,7 +15,7 @@ describe('parse-lego tests', () => {
   it('should extract attributes from template', () => {
     const sfcContent = `
 <template b-styles="tailwind chartist" b-id="ignored">
-  <div class="p-4">Hello {{name}}</div>
+  <div class="p-4">Hello [[name]]</div>
 </template>
 <script>
 export default { mounted() { console.log('hi') } }
@@ -27,7 +27,7 @@ export default { mounted() { console.log('hi') } }
     const parsed = parseLego(sfcContent, 'user-profile.lego');
     expect(parsed.componentName).toBe('user-profile');
     expect(parsed.stylesAttr).toBe('tailwind chartist');
-    expect(parsed.template).toContain('{{name}}');
+    expect(parsed.template).toContain('[[name]]');
     expect(parsed.script).toContain('mounted');
     expect(parsed.style).toContain('color: red');
   });

package/tests/security.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+Object.defineProperty(global, 'navigator', {
+  value: dom.window.navigator,
+  writable: true,
+  configurable: true
+});
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+// Load LegoDOM
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('LegoDOM Security', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    await window.Lego.init(document.body);
+  });
+
+  it('should block dangerous expressions in safeEval', async () => {
+    // This test expects the framework to BLOCK access to Function constructor
+    window.Lego.define('pwn-comp', '<div>[[ (function(){ window.pwned = true; })() ]]</div>');
+    const el = document.createElement('pwn-comp');
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    // Should NOT have executed
+    expect(window.pwned).toBeUndefined();
+  });
+
+  it('should block access to global sensitive objects', async () => {
+    // Try to access global 'process' or 'window' explicitly if possible
+    window.Lego.define('env-comp', '<div>[[ window.location.href ]]</div>');
+    const el = document.createElement('env-comp');
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    // Ideally this should be blocked or restricted, 
+    // but for now we focus on preventing arbitrary code execution via constructors
+    // If strict mode is on, accessing window might be allowed but defining new functions should be bad.
+  });
+
+  it('should safely render HTML with b-html but potentially expose XSS if unchecked', async () => {
+    // b-html doesn't exist yet, but we will add it.
+    // If we add it, we want to ensure it works.
+  });
+});

package/tests/server.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import path from 'path';
+
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  runScripts: "dangerously",
+  resources: "usable"
+});
+
+global.window = dom.window;
+global.document = dom.window.document;
+Object.defineProperty(global, 'navigator', { value: dom.window.navigator });
+global.HTMLElement = dom.window.HTMLElement;
+global.customElements = dom.window.customElements;
+global.MutationObserver = dom.window.MutationObserver;
+global.Node = dom.window.Node;
+global.NodeFilter = dom.window.NodeFilter;
+global.Element = dom.window.Element;
+global.Event = dom.window.Event;
+global.fetch = vi.fn();
+global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
+const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
+eval(libCode);
+
+describe('LegoDOM Server-Side Components', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('should auto-load undefined components via loader config', async () => {
+    // 1. Mock the server response
+    const mockSFC = `
+      <template>
+        <div class="remote-box">Loaded from Server: [[ msg ]]</div>
+      </template>
+      <script>
+        export default { msg: 'Remote Data' }
+      </script>
+      <style>
+        .remote-box { color: blue; }
+      </style>
+    `;
+
+    global.fetch.mockResolvedValue({
+      text: () => Promise.resolve(mockSFC)
+    });
+
+    // 2. Initialize with loader
+    await window.Lego.init(document.body, {
+      loader: (tag) => {
+        if (tag === 'remote-widget') return '/components/remote-widget.lego';
+        return null;
+      }
+    });
+
+    // 3. Inject undefined component
+    const el = document.createElement('remote-widget');
+    document.body.appendChild(el);
+
+    // Wait for fetch + parse + render
+    await new Promise(r => setTimeout(r, 100));
+
+    // 4. Verify fetch called
+    expect(global.fetch).toHaveBeenCalledWith('/components/remote-widget.lego');
+
+    // 5. Verify render
+    expect(el.shadowRoot).toBeDefined();
+    expect(el.shadowRoot.textContent).toContain('Loaded from Server: Remote Data');
+
+    // 6. Verify style injection
+    const styles = el.shadowRoot.querySelector('style');
+    expect(styles.textContent).toContain('.remote-box { color: blue; }');
+  });
+
+  it('should support async loader (Promise) for custom fetching', async () => {
+    // Simulate user doing their own authenticated fetch
+    const mockSFC = `<template><div>Async Auth Content</div></template>`;
+
+    await window.Lego.init(document.body, {
+      loader: async (tag) => {
+        if (tag === 'auth-widget') {
+          // Simulate network delay
+          await new Promise(r => setTimeout(r, 10));
+          return mockSFC;
+        }
+      }
+    });
+
+    const el = document.createElement('auth-widget');
+    document.body.appendChild(el);
+
+    // Wait for async loader
+    await new Promise(r => setTimeout(r, 100));
+
+    expect(el.shadowRoot).toBeDefined();
+    expect(el.shadowRoot.textContent).toContain('Async Auth Content');
+  });
+
+  it('should fail gracefully if loader returns null', async () => {
+    await window.Lego.init(document.body, {
+      loader: () => null
+    });
+
+    const el = document.createElement('unknown-widget');
+    document.body.appendChild(el);
+
+    await new Promise(r => setTimeout(r, 50));
+    expect(global.fetch).not.toHaveBeenCalled();
+    expect(el.shadowRoot).toBeNull();
+  });
+});