@sprlab/wccompiler 0.11.9 → 0.11.12

package/README.md

@@ -897,6 +897,43 @@ No configuration needed:
 </wcc-list>
 ```
 
+### TypeScript Types for Frameworks
+
+`wcc build` auto-generates typed stubs for each framework in the `dist/` folder:
+
+```
+dist/
+├── wcc-vue.d.ts      ← Vue/Volar prop autocompletion
+├── wcc-vue.js        ← Vue component stubs
+├── wcc-react.d.ts    ← React compound component types
+├── wcc-react.js      ← React component stubs
+└── ...
+```
+
+**Vue (Volar autocompletion)**
+
+Add `dist/wcc-vue.d.ts` to your tsconfig to get prop/event autocompletion in `.vue` templates:
+
+```json
+// tsconfig.json
+{
+  "include": ["src/**/*", "dist/wcc-vue.d.ts"]
+}
+```
+
+After this, Volar provides:
+- Prop autocompletion: `<wcc-counter :la|` → suggests `label`
+- Type-checking: `<wcc-counter :count="'string'">` → type error (expects number)
+- Event types on hover
+
+**React**
+
+React 19 treats custom elements (hyphenated tags) as `any` in JSX — this is by React's design. No additional type setup needed. Compound component stubs (`WccCard.Header`) are typed via `dist/wcc-react.d.ts` and work when imported directly.
+
+**Angular**
+
+Angular's `CUSTOM_ELEMENTS_SCHEMA` disables all type-checking on custom elements. No additional type setup possible from the library side.
+
 ## Editor Support
 
 The **wcCompiler (.wcc) Language Support** extension is available on the VS Code Marketplace. It provides syntax highlighting, completions, and diagnostics for `.wcc` files.

package/bin/wcc.js

@@ -77,11 +77,21 @@ async function build(config, cwd) {
  */
 function generateFrameworkStubs(outputDir) {
 
-  const files = readdirSync(outputDir).filter(f => f.endsWith('.js') && !f.startsWith('__') && f !== 'wcc-runtime.js' && f !== 'wcc-react.js' && f !== 'wcc-vue.js');
+  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(join(outputDir, file), 'utf-8');
+    const content = readFileSync(file, 'utf-8');
     // Match static __meta = { ... }; with balanced braces
     const metaStart = content.indexOf('static __meta = {');
     if (metaStart === -1) continue;
@@ -156,7 +166,8 @@ function generateFrameworkStubs(outputDir) {
   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\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 || [];
@@ -189,8 +200,81 @@ function generateFrameworkStubs(outputDir) {
     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) {

package/lib/compiler.js

@@ -43,6 +43,7 @@ import {
   validateUndeclaredEmits,
 } from './parser-extractors.js';
 import { stripTypes } from './parser.js';
+import { normalizeTemplate } from './template-normalizer.js';
 
 /**
  * Resolve a child component's source file path by tag name.
@@ -290,7 +291,8 @@ async function compileSFC(filePath, config) {
   };
 
   // 16. Process template through linkedom → tree-walker → codegen
-  const { document } = parseHTML(`<div id="__root">${template}</div>`);
+  const normalizedTemplate = normalizeTemplate(template);
+  const { document } = parseHTML(`<div id="__root">${normalizedTemplate}</div>`);
   const rootEl = document.getElementById('__root');
 
   const signalNames = new Set(signals.map(s => s.name));

package/lib/template-normalizer.js

@@ -0,0 +1,89 @@
+/**
+ * Template Normalizer — pre-processes WCC template HTML before DOM parsing.
+ *
+ * Handles two transformations:
+ * 1. PascalCase tags → kebab-case (e.g. <WccBadge> → <wcc-badge>)
+ * 2. Self-closing custom elements → open+close (e.g. <wcc-badge /> → <wcc-badge></wcc-badge>)
+ *
+ * Must run BEFORE linkedom/jsdom parsing because HTML parsers:
+ * - Lowercase all tag names (losing PascalCase word boundaries)
+ * - Don't recognize self-closing syntax for non-void elements
+ */
+
+// HTML void elements that are legitimately self-closing
+const VOID_ELEMENTS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
+
+/**
+ * Convert a PascalCase tag name to kebab-case.
+ * e.g. "WccBadge" → "wcc-badge", "WccCardHeader" → "wcc-card-header"
+ *
+ * Only converts if the name starts with an uppercase letter (PascalCase).
+ *
+ * @param {string} name
+ * @returns {string}
+ */
+export function pascalToKebab(name) {
+  // Insert hyphen before each uppercase letter that follows a lowercase letter or digit
+  return name
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .toLowerCase();
+}
+
+/**
+ * Check if a tag name is PascalCase (starts with uppercase, has at least
+ * one more uppercase letter indicating a word boundary).
+ *
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function isPascalCase(name) {
+  return /^[A-Z][a-zA-Z0-9]*[A-Z][a-zA-Z0-9]*$/.test(name);
+}
+
+/**
+ * Normalize a WCC template string:
+ * 1. Convert PascalCase tags to kebab-case
+ * 2. Expand self-closing custom elements to open+close pairs
+ *
+ * @param {string} html — Raw template HTML
+ * @returns {string} — Normalized HTML ready for DOM parsing
+ */
+export function normalizeTemplate(html) {
+  // Match opening tags (including self-closing): <TagName ...> or <TagName ... />
+  // Also match closing tags: </TagName>
+  //
+  // Regex breakdown:
+  //   <           — opening angle bracket
+  //   (\/?)?      — optional slash (closing tag)
+  //   ([A-Za-z][\w-]*)  — tag name
+  //   ((?:\s[^>]*)?)    — attributes (anything that's not >)
+  //   (\s*\/)?    — optional self-closing slash
+  //   >           — closing angle bracket
+  const TAG_RE = /<(\/?)([A-Za-z][\w-]*)((?:\s[^>]*?)?)(\/?)>/g;
+
+  return html.replace(TAG_RE, (match, closingSlash, tagName, attrs, selfClosing) => {
+    let normalizedTag = tagName;
+
+    // Step 1: Convert PascalCase to kebab-case
+    if (isPascalCase(tagName)) {
+      normalizedTag = pascalToKebab(tagName);
+    }
+
+    // Step 2: Handle self-closing tags
+    if (selfClosing === '/') {
+      // If it's a void element, keep it self-closing
+      if (VOID_ELEMENTS.has(normalizedTag.toLowerCase())) {
+        return `<${closingSlash}${normalizedTag}${attrs} />`;
+      }
+      // Otherwise expand to open+close pair (trim trailing whitespace from attrs)
+      const trimmedAttrs = attrs.trimEnd();
+      return `<${normalizedTag}${trimmedAttrs}></${normalizedTag}>`;
+    }
+
+    // Regular open or close tag — just replace the name
+    return `<${closingSlash}${normalizedTag}${attrs}>`;
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.11.9",
+  "version": "0.11.12",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {