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

lego-dom 0.0.7 → 0.0.9

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

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

@@ -0,0 +1,383 @@
+# 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-if="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)

package/docs/guide/cdn-usage.md ADDED Viewed

@@ -0,0 +1,320 @@
+# CDN Usage
+Lego works perfectly without any build tools. Just include it via CDN and start building!
+## Quick Start
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My App</title>
+</head>
+<body>
+  <!-- Define your component -->
+  <template b-id="hello-world">
+    <h1>{{ message }}</h1>
+  </template>
+  <!-- Use it -->
+  <hello-world b-data="{ message: 'Hello from CDN!' }"></hello-world>
+  <!-- Include Lego -->
+  <script src="https://unpkg.com/lego-dom/main.js"></script>
+</body>
+</html>
+```
+That's it! Open this file in any browser and it works.
+## CDN Providers
+### unpkg (Recommended)
+```html
+<!-- Latest version -->
+<script src="https://unpkg.com/lego-dom/main.js"></script>
+<!-- Specific version -->
+<script src="https://unpkg.com/lego-dom@0.0.7/main.js"></script>
+```
+### jsdelivr
+```html
+<!-- Latest version -->
+<script src="https://cdn.jsdelivr.net/npm/lego-dom/main.js"></script>
+<!-- Specific version -->
+<script src="https://cdn.jsdelivr.net/npm/lego-dom@0.0.7/main.js"></script>
+```
+### cdnjs
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lego-dom/0.0.7/main.js"></script>
+```
+## Complete Example
+Here's a full working application using only CDN:
+```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, sans-serif;
+      max-width: 600px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>My Todo App</h1>
+  <todo-app></todo-app>
+  <template b-id="todo-app">
+    <style>
+      self {
+        display: block;
+      }
+      .input-group {
+        display: flex;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+      }
+      input {
+        flex: 1;
+        padding: 0.5rem;
+        font-size: 1rem;
+      }
+      button {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        background: #4CAF50;
+        color: white;
+        border: none;
+        cursor: pointer;
+      }
+      ul {
+        list-style: none;
+        padding: 0;
+      }
+      li {
+        padding: 0.75rem;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .done {
+        text-decoration: line-through;
+        opacity: 0.6;
+      }
+    </style>
+    <div class="input-group">
+      <input
+        b-sync="newTodo"
+        placeholder="What needs to be done?"
+        @keyup="event.key === 'Enter' && addTodo()">
+      <button @click="addTodo()">Add</button>
+    </div>
+    <ul>
+      <li b-for="todo in todos">
+        <input type="checkbox" b-sync="todo.done">
+        <span class="{{ todo.done ? 'done' : '' }}">
+          {{ todo.text }}
+        </span>
+      </li>
+    </ul>
+    <p>{{ remaining() }} remaining</p>
+  </template>
+  <script src="https://unpkg.com/lego-dom/main.js"></script>
+  <script>
+    // Initialize with data
+    Lego.define('todo-app', Lego.registry['todo-app'].innerHTML, {
+      newTodo: '',
+      todos: [
+        { text: 'Learn Lego', done: true },
+        { text: 'Build something awesome', done: false }
+      ],
+      addTodo() {
+        if (this.newTodo.trim()) {
+          this.todos.push({
+            text: this.newTodo,
+            done: false
+          });
+          this.newTodo = '';
+        }
+      },
+      remaining() {
+        return this.todos.filter(t => !t.done).length;
+      }
+    });
+  </script>
+</body>
+</html>
+```
+## Progressive Enhancement
+Lego is perfect for progressively enhancing existing sites:
+```html
+<!-- Your existing page -->
+<div id="legacy-content">
+  <h1>My Existing Site</h1>
+  <p>This works without JavaScript</p>
+</div>
+<!-- Add interactive components -->
+<user-widget></user-widget>
+<template b-id="user-widget">
+  <style>
+    self {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      background: white;
+      padding: 1rem;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+  </style>
+  <p>Welcome, {{ username }}!</p>
+  <button @click="logout()">Logout</button>
+</template>
+<script src="https://unpkg.com/lego-dom/main.js"></script>
+<script>
+  Lego.define('user-widget', Lego.registry['user-widget'].innerHTML, {
+    username: 'Guest',
+    async mounted() {
+      const user = await fetch('/api/user').then(r => r.json());
+      this.username = user.name;
+    },
+    logout() {
+      window.location.href = '/logout';
+    }
+  });
+</script>
+```
+## Embedding in Existing Apps
+Lego components work alongside other frameworks:
+```html
+<!-- Works fine with jQuery, Bootstrap, etc. -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://unpkg.com/lego-dom/main.js"></script>
+<!-- Your Lego component -->
+<my-component></my-component>
+<!-- Your jQuery code -->
+<script>
+  $(document).ready(function() {
+    // jQuery code here
+  });
+</script>
+```
+## Loading Strategy
+### For Production
+Always pin to a specific version:
+```html
+<script src="https://unpkg.com/lego-dom@0.0.7/main.js"></script>
+```
+### For Development/Prototyping
+Use latest:
+```html
+<script src="https://unpkg.com/lego-dom/main.js"></script>
+```
+### With defer
+Load asynchronously without blocking page render:
+```html
+<script defer src="https://unpkg.com/lego-dom/main.js"></script>
+```
+### With integrity (SRI)
+For maximum security:
+```html
+<script
+  src="https://unpkg.com/lego-dom@0.0.7/main.js"
+  integrity="sha384-..."
+  crossorigin="anonymous">
+</script>
+```
+## Browser Compatibility
+Lego works in all modern browsers:
+- ✅ Chrome 63+
+- ✅ Firefox 63+
+- ✅ Safari 11.1+
+- ✅ Edge 79+
+No polyfills needed for these browsers!
+## Pros and Cons
+### ✅ Advantages
+- **No build step** - Instant development
+- **No npm** - No dependency management
+- **Fast prototyping** - Perfect for demos and learning
+- **Progressive enhancement** - Add to existing sites easily
+- **Low barrier** - Great for beginners
+### ⚠️ Limitations
+- No tree-shaking (you get the whole library)
+- No TypeScript compilation
+- No `.lego` SFC support
+- No hot module replacement
+- Slower for large apps compared to bundled versions
+## When to Use CDN
+**Perfect for:**
+- Prototypes and demos
+- Small websites (1-5 components)
+- Progressive enhancement
+- Learning and experimentation
+- CodePen/JSFiddle examples
+**Consider bundling for:**
+- Large applications (10+ components)
+- Production apps requiring optimization
+- Projects needing TypeScript
+- Teams wanting SFC workflow
+## Next Steps
+- See [complete CDN examples](/examples/)
+- Learn about [routing](/guide/routing) for multi-page apps
+- Explore [directives](/guide/directives) for common patterns