microui-wc 0.1.0

package/src/components/mu-repeat.js

@@ -0,0 +1,135 @@
+/**
+ * @fileoverview mu-repeat - Efficient List Rendering with Keyed Diffing
+ * 
+ * Renders arrays efficiently by only updating changed items.
+ * Uses key-based reconciliation like React/Vue.
+ * 
+ * Usage:
+ * <mu-repeat id="list"></mu-repeat>
+ * 
+ * const list = document.getElementById('list');
+ * list.items = users;
+ * list.keyFn = (user) => user.id;
+ * list.renderItem = (user) => `<div>${user.name}</div>`;
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { scheduler } from '../core/render.js';
+
+export class MuRepeat extends MuElement {
+    static baseClass = 'mu-repeat';
+    static observedAttributes = [];
+
+    #items = [];
+    #keyFn = (item, index) => index;
+    #renderItem = (item) => `<div>${JSON.stringify(item)}</div>`;
+    #itemNodes = new Map(); // key -> DOM element
+
+    set items(arr) {
+        const oldItems = this.#items;
+        this.#items = arr || [];
+
+        // Schedule batched update
+        scheduler.schedule(() => this.#reconcile(oldItems));
+    }
+
+    get items() {
+        return this.#items;
+    }
+
+    set keyFn(fn) {
+        this.#keyFn = fn;
+    }
+
+    set renderItem(fn) {
+        this.#renderItem = fn;
+    }
+
+    render() {
+        this.style.display = 'contents';
+    }
+
+    /**
+     * Efficient reconciliation - only updates changed items
+     */
+    #reconcile(oldItems) {
+        const newKeys = new Set();
+        const fragment = document.createDocumentFragment();
+
+        // Build set of new keys
+        for (let i = 0; i < this.#items.length; i++) {
+            const key = this.#keyFn(this.#items[i], i);
+            newKeys.add(key);
+        }
+
+        // Remove items that no longer exist
+        for (const [key, node] of this.#itemNodes) {
+            if (!newKeys.has(key)) {
+                node.remove();
+                this.#itemNodes.delete(key);
+            }
+        }
+
+        // Add/update items
+        let prevNode = null;
+
+        for (let i = 0; i < this.#items.length; i++) {
+            const item = this.#items[i];
+            const key = this.#keyFn(item, i);
+
+            let node = this.#itemNodes.get(key);
+
+            if (!node) {
+                // Create new node
+                const wrapper = document.createElement('div');
+                wrapper.innerHTML = this.#renderItem(item, i);
+                node = wrapper.firstElementChild || wrapper;
+                node.dataset.muKey = key;
+                this.#itemNodes.set(key, node);
+            } else {
+                // Update existing node content
+                const newContent = this.#renderItem(item, i);
+                if (node.outerHTML !== newContent) {
+                    const wrapper = document.createElement('div');
+                    wrapper.innerHTML = newContent;
+                    const newNode = wrapper.firstElementChild || wrapper;
+                    newNode.dataset.muKey = key;
+                    node.replaceWith(newNode);
+                    this.#itemNodes.set(key, newNode);
+                    node = newNode;
+                }
+            }
+
+            // Position correctly
+            if (prevNode) {
+                if (node.previousElementSibling !== prevNode) {
+                    prevNode.after(node);
+                }
+            } else {
+                if (this.firstElementChild !== node) {
+                    this.prepend(node);
+                }
+            }
+
+            prevNode = node;
+        }
+    }
+
+    /**
+     * Get DOM element for a key
+     */
+    getElement(key) {
+        return this.#itemNodes.get(key);
+    }
+
+    /**
+     * Force full re-render
+     */
+    refresh() {
+        this.#itemNodes.clear();
+        this.innerHTML = '';
+        scheduler.schedule(() => this.#reconcile([]));
+    }
+}
+
+define('mu-repeat', MuRepeat);

package/src/components/mu-router.js

