microui-wc 0.1.0 → 0.1.2

package/scripts/build-utils.js

@@ -1,101 +0,0 @@
-/**
- * @fileoverview Build utilities for microUI
- * 
- * Contains reusable functions for the build process,
- * particularly for automatic component detection.
- */
-
-/**
- * Scan HTML content for mu-* components within page divs.
- * Extracts component names from each page section.
- * 
- * @param {string} htmlContent - Full HTML content to scan
- * @returns {Object<string, string[]>} Map of pageId -> component names
- * 
- * @example
- * const html = '<div id="page-home"><mu-button>Click</mu-button></div>';
- * const result = scanPageComponents(html);
- * // { home: ['mu-button'] }
- */
-export function scanPageComponents(htmlContent) {
-    const pages = {};
-
-    // Match page divs: <div id="page-xxx">...</div>
-    // Use non-greedy matching and look ahead for next page or end
-    const pageRegex = /<div\s+id="page-(\w+)"[^>]*>([\s\S]*?)(?=<div\s+id="page-|\s*<\/mu-layout|\s*<footer|\s*$)/gi;
-
-    let match;
-    while ((match = pageRegex.exec(htmlContent)) !== null) {
-        const pageId = match[1];
-        const pageContent = match[2];
-
-        // Extract all mu-* tags (opening tags only)
-        const components = new Set();
-        const tagRegex = /<(mu-[\w-]+)/gi;
-        let tagMatch;
-        while ((tagMatch = tagRegex.exec(pageContent)) !== null) {
-            // Normalize to lowercase
-            components.add(tagMatch[1].toLowerCase());
-        }
-
-        if (components.size > 0) {
-            pages[pageId] = [...components].sort();
-        }
-    }
-
-    return pages;
-}
-
-/**
- * Map component names to their route file names.
- * Some components share routes (e.g., mu-tab is in tabs route).
- * 
- * @param {string[]} components - Array of component names
- * @returns {string[]} Array of route names to load
- */
-export function componentsToRoutes(components) {
-    // Component -> route mapping (most are 1:1 with pluralization)
-    const componentRouteMap = {
-        'mu-tab': 'tabs',
-        'mu-tabs': 'tabs',
-        'mu-button': 'buttons',
-        'mu-input': 'inputs',
-        'mu-textarea': 'inputs',
-        'mu-checkbox': 'checkboxes',
-        'mu-switch': 'switches',
-        'mu-radio': 'radios',
-        'mu-dropdown': 'dropdowns',
-        'mu-card': 'cards',
-        'mu-stack': 'layout',
-        'mu-grid': 'layout',
-        'mu-alert': 'alerts',
-        'mu-toast': 'toasts',
-        'mu-modal': 'modals',
-        'mu-progress': 'progress',
-        'mu-spinner': 'progress',
-        'mu-avatar': 'avatars',
-        'mu-badge': 'badges',
-        'mu-chip': 'chips',
-        'mu-icon': 'icons',
-        'mu-navbar': 'navbar',
-        'mu-example': 'tabs',  // part of tabs route
-        'mu-code': 'tabs',     // part of tabs route
-        'mu-api-table': 'tabs', // part of tabs route
-        // Shell components (always loaded)
-        'mu-layout': 'shell-critical',
-        'mu-drawer': 'shell-critical',
-        'mu-drawer-item': 'shell-critical',
-        'mu-theme-toggle': 'shell-deferred',
-        'mu-bottom-nav': 'shell-deferred',
-    };
-
-    const routes = new Set();
-    for (const comp of components) {
-        const route = componentRouteMap[comp];
-        if (route) {
-            routes.add(route);
-        }
-    }
-
-    return [...routes].sort();
-}

package/scripts/test-isolated.js

@@ -1,151 +0,0 @@
-#!/usr/bin/env bun
-/**
- * @fileoverview Isolated Test Runner
- * 
- * Runs each test file in a separate Bun process to ensure complete isolation
- * of globalThis, module cache, and custom element registries.
- * 
- * This solves the linkedom globalThis pollution issue where tests pass
- * individually but fail when run together.
- * 
- * Usage: bun run scripts/test-isolated.js [pattern]
- */
-
-import { spawn } from 'bun';
-import { readdirSync, statSync } from 'fs';
-import { join, relative } from 'path';
-
-const args = process.argv.slice(2);
-const filterPattern = args[0] || '';
-
-// Colors for output
-const colors = {
-    reset: '\x1b[0m',
-    green: '\x1b[32m',
-    red: '\x1b[31m',
-    yellow: '\x1b[33m',
-    cyan: '\x1b[36m',
-    dim: '\x1b[2m'
-};
-
-// Find all test files
-function findTestFiles(dir, files = []) {
-    const entries = readdirSync(dir);
-    for (const entry of entries) {
-        const fullPath = join(dir, entry);
-        const stat = statSync(fullPath);
-        if (stat.isDirectory() && !entry.startsWith('.') && entry !== 'node_modules') {
-            findTestFiles(fullPath, files);
-        } else if (entry.endsWith('.test.js')) {
-            files.push(fullPath);
-        }
-    }
-    return files;
-}
-
-// Run a single test file in isolation
-async function runTestFile(testFile) {
-    const relativePath = relative(process.cwd(), testFile);
-
-    const proc = spawn({
-        cmd: ['bun', 'test', testFile],
-        cwd: process.cwd(),
-        stdout: 'pipe',
-        stderr: 'pipe',
-        env: {
-            ...process.env,
-            FORCE_COLOR: '1'
-        }
-    });
-
-    const stdout = await new Response(proc.stdout).text();
-    const stderr = await new Response(proc.stderr).text();
-    const exitCode = await proc.exited;
-
-    // Combine output (bun test writes summary to stderr)
-    const output = stdout + stderr;
-
-    // Parse results from output
-    const passMatch = output.match(/\s*(\d+)\s+pass/);
-    const failMatch = output.match(/\s*(\d+)\s+fail/);
-    const skipMatch = output.match(/\s*(\d+)\s+skip/);
-
-    const pass = passMatch ? parseInt(passMatch[1]) : 0;
-    const fail = failMatch ? parseInt(failMatch[1]) : 0;
-    const skip = skipMatch ? parseInt(skipMatch[1]) : 0;
-
-    return {
-        file: relativePath,
-        pass,
-        fail,
-        skip,
-        exitCode,
-        stdout,
-        stderr
-    };
-}
-
-// Main execution
-async function main() {
-    const testsDir = join(process.cwd(), 'tests');
-    let testFiles = findTestFiles(testsDir);
-
-    // Filter by pattern if provided
-    if (filterPattern) {
-        testFiles = testFiles.filter(f => f.includes(filterPattern));
-    }
-
-    // Filter out e2e tests (they have their own runner)
-    testFiles = testFiles.filter(f => !f.includes('/e2e/'));
-
-    console.log(`${colors.cyan}🧪 Isolated Test Runner${colors.reset}`);
-    console.log(`${colors.dim}Running ${testFiles.length} test files in separate processes...${colors.reset}\n`);
-
-    const startTime = Date.now();
-    const results = [];
-
-    for (const testFile of testFiles) {
-        const result = await runTestFile(testFile);
-        results.push(result);
-
-        // Print inline status
-        const status = result.fail === 0
-            ? `${colors.green}✓${colors.reset}`
-            : `${colors.red}✗${colors.reset}`;
-        const counts = `${colors.green}${result.pass}${colors.reset}/${colors.red}${result.fail}${colors.reset}/${colors.yellow}${result.skip}${colors.reset}`;
-        console.log(`${status} ${result.file} [${counts}]`);
-
-        // Show errors for failed files
-        if (result.fail > 0 && process.env.VERBOSE) {
-            console.log(result.stdout);
-        }
-    }
-
-    const duration = Date.now() - startTime;
-
-    // Summary
-    const totalPass = results.reduce((sum, r) => sum + r.pass, 0);
-    const totalFail = results.reduce((sum, r) => sum + r.fail, 0);
-    const totalSkip = results.reduce((sum, r) => sum + r.skip, 0);
-    const failedFiles = results.filter(r => r.fail > 0);
-
-    console.log(`\n${colors.cyan}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${colors.reset}`);
-    console.log(`${colors.green}${totalPass} pass${colors.reset} | ${colors.red}${totalFail} fail${colors.reset} | ${colors.yellow}${totalSkip} skip${colors.reset}`);
-    console.log(`${colors.dim}Ran ${results.length} test files in ${(duration / 1000).toFixed(2)}s${colors.reset}`);
-
-    if (failedFiles.length > 0) {
-        console.log(`\n${colors.red}Failed files:${colors.reset}`);
-        for (const f of failedFiles) {
-            console.log(`  ${colors.red}✗${colors.reset} ${f.file} (${f.fail} failures)`);
-        }
-        process.exit(1);
-    }
-
-    console.log(`\n${colors.green}✓ All tests passed!${colors.reset}`);
-    process.exit(0);
-}
-
-main().catch(err => {
-    console.error('Error:', err);
-    process.exit(1);
-});

package/server.js

@@ -1,256 +0,0 @@
-/**
- * microUI Dev Server with caching + Brotli/gzip compression
- * Optimized for Lighthouse 100 - SOTA 2026
- * Run: bun run server.js
- */
-
-import { brotliCompressSync, constants as zlibConstants } from 'zlib';
-
-const PORT = 5001;
-
-// Cache durations
-const CACHE_LONG = 'public, max-age=31536000, immutable'; // 1 year for versioned assets
-const CACHE_SHORT = 'public, max-age=3600'; // 1 hour for HTML
-const CACHE_REVALIDATE = 'public, max-age=0, must-revalidate'; // Always revalidate but allow bf-cache
-
-// MIME types
-const MIME_TYPES = {
-    '.html': 'text/html; charset=utf-8',
-    '.css': 'text/css; charset=utf-8',
-    '.js': 'text/javascript; charset=utf-8',
-    '.mjs': 'text/javascript; charset=utf-8',
-    '.json': 'application/json',
-    '.txt': 'text/plain; charset=utf-8',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.webp': 'image/webp',
-    '.svg': 'image/svg+xml',
-    '.ico': 'image/x-icon',
-    '.woff': 'font/woff',
-    '.woff2': 'font/woff2',
-    '.webmanifest': 'application/manifest+json',
-};
-
-// Types that benefit from gzip
-const COMPRESSIBLE_TYPES = ['.html', '.css', '.js', '.mjs', '.json', '.svg'];
-
-// Preload hints for critical resources (Link headers)
-const PRELOAD_HINTS = {
-    '/demo/shell.html': [
-        '</dist/microui.css>; rel=preload; as=style',
-        '</assets/fonts/roboto-400.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin',
-        '</assets/logo-banner-400.webp>; rel=preload; as=image; type="image/webp"',
-    ],
-};
-
-function getContentType(path) {
-    const ext = path.match(/\.[^.]+$/)?.[0] || '';
-    return MIME_TYPES[ext] || 'application/octet-stream';
-}
-
-function getCacheControl(path) {
-    const cleanPath = path.split('?')[0];
-
-    // Immutable assets: versioned bundles, fonts, images
-    if (cleanPath.startsWith('/dist/') ||
-        cleanPath.startsWith('/assets/') ||
-        cleanPath.endsWith('.woff2') ||
-        cleanPath.endsWith('.woff') ||
-        cleanPath.endsWith('.png') ||
-        cleanPath.endsWith('.webp') ||
-        cleanPath.endsWith('.jpg') ||
-        cleanPath.endsWith('.ico')) {
-        return CACHE_LONG;
-    }
-
-    // HTML: allow bf-cache but revalidate
-    if (cleanPath.endsWith('.html') || cleanPath === '/' || cleanPath === '/index.html') {
-        return CACHE_REVALIDATE;
-    }
-
-    // SW and manifest need revalidate
-    if (cleanPath.endsWith('sw.js') || cleanPath.endsWith('manifest.json')) {
-        return CACHE_REVALIDATE;
-    }
-
-    return CACHE_SHORT;
-}
-
-function shouldCompress(path) {
-    const cleanPath = path.split('?')[0];
-    const ext = cleanPath.match(/\.[^.]+$/)?.[0] || '';
-    return COMPRESSIBLE_TYPES.includes(ext);
-}
-
-function getPreloadLinks(path) {
-    return PRELOAD_HINTS[path] || [];
-}
-
-const MAX_PORT_RETRIES = 10;
-
-function startServer(initialPort) {
-    let port = initialPort;
-
-    for (let i = 0; i < MAX_PORT_RETRIES; i++) {
-        try {
-            const server = Bun.serve({
-                port: port,
-                async fetch(req) {
-                    const url = new URL(req.url);
-                    let path = url.pathname;
-
-                    // ===== CACHE MANAGEMENT ENDPOINTS =====
-
-                    // Clear cache endpoint - sends headers to invalidate browser cache
-                    if (path === '/-/clear-cache') {
-                        return new Response(JSON.stringify({
-                            status: 'ok',
-                            message: 'Cache cleared. Reload the page with Ctrl+Shift+R',
-                            timestamp: new Date().toISOString()
-                        }), {
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'Cache-Control': 'no-store, no-cache, must-revalidate',
-                                'Clear-Site-Data': '"cache", "storage"',
-                            },
-                        });
-                    }
-
-                    // Health check
-                    if (path === '/-/health') {
-                        return new Response(JSON.stringify({ status: 'ok', port: server.port }), {
-                            headers: { 'Content-Type': 'application/json' },
-                        });
-                    }
-
-                    // Serve robots.txt inline (Lighthouse has issues with redirects)
-                    if (path === '/robots.txt') {
-                        const robotsTxt = `# robots.txt for microUI
-User-agent: *
-Allow: /
-
-# Sitemap
-Sitemap: https://microui.dev/sitemap.xml
-`;
-                        return new Response(robotsTxt, {
-                            headers: {
-                                'Content-Type': 'text/plain; charset=utf-8',
-                                'Cache-Control': 'public, max-age=86400',
-                                'X-Robots-Tag': 'all',
-                            },
-                        });
-                    }
-
-                    // Default to demo/shell.html for root
-                    if (path === '/' || path === '/index.html') {
-                        path = '/demo/shell.html';
-                    }
-
-                    // Serve shell.html for App Shell pattern
-                    if (path === '/shell.html') {
-                        path = '/demo/shell.html';
-                    }
-
-                    // Serve content fragments for dynamic loading
-                    if (path.startsWith('/content/')) {
-                        path = '/demo' + path;
-                    }
-
-                    // Serve PWA assets from demo/
-                    if (path === '/sw.js' || path === '/manifest.json' ||
-                        path === '/favicon.ico' || path === '/favicon.png') {
-                        path = '/demo' + path;
-                    }
-
-                    // Security: prevent directory traversal
-                    if (path.includes('..')) {
-                        return new Response('Forbidden', { status: 403 });
-                    }
-
-                    const filePath = '.' + path;
-                    const file = Bun.file(filePath);
-
-                    if (await file.exists()) {
-                        const contentType = getContentType(path);
-                        const cacheControl = getCacheControl(path);
-                        const acceptEncoding = req.headers.get('accept-encoding') || '';
-                        const preloadLinks = getPreloadLinks(path);
-
-                        // Build headers
-                        const headers = {
-                            'Content-Type': contentType,
-                            'Cache-Control': cacheControl,
-                            'X-Content-Type-Options': 'nosniff',
-                            // Enable bf-cache
-                            'Vary': 'Accept-Encoding',
-                        };
-
-                        // Add Link preload headers for HTML
-                        if (preloadLinks.length > 0) {
-                            headers['Link'] = preloadLinks.join(', ');
-                        }
-
-                        // Brotli (priority) or Gzip compression for text assets
-                        if (shouldCompress(path)) {
-                            const content = await file.arrayBuffer();
-                            const rawData = Buffer.from(content);
-
-                            // Prefer Brotli (20-30% better compression than gzip)
-                            if (acceptEncoding.includes('br')) {
-                                try {
-                                    const brotliCompressed = brotliCompressSync(rawData, {
-                                        params: {
-                                            [zlibConstants.BROTLI_PARAM_QUALITY]: 6, // Balance speed/compression
-                                        }
-                                    });
-
-                                    return new Response(brotliCompressed, {
-                                        headers: {
-                                            ...headers,
-                                            'Content-Encoding': 'br',
-                                        },
-                                    });
-                                } catch {
-                                    // Fallback to gzip if Brotli fails
-                                }
-                            }
-
-                            // Fallback to gzip
-                            if (acceptEncoding.includes('gzip')) {
-                                const compressed = Bun.gzipSync(new Uint8Array(content));
-                                return new Response(compressed, {
-                                    headers: {
-                                        ...headers,
-                                        'Content-Encoding': 'gzip',
-                                    },
-                                });
-                            }
-                        }
-
-                        return new Response(file, { headers });
-                    }
-
-                    return new Response('Not Found', { status: 404 });
-                },
-            });
-
-            console.log(`🚀 microUI Dev Server running at http://localhost:${server.port}`);
-            console.log(`📦 Lighthouse-optimized: Cache-Control, Gzip, Link preload`);
-            console.log(`🧹 Clear cache: http://localhost:${server.port}/-/clear-cache`);
-            return server;
-        } catch (e) {
-            if (e.code === 'EADDRINUSE') {
-                console.warn(`⚠️ Port ${port} is busy, trying ${port + 1}...`);
-                port++;
-            } else {
-                throw e;
-            }
-        }
-    }
-
-    console.error(`❌ Failed to start server after ${MAX_PORT_RETRIES} attempts. Last port tried: ${port}`);
-    process.exit(1);
-}
-
-startServer(PORT);

