lego-dom 0.0.5 → 0.0.8

package/docs/api/directives.md

@@ -0,0 +1,42 @@
+# Directives
+
+Special attributes that control DOM behavior.
+
+## b-if
+
+Conditionally render an element.
+
+```html
+<div b-if="loading">Loading...</div>
+<div b-if="!loading">Content loaded!</div>
+```
+
+## b-for
+
+Render a list of items.
+
+```html
+<ul>
+  <li b-for="user in users">
+    {{ user.name }}
+  </li>
+</ul>
+```
+
+## b-sync
+
+Two-way data binding for form inputs.
+
+```html
+<input b-sync="username" placeholder="Enter username">
+<p>You typed: {{ username }}</p>
+```
+
+## @event
+
+Event listeners.
+
+```html
+<button @click="save()">Save</button>
+<input @input="validate($event)">
+```

package/docs/api/globals.md

@@ -0,0 +1,29 @@
+# Global Helpers
+
+LegoJS exposes a global `Lego` object when loaded via CDN, or as exports when using modules.
+
+## Lego.page
+
+Access to the router's current state.
+
+```js
+console.log(Lego.page.params); // URL parameters
+console.log(Lego.page.query);  // Query string parameters
+```
+
+## Lego.create()
+
+Manually create a reactive object (stud) detached from a component.
+
+```js
+const store = Lego.create({ count: 0 });
+```
+
+## Event Bus
+
+Simple global event bus.
+
+```js
+Lego.on('user-login', (user) => { ... });
+Lego.emit('user-login', { name: 'Alice' });
+```

package/docs/api/index.md

@@ -0,0 +1,29 @@
+# API Reference
+
+Welcome to the LegoJS API documentation.
+
+## Core
+
+- [Lego.define()](/api/define) - Defining components
+- [Lego.route()](/api/route) - Client-side routing
+- [Lego.globals](/api/globals) - Global state
+- [Lifecycle Hooks](/api/lifecycle) - Component lifecycle methods
+
+## Templates & Binding
+
+- [Directives](/api/directives) - `b-if`, `b-for`, `b-sync`
+
+## Browser Support
+
+LegoJS requires:
+- Web Components (Custom Elements v1)
+- Shadow DOM v1
+- ES6 Proxy
+- Template Literals
+- MutationObserver
+
+Supported browsers:
+- Chrome 63+
+- Firefox 63+
+- Safari 11.1+
+- Edge 79+

package/docs/api/lifecycle.md

@@ -0,0 +1,40 @@
+# Lifecycle Hooks
+
+Methods that are automatically called during a component's lifecycle.
+
+## init()
+
+Called when the component is initialized and state is reactive, but before rendering.
+
+```js
+{
+  init() {
+    this.fetchData();
+  }
+}
+```
+
+## render()
+
+Called after the DOM has been updated.
+
+```js
+{
+  render() {
+    console.log('Component rendered');
+  }
+}
+```
+
+## destroy()
+
+Called when the component is removed from the DOM.
+
+```js
+{
+  destroy() {
+    // Cleanup timers or listeners
+    clearInterval(this.timer);
+  }
+}
+```

package/docs/api/route.md

@@ -0,0 +1,37 @@
+# Lego.route()
+
+Client-side routing.
+
+## Type Signature
+
+```ts
+Lego.route(path: string, componentOrHtml: string | HTMLElement)
+```
+
+## Arguments
+
+- **path**: The URL path pattern (e.g., `/users/:id`).
+- **componentOrHtml**: The tag name of the component to render, or raw HTML.
+
+## Example
+
+```js
+// Route to a component
+Lego.route('/', 'home-page');
+Lego.route('/about', 'about-page');
+
+// Route with params
+Lego.route('/user/:id', 'user-profile');
+```
+
+## Router Outlet
+
+You must have a `<router-outlet>` in your DOM where the routed content will appear.
+
+```html
+<nav>
+  <a href="/">Home</a>
+  <a href="/about">About</a>
+</nav>
+<router-outlet></router-outlet>
+```

package/docs/api/vite-plugin.md

@@ -0,0 +1,58 @@
+# Vite Plugin API
+
+LegoJS includes a Vite plugin for processing `.lego` Single File Components.
+
+## Installation
+
+```bash
+npm install vite lego-dom
+```
+
+## Usage
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import legoPlugin from 'lego-dom/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    legoPlugin({
+      // Options
+    })
+  ]
+});
+```
+
+## Options
+
+### `componentsDir`
+
+- **Type**: `string`
+- **Default**: `'src/components'`
+
+Directory to search for `.lego` files.
+
+### `include`
+
+- **Type**: `string | string[]`
+- **Default**: `'**/*.lego'`
+
+Glob pattern(s) to match files.
+
+### `exclude`
+
+- **Type**: `string | string[]`
+- **Default**: `null`
+
+Glob pattern(s) to exclude files.
+
+## Virtual Module
+
+The plugin exposes a virtual module to register all components:
+
+```js
+import registerComponents from 'virtual:lego-components';
+
+registerComponents();
+```

package/docs/examples/form.md

@@ -0,0 +1,42 @@
+# Form Example
+
+Handling forms in LegoJS.
+
+## 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-if="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

@@ -0,0 +1,104 @@
+# Examples
+
+Explore these hands-on examples to learn LegoJS 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-if="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 LegoJS', 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/LegoJS)