@@ -0,0 +1,169 @@
+/**
+ * mu-router - Route management and lazy page loading
+ * 
+ * Features:
+ * - Hash-based routing (#page-name)
+ * - Lazy loads pages from /app/pages/{route}.html
+ * - Caches loaded pages
+ * - Emits navigation events
+ * 
+ * Usage:
+ *   <mu-router base="/app/pages"></mu-router>
+ * 
+ * @agent-pattern
+ * This component is core to the page-based app architecture.
+ * Place one <mu-router> in your app shell where pages should render.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+class MuRouter extends MuElement {
+    static baseClass = 'mu-router';
+    static observedAttributes = ['base', 'default'];
+
+    // Cache for loaded pages
+    #pageCache = new Map();
+    #currentRoute = null;
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Listen for hash changes - use this.listen() for automatic cleanup
+        this.listen(window, 'hashchange', () => this.#handleRoute());
+
+        // Handle initial route
+        this.#handleRoute();
+    }
+
+    // disconnectedCallback handled by MuElement (AbortController cleanup)
+
+    render() {
+        // Empty container - pages render inside
+        this.innerHTML = '<div class="mu-router__content"></div>';
+    }
+
+    get #basePath() {
+        return this.attr('base', '/app/pages');
+    }
+
+    get #defaultRoute() {
+        return this.attr('default', 'home');
+    }
+
+    get #contentContainer() {
+        return this.querySelector('.mu-router__content');
+    }
+
+    async #handleRoute() {
+        const hash = window.location.hash.slice(1) || this.#defaultRoute;
+
+        // Skip if same route
+        if (hash === this.#currentRoute) return;
+
+        this.#currentRoute = hash;
+
+        // Emit route-change event
+        this.emit('mu-route-change', { route: hash });
+
+        // Load page
+        await this.#loadPage(hash);
+    }
+
+    async #loadPage(route) {
+        const container = this.#contentContainer;
+        if (!container) return;
+
+        // Show loading state
+        container.innerHTML = '<mu-spinner></mu-spinner>';
+
+        try {
+            // Check cache first
+            if (this.#pageCache.has(route)) {
+                container.innerHTML = this.#pageCache.get(route);
+                this.emit('mu-page-loaded', { route });
+                return;
+            }
+
+            // Fetch page HTML
+            const url = `${this.#basePath}/${route}.html`;
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`Page not found: ${route}`);
+            }
+
+            const html = await response.text();
+
+            // Parse the mu-page and extract template content
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const muPage = doc.querySelector('mu-page');
+
+            if (muPage) {
+                const template = muPage.querySelector('template');
+                const content = template ? template.innerHTML : muPage.innerHTML;
+
+                // Cache and render
+                this.#pageCache.set(route, content);
+                container.innerHTML = content;
+
+                // Load dependencies
+                const deps = muPage.querySelector('script[type="x-dependencies"]');
+                if (deps) {
+                    await this.#loadDependencies(deps.textContent);
+                }
+
+                // Update page title
+                const title = muPage.getAttribute('title');
+                if (title) {
+                    document.title = `${title} | microUI`;
+                }
+            } else {
+                container.innerHTML = html;
+            }
+
+            this.emit('mu-page-loaded', { route });
+
+        } catch (error) {
+            container.innerHTML = `
+        <mu-alert variant="error">
+          <strong>Page not found</strong>
+          <p>Could not load page: ${escapeHTML(route)}</p>
+        </mu-alert>
+      `;
+            this.emit('mu-page-error', { route, error });
+        }
+    }
+
+    async #loadDependencies(depsText) {
+        const deps = depsText
+            .split(/[\n,]/)
+            .map(d => d.trim())
+            .filter(d => d && d.startsWith('mu-'));
+
+        // Load each component
+        for (const dep of deps) {
+            // Skip if already defined
+            if (customElements.get(dep)) continue;
+
+            try {
+                await import(`/dist/components/${dep}.js`);
+            } catch (e) {
+                console.warn(`[mu-router] Could not load: ${dep}`, e);
+            }
+        }
+    }
+
+    // Public API
+    navigate(route) {
+        window.location.hash = route;
+    }
+
+    get currentRoute() {
+        return this.#currentRoute;
+    }
+}
+
+define('mu-router', MuRouter);
+export { MuRouter };