lego-dom 0.0.7 → 0.0.9

package/docs/guide/templating.md

@@ -0,0 +1,383 @@
+# Templating
+
+Learn about Lego templating features and syntax.
+
+## Interpolation
+
+Use `{{ }}` to insert dynamic content:
+
+### Simple Values
+
+```html
+<p>{{ message }}</p>
+<h1>{{ title }}</h1>
+<span>{{ count }}</span>
+```
+
+### Expressions
+
+```html
+<p>{{ count * 2 }}</p>
+<span>{{ price.toFixed(2) }}</span>
+<div>{{ firstName + ' ' + lastName }}</div>
+```
+
+### Method Calls
+
+```html
+<p>{{ formatDate(timestamp) }}</p>
+<span>{{ calculateTotal() }}</span>
+<div>{{ getUsername() }}</div>
+```
+
+### Conditional (Ternary)
+
+```html
+<p>{{ age >= 18 ? 'Adult' : 'Minor' }}</p>
+<span>{{ isOnline ? '🟢 Online' : '🔴 Offline' }}</span>
+<div>{{ items.length > 0 ? items.length + ' items' : 'Empty' }}</div>
+```
+
+## Attribute Binding
+
+Interpolate in any attribute:
+
+### Simple Attributes
+
+```html
+<img src="/avatars/{{ userId }}.png" alt="{{ username }}">
+<a href="/user/{{ userId }}">{{ username }}</a>
+<input placeholder="{{ defaultText }}">
+```
+
+### Class Names
+
+```html
+<div class="card {{ isActive ? 'active' : '' }}">...</div>
+<button class="{{ isDisabled ? 'disabled' : 'enabled' }}">...</button>
+<li class="item status-{{ status }}">...</li>
+```
+
+### Data Attributes
+
+```html
+<div data-id="{{ itemId }}" data-type="{{ itemType }}">...</div>
+```
+
+### Style (Inline)
+
+```html
+<div style="color: {{ textColor }}; background: {{ bgColor }}">...</div>
+```
+
+## Escaping
+
+Lego automatically escapes HTML to prevent XSS:
+
+```js
+{
+  userInput: '<script>alert("XSS")</script>'
+}
+```
+
+```html
+<p>{{ userInput }}</p>
+<!-- Renders as: &lt;script&gt;alert("XSS")&lt;/script&gt; -->
+```
+
+**There is no way to render raw HTML.** This is by design—for security.
+
+## Whitespace
+
+Templates preserve whitespace:
+
+```html
+<p>
+  {{ message }}
+</p>
+<!-- Renders with newlines and indentation -->
+```
+
+Trim manually if needed:
+
+```html
+<p>{{ message.trim() }}</p>
+```
+
+## Context
+
+Inside `{{ }}`, you have access to:
+
+### Component State (`this`)
+
+```html
+<p>{{ count }}</p>  <!-- this.count -->
+<span>{{ user.name }}</span>  <!-- this.user.name -->
+```
+
+### Methods
+
+```html
+<p>{{ formatDate(timestamp) }}</p>
+<div>{{ calculateTotal() }}</div>
+```
+
+### Special Keywords
+
+- `global` - Access `Lego.globals`
+- `event` - In event handlers
+- `self` - Reference to component element (rare)
+
+```html
+<p>{{ global.user.name }}</p>
+<button @click="console.log(event)">Click</button>
+```
+
+## Complex Examples
+
+### Formatting Currency
+
+```js
+{
+  price: 29.99,
+  formatCurrency(value) {
+    return '$' + value.toFixed(2);
+  }
+}
+```
+
+```html
+<p>Price: {{ formatCurrency(price) }}</p>
+```
+
+### Date Formatting
+
+```js
+{
+  timestamp: Date.now(),
+  formatDate(ts) {
+    return new Date(ts).toLocaleDateString();
+  }
+}
+```
+
+```html
+<time>{{ formatDate(timestamp) }}</time>
+```
+
+### Pluralization
+
+```js
+{
+  items: ['apple', 'banana'],
+  plural(count, singular, plural) {
+    return count === 1 ? singular : plural;
+  }
+}
+```
+
+```html
+<p>{{ items.length }} {{ plural(items.length, 'item', 'items') }}</p>
+```
+
+### Truncation
+
+```js
+{
+  description: 'Very long text...',
+  truncate(text, length) {
+    return text.length > length 
+      ? text.slice(0, length) + '...' 
+      : text;
+  }
+}
+```
+
+```html
+<p>{{ truncate(description, 100) }}</p>
+```
+
+## Limitations
+
+### No Statements
+
+Can't use statements—only expressions:
+
+```html
+<!-- ❌ Doesn't work -->
+<p>{{ if (condition) { return 'yes'; } }}</p>
+<p>{{ for (let i = 0; i < 10; i++) { } }}</p>
+
+<!-- ✅ Use ternary or methods -->
+<p>{{ condition ? 'yes' : 'no' }}</p>
+<p>{{ renderList() }}</p>
+```
+
+### No Declarations
+
+Can't declare variables:
+
+```html
+<!-- ❌ Doesn't work -->
+<p>{{ const total = price * qty; total }}</p>
+
+<!-- ✅ Use methods -->
+<p>{{ getTotal() }}</p>
+```
+
+```js
+{
+  getTotal() {
+    const total = this.price * this.qty;
+    return total;
+  }
+}
+```
+
+## Best Practices
+
+### 1. Keep Templates Simple
+
+If logic is complex, use methods:
+
+```html
+<!-- ❌ Too complex -->
+<p>{{ items.filter(x => x.active).map(x => x.name).join(', ') }}</p>
+
+<!-- ✅ Better -->
+<p>{{ getActiveNames() }}</p>
+```
+
+```js
+{
+  getActiveNames() {
+    return this.items
+      .filter(x => x.active)
+      .map(x => x.name)
+      .join(', ');
+  }
+}
+```
+
+### 2. Format in Methods
+
+Don't put formatting logic in templates:
+
+```html
+<!-- ❌ Messy -->
+<p>${{ (price * 1.2).toFixed(2) }}</p>
+
+<!-- ✅ Clean -->
+<p>{{ formatPrice(price) }}</p>
+```
+
+### 3. Avoid Side Effects
+
+Don't mutate state in templates:
+
+```html
+<!-- ❌ Bad -->
+<p>{{ count++ }}</p>
+
+<!-- ✅ Good -->
+<p>{{ count }}</p>
+<button @click="count++">Increment</button>
+```
+
+### 4. Use Descriptive Method Names
+
+```js
+{
+  // ✅ Clear purpose
+  formatCurrency(value) { ... },
+  calculateTax(amount) { ... },
+  isValidEmail(email) { ... }
+}
+```
+
+## Performance Tips
+
+### Cache Computed Values
+
+If a calculation is expensive, cache it:
+
+```js
+{
+  items: [],
+  _cachedTotal: null,
+  
+  total() {
+    if (this._cachedTotal === null) {
+      this._cachedTotal = this.items.reduce((sum, x) => sum + x.price, 0);
+    }
+    return this._cachedTotal;
+  },
+  
+  updated() {
+    this._cachedTotal = null;  // Invalidate cache
+  }
+}
+```
+
+### Avoid Heavy Calculations
+
+```html
+<!-- ❌ Runs on every render -->
+<p>{{ expensiveCalculation() }}</p>
+
+<!-- ✅ Calculate once, store result -->
+<p>{{ cachedResult }}</p>
+```
+
+```js
+{
+  cachedResult: null,
+  mounted() {
+    this.cachedResult = this.expensiveCalculation();
+  }
+}
+```
+
+## Common Patterns
+
+### Show/Hide Based on Condition
+
+```html
+<p b-if="user">Welcome, {{ user.name }}!</p>
+<p b-if="!user">Please log in</p>
+```
+
+### List with Index
+
+```html
+<ul>
+  <li b-for="item in items">
+    #{{ $index + 1 }}: {{ item.name }}
+  </li>
+</ul>
+```
+
+### Conditional Classes
+
+```html
+<div class="item {{ item.active ? 'active' : '' }} {{ item.featured ? 'featured' : '' }}">
+  {{ item.name }}
+</div>
+```
+
+### Dynamic Attributes
+
+```html
+<a 
+  href="/product/{{ product.id }}" 
+  class="product-link {{ product.inStock ? '' : 'out-of-stock' }}"
+  title="{{ product.name }} - ${{ product.price }}">
+  {{ product.name }}
+</a>
+```
+
+## Next Steps
+
+- Learn about [Directives](/guide/directives)
+- See [templating examples](/examples/)
+- Explore [component patterns](/guide/components)

