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/guide/cdn-usage.md DELETED Viewed

@@ -1,354 +0,0 @@
-# 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>
-  <script>
-    Lego.init();
-  </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@1.3.4/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@1.3.4/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;
-      }
-    });
-    // Don't forget to init!
-    Lego.init();
-  </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';
-    }
-  });
-  Lego.init();
-</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@1.3.4/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@1.3.4/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!
-## Using .lego Files without Build Tools
-You can use full Single File Components (`.lego` files) directly in the browser without any build step!
-Lego provides a `loader` configuration that lets you fetch component files on demand.
-### How it Works
-1. **Serve your files**: Make sure your `.lego` files are accessible via HTTP (e.g., in a `/components` folder).
-2. **Configure the loader**: Tell Lego how to fetch a component when it encounters an unknown tag.
-### Example
-```html
-<script>
-  Lego.init(document.body, {
-    // The loader function receives the tag name (e.g., 'user-card')
-    // and must return a Promise that resolves to the component's source code.
-    loader: (tagName) => {
-      // Fetch the raw text content of the .lego file
-      return fetch(`/components/${tagName}.lego`).then(res => res.text());
-    }
-  });
-</script>
-<!-- Now just use the tag! Lego will fetch, compile, and render it automatically. -->
-<user-card></user-card>
-```
-This is perfect for:
-- **Micro-frontends**: Load components from different services.
-- **CMS Integration**: Store component code in a database.
-- **Dynamic Apps**: Load features only when they are needed.
-## 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 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