microui-wc 0.1.0

package/scripts/test-isolated.js

@@ -0,0 +1,151 @@
+#!/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

@@ -0,0 +1,256 @@
+/**
+ * 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/src/chunks/advanced.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview microUI Advanced Chunk
+ * Performance and advanced components
+ */
+
+export { MuVirtualList } from '../components/mu-virtual-list.js';
+export { MuLazy } from '../components/mu-lazy.js';
+export { MuRepeat } from '../components/mu-repeat.js';
+
+// Documentation components (dev only)
+export { MuCode } from '../components/mu-code.js';
+export { MuApiTable } from '../components/mu-api-table.js';
+export { MuExample } from '../components/mu-example.js';
+export { MuDocPage } from '../components/mu-doc-page.js';
+
+// HTTP and Router (advanced)
+export { Router } from '../core/router.js';
+export { http, HttpError } from '../core/http.js';
+
+// Auto-register
+import '../components/mu-virtual-list.js';
+import '../components/mu-lazy.js';
+import '../components/mu-repeat.js';
+import '../components/mu-code.js';
+import '../components/mu-api-table.js';
+import '../components/mu-example.js';
+import '../components/mu-doc-page.js';

package/src/chunks/core.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview microUI Core Chunk
+ * Essential core functionality - always loaded first
+ */
+
+// Base class and utilities
+export { MuElement, define } from '../core/MuElement.js';
+export { bus, UIEvents, showToast } from '../core/bus.js';
+export { Theme } from '../core/theme.js';
+export { createStore, appStore } from '../core/store.js';
+export { createRipple, attachRipple, RippleMixin } from '../core/ripple.js';
+
+// Signals (reactive state)
+export { signal, computed, effect, batch } from '../core/signals.js';
+
+// View transitions
+export {
+    transition,
+    transitionNamed,
+    navigateWithTransition,
+    supportsViewTransitions
+} from '../core/transitions.js';
+
+// Task scheduler
+export {
+    scheduleTask,
+    yieldToMain,
+    processWithYield,
+    runBackground,
+    runImmediate,
+    supportsScheduler
+} from '../core/scheduler.js';
+
+// Render utilities
+export {
+    scheduler,
+    memo,
+    debounce,
+    throttle,
+    createVisibilityObserver,
+    domBatch,
+    processInChunks
+} from '../core/render.js';
+
+// Theme toggle (essential utility)
+export { MuThemeToggle } from '../components/mu-theme-toggle.js';
+import '../components/mu-theme-toggle.js';
+
+// ============================================
+// TOAST LISTENER REGISTRATION (Singleton)
+// Uses CrossBus-native hasListeners() instead of global flags
+// ============================================
+import { Toast as ToastService } from '../components/mu-toast.js';
+import { bus as toastBus, UIEvents as ToastEvents } from '../core/bus.js';
+
+if (!toastBus.hasListeners(ToastEvents.TOAST_SHOW)) {
+    toastBus.on(ToastEvents.TOAST_SHOW, (data) => {
+        ToastService.show(data.message, data);
+    });
+}
+

package/src/chunks/display.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview microUI Display Chunk
+ * Display components for content presentation
+ */
+
+export { MuCard } from '../components/mu-card.js';
+export { MuTabs, MuTab } from '../components/mu-tabs.js';
+export { MuAlert } from '../components/mu-alert.js';
+export { MuBadge } from '../components/mu-badge.js';
+export { MuProgress } from '../components/mu-progress.js';
+export { MuTable, MuThead, MuTbody, MuTr, MuTh, MuTd } from '../components/mu-table.js';
+export { MuAvatar } from '../components/mu-avatar.js';
+export { MuSkeleton } from '../components/mu-skeleton.js';
+export { MuIcon, IconNames } from '../components/mu-icon.js';
+
+// Auto-register
+import '../components/mu-card.js';
+import '../components/mu-tabs.js';
+import '../components/mu-alert.js';
+import '../components/mu-badge.js';
+import '../components/mu-progress.js';
+import '../components/mu-table.js';
+import '../components/mu-avatar.js';
+import '../components/mu-skeleton.js';
+import '../components/mu-icon.js';

package/src/chunks/feedback.js

@@ -0,0 +1,15 @@
+/**
+ * @fileoverview microUI Feedback Chunk
+ * User feedback components
+ */
+
+export { MuSpinner } from '../components/mu-spinner.js';
+export { MuModal } from '../components/mu-modal.js';
+export { MuToast, Toast } from '../components/mu-toast.js';
+export { MuTooltip } from '../components/mu-tooltip.js';
+
+// Auto-register
+import '../components/mu-spinner.js';
+import '../components/mu-modal.js';
+import '../components/mu-toast.js';
+import '../components/mu-tooltip.js';

package/src/chunks/forms.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview microUI Forms Chunk
+ * Form components - loaded when forms are needed
+ */
+
+export { MuButton } from '../components/mu-button.js';
+export { MuInput } from '../components/mu-input.js';
+export { MuTextarea } from '../components/mu-textarea.js';
+export { MuForm } from '../components/mu-form.js';
+export { MuDropdown, MuOption } from '../components/mu-dropdown.js';
+export { MuCheckbox } from '../components/mu-checkbox.js';
+export { MuSwitch } from '../components/mu-switch.js';
+export { MuRadioGroup, MuRadio } from '../components/mu-radio.js';
+export { MuChip } from '../components/mu-chip.js';
+
+// Auto-register
+import '../components/mu-button.js';
+import '../components/mu-input.js';
+import '../components/mu-textarea.js';
+import '../components/mu-form.js';
+import '../components/mu-dropdown.js';
+import '../components/mu-checkbox.js';
+import '../components/mu-switch.js';
+import '../components/mu-radio.js';
+import '../components/mu-chip.js';

package/src/chunks/layout.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview microUI Layout Chunk
+ * Layout components for page structure
+ */
+
+export { MuStack } from '../components/mu-stack.js';
+export { MuGrid } from '../components/mu-grid.js';
+export { MuContainer } from '../components/mu-container.js';
+export { MuNavbar, MuNavbarBrand, MuNavbarLinks, MuNavbarActions } from '../components/mu-navbar.js';
+export { MuSidebar, MuSidebarItem } from '../components/mu-sidebar.js';
+export { MuDivider } from '../components/mu-divider.js';
+export { MuLayout } from '../components/mu-layout.js';
+export { MuDrawer } from '../components/mu-drawer.js';
+export { MuDrawerItem } from '../components/mu-drawer-item.js';
+export { MuBottomNav } from '../components/mu-bottom-nav.js';
+
+// Auto-register
+import '../components/mu-stack.js';
+import '../components/mu-grid.js';
+import '../components/mu-container.js';
+import '../components/mu-navbar.js';
+import '../components/mu-sidebar.js';
+import '../components/mu-divider.js';
+import '../components/mu-layout.js';
+import '../components/mu-drawer.js';
+import '../components/mu-drawer-item.js';
+import '../components/mu-bottom-nav.js';