package/tests/agents/agent-integration.test.js

@@ -1,76 +0,0 @@
-import { describe, test, expect, beforeAll } from 'bun:test';
-import { parseHTML } from 'linkedom';
-
-// Mock Browser Environment
-const { document, customElements, HTMLElement, window } = parseHTML('<!DOCTYPE html><html><body></body></html>');
-globalThis.document = document;
-globalThis.customElements = customElements;
-globalThis.HTMLElement = HTMLElement;
-globalThis.window = window;
-globalThis.requestAnimationFrame = (cb) => cb();
-
-describe('Agent Integration Features', () => {
-    let MuElement, MuInput, MuButton;
-
-    beforeAll(async () => {
-        // Load Core
-        const core = await import('../../src/core/MuElement.js');
-        MuElement = core.MuElement;
-
-        // Load Components
-        const inputModule = await import('../../src/components/mu-input.js');
-        MuInput = inputModule.MuInput;
-
-        const buttonModule = await import('../../src/components/mu-button.js');
-        MuButton = buttonModule.MuButton;
-    });
-
-    test('should expose window.__MICROUI_ERRORS__', () => {
-        // Create an element to trigger init
-        const el = new MuInput();
-        expect(Array.isArray(window.__MICROUI_ERRORS__)).toBe(true);
-    });
-
-    test('should expose window.microUIAgent helper', () => {
-        expect(window.microUIAgent).toBeDefined();
-        expect(typeof window.microUIAgent.reset).toBe('function');
-        expect(typeof window.microUIAgent.getErrors).toBe('function');
-    });
-
-    test('should log error for invalid button variant', () => {
-        window.microUIAgent.reset();
-
-        const btn = document.createElement('mu-button');
-        btn.setAttribute('variant', 'invalid-variant');
-        document.body.appendChild(btn); // Render triggers updateClasses -> validation
-
-        const errors = window.microUIAgent.getErrors();
-        expect(errors.length).toBe(1);
-        expect(errors[0].code).toBe('INVALID_VARIANT');
-        expect(errors[0].component).toBe('mu-button');
-    });
-
-    test('should log error for missing input label', () => {
-        window.microUIAgent.reset();
-
-        const input = document.createElement('mu-input');
-        // No label, no aria-label, no placeholder validation logic check?
-        // Logic: if (!labelText && !ariaLabel) -> Error
-        document.body.appendChild(input);
-
-        const errors = window.microUIAgent.getErrors();
-        expect(errors.length).toBe(1);
-        expect(errors[0].code).toBe('A11Y_MISSING_LABEL');
-    });
-
-    test('should NOT log error if label is present', () => {
-        window.microUIAgent.reset();
-
-        const input = document.createElement('mu-input');
-        input.setAttribute('label', 'Valid Label');
-        document.body.appendChild(input);
-
-        const errors = window.microUIAgent.getErrors();
-        expect(errors.length).toBe(0);
-    });
-});