microui-wc 0.1.0

package/scripts/build-framework.js

@@ -0,0 +1,444 @@
+/**
+ * @fileoverview Framework Build - microUI Library
+ * 
+ * Builds the microUI component library:
+ * - ESM bundle (microui.esm.js)
+ * - IIFE bundle (microui.min.js)
+ * - CSS (tokens, components, combined)
+ * - TypeScript types
+ * - Per-component bundles
+ * 
+ * Run with: bun run build:framework
+ */
+
+import { build } from 'bun';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, statSync, unlinkSync, rmdirSync, copyFileSync } from 'fs';
+import { join } from 'path';
+import { scanPageComponents, componentsToRoutes } from './build-utils.js';
+
+const outdir = './dist';
+
+// Ensure dist exists
+if (!existsSync(outdir)) {
+    mkdirSync(outdir, { recursive: true });
+}
+
+console.log('🔨 Building microUI Framework...\\n');
+
+// ============================================
+// 1. ESM Bundle
+// ============================================
+const esmResult = await build({
+    entrypoints: ['./src/index.js'],
+    outdir,
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+    sourcemap: 'external',
+    naming: { entry: 'microui.esm.js' }
+});
+
+if (!esmResult.success) {
+    console.error('❌ ESM build failed:', esmResult.logs);
+    process.exit(1);
+}
+console.log('✅ ESM bundle: dist/microui.esm.js');
+
+// ============================================
+// 2. IIFE Bundle
+// ============================================
+const iifeResult = await build({
+    entrypoints: ['./src/index.js'],
+    outdir,
+    target: 'browser',
+    format: 'iife',
+    minify: true,
+    sourcemap: 'external',
+    naming: { entry: 'microui.min.js' }
+});
+
+if (!iifeResult.success) {
+    console.error('❌ IIFE build failed:', iifeResult.logs);
+    process.exit(1);
+}
+console.log('✅ IIFE bundle: dist/microui.min.js');
+
+// ============================================
+// 3. Chunked Builds (code splitting)
+// ============================================
+console.log('\\n🧩 Building chunked bundles...');
+const chunksDir = join(outdir, 'chunks');
+mkdirSync(chunksDir, { recursive: true });
+
+const chunkedResult = await build({
+    entrypoints: [
+        './src/chunks/core.js',
+        './src/chunks/forms.js',
+        './src/chunks/layout.js',
+        './src/chunks/display.js',
+        './src/chunks/feedback.js',
+        './src/chunks/advanced.js'
+    ],
+    outdir: chunksDir,
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+    splitting: true,
+    sourcemap: 'none'
+});
+
+if (chunkedResult.success) {
+    const files = readdirSync(chunksDir).filter(f => f.endsWith('.js')).sort();
+    let totalSize = 0;
+    for (const file of files) {
+        totalSize += statSync(join(chunksDir, file)).size;
+    }
+    console.log(`   ✅ ${files.length} chunks (${(totalSize / 1024).toFixed(2)} KB)`);
+}
+
+// ============================================
+// 4. Per-Component Bundles
+// ============================================
+console.log('\\n🔧 Building per-component bundles...');
+const componentsDir = join(outdir, 'components');
+mkdirSync(componentsDir, { recursive: true });
+
+const componentFiles = readdirSync('./src/components')
+    .filter(f => f.endsWith('.js'))
+    .map(f => `./src/components/${f}`);
+
+const componentResult = await build({
+    entrypoints: componentFiles,
+    outdir: componentsDir,
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+    splitting: true,
+    sourcemap: 'none'
+});
+
+if (componentResult.success) {
+    const nestedDir = join(componentsDir, 'src', 'components');
+    let totalSize = 0;
+    let count = 0;
+
+    if (existsSync(nestedDir)) {
+        const files = readdirSync(nestedDir).filter(f => f.startsWith('mu-') && f.endsWith('.js'));
+        count = files.length;
+
+        // Flatten and fix paths
+        for (const file of files) {
+            let content = readFileSync(join(nestedDir, file), 'utf-8');
+            content = content.replace(/from"\.\.\/\.\.\/chunk-/g, 'from"./chunk-');
+            writeFileSync(join(componentsDir, file), content);
+            totalSize += content.length;
+        }
+
+        // Cleanup nested structure
+        try {
+            const allFiles = readdirSync(nestedDir);
+            for (const f of allFiles) unlinkSync(join(nestedDir, f));
+            rmdirSync(nestedDir);
+            rmdirSync(join(componentsDir, 'src'));
+        } catch (e) { }
+    }
+
+    const sharedChunks = readdirSync(componentsDir).filter(f => f.startsWith('chunk-'));
+    let sharedSize = 0;
+    for (const f of sharedChunks) {
+        sharedSize += statSync(join(componentsDir, f)).size;
+    }
+
+    console.log(`   ✅ ${count} components (${(totalSize / 1024).toFixed(2)} KB + ${(sharedSize / 1024).toFixed(2)} KB shared)`);
+}
+
+// ============================================
+// 5. CSS
+// ============================================
+console.log('\\n🎨 Building CSS...');
+const tokensCss = readFileSync('./src/styles/tokens.css', 'utf-8');
+const componentsCss = readFileSync('./src/styles/components.css', 'utf-8');
+const animationsCss = existsSync('./src/styles/animations.css')
+    ? readFileSync('./src/styles/animations.css', 'utf-8')
+    : '';
+const commonCss = existsSync('./src/styles/common.css')
+    ? readFileSync('./src/styles/common.css', 'utf-8')
+    : '';
+
+// Minify CSS (basic)
+function minifyCSS(css) {
+    return css
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/\s+/g, ' ')
+        .replace(/\s*([{}:;,>~+])\s*/g, '$1')
+        .replace(/;}/g, '}')
+        .trim();
+}
+
+const combinedCss = `${tokensCss}\n${componentsCss}\n${animationsCss}`;
+writeFileSync(join(outdir, 'microui.css'), minifyCSS(combinedCss));
+writeFileSync(join(outdir, 'tokens.css'), minifyCSS(tokensCss));
+writeFileSync(join(outdir, 'components.css'), minifyCSS(componentsCss));
+
+console.log('   ✅ dist/microui.css (combined, minified)');
+console.log('   ✅ dist/tokens.css');
+console.log('   ✅ dist/components.css');
+
+// 5b. Modular CSS (lazy loading support)
+const cssComponentsDir = join(outdir, 'styles', 'components');
+mkdirSync(cssComponentsDir, { recursive: true });
+
+// Copy common.css
+if (commonCss) {
+    writeFileSync(join(outdir, 'styles', 'common.css'), minifyCSS(commonCss));
+    console.log('   ✅ dist/styles/common.css');
+}
+
+// Copy individual component CSS files
+const srcCssComponentsDir = './src/styles/components';
+if (existsSync(srcCssComponentsDir)) {
+    const cssFiles = readdirSync(srcCssComponentsDir).filter(f => f.endsWith('.css'));
+    for (const file of cssFiles) {
+        const content = readFileSync(join(srcCssComponentsDir, file), 'utf-8');
+        writeFileSync(join(cssComponentsDir, file), minifyCSS(content));
+    }
+    console.log(`   ✅ dist/styles/components/ (${cssFiles.length} modular CSS files)`);
+}
+
+// ============================================
+// 6. TypeScript Types
+// ============================================
+console.log('\\n📘 Building TypeScript types...');
+if (existsSync('./src/index.d.ts')) {
+    const types = readFileSync('./src/index.d.ts', 'utf-8');
+    writeFileSync(join(outdir, 'microui.d.ts'), types);
+    console.log('   ✅ dist/microui.d.ts');
+}
+
+// ============================================
+// 7. Route Bundles (for index-ultra.html)
+// ============================================
+console.log('\\n🛤️  Building route bundles...');
+const routesDir = join(outdir, 'routes');
+mkdirSync(routesDir, { recursive: true });
+
+// Define page -> component mappings
+// shell-critical: ONLY what's needed for first paint (layout structure)
+// shell-deferred: Everything else (can load after FCP)
+const pageRoutes = {
+    'shell-critical': ['mu-layout', 'mu-drawer', 'mu-drawer-item'],
+    'shell-deferred': ['mu-theme-toggle', 'mu-navbar', 'mu-toast', 'mu-icon', 'mu-stack', 'mu-bottom-nav'],
+    shell: ['mu-theme-toggle', 'mu-navbar', 'mu-toast', 'mu-icon', 'mu-stack', 'mu-layout', 'mu-drawer', 'mu-drawer-item', 'mu-bottom-nav'],
+    home: ['mu-stack', 'mu-card', 'mu-icon'],
+    installation: ['mu-stack', 'mu-card', 'mu-code'],
+    buttons: ['mu-button', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    inputs: ['mu-input', 'mu-textarea', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    checkboxes: ['mu-checkbox', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    switches: ['mu-switch', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    radios: ['mu-radio', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    dropdowns: ['mu-dropdown', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    cards: ['mu-card', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    layout: ['mu-stack', 'mu-grid', 'mu-card', 'mu-tabs', 'mu-example', 'mu-code'],
+    tabs: ['mu-tabs', 'mu-stack', 'mu-example', 'mu-code'],
+    navbar: ['mu-navbar', 'mu-tabs', 'mu-example', 'mu-code'],
+    alerts: ['mu-alert', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-icon', 'mu-card'],
+    toasts: ['mu-toast', 'mu-button', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-alert', 'mu-icon', 'mu-card'],
+    modals: ['mu-modal', 'mu-button', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-alert', 'mu-icon', 'mu-card'],
+    progress: ['mu-progress', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-alert', 'mu-icon', 'mu-card'],
+    avatars: ['mu-avatar', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    badges: ['mu-badge', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    chips: ['mu-chip', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    icons: ['mu-icon', 'mu-grid', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code'],
+    dividers: ['mu-divider', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-card', 'mu-button', 'mu-icon'],
+    callouts: ['mu-callout', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    skeletons: ['mu-skeleton', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-card'],
+    tooltips: ['mu-tooltip', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-button', 'mu-icon', 'mu-card'],
+    spinners: ['mu-spinner', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-button'],
+    confirms: ['mu-confirm', 'mu-button', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    tables: ['mu-table', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    datatables: ['mu-datatable', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table'],
+    codeblocks: ['mu-code', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-api-table'],
+    'virtual-lists': ['mu-virtual-list', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table', 'mu-alert', 'mu-icon', 'mu-card', 'mu-avatar'],
+    enterprise: ['mu-router', 'mu-page', 'mu-error-boundary', 'mu-fetch', 'mu-lazy', 'mu-stack', 'mu-tabs', 'mu-example', 'mu-code', 'mu-api-table']
+};
+
+// Generate route entry files
+const tmpRoutesDir = './dist/.tmp-routes';
+mkdirSync(tmpRoutesDir, { recursive: true });
+
+for (const [route, deps] of Object.entries(pageRoutes)) {
+    const imports = deps.map(d => `import '../components/${d}.js';`).join('\n');
+    // Shell route needs core.js to register toast listener
+    const coreImport = route === 'shell' ? `import '../chunks/core.js';\n` : '';
+    writeFileSync(join(tmpRoutesDir, `${route}.js`), coreImport + imports);
+}
+
+// Build routes with splitting - INCLUDE core.js to ensure shared state (bus, theme) is deduplicated
+const routeEntries = Object.keys(pageRoutes).map(r => join(tmpRoutesDir, `${r}.js`));
+routeEntries.push('./src/chunks/core.js'); // Add core as entrypoint
+
+const routeResult = await build({
+    entrypoints: routeEntries,
+    outdir: routesDir,
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+    splitting: true,
+    sourcemap: 'none'
+});
+
+if (routeResult.success) {
+    // Flatten nested structure if present
+    const nestedDir = join(routesDir, 'dist', '.tmp-routes');
+    if (existsSync(nestedDir)) {
+        const files = readdirSync(nestedDir).filter(f => f.endsWith('.js'));
+        for (const file of files) {
+            let content = readFileSync(join(nestedDir, file), 'utf-8');
+            // Fix import paths
+            content = content.replace(/from"\.\.\/\.\.\/chunk-/g, 'from"./chunk-');
+            content = content.replace(/from"\.\.\/\.\.\/\.\.\/components\//g, 'from"../components/');
+            content = content.replace(/import"\.\.\/\.\.\/chunk-/g, 'import"./chunk-');
+            writeFileSync(join(routesDir, file), content);
+        }
+
+        // Cleanup
+        try {
+            for (const f of readdirSync(nestedDir)) unlinkSync(join(nestedDir, f));
+            rmdirSync(nestedDir);
+            rmdirSync(join(routesDir, 'dist'));
+        } catch (e) { }
+    }
+
+    // Cleanup tmp
+    try {
+        for (const f of readdirSync(tmpRoutesDir)) unlinkSync(join(tmpRoutesDir, f));
+        rmdirSync(tmpRoutesDir);
+    } catch (e) { }
+
+    const routeFiles = readdirSync(routesDir).filter(f => !f.startsWith('chunk-') && f.endsWith('.js'));
+    const chunkFiles = readdirSync(routesDir).filter(f => f.startsWith('chunk-'));
+    let routeSize = 0, chunkSize = 0;
+    for (const f of routeFiles) routeSize += statSync(join(routesDir, f)).size;
+    for (const f of chunkFiles) chunkSize += statSync(join(routesDir, f)).size;
+
+    console.log(`   ✅ ${routeFiles.length} routes (${(routeSize / 1024).toFixed(2)} KB + ${(chunkSize / 1024).toFixed(2)} KB shared)`);
+}
+
+// ============================================
+// 8. Auto-Generate Route Dependencies (from HTML analysis)
+// ============================================
+console.log('\\n🔍 Generating route dependencies from HTML...');
+// Scan content fragments from demo/content/*.html
+
+const contentDir = './demo/content';
+const pageComponents = {};
+
+if (existsSync(contentDir)) {
+    const contentFiles = readdirSync(contentDir).filter(f => f.endsWith('.html'));
+
+    for (const file of contentFiles) {
+        const pageId = file.replace('.html', '');
+        const content = readFileSync(join(contentDir, file), 'utf-8');
+
+        // Extract mu-* components from this content fragment
+        const componentMatches = content.match(/<mu-[a-z-]+/g) || [];
+        const components = [...new Set(componentMatches.map(m => m.slice(1)))];
+
+        if (components.length > 0) {
+            pageComponents[pageId] = components;
+        }
+    }
+}
+
+// Convert components to route dependencies
+const routeDeps = {};
+for (const [pageId, components] of Object.entries(pageComponents)) {
+    const routes = componentsToRoutes(components);
+    // Filter out shell routes (always loaded) and self-reference
+    const filteredRoutes = routes.filter(r =>
+        !r.startsWith('shell') && r !== pageId
+    );
+    if (filteredRoutes.length > 0) {
+        routeDeps[pageId] = filteredRoutes;
+    }
+}
+
+// Write route-deps.json
+writeFileSync(
+    join(routesDir, 'route-deps.json'),
+    JSON.stringify(routeDeps, null, 2)
+);
+
+console.log(`   ✅ route-deps.json (${Object.keys(routeDeps).length} pages with dependencies)`);
+
+// Also write full component mapping for debugging
+writeFileSync(
+    join(routesDir, 'page-components.json'),
+    JSON.stringify(pageComponents, null, 2)
+);
+console.log(`   ✅ page-components.json (${Object.keys(pageComponents).length} pages scanned)`);
+
+// ============================================
+// Summary
+// ============================================
+console.log('\\n📦 Framework bundle sizes:');
+const sizes = {
+    esm: statSync(join(outdir, 'microui.esm.js')).size,
+    iife: statSync(join(outdir, 'microui.min.js')).size,
+    css: statSync(join(outdir, 'microui.css')).size
+};
+console.log(`   ESM:  ${(sizes.esm / 1024).toFixed(2)} KB`);
+console.log(`   IIFE: ${(sizes.iife / 1024).toFixed(2)} KB`);
+console.log(`   CSS:  ${(sizes.css / 1024).toFixed(2)} KB`);
+
+
+// ============================================
+// 9. Auto-Version Update (Cache Busting)
+// ============================================
+console.log('\n🔄 Updating version cache buster...');
+
+// Update version in shell.html
+const demoFiles = ['./demo/shell.html'];
+let newVersion;
+
+for (const demoPath of demoFiles) {
+    if (!existsSync(demoPath)) continue;
+
+    let content = readFileSync(demoPath, 'utf-8');
+
+    // Extract current version or generate new one (do this once from first file)
+    if (!newVersion) {
+        const versionMatch = content.match(/\?v=(\d+\.\d+\.\d+)/);
+
+        if (versionMatch) {
+            // Increment patch version
+            const parts = versionMatch[1].split('.');
+            parts[2] = String(parseInt(parts[2], 10) + 1);
+            newVersion = parts.join('.');
+        } else {
+            // Fallback: use date-based version
+            const now = new Date();
+            newVersion = `${now.getFullYear() % 100}.${now.getMonth() + 1}.${now.getDate()}${now.getHours()}`;
+        }
+    }
+
+    // Replace all version strings
+    const oldVersionPattern = /\?v=\d+\.\d+\.\d+/g;
+    content = content.replace(oldVersionPattern, `?v=${newVersion}`);
+    writeFileSync(demoPath, content);
+}
+
+if (newVersion) {
+    console.log(`   ✅ Version updated to ${newVersion}`);
+}
+
+console.log('\n📄 Copying documentation...');
+const docsToCopy = ['AGENTS.md', 'README.md'];
+for (const doc of docsToCopy) {
+    if (existsSync(doc)) {
+        copyFileSync(doc, join(outdir, doc));
+        console.log(`   ✅ ${doc}`);
+    }
+}
+
+console.log('\n✨ Framework build complete!');

package/scripts/build-utils.js

@@ -0,0 +1,101 @@
+/**
+ * @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();
+}