package/docs/index.md

@@ -0,0 +1,126 @@
+---
+layout: home
+
+hero:
+  name: LegoDOM
+  text: Build Reactive Web Components
+  tagline: A tiny, zero-dependency Web library for creating reactive Web Components directly in the browser
+  image:
+    src: /logo.svg
+    alt: Lego
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/rayattack/Lego
+    - theme: alt
+      text: Try Examples
+      link: /examples/
+
+features:
+  - icon: 🎯
+    title: Mental Model Simplicity
+    details: No virtual DOM, no compilation step, no JSX. Just HTML with a few directives and reactive objects.
+  
+  - icon: ⚡
+    title: Zero Dependencies
+    details: Under 500 lines of code with no external dependencies. The entire library is smaller than most framework router plugins.
+  
+  - icon: 🔄
+    title: True Reactivity
+    details: Direct object mutation triggers updates. No setters, no actions, no reducers. Just change the data and the DOM updates.
+  
+  - icon: 🧩
+    title: Web Components Native
+    details: Built on standard Web Components with Shadow DOM. Works anywhere, plays well with existing code.
+  
+  - icon: 📦
+    title: Single File Components
+    details: Use .lego files with Vite for a modern development experience, or load directly in the browser.
+  
+  - icon: 🎨
+    title: Scoped Styles
+    details: Shadow DOM encapsulation means your styles never leak. Use the 'self' keyword to target component root.
+  
+  - icon: 🛣️
+    title: Built-in Router
+    details: Client-side routing included. Define routes, handle parameters, and add middleware without extra packages.
+  
+  - icon: 💪
+    title: TypeScript Ready
+    details: Full JSDoc annotations for excellent IDE support and optional TypeScript integration.
+  
+  - icon: 🚀
+    title: Production Ready
+    details: Battle-tested patterns from Vue and React, adapted for pure Web Components. No framework lock-in.
+---
+
+## Quick Example
+
+```html
+<!-- Define a component -->
+<template b-id="counter-button">
+  <style>
+    self {
+      display: block;
+      padding: 1rem;
+    }
+    button {
+      font-size: 1.2rem;
+      padding: 0.5rem 1rem;
+    }
+  </style>
+  
+  <h2>{{ title }}</h2>
+  <button @click="count++">
+    Clicked {{ count }} times
+  </button>
+</template>
+
+<!-- Use it -->
+<counter-button b-data="{ title: 'My Counter', count: 0 }"></counter-button>
+
+<script src="https://unpkg.com/lego-dom/main.js"></script>
+```
+
+That's it. No build step, no npm, no configuration.
+
+## Why Lego?
+
+**For small projects**, you get reactive components without the overhead of a full framework.
+
+**For large projects**, you get a clear mental model and Web Standards compliance.
+
+**For learning**, you can read the entire source code in an afternoon and understand exactly how it works.
+
+## Comparison
+
+| Feature | Lego | Vue | React |
+|---------|--------|-----|-------|
+| Size | < 17KB | ~33KB | ~40KB |
+| Dependencies | 0 | Many | Many |
+| Build Required | No* | Yes | Yes |
+| Virtual DOM | No | Yes | Yes |
+| Learning Curve | Minimal | Moderate | Moderate |
+| Web Components | Native | Optional | No |
+
+\* *Optional with Vite for .lego files*
+
+## Browser Support
+
+Lego works in all modern browsers that support:
+- Web Components
+- Shadow DOM
+- ES6 Proxy
+- Template literals
+
+This includes Chrome 63+, Firefox 63+, Safari 11.1+, and Edge 79+.
+
+## Community
+
+- 📖 [Documentation](https://rayattack.github.io/Lego/)
+- 💬 [Discussions](https://github.com/rayattack/Lego/discussions)
+- 🐛 [Issue Tracker](https://github.com/rayattack/Lego/issues)
+- 📦 [npm Package](https://www.npmjs.com/package/lego-dom)

package/docs/public/logo.svg

@@ -0,0 +1,17 @@
+<svg width="270" height="270" viewBox="0 0 270 270" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8 199H250.2C257.88 199 263 202.657 263 208.143V253.857C263 259.343 257.88 263 250.2 263H19.8C12.12 263 7.00001 259.343 7.00001 253.857V208.143C7.00001 202.657 12.12 199 19.8 199Z" fill="#FFCA28"/>
+<path d="M205.194 199H238.226V183C238.226 178.2 234.923 175 229.968 175H213.452C208.497 175 205.194 178.2 205.194 183V199Z" fill="#FFCA28"/>
+<path d="M147.387 199H180.419V183C180.419 178.2 177.116 175 172.161 175H155.645C150.69 175 147.387 178.2 147.387 183V199Z" fill="#FFCA28"/>
+<path d="M15.2581 143H106.097C111.052 143 114.355 146.2 114.355 151V191C114.355 195.8 111.052 199 106.097 199H15.2581C10.3032 199 7 195.8 7 191V151C7 146.2 10.3032 143 15.2581 143Z" fill="#FFCA28"/>
+<path d="M15.2581 87H106.097C111.052 87 114.355 90.2 114.355 95V135C114.355 139.8 111.052 143 106.097 143H15.2581C10.3032 143 7 139.8 7 135V95C7 90.2 10.3032 87 15.2581 87Z" fill="#FFCA28"/>
+<path d="M15.2581 31H106.097C111.052 31 114.355 34.2 114.355 39V79C114.355 83.8 111.052 87 106.097 87H15.2581C10.3032 87 7 83.8 7 79V39C7 34.2 10.3032 31 15.2581 31Z" fill="#FFCA28"/>
+<path d="M73.0645 31H106.097V15C106.097 10.2 102.794 7 97.8387 7H81.3226C76.3677 7 73.0645 10.2 73.0645 15V31Z" fill="#FFCA28"/>
+<path d="M15.2581 31H48.2903V15C48.2903 10.2 44.9871 7 40.0323 7H23.5161C18.5613 7 15.2581 10.2 15.2581 15V31Z" fill="#FFCA28"/>
+<path d="M256 208.143C256 207.853 255.974 207.612 255.411 207.21C254.671 206.682 253.019 206 250.2 206H19.7998C16.9807 206 15.3288 206.682 14.5889 207.21C14.0263 207.612 14 207.853 14 208.143V253.857C14 254.147 14.0263 254.388 14.5889 254.79C15.3288 255.318 16.9807 256 19.7998 256H250.2C253.019 256 254.671 255.318 255.411 254.79C255.974 254.388 256 254.147 256 253.857V208.143ZM173.419 183C173.419 182.606 173.352 182.39 173.319 182.308C173.302 182.265 173.29 182.243 173.285 182.236C173.281 182.23 173.278 182.228 173.277 182.228C173.275 182.226 173.266 182.217 173.244 182.203C173.22 182.188 173.174 182.163 173.098 182.135C172.946 182.078 172.647 182 172.161 182H155.646C155.16 182 154.861 182.078 154.709 182.135C154.632 182.163 154.585 182.188 154.562 182.203C154.538 182.218 154.529 182.227 154.528 182.228C154.527 182.228 154.526 182.23 154.521 182.236C154.517 182.243 154.504 182.264 154.486 182.308C154.453 182.39 154.387 182.606 154.387 183V192H173.419V183ZM231.226 183C231.226 182.606 231.159 182.39 231.126 182.308C231.109 182.264 231.095 182.243 231.091 182.236C231.087 182.23 231.085 182.228 231.084 182.228C231.082 182.226 231.073 182.217 231.051 182.203C231.027 182.188 230.981 182.163 230.904 182.135C230.752 182.078 230.453 182 229.968 182H213.451C212.966 182 212.666 182.078 212.515 182.135C212.438 182.163 212.392 182.188 212.368 182.203C212.345 182.218 212.336 182.227 212.335 182.228C212.334 182.228 212.332 182.23 212.328 182.236C212.324 182.243 212.31 182.264 212.293 182.308C212.26 182.39 212.193 182.606 212.193 183V192H231.226V183ZM107.354 151C107.354 150.606 107.288 150.39 107.255 150.308C107.238 150.264 107.224 150.243 107.22 150.236C107.216 150.23 107.214 150.228 107.213 150.228C107.211 150.226 107.202 150.217 107.18 150.203C107.156 150.188 107.109 150.163 107.033 150.135C106.881 150.078 106.582 150 106.097 150H15.2578C14.7724 150 14.4731 150.078 14.3213 150.135C14.2449 150.163 14.1986 150.188 14.1748 150.203C14.1521 150.217 14.143 150.226 14.1416 150.228C14.1408 150.228 14.139 150.23 14.1348 150.236C14.1304 150.243 14.1168 150.264 14.0996 150.308C14.0667 150.39 14 150.606 14 151V191C14 191.394 14.0667 191.61 14.0996 191.692C14.1168 191.736 14.1304 191.757 14.1348 191.764C14.139 191.77 14.1408 191.772 14.1416 191.772C14.143 191.774 14.1521 191.783 14.1748 191.797C14.1986 191.812 14.2449 191.837 14.3213 191.865C14.4731 191.922 14.7724 192 15.2578 192H106.097C106.582 192 106.881 191.922 107.033 191.865C107.109 191.837 107.156 191.812 107.18 191.797C107.202 191.783 107.211 191.774 107.213 191.772C107.214 191.772 107.216 191.77 107.22 191.764C107.224 191.757 107.238 191.736 107.255 191.692C107.288 191.61 107.354 191.394 107.354 191V151ZM107.354 95C107.354 94.6058 107.288 94.3904 107.255 94.3076C107.238 94.2644 107.224 94.2429 107.22 94.2363C107.216 94.2302 107.214 94.2283 107.213 94.2275C107.211 94.2257 107.202 94.2168 107.18 94.2031C107.156 94.1883 107.109 94.1632 107.033 94.1348C106.881 94.0782 106.582 94 106.097 94H15.2578C14.7724 94 14.4731 94.0782 14.3213 94.1348C14.2449 94.1632 14.1986 94.1883 14.1748 94.2031C14.1521 94.2173 14.143 94.2262 14.1416 94.2275C14.1408 94.2284 14.139 94.2301 14.1348 94.2363C14.1304 94.2429 14.1168 94.2643 14.0996 94.3076C14.0667 94.3904 14 94.6058 14 95V135C14 135.394 14.0667 135.61 14.0996 135.692C14.1168 135.736 14.1304 135.757 14.1348 135.764C14.139 135.77 14.1408 135.772 14.1416 135.772C14.143 135.774 14.1521 135.783 14.1748 135.797C14.1986 135.812 14.2449 135.837 14.3213 135.865C14.4731 135.922 14.7724 136 15.2578 136H106.097C106.582 136 106.881 135.922 107.033 135.865C107.109 135.837 107.156 135.812 107.18 135.797C107.202 135.783 107.211 135.774 107.213 135.772C107.214 135.772 107.216 135.77 107.22 135.764C107.224 135.757 107.238 135.736 107.255 135.692C107.288 135.61 107.354 135.394 107.354 135V95ZM107.354 39C107.354 38.6058 107.288 38.3904 107.255 38.3076C107.238 38.2644 107.224 38.2429 107.22 38.2363C107.216 38.2302 107.214 38.2283 107.213 38.2275C107.211 38.2257 107.202 38.2168 107.18 38.2031C107.156 38.1883 107.109 38.1632 107.033 38.1348C106.881 38.0782 106.582 38 106.097 38H15.2578C14.7724 38 14.4731 38.0782 14.3213 38.1348C14.2449 38.1632 14.1986 38.1883 14.1748 38.2031C14.1521 38.2173 14.143 38.2262 14.1416 38.2275C14.1408 38.2284 14.139 38.2301 14.1348 38.2363C14.1304 38.2429 14.1168 38.2643 14.0996 38.3076C14.0667 38.3904 14 38.6058 14 39V79C14 79.3942 14.0667 79.6096 14.0996 79.6924C14.1168 79.7357 14.1304 79.7571 14.1348 79.7637C14.139 79.7699 14.1408 79.7716 14.1416 79.7725C14.143 79.7738 14.1521 79.7827 14.1748 79.7969C14.1986 79.8117 14.2449 79.8368 14.3213 79.8652C14.4731 79.9218 14.7724 80 15.2578 80H106.097C106.582 80 106.881 79.9218 107.033 79.8652C107.109 79.8368 107.156 79.8117 107.18 79.7969C107.202 79.7832 107.211 79.7743 107.213 79.7725C107.214 79.7717 107.216 79.7698 107.22 79.7637C107.224 79.7571 107.238 79.7356 107.255 79.6924C107.288 79.6096 107.354 79.3942 107.354 79V39ZM41.29 15C41.29 14.6058 41.2233 14.3904 41.1904 14.3076C41.1732 14.2644 41.1596 14.2429 41.1553 14.2363C41.1511 14.2302 41.1493 14.2283 41.1484 14.2275C41.1466 14.2258 41.1372 14.2169 41.1152 14.2031C41.0914 14.1883 41.045 14.1632 40.9688 14.1348C40.8169 14.0782 40.5178 14 40.0322 14H23.5166C23.031 14 22.7309 14.0782 22.5791 14.1348C22.5027 14.1633 22.4563 14.1883 22.4326 14.2031C22.4092 14.2177 22.4004 14.2266 22.3994 14.2275C22.3986 14.2284 22.3968 14.23 22.3926 14.2363C22.3882 14.2429 22.3747 14.2643 22.3574 14.3076C22.3245 14.3904 22.2578 14.6058 22.2578 15V24H41.29V15ZM99.0967 15C99.0967 14.6058 99.03 14.3904 98.9971 14.3076C98.9799 14.2644 98.9663 14.2429 98.9619 14.2363C98.9577 14.2301 98.9559 14.2283 98.9551 14.2275C98.9535 14.2261 98.9443 14.2171 98.9219 14.2031C98.8981 14.1883 98.8517 14.1632 98.7754 14.1348C98.6236 14.0782 98.3244 14 97.8389 14H81.3223C80.8369 14 80.5375 14.0782 80.3857 14.1348C80.3094 14.1632 80.263 14.1883 80.2393 14.2031C80.2164 14.2174 80.2073 14.2263 80.2061 14.2275C80.2052 14.2284 80.2034 14.23 80.1992 14.2363C80.1948 14.2429 80.1813 14.2643 80.1641 14.3076C80.1312 14.3904 80.0645 14.6058 80.0645 15V24H99.0967V15ZM113.097 25.5107C114.495 26.1706 115.799 27.0527 116.954 28.1719C119.921 31.0462 121.354 34.9412 121.354 39V79C121.354 81.8462 120.648 84.6105 119.204 87C120.648 89.3895 121.354 92.1538 121.354 95V135C121.354 137.846 120.648 140.611 119.204 143C120.648 145.389 121.354 148.154 121.354 151V191C121.354 191.335 121.345 191.668 121.325 192H140.387V183C140.387 178.941 141.82 175.046 144.787 172.172C147.734 169.317 151.643 168 155.646 168H172.161C176.164 168 180.071 169.317 183.019 172.172C185.986 175.046 187.419 178.941 187.419 183V192H198.193V183C198.193 178.941 199.627 175.046 202.594 172.172C205.541 169.317 209.449 168 213.451 168H229.968C233.97 168 237.878 169.317 240.825 172.172C243.792 175.046 245.226 178.941 245.226 183V192H250.2C255.06 192 259.809 193.147 263.549 195.818C267.466 198.616 270 202.947 270 208.143V253.857C270 259.053 267.466 263.384 263.549 266.182C259.809 268.853 255.06 270 250.2 270H19.7998C14.9396 270 10.1913 268.853 6.45117 266.182C2.53412 263.384 8.92991e-05 259.053 0 253.857V208.143C5.4865e-05 204.95 0.95743 202.085 2.60352 199.701C0.853644 197.16 0 194.129 0 191V151C0 148.154 0.706222 145.389 2.15039 143C0.706222 140.611 0 137.846 0 135V95C0 92.1539 0.706222 89.3894 2.15039 87C0.706222 84.6106 0 81.8461 0 79V39C0 34.9412 1.43333 31.0462 4.40039 28.1719C5.55577 27.0526 6.85931 26.1706 8.25781 25.5107V15C8.25781 10.9412 9.69114 7.04622 12.6582 4.17188C15.6053 1.31691 19.5139 0 23.5166 0H40.0322C44.0348 0 47.9426 1.3171 50.8896 4.17188C53.8567 7.04622 55.29 10.9412 55.29 15V24H66.0645V15C66.0645 10.9412 67.4978 7.04622 70.4648 4.17188C73.4119 1.31705 77.3197 6.86267e-05 81.3223 0H97.8389C101.841 3.51509e-05 105.749 1.31707 108.696 4.17188C111.663 7.04622 113.097 10.9412 113.097 15V25.5107Z" fill="#3E3E3E"/>
+<path d="M151.988 148.804L143 48H241.76L232.76 148.788L192.32 160L151.988 148.804Z" fill="#E44F26"/>
+<path d="M192.381 151.432L225.061 142.372L232.749 56.2441H192.381V151.432Z" fill="#F1662A"/>
+<path d="M192.381 93.628H176.021L174.893 80.968H192.381V68.604H192.337H161.381L164.713 105.992H192.381V93.628Z" fill="#EBEBEB"/>
+<path d="M192.382 125.736L192.326 125.752L178.558 122.036L177.678 112.176H165.266L166.998 131.584L192.326 138.616L192.382 138.6V125.736Z" fill="#EBEBEB"/>
+<path d="M192.336 93.6279V105.992H207.56L206.128 122.028L192.336 125.748V138.612L217.684 131.584L217.868 129.496L220.772 96.9479L221.076 93.6279H192.336Z" fill="white"/>
+<path d="M192.337 68.604L192.336 80.968H222.2L223.308 68.604H192.337Z" fill="white"/>
+</svg>

package/examples/vite-app/README.md

@@ -0,0 +1,71 @@
+# Lego SFC and Vite Plugin Example
+
+This example demonstrates how to use Lego with Single File Components (.lego files) and the Vite plugin.
+
+## Setup
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run the dev server:
+```bash
+npm run dev
+```
+
+3. Open your browser to the URL shown (usually `http://localhost:5173`)
+
+## Structure
+
+```
+examples/vite-app/
+├── src/
+│   ├── components/          # .lego files auto-discovered here
+│   │   ├── sample-component.lego
+│   │   └── greeting-card.lego
+│   └── main.js              # Entry point
+├── index.html               # HTML shell
+├── vite.config.js           # Vite configuration with lego plugin
+└── package.json
+```
+
+## How It Works
+
+1. The Vite plugin scans `src/components/` for `.lego` files
+2. Each `.lego` file is parsed and transformed into a `Lego.define()` call
+3. The virtual module `virtual:lego-components` imports all discovered components
+4. Components are automatically registered and available in your HTML
+
+## Creating Components
+
+Create a new `.lego` file in `src/components/`:
+
+```html
+<template>
+  <h1>{{ message }}</h1>
+  <button @click="count++">{{ count }}</button>
+</template>
+
+<script>
+export default {
+  message: 'Hello!',
+  count: 0
+}
+</script>
+
+<style>
+  self {
+    display: block;
+    padding: 1rem;
+  }
+</style>
+```
+
+Then use it in your HTML:
+
+```html
+<your-component-name></your-component-name>
+```
+
+The component name is automatically derived from the filename (kebab-case required).

package/examples/vite-app/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lego Vite Example</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 800px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+      background: #f9fafb;
+    }
+
+    h1 {
+      color: #1f2937;
+      border-bottom: 3px solid #4f46e5;
+      padding-bottom: 0.5rem;
+    }
+
+    .info {
+      background: white;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      margin: 1rem 0;
+      border-left: 4px solid #10b981;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Lego + Vite Example</h1>
+
+  <div class="info">
+    <p><strong>✨ These components are auto-discovered from .lego files!</strong></p>
+    <p>The Vite plugin automatically finds all .lego files in <code>src/components/</code> and registers them.</p>
+  </div>
+
+  <!-- These components are automatically discovered and hydrated -->
+  <sample-component></sample-component>
+  <greeting-card></greeting-card>
+  <todo-list></todo-list>
+
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

package/examples/vite-app/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "lego-vite-example",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lego-dom": "file:../.."
+  },
+  "devDependencies": {
+    "vite": "^5.0.0"
+  }
+}