lego-dom 1.3.4 → 1.5.0

package/docs/contributing/17-legodom.md

@@ -1,48 +0,0 @@
-# Mama "We Made It!"
-Everything we’ve discussed i.e. the Scanner, the Registry, the Router, and the Snap etc. "Everything" stays dormant until `Lego.init()` is called. This function is not just a starter; it’s an orchestrator that synchronizes the JavaScript environment with the existing HTML on the page.
-
-## The Lego Initializer
-
-The code for `init()` is deceptively small because its primary job is to flip the switches on the systems we've already built.
-
-### 1. Bootstrapping the Watchdog
-
-The core of the initialization is setting up the `MutationObserver` we discussed in Topic 7.
-
--   **The Target**: It targets `document.body`.
-    
--   **The Configuration**: It uses `{ childList: true, subtree: true }`.
-    
--   **The Why**: By starting the observer _before_ the first render, the library ensures that any elements it creates during the initial startup are also caught and "snapped" into life.
-    
-
-### 3. The "Initial Snap" (The Recursive Wake-up)
-
-Once the observer is live, the code calls `snap(document.body)`.
-
--   **The Why**: The `MutationObserver` only sees _new_ changes. It cannot see the HTML that was already there when the page loaded.
-    
--   **The Logic**: By manually calling `snap` on the body, the library recursively walks through your entire server-rendered HTML. It finds every custom tag (e.g., `<user-card>`) and "upgrades" them into components.
-    
-
-### 4. Activating the Global Listener
-
-This is where the **Router Hijack** (Topic 17) is installed.
-
--   The code adds a single click listener to the `window`.
-    
--   **The Why**: Instead of attaching listeners to every individual `<a>` tag (which would be slow and break when new links are added), it uses **Event Delegation**. It waits for clicks to bubble up to the window, checks if they are `b-link` clicks, and then decides whether to trigger the router.
-    
-
-### 5. The First Route Check
-
-Finally, `init()` calls `router()` manually for the first time.
-
--   **The Why**: If a user navigates directly to `mysite.com/dashboard`, the browser loads the page, but the JavaScript needs to know which component to put into the `router-view` immediately. This manual call ensures the UI matches the URL on the very first frame.
-    
-
-----------
-
-**The Architecture "Why"**: Lego is designed to be **Zero-Config**. By putting all these steps into `init()`, the developer only has to care about one thing: "When is my DOM ready?" The code handles the complex timing of making sure the Watchdog is looking while the Router is switching and the Snap is initializing.
-
-**Summary**: `Lego.init()` is the bridge. It turns a static document into a reactive application by starting the observer, snapping the existing HTML, and hijacking the navigation.

package/docs/contributing/index.md

@@ -1,24 +0,0 @@
-# Architectural Deep Dive
-
-Welcome to the internal documentation of LegoDOM.
-
-This isn't a "how to use" guide. This is a **"how it works"** guide. I believe that understanding the soul of LegoDOM should/could make you a better contributor.
-
-## The Philosophy
-**"The Platform is the Runtime."**
-We avoid compilers, transpilers, and VDOMs. We use:
-- **Proxies** for state.
-- **TreeWalkers** for scanning.
-- **Regex** for parsing.
-- **MutationObservers** for efficiency.
-
-## The Journey
-Follow the path of a component from HTML string to Pixel:
-
-1.  [**Init**](./06-init) - How the library wakes up.
-2.  [**Scanner**](./11-scanner) - How we find holes in your HTML (Regex vs AST).
-3.  [**Studs**](./10-studs) - The Reactivity Engine (Proxies).
-4.  [**Render**](./12-render) - The "Loop of Truth" & Security.
-5.  [**Router**](./15-router) - The "Surgical" Update philosophy.
-
-Dive in.

package/docs/examples/form.md

@@ -1,42 +0,0 @@
-# Form Example
-
-Handling forms in Lego.
-
-## Live Demo
-
-```html
-<template b-id="login-form">
-  <form @submit.prevent="login()">
-    <div>
-      <label>Email:</label>
-      <input type="email" b-sync="email">
-    </div>
-    
-    <div>
-      <label>Password:</label>
-      <input type="password" b-sync="password">
-    </div>
-    
-    <p b-show="error" style="color: red">[[ error ]]</p>
-    
-    <button type="submit">Login</button>
-  </form>
-</template>
-
-<script>
-  Lego.define('login-form', {
-    email: '',
-    password: '',
-    error: '',
-    
-    login() {
-      if (!this.email || !this.password) {
-        this.error = 'Please fill in all fields';
-        return;
-      }
-      alert(`Logging in as ${this.email}`);
-      this.error = '';
-    }
-  });
-</script>
-```

package/docs/examples/index.md

@@ -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

@@ -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

@@ -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>
-```