@sprlab/wccompiler 0.13.0 → 0.15.0

package/bin/wcc.js

@@ -1,412 +1,412 @@
-#!/usr/bin/env node
-
-import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync, readFileSync } from 'node:fs';
-import { resolve, relative, extname, basename, dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { loadConfig } from '../lib/config.js';
-import { compile } from '../lib/compiler.js';
-import { startDevServer } from '../lib/dev-server.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const command = process.argv[2];
-
-async function build(config, cwd) {
-  const inputDir = resolve(cwd, config.input);
-  const outputDir = resolve(cwd, config.output);
-
-  if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
-
-  const files = discoverFiles(inputDir);
-  let errors = 0;
-  let needsSharedRuntime = false;
-
-  for (const file of files) {
-    try {
-      const relPath = relative(inputDir, file);
-      const outPath = resolve(outputDir, relPath.replace(/\.wcc$/, '.js'));
-      const outDir = dirname(outPath);
-
-      // Calculate runtimeImportPath (always calculate it — the compiler decides whether to use it)
-      const signalsDest = join(outputDir, '__wcc-signals.js');
-      const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
-      const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
-
-      const { code, usesSharedRuntime } = await compile(file, {
-        standalone: config.standalone,
-        minify: config.minify,
-        comments: config.comments,
-        runtimeImportPath,
-      });
-
-      if (usesSharedRuntime) needsSharedRuntime = true;
-
-      if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
-      writeFileSync(outPath, code);
-    } catch (err) {
-      console.error(`Error compiling ${file}: ${err.message}`);
-      errors++;
-    }
-  }
-
-  // Generate shared runtime ONLY if needed
-  if (needsSharedRuntime) {
-    const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
-    const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
-    const signalsDest = join(outputDir, '__wcc-signals.js');
-    writeFileSync(signalsDest, signalsContent);
-  }
-
-  // Copy wcc-runtime.js to output directory
-  const runtimeSrc = resolve(__dirname, '../lib/wcc-runtime.js');
-  const runtimeDest = join(outputDir, 'wcc-runtime.js');
-  copyFileSync(runtimeSrc, runtimeDest);
-
-  // Generate framework stubs (React + Vue) from compiled component metadata
-  generateFrameworkStubs(outputDir);
-
-  return errors;
-}
-
-/**
- * Generates framework stub files (React + Vue) from compiled component metadata.
- * Reads static __meta from each compiled .js file and produces:
- *   - wcc-react.js + wcc-react.d.ts (importable stubs for React)
- *   - wcc-vue.js + wcc-vue.d.ts (importable stubs for Vue)
- */
-function generateFrameworkStubs(outputDir) {
-
-  const files = [];
-  function collectJsFiles(dir) {
-    for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      if (entry.isDirectory()) {
-        collectJsFiles(join(dir, entry.name));
-      } else if (entry.isFile() && entry.name.endsWith('.js') && !entry.name.startsWith('__') && entry.name !== 'wcc-runtime.js' && entry.name !== 'wcc-react.js' && entry.name !== 'wcc-vue.js') {
-        files.push(join(dir, entry.name));
-      }
-    }
-  }
-  collectJsFiles(outputDir);
-  const components = [];
-
-  for (const file of files) {
-    const content = readFileSync(file, 'utf-8');
-    // Match static __meta = { ... }; with balanced braces
-    const metaStart = content.indexOf('static __meta = {');
-    if (metaStart === -1) continue;
-
-    // Find the balanced closing brace
-    let depth = 0;
-    let metaEnd = -1;
-    for (let i = metaStart + 'static __meta = '.length; i < content.length; i++) {
-      if (content[i] === '{') depth++;
-      else if (content[i] === '}') {
-        depth--;
-        if (depth === 0) { metaEnd = i + 1; break; }
-      }
-    }
-    if (metaEnd === -1) continue;
-
-    const metaStr = content.slice(metaStart + 'static __meta = '.length, metaEnd);
-
-    try {
-      const parsed = metaStr
-        .replace(/'/g, '"')
-        .replace(/(\w+)\s*:/g, '"$1":')
-        .replace(/,\s*}/g, '}')
-        .replace(/,\s*]/g, ']');
-      const meta = JSON.parse(parsed);
-      if (!meta.tag) continue;
-
-      const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
-      components.push({ meta, pascalName, file });
-    } catch (e) {
-      // Skip unparseable
-    }
-  }
-
-  if (components.length === 0) return;
-
-  // ── React stubs ──
-  let reactJs = '// Auto-generated by wcc build — React component stubs\n';
-  reactJs += '// Import these in your JSX. The wccReactPlugin transforms them at build time.\n\n';
-
-  let reactDts = '// Auto-generated by wcc build — React component types\n\n';
-
-  for (const comp of components) {
-    const slots = comp.meta.slots || [];
-    const slotProps = slots.filter(s => s).map(s => {
-      const pascal = s[0].toUpperCase() + s.slice(1);
-      return `${pascal}: '${s}'`;
-    });
-
-    // JS stub
-    reactJs += `export const ${comp.pascalName} = Object.assign('${comp.meta.tag}', { __tag: '${comp.meta.tag}'`;
-    for (const s of slots) {
-      if (!s) continue;
-      const pascal = s[0].toUpperCase() + s.slice(1);
-      reactJs += `, ${pascal}: '${s}'`;
-    }
-    reactJs += ` });\n`;
-
-    // TypeScript declaration
-    const slotTypes = slots.filter(s => s).map(s => {
-      const pascal = s[0].toUpperCase() + s.slice(1);
-      return `  ${pascal}: string;`;
-    }).join('\n');
-
-    reactDts += `export declare const ${comp.pascalName}: string & {\n  __tag: '${comp.meta.tag}';\n${slotTypes}\n};\n\n`;
-  }
-
-  writeFileSync(join(outputDir, 'wcc-react.js'), reactJs);
-  writeFileSync(join(outputDir, 'wcc-react.d.ts'), reactDts);
-
-  // ── Vue stubs ──
-  let vueJs = '// Auto-generated by wcc build — Vue component stubs\n';
-  vueJs += '// Import these in your Vue SFC for type safety and IDE support.\n\n';
-
-  let vueDts = '// Auto-generated by wcc build — Vue component types\n';
-  vueDts += '// Include this file in your tsconfig.json for Volar autocompletion.\n\n';
-
-  for (const comp of components) {
-    const props = comp.meta.props || [];
-    const events = comp.meta.events || [];
-    const models = comp.meta.models || [];
-    const slots = comp.meta.slots || [];
-
-    // JS stub (just the tag name — Vue uses kebab-case directly)
-    vueJs += `export const ${comp.pascalName} = '${comp.meta.tag}';\n`;
-
-    // TypeScript declaration with props/events/slots info
-    const propTypes = props.map(p => {
-      const def = String(p.default);
-      const type = def === 'true' || def === 'false' ? 'boolean'
-        : /^-?\d+(\.\d+)?$/.test(def) ? 'number'
-        : 'string';
-      return `    ${p.name}?: ${type};`;
-    }).join('\n');
-
-    const eventTypes = events.map(e => `    '${e}': CustomEvent;`).join('\n');
-    const modelTypes = models.map(m => `    '${m}': any;`).join('\n');
-    const slotTypeEntries = slots.filter(s => s).map(s => `    '${s}': any;`).join('\n');
-
-    vueDts += `export declare const ${comp.pascalName}: '${comp.meta.tag}';\n`;
-    vueDts += `/** Component: ${comp.meta.tag} */\n`;
-    if (props.length) vueDts += `export interface ${comp.pascalName}Props {\n${propTypes}\n}\n`;
-    if (events.length) vueDts += `export interface ${comp.pascalName}Events {\n${eventTypes}\n}\n`;
-    if (models.length) vueDts += `export interface ${comp.pascalName}Models {\n${modelTypes}\n}\n`;
-    if (slots.filter(s => s).length) vueDts += `export interface ${comp.pascalName}Slots {\n${slotTypeEntries}\n}\n`;
-    vueDts += '\n';
-  }
-
-  // ── Vue GlobalComponents (Volar autocompletion in templates) ──
-  vueDts += '// ── Volar Global Component Types ──────────────────────────────────\n';
-  vueDts += '// Add this file to tsconfig.json "include" for template autocompletion.\n\n';
-  vueDts += "declare module 'vue' {\n";
-  vueDts += '  export interface GlobalComponents {\n';
-
-  for (const comp of components) {
-    const props = comp.meta.props || [];
-    const models = comp.meta.models || [];
-    const events = comp.meta.events || [];
-
-    // Build $props type inline
-    const allProps = [
-      ...props.map(p => {
-        const def = String(p.default);
-        const type = def === 'true' || def === 'false' ? 'boolean'
-          : /^-?\d+(\.\d+)?$/.test(def) ? 'number'
-          : 'string';
-        return `${p.name}?: ${type}`;
-      }),
-      ...models.map(m => `${m}?: any`),
-    ];
-
-    const propsStr = allProps.length > 0
-      ? `{ ${allProps.join('; ')} }`
-      : '{}';
-
-    // Build $emit type inline
-    const emitEntries = [
-      ...events.map(e => `(e: '${e}', value: any): void`),
-      ...models.map(m => `(e: '${m}-changed', value: any): void`),
-    ];
-
-    if (emitEntries.length > 0) {
-      vueDts += `    '${comp.meta.tag}': new () => { $props: ${propsStr}; $emit: { ${emitEntries.join('; ')} } };\n`;
-    } else {
-      vueDts += `    '${comp.meta.tag}': new () => { $props: ${propsStr} };\n`;
-    }
-  }
-
-  vueDts += '  }\n';
-  vueDts += '}\n\n';
-  vueDts += 'export {}\n';
-
-  writeFileSync(join(outputDir, 'wcc-vue.js'), vueJs);
-  writeFileSync(join(outputDir, 'wcc-vue.d.ts'), vueDts);
-
-  // ── HTML Custom Data (for VS Code / Kiro HTML intellisense) ──
-  const htmlData = {
-    version: 1.1,
-    tags: components.map(comp => {
-      const props = comp.meta.props || [];
-      const events = comp.meta.events || [];
-      const models = comp.meta.models || [];
-
-      const attributes = [
-        ...props.map(p => {
-          const def = String(p.default);
-          const type = def === 'true' || def === 'false' ? 'boolean'
-            : /^-?\d+(\.\d+)?$/.test(def) ? 'number' : 'string';
-          return { name: `:${p.name}`, description: `(prop) ${type}` };
-        }),
-        ...models.map(m => ({ name: `:${m}`, description: `(model) two-way binding` })),
-        ...events.map(e => ({ name: `@${e}`, description: `(event)` })),
-      ];
-
-      return {
-        name: comp.meta.tag,
-        description: `WCC Component: ${comp.meta.tag}`,
-        attributes,
-      };
-    }),
-  };
-
-  writeFileSync(join(outputDir, 'wcc-html-data.json'), JSON.stringify(htmlData, null, 2));
-}
-
-function discoverFiles(dir) {
-  const results = [];
-  const entries = readdirSync(dir, { withFileTypes: true, recursive: true });
-  for (const entry of entries) {
-    if (!entry.isFile()) continue;
-    const ext = extname(entry.name);
-    if (ext !== '.wcc') continue;
-    if (entry.name.includes('.test.')) continue;
-    const fullPath = resolve(dir, entry.parentPath ? relative(dir, entry.parentPath) : '', entry.name);
-    results.push(fullPath);
-  }
-  return results;
-}
-
-/**
- * Discovers compiled .js entry points in the output directory.
- * Excludes runtime files, stubs, and metadata.
- */
-function discoverCompiledEntries(outputDir) {
-  const skip = new Set(['__wcc-signals.js', 'wcc-runtime.js', 'wcc-react.js', 'wcc-vue.js', 'bundle.js']);
-  const results = [];
-  function walk(dir) {
-    for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      if (entry.isDirectory()) {
-        walk(join(dir, entry.name));
-      } else if (entry.isFile() && entry.name.endsWith('.js') && !skip.has(entry.name) && !entry.name.endsWith('.d.ts')) {
-        results.push(join(dir, entry.name));
-      }
-    }
-  }
-  walk(outputDir);
-  return results;
-}
-
-async function main() {
-  const cwd = process.cwd();
-  const config = await loadConfig(cwd);
-
-  // CLI flags override config
-  if (process.argv.includes('--minify')) config.minify = true;
-  if (process.argv.includes('--comments')) config.comments = true;
-  const shouldBundle = process.argv.includes('--bundle');
-
-  if (command === 'build') {
-    const errors = await build(config, cwd);
-    if (errors > 0) process.exit(1);
-
-    // Bundle step: produce a single IIFE file from all compiled entry points
-    if (shouldBundle) {
-      const { build: esbuild } = await import('esbuild');
-      const outputDir = resolve(cwd, config.output);
-      const entryPoints = discoverCompiledEntries(outputDir);
-
-      if (entryPoints.length > 0) {
-        // Generate a virtual entry that imports all components
-        const bundleEntry = join(outputDir, '__bundle-entry.js');
-        const imports = entryPoints.map(f => {
-          let rel = relative(outputDir, f).replace(/\\/g, '/');
-          if (!rel.startsWith('.')) rel = './' + rel;
-          return `import '${rel}';`;
-        }).join('\n');
-        writeFileSync(bundleEntry, imports);
-
-        await esbuild({
-          entryPoints: [bundleEntry],
-          bundle: true,
-          format: 'iife',
-          outfile: join(outputDir, 'bundle.js'),
-          minify: !!config.minify,
-        });
-
-        // Clean up temp entry
-        const { unlinkSync } = await import('node:fs');
-        unlinkSync(bundleEntry);
-
-        console.log(`Bundled ${entryPoints.length} components → ${config.output}/bundle.js`);
-      }
-    }
-  } else if (command === 'dev') {
-    await build(config, cwd);
-    const outputDir = resolve(cwd, config.output);
-    const devServer = startDevServer({ port: config.port, root: cwd, outputDir });
-    const inputDir = resolve(cwd, config.input);
-    console.log(`Watching ${inputDir} for changes...`);
-    watch(inputDir, { recursive: true }, async (eventType, filename) => {
-      if (!filename) return;
-      const ext = extname(filename);
-      if (ext !== '.ts' && ext !== '.js' && ext !== '.wcc') return;
-      if (filename.includes('.test.')) return;
-      const filePath = resolve(inputDir, filename);
-      try {
-        const relPath = filename;
-        const outPath = resolve(outputDir, relPath.replace(/\.ts$/, '.js').replace(/\.wcc$/, '.js'));
-        const outDir = dirname(outPath);
-
-        // Calculate runtimeImportPath for this file
-        const signalsDest = join(outputDir, '__wcc-signals.js');
-        const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
-        const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
-
-        const { code, usesSharedRuntime } = await compile(filePath, {
-          standalone: config.standalone,
-          minify: config.minify,
-          comments: config.comments,
-          runtimeImportPath,
-        });
-
-        if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
-        writeFileSync(outPath, code);
-
-        // If this component uses shared runtime and the file doesn't exist yet, generate it
-        if (usesSharedRuntime && !existsSync(signalsDest)) {
-          const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
-          const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
-          writeFileSync(signalsDest, signalsContent);
-        }
-
-        console.log(`Compiled: ${filename}`);
-      } catch (err) {
-        console.error(`Error compiling ${filename}: ${err.message}`);
-        devServer.notifyError(`${filename}\n\n${err.message}`);
-      }
-    });
-  } else {
-    console.error('Usage: wcc <build|dev>');
-    process.exit(1);
-  }
-}
-
-main().catch(err => {
-  console.error(err.message);
-  process.exit(1);
-});
+#!/usr/bin/env node
+
+import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync, readFileSync } from 'node:fs';
+import { resolve, relative, extname, basename, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { loadConfig } from '../lib/config.js';
+import { compile } from '../lib/compiler.js';
+import { startDevServer } from '../lib/dev-server.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const command = process.argv[2];
+
+async function build(config, cwd) {
+  const inputDir = resolve(cwd, config.input);
+  const outputDir = resolve(cwd, config.output);
+
+  if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
+
+  const files = discoverFiles(inputDir);
+  let errors = 0;
+  let needsSharedRuntime = false;
+
+  for (const file of files) {
+    try {
+      const relPath = relative(inputDir, file);
+      const outPath = resolve(outputDir, relPath.replace(/\.wcc$/, '.js'));
+      const outDir = dirname(outPath);
+
+      // Calculate runtimeImportPath (always calculate it — the compiler decides whether to use it)
+      const signalsDest = join(outputDir, '__wcc-signals.js');
+      const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
+      const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
+
+      const { code, usesSharedRuntime } = await compile(file, {
+        standalone: config.standalone,
+        minify: config.minify,
+        comments: config.comments,
+        runtimeImportPath,
+      });
+
+      if (usesSharedRuntime) needsSharedRuntime = true;
+
+      if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+      writeFileSync(outPath, code);
+    } catch (err) {
+      console.error(`Error compiling ${file}: ${err.message}`);
+      errors++;
+    }
+  }
+
+  // Generate shared runtime ONLY if needed
+  if (needsSharedRuntime) {
+    const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
+    const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
+    const signalsDest = join(outputDir, '__wcc-signals.js');
+    writeFileSync(signalsDest, signalsContent);
+  }
+
+  // Copy wcc-runtime.js to output directory
+  const runtimeSrc = resolve(__dirname, '../lib/wcc-runtime.js');
+  const runtimeDest = join(outputDir, 'wcc-runtime.js');
+  copyFileSync(runtimeSrc, runtimeDest);
+
+  // Generate framework stubs (React + Vue) from compiled component metadata
+  generateFrameworkStubs(outputDir);
+
+  return errors;
+}
+
+/**
+ * Generates framework stub files (React + Vue) from compiled component metadata.
+ * Reads static __meta from each compiled .js file and produces:
+ *   - wcc-react.js + wcc-react.d.ts (importable stubs for React)
+ *   - wcc-vue.js + wcc-vue.d.ts (importable stubs for Vue)
+ */
+function generateFrameworkStubs(outputDir) {
+
+  const files = [];
+  function collectJsFiles(dir) {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        collectJsFiles(join(dir, entry.name));
+      } else if (entry.isFile() && entry.name.endsWith('.js') && !entry.name.startsWith('__') && entry.name !== 'wcc-runtime.js' && entry.name !== 'wcc-react.js' && entry.name !== 'wcc-vue.js') {
+        files.push(join(dir, entry.name));
+      }
+    }
+  }
+  collectJsFiles(outputDir);
+  const components = [];
+
+  for (const file of files) {
+    const content = readFileSync(file, 'utf-8');
+    // Match static __meta = { ... }; with balanced braces
+    const metaStart = content.indexOf('static __meta = {');
+    if (metaStart === -1) continue;
+
+    // Find the balanced closing brace
+    let depth = 0;
+    let metaEnd = -1;
+    for (let i = metaStart + 'static __meta = '.length; i < content.length; i++) {
+      if (content[i] === '{') depth++;
+      else if (content[i] === '}') {
+        depth--;
+        if (depth === 0) { metaEnd = i + 1; break; }
+      }
+    }
+    if (metaEnd === -1) continue;
+
+    const metaStr = content.slice(metaStart + 'static __meta = '.length, metaEnd);
+
+    try {
+      const parsed = metaStr
+        .replace(/'/g, '"')
+        .replace(/(\w+)\s*:/g, '"$1":')
+        .replace(/,\s*}/g, '}')
+        .replace(/,\s*]/g, ']');
+      const meta = JSON.parse(parsed);
+      if (!meta.tag) continue;
+
+      const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
+      components.push({ meta, pascalName, file });
+    } catch (e) {
+      // Skip unparseable
+    }
+  }
+
+  if (components.length === 0) return;
+
+  // ── React stubs ──
+  let reactJs = '// Auto-generated by wcc build — React component stubs\n';
+  reactJs += '// Import these in your JSX. The wccReactPlugin transforms them at build time.\n\n';
+
+  let reactDts = '// Auto-generated by wcc build — React component types\n\n';
+
+  for (const comp of components) {
+    const slots = comp.meta.slots || [];
+    const slotProps = slots.filter(s => s).map(s => {
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      return `${pascal}: '${s}'`;
+    });
+
+    // JS stub
+    reactJs += `export const ${comp.pascalName} = Object.assign('${comp.meta.tag}', { __tag: '${comp.meta.tag}'`;
+    for (const s of slots) {
+      if (!s) continue;
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      reactJs += `, ${pascal}: '${s}'`;
+    }
+    reactJs += ` });\n`;
+
+    // TypeScript declaration
+    const slotTypes = slots.filter(s => s).map(s => {
+      const pascal = s[0].toUpperCase() + s.slice(1);
+      return `  ${pascal}: string;`;
+    }).join('\n');
+
+    reactDts += `export declare const ${comp.pascalName}: string & {\n  __tag: '${comp.meta.tag}';\n${slotTypes}\n};\n\n`;
+  }
+
+  writeFileSync(join(outputDir, 'wcc-react.js'), reactJs);
+  writeFileSync(join(outputDir, 'wcc-react.d.ts'), reactDts);
+
+  // ── Vue stubs ──
+  let vueJs = '// Auto-generated by wcc build — Vue component stubs\n';
+  vueJs += '// Import these in your Vue SFC for type safety and IDE support.\n\n';
+
+  let vueDts = '// Auto-generated by wcc build — Vue component types\n';
+  vueDts += '// Include this file in your tsconfig.json for Volar autocompletion.\n\n';
+
+  for (const comp of components) {
+    const props = comp.meta.props || [];
+    const events = comp.meta.events || [];
+    const models = comp.meta.models || [];
+    const slots = comp.meta.slots || [];
+
+    // JS stub (just the tag name — Vue uses kebab-case directly)
+    vueJs += `export const ${comp.pascalName} = '${comp.meta.tag}';\n`;
+
+    // TypeScript declaration with props/events/slots info
+    const propTypes = props.map(p => {
+      const def = String(p.default);
+      const type = def === 'true' || def === 'false' ? 'boolean'
+        : /^-?\d+(\.\d+)?$/.test(def) ? 'number'
+        : 'string';
+      return `    ${p.name}?: ${type};`;
+    }).join('\n');
+
+    const eventTypes = events.map(e => `    '${e}': CustomEvent;`).join('\n');
+    const modelTypes = models.map(m => `    '${m}': any;`).join('\n');
+    const slotTypeEntries = slots.filter(s => s).map(s => `    '${s}': any;`).join('\n');
+
+    vueDts += `export declare const ${comp.pascalName}: '${comp.meta.tag}';\n`;
+    vueDts += `/** Component: ${comp.meta.tag} */\n`;
+    if (props.length) vueDts += `export interface ${comp.pascalName}Props {\n${propTypes}\n}\n`;
+    if (events.length) vueDts += `export interface ${comp.pascalName}Events {\n${eventTypes}\n}\n`;
+    if (models.length) vueDts += `export interface ${comp.pascalName}Models {\n${modelTypes}\n}\n`;
+    if (slots.filter(s => s).length) vueDts += `export interface ${comp.pascalName}Slots {\n${slotTypeEntries}\n}\n`;
+    vueDts += '\n';
+  }
+
+  // ── Vue GlobalComponents (Volar autocompletion in templates) ──
+  vueDts += '// ── Volar Global Component Types ──────────────────────────────────\n';
+  vueDts += '// Add this file to tsconfig.json "include" for template autocompletion.\n\n';
+  vueDts += "declare module 'vue' {\n";
+  vueDts += '  export interface GlobalComponents {\n';
+
+  for (const comp of components) {
+    const props = comp.meta.props || [];
+    const models = comp.meta.models || [];
+    const events = comp.meta.events || [];
+
+    // Build $props type inline
+    const allProps = [
+      ...props.map(p => {
+        const def = String(p.default);
+        const type = def === 'true' || def === 'false' ? 'boolean'
+          : /^-?\d+(\.\d+)?$/.test(def) ? 'number'
+          : 'string';
+        return `${p.name}?: ${type}`;
+      }),
+      ...models.map(m => `${m}?: any`),
+    ];
+
+    const propsStr = allProps.length > 0
+      ? `{ ${allProps.join('; ')} }`
+      : '{}';
+
+    // Build $emit type inline
+    const emitEntries = [
+      ...events.map(e => `(e: '${e}', value: any): void`),
+      ...models.map(m => `(e: '${m}-changed', value: any): void`),
+    ];
+
+    if (emitEntries.length > 0) {
+      vueDts += `    '${comp.meta.tag}': new () => { $props: ${propsStr}; $emit: { ${emitEntries.join('; ')} } };\n`;
+    } else {
+      vueDts += `    '${comp.meta.tag}': new () => { $props: ${propsStr} };\n`;
+    }
+  }
+
+  vueDts += '  }\n';
+  vueDts += '}\n\n';
+  vueDts += 'export {}\n';
+
+  writeFileSync(join(outputDir, 'wcc-vue.js'), vueJs);
+  writeFileSync(join(outputDir, 'wcc-vue.d.ts'), vueDts);
+
+  // ── HTML Custom Data (for VS Code / Kiro HTML intellisense) ──
+  const htmlData = {
+    version: 1.1,
+    tags: components.map(comp => {
+      const props = comp.meta.props || [];
+      const events = comp.meta.events || [];
+      const models = comp.meta.models || [];
+
+      const attributes = [
+        ...props.map(p => {
+          const def = String(p.default);
+          const type = def === 'true' || def === 'false' ? 'boolean'
+            : /^-?\d+(\.\d+)?$/.test(def) ? 'number' : 'string';
+          return { name: `:${p.name}`, description: `(prop) ${type}` };
+        }),
+        ...models.map(m => ({ name: `:${m}`, description: `(model) two-way binding` })),
+        ...events.map(e => ({ name: `@${e}`, description: `(event)` })),
+      ];
+
+      return {
+        name: comp.meta.tag,
+        description: `WCC Component: ${comp.meta.tag}`,
+        attributes,
+      };
+    }),
+  };
+
+  writeFileSync(join(outputDir, 'wcc-html-data.json'), JSON.stringify(htmlData, null, 2));
+}
+
+function discoverFiles(dir) {
+  const results = [];
+  const entries = readdirSync(dir, { withFileTypes: true, recursive: true });
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    const ext = extname(entry.name);
+    if (ext !== '.wcc') continue;
+    if (entry.name.includes('.test.')) continue;
+    const fullPath = resolve(dir, entry.parentPath ? relative(dir, entry.parentPath) : '', entry.name);
+    results.push(fullPath);
+  }
+  return results;
+}
+
+/**
+ * Discovers compiled .js entry points in the output directory.
+ * Excludes runtime files, stubs, and metadata.
+ */
+function discoverCompiledEntries(outputDir) {
+  const skip = new Set(['__wcc-signals.js', 'wcc-runtime.js', 'wcc-react.js', 'wcc-vue.js', 'bundle.js']);
+  const results = [];
+  function walk(dir) {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        walk(join(dir, entry.name));
+      } else if (entry.isFile() && entry.name.endsWith('.js') && !skip.has(entry.name) && !entry.name.endsWith('.d.ts')) {
+        results.push(join(dir, entry.name));
+      }
+    }
+  }
+  walk(outputDir);
+  return results;
+}
+
+async function main() {
+  const cwd = process.cwd();
+  const config = await loadConfig(cwd);
+
+  // CLI flags override config
+  if (process.argv.includes('--minify')) config.minify = true;
+  if (process.argv.includes('--comments')) config.comments = true;
+  const shouldBundle = process.argv.includes('--bundle');
+
+  if (command === 'build') {
+    const errors = await build(config, cwd);
+    if (errors > 0) process.exit(1);
+
+    // Bundle step: produce a single IIFE file from all compiled entry points
+    if (shouldBundle) {
+      const { build: esbuild } = await import('esbuild');
+      const outputDir = resolve(cwd, config.output);
+      const entryPoints = discoverCompiledEntries(outputDir);
+
+      if (entryPoints.length > 0) {
+        // Generate a virtual entry that imports all components
+        const bundleEntry = join(outputDir, '__bundle-entry.js');
+        const imports = entryPoints.map(f => {
+          let rel = relative(outputDir, f).replace(/\\/g, '/');
+          if (!rel.startsWith('.')) rel = './' + rel;
+          return `import '${rel}';`;
+        }).join('\n');
+        writeFileSync(bundleEntry, imports);
+
+        await esbuild({
+          entryPoints: [bundleEntry],
+          bundle: true,
+          format: 'iife',
+          outfile: join(outputDir, 'bundle.js'),
+          minify: !!config.minify,
+        });
+
+        // Clean up temp entry
+        const { unlinkSync } = await import('node:fs');
+        unlinkSync(bundleEntry);
+
+        console.log(`Bundled ${entryPoints.length} components → ${config.output}/bundle.js`);
+      }
+    }
+  } else if (command === 'dev') {
+    await build(config, cwd);
+    const outputDir = resolve(cwd, config.output);
+    const devServer = startDevServer({ port: config.port, root: cwd, outputDir });
+    const inputDir = resolve(cwd, config.input);
+    console.log(`Watching ${inputDir} for changes...`);
+    watch(inputDir, { recursive: true }, async (eventType, filename) => {
+      if (!filename) return;
+      const ext = extname(filename);
+      if (ext !== '.ts' && ext !== '.js' && ext !== '.wcc') return;
+      if (filename.includes('.test.')) return;
+      const filePath = resolve(inputDir, filename);
+      try {
+        const relPath = filename;
+        const outPath = resolve(outputDir, relPath.replace(/\.ts$/, '.js').replace(/\.wcc$/, '.js'));
+        const outDir = dirname(outPath);
+
+        // Calculate runtimeImportPath for this file
+        const signalsDest = join(outputDir, '__wcc-signals.js');
+        const runtimeRelPath = relative(outDir, signalsDest).replace(/\\/g, '/');
+        const runtimeImportPath = runtimeRelPath.startsWith('.') ? runtimeRelPath : './' + runtimeRelPath;
+
+        const { code, usesSharedRuntime } = await compile(filePath, {
+          standalone: config.standalone,
+          minify: config.minify,
+          comments: config.comments,
+          runtimeImportPath,
+        });
+
+        if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+        writeFileSync(outPath, code);
+
+        // If this component uses shared runtime and the file doesn't exist yet, generate it
+        if (usesSharedRuntime && !existsSync(signalsDest)) {
+          const { reactiveRuntime } = await import('../lib/reactive-runtime.js');
+          const signalsContent = reactiveRuntime.trim() + '\nexport { __signal, __computed, __effect, __batch, __untrack };\n';
+          writeFileSync(signalsDest, signalsContent);
+        }
+
+        console.log(`Compiled: ${filename}`);
+      } catch (err) {
+        console.error(`Error compiling ${filename}: ${err.message}`);
+        devServer.notifyError(`${filename}\n\n${err.message}`);
+      }
+    });
+  } else {
+    console.error('Usage: wcc <build|dev>');
+    process.exit(1);
+  }
+}
+
+main().catch(err => {
+  console.error(err.message);
+  process.exit(1);
+});