lego-dom 1.3.3 → 1.4.0

package/examples/vite-app/src/components/todo-list.lego

@@ -1,239 +0,0 @@
-<style>
-  self {
-    display: block;
-    background: white;
-    border-radius: 8px;
-    padding: 1.5rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  }
-
-  .input-group {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  input[type="text"] {
-    flex: 1;
-    padding: 0.75rem;
-    font-size: 1rem;
-    border: 2px solid #e0e0e0;
-    border-radius: 4px;
-  }
-
-  input[type="text"]:focus {
-    outline: none;
-    border-color: #4CAF50;
-  }
-
-  .btn {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: background 0.2s;
-  }
-
-  .btn-primary {
-    background: #4CAF50;
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background: #45a049;
-  }
-
-  .filters {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .filter-btn {
-    padding: 0.5rem 1rem;
-    background: #f0f0f0;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .filter-btn.active {
-    background: #4CAF50;
-    color: white;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem;
-    border-bottom: 1px solid #f0f0f0;
-    transition: background 0.2s;
-  }
-
-  li:hover {
-    background: #f9f9f9;
-  }
-
-  input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-  }
-
-  .todo-text {
-    flex: 1;
-    font-size: 1rem;
-  }
-
-  .todo-text.done {
-    text-decoration: line-through;
-    color: #999;
-  }
-
-  .delete-btn {
-    padding: 0.25rem 0.5rem;
-    background: #f44336;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-
-  .delete-btn:hover {
-    background: #da190b;
-  }
-
-  .stats {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 2px solid #f0f0f0;
-    display: flex;
-    justify-content: space-between;
-    color: #666;
-    font-size: 0.875rem;
-  }
-
-  .clear-completed {
-    background: none;
-    border: none;
-    color: #f44336;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-</style>
-
-<template>
-  <h1>📝 Todo App</h1>
-
-  <div class="input-group">
-    <input 
-           type="text"
-           b-sync="newTodo" 
-           placeholder="What needs to be done?"
-           @keyup="event.key === 'Enter' && addTodo()">
-    <button class="btn btn-primary" @click="addTodo()">Add</button>
-  </div>
-
-  <div class="filters">
-    <button 
-            class="filter-btn {{ filter === 'all' ? 'active' : '' }}"
-            @click="filter = 'all'">
-      All
-    </button>
-    <button 
-            class="filter-btn {{ filter === 'active' ? 'active' : '' }}"
-            @click="filter = 'active'">
-      Active
-    </button>
-    <button 
-            class="filter-btn {{ filter === 'completed' ? 'active' : '' }}"
-            @click="filter = 'completed'">
-      Completed
-    </button>
-  </div>
-
-  <ul b-for="todo in filteredTodos()">
-    <li>
-      <input type="checkbox" b-sync="todo.done">
-      <span class="todo-text {{ todo.done ? 'done' : '' }}">
-        {{ todo.text }}
-      </span>
-      <button class="delete-btn" @click="deleteTodo(todo)">Delete</button>
-    </li>
-  </ul>
-
-  <div class="stats">
-    <span>{{ remaining() }} item{{ remaining() === 1 ? '' : 's' }} left</span>
-    <button 
-            class="clear-completed" 
-            b-show="completedCount() > 0"
-            @click="clearCompleted()">
-      Clear completed ({{ completedCount() }})
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  newTodo: '',
-  filter: 'all',
-  todos: [],
-  
-  mounted() {
-    const saved = localStorage.getItem('legojs-todos');
-    if (saved) {
-      this.todos = JSON.parse(saved);
-    }
-  },
-
-  updated() {
-    localStorage.setItem('legojs-todos', JSON.stringify(this.todos));
-  },
-
-  addTodo() {
-    if (this.newTodo.trim()) {
-      this.todos.push({
-        id: Date.now(),
-        text: this.newTodo,
-        done: false
-      });
-      this.newTodo = '';
-    }
-  },
-
-  deleteTodo(todo) {
-    this.todos = this.todos.filter(t => t.id !== todo.id);
-  },
-
-  filteredTodos() {
-    if (this.filter === 'active') {
-      return this.todos.filter(t => !t.done);
-    } else if (this.filter === 'completed') {
-      return this.todos.filter(t => t.done);
-    }
-    return this.todos;
-  },
-
-  remaining() {
-    return this.todos.filter(t => !t.done).length;
-  },
-
-  completedCount() {
-    return this.todos.filter(t => t.done).length;
-  },
-
-  clearCompleted() {
-    this.todos = this.todos.filter(t => !t.done);
-  }
-}
-</script>

package/examples/vite-app/src/components/widgets/user-card.lego

@@ -1,27 +0,0 @@
-<style>
-  self {
-    display: block;
-    padding: 1rem;
-    background: #f9fafb;
-    border-bottom: 1px solid #e0e0e0;
-  }
-</style>
-
-
-<template>
-  <div>
-    <h2>User Card</h2>
-    <p>Name: {{ name }}</p>
-    <p>Age: {{ age }}</p>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'UserCard',
-    props: {
-      name: String,
-      age: Number
-    }
-  }
-</script>

package/examples/vite-app/vite.config.js

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite';
-import path from 'path';
-
-import legoPlugin from 'lego-dom/vite-plugin';
-import tailwindcss from '@tailwindcss/vite';
-
-
-export default defineConfig({
-  plugins: [
-    legoPlugin({
-      componentsDir: './src/components',
-      include: ['**/*.lego'],
-      importPath: 'lego-dom/main.js' // Use the alias defined below
-    }),
-    tailwindcss()
-  ],
-  resolve: {
-    alias: {
-      'lego-dom/main.js': path.resolve(__dirname, '../../lego.js')
-    }
-  }
-});

package/tests/error.test.js

@@ -1,74 +0,0 @@
-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

@@ -1,103 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { JSDOM } from 'jsdom';
-import fs from 'fs';
-import path from 'path';
-
-// 1. Setup the DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
-  runScripts: "dangerously",
-  resources: "usable"
-});
-
-global.window = dom.window;
-global.document = dom.window.document;
-
-// Use defineProperty for navigator as it might be read-only in some environments
-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.FormData = dom.window.FormData;
-
-// Mock CSSStyleSheet for JSDOM
-global.CSSStyleSheet = class {
-  constructor() { this.cssRules = []; }
-  replace(content) { this.cssText = content; return Promise.resolve(this); }
-};
-
-global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
-
-// 2. Load the library code
-// We read it as a string to execute it in our shimmed global environment
-const libCode = fs.readFileSync(path.resolve(__dirname, '../main.js'), 'utf8');
-eval(libCode);
-
-describe('Lego JS Node Environment Tests', () => {
-  beforeEach(async () => {
-    document.body.innerHTML = '';
-    window.clicked = false;
-    // Initializing the library manually for the test environment
-    await window.Lego.init(document.body);
-  });
-
-  it('should initialize the Lego global object', () => {
-    expect(window.Lego).toBeDefined();
-    expect(typeof window.Lego.define).toBe('function');
-  });
-
-  it('should reactively update text content', async () => {
-    window.Lego.define('test-comp', '<span>[[msg]]</span>');
-    const el = document.createElement('test-comp');
-    el.setAttribute('b-data', "{ msg: 'hello' }");
-    document.body.appendChild(el);
-
-    // Wait for MutationObserver / snap to fire
-    await new Promise(r => setTimeout(r, 100));
-
-    const span = el.shadowRoot.querySelector('span');
-    expect(span.textContent).toBe('hello');
-
-    // Test reactivity
-    el._studs.msg = 'world';
-
-    // Wait for batcher (requestAnimationFrame shim)
-    await new Promise(r => setTimeout(r, 100));
-    expect(span.textContent).toBe('world');
-  });
-
-  it('should prevent XSS via auto-escaping', async () => {
-    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);
-
-    await new Promise(r => setTimeout(r, 100));
-
-    const div = el.shadowRoot.querySelector('div');
-    // It should be escaped, not raw HTML
-    expect(div.innerHTML).toContain('&lt;script&gt;');
-  });
-
-  it('should handle @events using the universal binder', async () => {
-    window.Lego.define('event-comp', '<button @click="handleClick">Click Me</button>');
-
-    const el = document.createElement('event-comp');
-    el.setAttribute('b-data', `{ handleClick: () => { window.clicked = true; } }`);
-    document.body.appendChild(el);
-
-    await new Promise(r => setTimeout(r, 100));
-
-    const btn = el.shadowRoot.querySelector('button');
-    btn.click();
-
-    expect(window.clicked).toBe(true);
-  });
-});

package/tests/memory.test.js

@@ -1,68 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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/);
-  });
-});