npm - lego-dom - Versions diffs - 0.0.7 → 0.0.8 - Mend

lego-dom 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/.ignore/auto.html DELETED Viewed

@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Lego JS | Test Suite</title>
-    <script src="./main.js"></script>
-    <style>
-        body { font-family: system-ui; line-height: 1.5; padding: 2rem; background: #f4f4f9; }
-        .test-card { background: white; padding: 1rem; margin-bottom: 1rem; border-radius: 8px; border-left: 5px solid #ccc; shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        .pass { border-left-color: #22c55e; }
-        .fail { border-left-color: #ef4444; background: #fee2e2; }
-        .hidden { display: none; }
-        h1 { color: #1e293b; }
-        .stats { margin-bottom: 2rem; font-weight: bold; }
-    </style>
-</head>
-<body>
-    <h1>Lego JS Test Runner</h1>
-    <div id="stats" class="stats">Running tests...</div>
-    <div id="test-results"></div>
-    <!-- Test Sandbox (Hidden) -->
-    <div id="sandbox" class="hidden"></div>
-    <!-- Test Templates -->
-    <template lego-block="test-basic">
-        <span id="output">{{text}}</span>
-    </template>
-    <template lego-block="test-events">
-        <button id="btn" @click="count++">Click</button>
-        <input id="input" @keyup="lastUsedKey = event.key">
-        <span id="display">{{count}}</span>
-        <span id="key-display">{{lastUsedKey}}</span>
-    </template>
-    <template lego-block="test-loops">
-        <div l-for="item in items">
-            <span class="item">{{item.name}}</span>
-        </div>
-    </template>
-    <script>
-        const resultsContainer = document.getElementById('test-results');
-        const sandbox = document.getElementById('sandbox');
-        const statsEl = document.getElementById('stats');
-        let passed = 0;
-        let failed = 0;
-        function assert(condition, message) {
-            const card = document.createElement('div');
-            card.className = 'test-card ' + (condition ? 'pass' : 'fail');
-            card.innerHTML = `<strong>${condition ? 'PASS' : 'FAIL'}</strong>: ${message}`;
-            resultsContainer.appendChild(card);
-            if (condition) passed++; else failed++;
-            updateStats();
-        }
-        function updateStats() {
-            statsEl.textContent = `Total: ${passed + failed} | Passed: ${passed} | Failed: ${failed}`;
-        }
-        async function wait(ms = 50) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        // --- TEST SUITE ---
-        async function runTests() {
-            // 1. Basic Reactivity & Interpolation
-            const t1 = document.createElement('test-basic');
-            t1.setAttribute('l-studs', "{ text: 'Initial' }");
-            sandbox.appendChild(t1);
-            await wait();
-            const out1 = t1.shadowRoot.getElementById('output');
-            assert(out1.textContent === 'Initial', 'Initial text interpolation works');
-            t1._studs.text = 'Updated';
-            await wait(); // Wait for requestAnimationFrame batching
-            assert(out1.textContent === 'Updated', 'Reactive update reflects in DOM');
-            // 2. Dynamic Event Listeners (@click, @keyup)
-            const t2 = document.createElement('test-events');
-            t2.setAttribute('l-studs', "{ count: 0, lastUsedKey: '' }");
-            sandbox.appendChild(t2);
-            await wait();
-            const btn = t2.shadowRoot.getElementById('btn');
-            const display = t2.shadowRoot.getElementById('display');
-            btn.click();
-            await wait();
-            assert(display.textContent === '1', 'Universal @click listener works');
-            const input = t2.shadowRoot.getElementById('input');
-            const keyDisplay = t2.shadowRoot.getElementById('key-display');
-            input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
-            await wait();
-            assert(keyDisplay.textContent === 'Enter', 'Universal @keyup listener works');
-            // 3. List Rendering (l-for)
-            const t3 = document.createElement('test-loops');
-            t3.setAttribute('l-studs', "{ items: [{name: 'A'}, {name: 'B'}] }");
-            sandbox.appendChild(t3);
-            await wait();
-            let items = t3.shadowRoot.querySelectorAll('.item');
-            assert(items.length === 2 && items[0].textContent === 'A', 'l-for renders initial list');
-            t3._studs.items.push({name: 'C'});
-            await wait();
-            items = t3.shadowRoot.querySelectorAll('.item');
-            assert(items.length === 3, 'l-for reactively handles array push');
-            // 4. Security: HTML Escaping
-            const t4 = document.createElement('test-basic');
-            t4.setAttribute('l-studs', "{ text: '<img src=x onerror=alert(1)>' }");
-            sandbox.appendChild(t4);
-            await wait();
-            const out4 = t4.shadowRoot.getElementById('output');
-            assert(out4.innerHTML.includes('&lt;img'), 'HTML is properly escaped to prevent XSS');
-            // 5. Lego.define (Programmatic API)
-            Lego.define('js-comp', '<h1>JS Component</h1>');
-            const t5 = document.createElement('js-comp');
-            sandbox.appendChild(t5);
-            await wait();
-            assert(t5.shadowRoot.querySelector('h1').textContent === 'JS Component', 'Lego.define works programmatically');
-        }
-        window.onload = runTests;
-    </script>
-</body>
-</html>

package/.ignore/test.html DELETED Viewed

@@ -1,73 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lego JS Test</title>
-    <script src="./main.js"></script>
-  </head>
-  <body @todo-added="() => {console.log('Todo added!')}" >
-    <template b-id="todo-list">
-      <style>
-        :host { display: block; font-family: system-ui, sans-serif; padding: 20px; }
-        .done { text-decoration: line-through; color: #888; }
-        .input { padding: .4em; border: 1px solid #ccc; border-radius: 0.1em; }
-        .item-row { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
-        button { cursor: pointer; border: none; padding: 5px 10px; border-radius: 0px; background-color: #404; color: #fff; }
-        h3 { color: #318d8d; margin-top: 0; }
-      </style>
-      <h3>{{title}}</h3>
-      <p>{{ items.filter(t => !t.done).length }} of {{ items.length }} items remaining</p>
-      <div style="margin-bottom: 20px;">
-        <input b-sync="newItem" placeholder="Add task..." class="input" @keydown="() => {
-        }">
-        <button @click="() => {
-          if(!newItem.trim()) return;
-          items.push({text: `${newItem} - ${items.length + 1} - ${$ancestors('user-card').name}`, done: false});
-          newItem = '';
-          $emit('todo-added', { item: newItem });
-        }">Add</button>
-      </div>
-      <div b-for="todo in items">
-        <div class="item-row {{todo.done ? 'done' : ''}}">
-          <input type="checkbox" b-sync="todo.done">
-          <span>{{todo.text}}</span>
-        </div>
-      </div>
-    </template>
-    <template b-id="user-card">
-      <style>
-        :host { display: block; font-family: system-ui, sans-serif; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
-        h3 { color: #62318d; margin-top: 0; }
-      </style>
-      <h3>{{name}}</h3>
-      <p>{{bio}}</p>
-      <slot></slot>
-    </template>
-    <user-card b-data="{
-      name: 'John Doe',
-      bio: 'Software Engineer'
-    }">
-      <p>Additional content here</p>
-      <todo-list b-data="{
-        title: 'Enterprise Todo List',
-        items: [{text: 'Fix b-for strikethrough', done: true}],
-        newItem: '',
-        mounted() {
-          console.log('THis lego block has been mounted!');
-        },
-        updated() {
-          console.log('This lego block has been updated!');
-        },
-        unmounted() {
-          console.log('This lego block has been unmounted!');
-        }
-      }">
-      </todo-list>
-    </user-card>
-  </body>
-</html>