npm - lego-dom - Versions diffs - 1.3.4 → 1.4.0 - Mend

lego-dom 1.3.4 → 1.4.0

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 (91) hide show

package/CHANGELOG.md +55 -0
package/main.js +24 -3
package/package.json +1 -1
package/vite-plugin.js +0 -14
package/.github/workflows/deploy-docs.yml +0 -56
package/.legodom +0 -87
package/docs/.vitepress/config.js +0 -161
package/docs/api/config.md +0 -95
package/docs/api/define.md +0 -58
package/docs/api/directives.md +0 -50
package/docs/api/globals.md +0 -29
package/docs/api/index.md +0 -30
package/docs/api/lifecycle.md +0 -40
package/docs/api/route.md +0 -37
package/docs/api/vite-plugin.md +0 -58
package/docs/contributing/01-welcome.md +0 -38
package/docs/contributing/02-registry.md +0 -133
package/docs/contributing/03-batcher.md +0 -110
package/docs/contributing/04-reactivity.md +0 -87
package/docs/contributing/05-caching.md +0 -59
package/docs/contributing/06-init.md +0 -136
package/docs/contributing/07-observer.md +0 -72
package/docs/contributing/08-snap.md +0 -140
package/docs/contributing/09-diffing.md +0 -69
package/docs/contributing/10-studs.md +0 -78
package/docs/contributing/11-scanner.md +0 -117
package/docs/contributing/12-render.md +0 -138
package/docs/contributing/13-directives.md +0 -243
package/docs/contributing/14-events.md +0 -57
package/docs/contributing/15-router.md +0 -57
package/docs/contributing/16-state.md +0 -47
package/docs/contributing/17-legodom.md +0 -48
package/docs/contributing/index.md +0 -24
package/docs/examples/form.md +0 -42
package/docs/examples/index.md +0 -104
package/docs/examples/routing.md +0 -409
package/docs/examples/sfc-showcase.md +0 -34
package/docs/examples/todo-app.md +0 -383
package/docs/guide/cdn-usage.md +0 -354
package/docs/guide/components.md +0 -418
package/docs/guide/directives.md +0 -539
package/docs/guide/directory-structure.md +0 -248
package/docs/guide/faq.md +0 -210
package/docs/guide/getting-started.md +0 -262
package/docs/guide/index.md +0 -88
package/docs/guide/lifecycle.md +0 -525
package/docs/guide/quick-start.md +0 -49
package/docs/guide/reactivity.md +0 -415
package/docs/guide/routing.md +0 -334
package/docs/guide/server-side.md +0 -134
package/docs/guide/sfc.md +0 -464
package/docs/guide/templating.md +0 -388
package/docs/index.md +0 -160
package/docs/public/logo.svg +0 -17
package/docs/router/basic-routing.md +0 -103
package/docs/router/cold-entry.md +0 -91
package/docs/router/history.md +0 -69
package/docs/router/index.md +0 -73
package/docs/router/resolver.md +0 -74
package/docs/router/surgical-swaps.md +0 -134
package/docs/tutorial/01-project-setup.md +0 -152
package/docs/tutorial/02-your-first-component.md +0 -226
package/docs/tutorial/03-adding-routes.md +0 -279
package/docs/tutorial/04-multi-page-app.md +0 -329
package/docs/tutorial/05-state-and-globals.md +0 -285
package/docs/tutorial/index.md +0 -40
package/examples/vite-app/README.md +0 -71
package/examples/vite-app/index.html +0 -42
package/examples/vite-app/package.json +0 -18
package/examples/vite-app/src/app.css +0 -3
package/examples/vite-app/src/app.js +0 -29
package/examples/vite-app/src/components/app-navbar.lego +0 -34
package/examples/vite-app/src/components/customers/customer-details.lego +0 -24
package/examples/vite-app/src/components/customers/customer-orders.lego +0 -21
package/examples/vite-app/src/components/customers/order-list.lego +0 -55
package/examples/vite-app/src/components/greeting-card.lego +0 -41
package/examples/vite-app/src/components/sample-component.lego +0 -75
package/examples/vite-app/src/components/shells/customers-shell.lego +0 -21
package/examples/vite-app/src/components/side-menu.lego +0 -46
package/examples/vite-app/src/components/todo-list.lego +0 -239
package/examples/vite-app/src/components/widgets/user-card.lego +0 -27
package/examples/vite-app/vite.config.js +0 -22
package/tests/error.test.js +0 -74
package/tests/main.test.js +0 -103
package/tests/memory.test.js +0 -68
package/tests/monitoring.test.js +0 -74
package/tests/naming.test.js +0 -74
package/tests/parse-lego.test.js +0 -65
package/tests/security.test.js +0 -67
package/tests/server.test.js +0 -114
package/tests/syntax.test.js +0 -67

