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/index.md DELETED Viewed

@@ -1,104 +0,0 @@
-# Examples
-Explore these hands-on examples to learn Lego patterns and best practices.
-## Quick Examples
-### Counter
-A simple reactive counter demonstrating basic state and events.
-```html
-<template b-id="click-counter">
-  <style>
-    button { font-size: 1.2rem; padding: 0.5rem 1rem; }
-  </style>
-  <p>Count: [[ count ]]</p>
-  <button @click="count++">Increment</button>
-</template>
-<click-counter b-data="{ count: 0 }"></click-counter>
-```
-### Input Binding
-Two-way data binding with `b-sync`.
-```html
-<template b-id="name-input">
-  <input b-sync="name" placeholder="Enter your name">
-  <p b-show="name">Hello, [[ name ]]!</p>
-</template>
-<name-input b-data="{ name: '' }"></name-input>
-```
-### Todo List
-Lists with `b-for`.
-```html
-<template b-id="todo-list">
-  <ul>
-    <li b-for="todo in todos">
-      <input type="checkbox" b-sync="todo.done">
-      <span class="[[ todo.done ? 'done' : '' ]]">[[ todo.text ]]</span>
-    </li>
-  </ul>
-</template>
-<todo-list b-data="{
-  todos: [
-    { text: 'Learn Lego', done: true },
-    { text: 'Build an app', done: false }
-  ]
-}"></todo-list>
-```
-## Full Applications
-### [Todo App](/examples/todo-app)
-A complete todo application with:
-- Add/remove todos
-- Mark as complete
-- Filter by status
-- Local storage persistence
-### [Routing Demo](/examples/routing)
-Single-page application with:
-- Multiple pages
-- Dynamic routes
-- Navigation
-- Route parameters
-### [SFC Showcase](/examples/sfc-showcase)
-Using Single File Components:
-- User cards
-- Product grid
-- Modal dialogs
-- Form validation
-### [Form Validation](/examples/form)
-Advanced form handling:
-- Input validation
-- Error messages
-- Submit handling
-- Reset functionality
-## CodePen Examples
-Try these examples directly in your browser:
-- [Simple Counter](https://codepen.io/ortserga/pen/XJKdMJm)
-- [Todo App](https://codepen.io/ortserga/pen/todo)
-- [Dynamic Form](https://codepen.io/ortserga/pen/form)
-## Next Steps
-- Check the [API Reference](/api/)
-- Read the [Guide](/guide/)
-- View the [source code](https://github.com/rayattack/Lego)

package/docs/examples/routing.md DELETED Viewed

@@ -1,409 +0,0 @@
-# Routing Example
-A multi-page application demonstrating client-side routing.
-## 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>Routing Demo - Lego</title>
-  <style>
-    body {
-      font-family: system-ui, sans-serif;
-      margin: 0;
-      padding: 0;
-    }
-    nav {
-      background: #333;
-      padding: 1rem;
-      display: flex;
-      gap: 1rem;
-    }
-    nav a {
-      color: white;
-      text-decoration: none;
-      padding: 0.5rem 1rem;
-      border-radius: 4px;
-      transition: background 0.2s;
-    }
-    nav a:hover {
-      background: #555;
-    }
-    nav a.active {
-      background: #4CAF50;
-    }
-    main {
-      padding: 2rem;
-      max-width: 800px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-<body>
-  <nav>
-    <a href="/" b-link>Home</a>
-    <a href="/about" b-link>About</a>
-    <a href="/users" b-link>Users</a>
-    <a href="/contact" b-link>Contact</a>
-  </nav>
-  <main>
-    <lego-router></lego-router>
-  </main>
-  <script src="https://unpkg.com/lego-dom/main.js"></script>
-  <!-- Home Page -->
-  <template b-id="home-page">
-    <style>
-      self { display: block; }
-      .hero {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 3rem;
-        border-radius: 8px;
-        text-align: center;
-      }
-      .features {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 1rem;
-        margin-top: 2rem;
-      }
-      .feature {
-        padding: 1.5rem;
-        background: #f5f5f5;
-        border-radius: 8px;
-      }
-    </style>
-    <div class="hero">
-      <h1>Welcome to Lego Routing Demo</h1>
-      <p>Navigate between pages using client-side routing</p>
-    </div>
-    <div class="features">
-      <div class="feature">
-        <h3>🚀 Fast</h3>
-        <p>No page reloads, instant navigation</p>
-      </div>
-      <div class="feature">
-        <h3>📦 Simple</h3>
-        <p>Built-in router, no dependencies</p>
-      </div>
-      <div class="feature">
-        <h3>🎨 Clean URLs</h3>
-        <p>No hash-based routing, real paths</p>
-      </div>
-    </div>
-  </template>
-  <!-- About Page -->
-  <template b-id="about-page">
-    <style>
-      self { display: block; }
-    </style>
-    <h1>About Lego</h1>
-    <p>Lego is a tiny, zero-dependency JavaScript library for building reactive Web Components.</p>
-    <h2>Features</h2>
-    <ul>
-      <li>Zero dependencies</li>
-      <li>Under 500 lines of code</li>
-      <li>True reactivity with Proxies</li>
-      <li>Shadow DOM encapsulation</li>
-      <li>Built-in routing</li>
-    </ul>
-    <p><a href="/users/1" b-link>View User #1</a></p>
-  </template>
-  <!-- Users List Page -->
-  <template b-id="users-page">
-    <style>
-      self { display: block; }
-      .user-card {
-        padding: 1rem;
-        margin: 0.5rem 0;
-        background: #f9f9f9;
-        border-radius: 4px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .user-card a {
-        color: #4CAF50;
-        text-decoration: none;
-        font-weight: 600;
-      }
-    </style>
-    <h1>Users</h1>
-    <div class="user-card" b-for="user in users">
-      <div>
-        <strong>[[ user.name ]]</strong>
-        <p style="margin:0;color:#666;">[[ user.email ]]</p>
-      </div>
-      <a href="/users/[[ user.id ]]" b-link>View Profile →</a>
-    </div>
-  </template>
-  <!-- User Profile Page (Dynamic Route) -->
-  <template b-id="user-profile">
-    <style>
-      self { display: block; }
-      .profile {
-        background: white;
-        padding: 2rem;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      }
-      .loading {
-        text-align: center;
-        padding: 2rem;
-        color: #666;
-      }
-    </style>
-    <div b-show="loading" class="loading">
-      Loading user...
-    </div>
-    <div b-show="!loading && user" class="profile">
-      <h1>[[ user.name ]]</h1>
-      <p><strong>Email:</strong> [[ user.email ]]</p>
-      <p><strong>Phone:</strong> [[ user.phone ]]</p>
-      <p><strong>Website:</strong> [[ user.website ]]</p>
-      <hr>
-      <h3>Address</h3>
-      <p>
-        [[ user.address.street ]]<br>
-        [[ user.address.city ]], [[ user.address.zipcode ]]
-      </p>
-      <p><a href="/users" b-link>← Back to users</a></p>
-    </div>
-  </template>
-  <!-- Contact Page -->
-  <template b-id="contact-page">
-    <style>
-      self { display: block; }
-      form {
-        background: white;
-        padding: 2rem;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      }
-      .form-group {
-        margin-bottom: 1rem;
-      }
-      label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 600;
-      }
-      input, textarea {
-        width: 100%;
-        padding: 0.75rem;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 1rem;
-      }
-      button {
-        background: #4CAF50;
-        color: white;
-        padding: 0.75rem 1.5rem;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1rem;
-      }
-      .success {
-        background: #d4edda;
-        color: #155724;
-        padding: 1rem;
-        border-radius: 4px;
-        margin-top: 1rem;
-      }
-    </style>
-    <h1>Contact Us</h1>
-    <form b-show="!submitted" @submit="handleSubmit(event)">
-      <div class="form-group">
-        <label>Name</label>
-        <input b-sync="form.name" required>
-      </div>
-      <div class="form-group">
-        <label>Email</label>
-        <input type="email" b-sync="form.email" required>
-      </div>
-      <div class="form-group">
-        <label>Message</label>
-        <textarea b-sync="form.message" rows="5" required></textarea>
-      </div>
-      <button type="submit">Send Message</button>
-    </form>
-    <div b-show="submitted" class="success">
-      <h3>✅ Message Sent!</h3>
-      <p>Thank you for contacting us, [[ form.name ]]. We'll respond to [[ form.email ]] soon.</p>
-      <button @click="submitted = false">Send Another</button>
-    </div>
-  </template>
-  <script>
-    // Define routes
-    Lego.route('/', 'home-page');
-    Lego.route('/about', 'about-page');
-    Lego.route('/users', 'users-page');
-    Lego.route('/users/:id', 'user-profile');
-    Lego.route('/contact', 'contact-page');
-    // Users page component
-    Lego.define('users-page',
-      document.querySelector('template[b-id="users-page"]').innerHTML, {
-        users: [],
-        async mounted() {
-          const response = await fetch('https://jsonplaceholder.typicode.com/users');
-          this.users = await response.json();
-        }
-      }
-    );
-    // User profile component (dynamic route)
-    Lego.define('user-profile',
-      document.querySelector('template[b-id="user-profile"]').innerHTML, {
-        loading: true,
-        user: null,
-        async mounted() {
-          const userId = Lego.globals.params.id;
-          const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
-          this.user = await response.json();
-          this.loading = false;
-        }
-      }
-    );
-    // Contact page component
-    Lego.define('contact-page',
-      document.querySelector('template[b-id="contact-page"]').innerHTML, {
-        form: {
-          name: '',
-          email: '',
-          message: ''
-        },
-        submitted: false,
-        handleSubmit(event) {
-          event.preventDefault();
-          this.submitted = true;
-        }
-      }
-    );
-    // Update active nav link on route change
-    window.addEventListener('popstate', updateActiveLink);
-    updateActiveLink();
-    function updateActiveLink() {
-      document.querySelectorAll('nav a[b-link]').forEach(link => {
-        const isActive = link.getAttribute('href') === window.location.pathname;
-        link.classList.toggle('active', isActive);
-      });
-    }
-  </script>
-</body>
-</html>
-```
-## Features Demonstrated
-### ✅ Multiple Routes
-- `/` - Home page
-- `/about` - About page
-- `/users` - Users list
-- `/users/:id` - Dynamic user profile
-- `/contact` - Contact form
-### ✅ Dynamic Routes
-Access parameters via `Lego.globals.params`:
-```js
-const userId = Lego.globals.params.id;
-```
-### ✅ Data Fetching
-Fetch data in `mounted()` hook:
-```js
-async mounted() {
-  const response = await fetch('https://api.example.com/users');
-  this.users = await response.json();
-}
-```
-### ✅ Active Link Styling
-Highlight current page in navigation.
-### ✅ Loading States
-Show spinner while fetching data.
-## Key Concepts
-### Route Definition
-```js
-Lego.route('/', 'home-page');
-Lego.route('/users/:id', 'user-profile');
-```
-### Accessing Route Params
-```js
-{
-  mounted() {
-    const userId = Lego.globals.params.id;
-    this.fetchUser(userId);
-  }
-}
-```
-### Navigation
-```html
-<a href="/about" b-link>About</a>
-```
-## Try It Yourself
-1. Copy the code above
-2. Save as `routing-demo.html`
-3. Open in a browser
-4. Click links—no page reload!
-5. Use browser back/forward buttons
-## Next Steps
-- See [Todo App Example](/examples/todo-app)
-- Learn about [Routing Guide](/guide/routing)
-- Try [Form Validation Example](/examples/form)

package/docs/examples/sfc-showcase.md DELETED Viewed

@@ -1,34 +0,0 @@
-# SFC Showcase
-Using `.lego` files with Vite.
-## File Structure
-**Counter.lego**
-```html
-<template>
-  <button @click="count++">Count: [[ count ]]</button>
-</template>
-<style>
-  button { color: red; }
-</style>
-<script>
-  export default {
-    count: 0
-  }
-</script>
-```
-## Usage
-**main.js**
-```js
-import './Counter.lego';
-```
-**index.html**
-```html
-<counter-component></counter-component>
-```