package/docs/examples/todo-app.md DELETED Viewed

@@ -1,383 +0,0 @@
-# Todo App Example
-A complete todo application demonstrating Lego features.
-## Live Demo
-<iframe src="/demos/todo-app.html" style="width:100%;height:500px;border:1px solid #ddd;border-radius:4px;"></iframe>
-## Full Source Code
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Todo App - Lego</title>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      max-width: 600px;
-      margin: 2rem auto;
-      padding: 0 1rem;
-      background: #f5f5f5;
-    }
-    h1 {
-      text-align: center;
-      color: #333;
-    }
-  </style>
-</head>
-<body>
-  <h1>📝 Todo App</h1>
-  <todo-app></todo-app>
-  <script src="https://unpkg.com/lego-dom/main.js"></script>
-  <template b-id="todo-app">
-    <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>
-    <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>
-      <li b-for="todo in filteredTodos()">
-        <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>
-    Lego.define('todo-app',
-      document.querySelector('template[b-id="todo-app"]').innerHTML,
-      {
-        newTodo: '',
-        filter: 'all',
-        todos: [],
-        mounted() {
-          // Load from localStorage
-          const saved = localStorage.getItem('legojs-todos');
-          if (saved) {
-            this.todos = JSON.parse(saved);
-          }
-        },
-        updated() {
-          // Save to localStorage
-          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) {
-          const index = this.todos.indexOf(todo);
-          if (index > -1) {
-            this.todos.splice(index, 1);
-          }
-        },
-        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>
-</body>
-</html>
-```
-## Features Demonstrated
-### ✅ Reactivity
-- Auto-updates when todos change
-- Two-way binding with `b-sync`
-- Computed values (`remaining()`, `completedCount()`)
-### ✅ List Rendering
-- `b-for` to iterate over todos
-- Dynamic filtering based on status
-### ✅ Event Handling
-- Add on Enter key
-- Click to complete/delete
-- Filter buttons
-### ✅ Lifecycle Hooks
-- `mounted()` - Load from localStorage
-- `updated()` - Save to localStorage
-### ✅ Conditional Rendering
-- Show/hide "Clear completed" button
-- Different styles for completed items
-### ✅ Methods
-- `addTodo()` - Add new item
-- `deleteTodo()` - Remove item
-- `filteredTodos()` - Filter logic
-- `clearCompleted()` - Batch delete
-## Key Concepts
-### Local Storage Persistence
-```js
-mounted() {
-  const saved = localStorage.getItem('legojs-todos');
-  if (saved) {
-    this.todos = JSON.parse(saved);
-  }
-},
-updated() {
-  localStorage.setItem('legojs-todos', JSON.stringify(this.todos));
-}
-```
-### Filtering
-```js
-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;
-}
-```
-### Array Manipulation
-```js
-// Add
-this.todos.push({ ... });
-// Remove
-this.todos.splice(index, 1);
-// Filter (reassign)
-this.todos = this.todos.filter(t => !t.done);
-```
-## Try It Yourself
-1. Copy the code above
-2. Save as `todo.html`
-3. Open in a browser
-4. Add todos, mark as complete, filter, delete
-5. Refresh—todos persist!
-## Extensions
-Try adding these features:
-- **Edit mode** - Double click to edit todo text
-- **Due dates** - Add date picker and sort by date
-- **Categories** - Organize todos into lists
-- **Drag & drop** - Reorder todos
-- **Export/Import** - Download/upload todo list
-## Next Steps
-- See [Routing Example](/examples/routing)
-- Learn about [Form Validation](/examples/form)
-- Explore [SFC Showcase](/examples/sfc-showcase)