@sprlab/wccompiler 0.10.8 → 0.10.10

package/adapters/angular-compiled/angular.d.ts

@@ -1,26 +1,37 @@
 /**
- * Angular adapter for WCC Scoped Slots.
+ * Angular adapter for WCC Scoped Slots and Event Binding.
  *
  * Exports:
  *   - WccSlotDef: Auxiliary directive for ng-template[slot]
  *   - WccSlotsDirective: Main directive activated via [wccSlots] attribute
+ *   - WccEvent: Single-event directive (wccEvent="name" + wccEmit output)
+ *   - WccEvents: Multi-event bridging directive (kebab-case → camelCase)
  *   - SlotContext: Interface for template context typing
  *
  * Usage:
- *   import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular';
+ *   import { WccSlotsDirective, WccSlotDef, WccEvent, WccEvents } from '@sprlab/wccompiler/adapters/angular';
  *
  *   @Component({
- *     imports: [WccSlotsDirective, WccSlotDef],
+ *     imports: [WccSlotsDirective, WccSlotDef, WccEvent, WccEvents],
  *     schemas: [CUSTOM_ELEMENTS_SCHEMA],
  *     template: `
  *       <wcc-card wccSlots>
  *         <ng-template slot="header"><strong>Header</strong></ng-template>
  *         <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
  *       </wcc-card>
+ *
+ *       <!-- Event binding option 1: single event with unwrapped detail -->
+ *       <wcc-counter wccEvent="count-changed" (wccEmit)="onCount($event)"></wcc-counter>
+ *
+ *       <!-- Event binding option 2: camelCase event names -->
+ *       <wcc-counter wccEvents (countChanged)="onCount($event.detail)"></wcc-counter>
+ *
+ *       <!-- Event binding option 3: standard Angular (always works) -->
+ *       <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
  *     `
  *   })
  *
- * Note: Add the `wccSlots` attribute to any WCC custom element that uses slots.
+ * Note: Add the `wccSlots` attribute to any WCC element that uses slots.
  * This is required because Angular AOT cannot evaluate dynamic selectors.
  *
  * @module @sprlab/wccompiler/adapters/angular
@@ -65,6 +76,19 @@ export declare class WccSlotsDirective implements AfterContentInit, OnDestroy {
     private destroyed;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Normalizes Angular-style slot attributes to standard HTML slot attributes.
+     * Converts: <div slot-header> → <div slot="header">
+     *
+     * This enables the Angular ng-content select pattern:
+     *   <wcc-card wccSlots>
+     *     <nav slot-header>Title</nav>
+     *     <span slot-footer>Footer</span>
+     *   </wcc-card>
+     *
+     * Skips reserved prefixes: slot-props, slot-template-*
+     */
+    private normalizeSlotAttributes;
     /** Classifies slots using __scopedSlots from the host element and initializes them */
     private classifyAndInitSlots;
     /** Named Slot: immediate static rendering */

package/adapters/angular-compiled/angular.mjs

@@ -1,26 +1,37 @@
 /**
- * Angular adapter for WCC Scoped Slots.
+ * Angular adapter for WCC Scoped Slots and Event Binding.
  *
  * Exports:
  *   - WccSlotDef: Auxiliary directive for ng-template[slot]
  *   - WccSlotsDirective: Main directive activated via [wccSlots] attribute
+ *   - WccEvent: Single-event directive (wccEvent="name" + wccEmit output)
+ *   - WccEvents: Multi-event bridging directive (kebab-case → camelCase)
  *   - SlotContext: Interface for template context typing
  *
  * Usage:
- *   import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular';
+ *   import { WccSlotsDirective, WccSlotDef, WccEvent, WccEvents } from '@sprlab/wccompiler/adapters/angular';
  *
  *   @Component({
- *     imports: [WccSlotsDirective, WccSlotDef],
+ *     imports: [WccSlotsDirective, WccSlotDef, WccEvent, WccEvents],
  *     schemas: [CUSTOM_ELEMENTS_SCHEMA],
  *     template: `
  *       <wcc-card wccSlots>
  *         <ng-template slot="header"><strong>Header</strong></ng-template>
  *         <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
  *       </wcc-card>
+ *
+ *       <!-- Event binding option 1: single event with unwrapped detail -->
+ *       <wcc-counter wccEvent="count-changed" (wccEmit)="onCount($event)"></wcc-counter>
+ *
+ *       <!-- Event binding option 2: camelCase event names -->
+ *       <wcc-counter wccEvents (countChanged)="onCount($event.detail)"></wcc-counter>
+ *
+ *       <!-- Event binding option 3: standard Angular (always works) -->
+ *       <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
  *     `
  *   })
  *
- * Note: Add the `wccSlots` attribute to any WCC custom element that uses slots.
+ * Note: Add the `wccSlots` attribute to any WCC element that uses slots.
  * This is required because Angular AOT cannot evaluate dynamic selectors.
  *
  * @module @sprlab/wccompiler/adapters/angular
@@ -76,12 +87,42 @@ export class WccSlotsDirective {
         // Runtime guard: only proceed for custom elements (tag name contains hyphen)
         if (!this.el.nativeElement.tagName.toLowerCase().includes('-'))
             return;
+        // Normalize Angular-style slot attributes: slot-header → slot="header"
+        this.normalizeSlotAttributes();
         this.classifyAndInitSlots();
     }
     ngOnDestroy() {
         this.destroyed = true;
         this.cleanup();
     }
+    // ─── Slot Attribute Normalization ───────────────────────────────────────
+    /**
+     * Normalizes Angular-style slot attributes to standard HTML slot attributes.
+     * Converts: <div slot-header> → <div slot="header">
+     *
+     * This enables the Angular ng-content select pattern:
+     *   <wcc-card wccSlots>
+     *     <nav slot-header>Title</nav>
+     *     <span slot-footer>Footer</span>
+     *   </wcc-card>
+     *
+     * Skips reserved prefixes: slot-props, slot-template-*
+     */
+    normalizeSlotAttributes() {
+        const hostEl = this.el.nativeElement;
+        for (const child of Array.from(hostEl.children)) {
+            for (const attr of Array.from(child.attributes)) {
+                if (attr.name.startsWith('slot-') &&
+                    !attr.value &&
+                    attr.name !== 'slot-props' &&
+                    !attr.name.startsWith('slot-template-')) {
+                    const slotName = attr.name.slice(5); // "slot-header" → "header"
+                    child.removeAttribute(attr.name);
+                    child.setAttribute('slot', slotName);
+                }
+            }
+        }
+    }
     // ─── Classification ─────────────────────────────────────────────────────
     /** Classifies slots using __scopedSlots from the host element and initializes them */
     async classifyAndInitSlots() {

package/adapters/angular.ts

@@ -127,6 +127,9 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     // Runtime guard: only proceed for custom elements (tag name contains hyphen)
     if (!this.el.nativeElement.tagName.toLowerCase().includes('-')) return;
 
+    // Normalize Angular-style slot attributes: slot-header → slot="header"
+    this.normalizeSlotAttributes();
+
     this.classifyAndInitSlots();
   }
 
@@ -135,6 +138,38 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     this.cleanup();
   }
 
+  // ─── Slot Attribute Normalization ───────────────────────────────────────
+
+  /**
+   * Normalizes Angular-style slot attributes to standard HTML slot attributes.
+   * Converts: <div slot-header> → <div slot="header">
+   *
+   * This enables the Angular ng-content select pattern:
+   *   <wcc-card wccSlots>
+   *     <nav slot-header>Title</nav>
+   *     <span slot-footer>Footer</span>
+   *   </wcc-card>
+   *
+   * Skips reserved prefixes: slot-props, slot-template-*
+   */
+  private normalizeSlotAttributes(): void {
+    const hostEl = this.el.nativeElement;
+    for (const child of Array.from(hostEl.children)) {
+      for (const attr of Array.from(child.attributes)) {
+        if (
+          attr.name.startsWith('slot-') &&
+          !attr.value &&
+          attr.name !== 'slot-props' &&
+          !attr.name.startsWith('slot-template-')
+        ) {
+          const slotName = attr.name.slice(5); // "slot-header" → "header"
+          child.removeAttribute(attr.name);
+          child.setAttribute('slot', slotName);
+        }
+      }
+    }
+  }
+
   // ─── Classification ─────────────────────────────────────────────────────
 
   /** Classifies slots using __scopedSlots from the host element and initializes them */

package/bin/wcc.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { readdirSync, writeFileSync, mkdirSync, existsSync, watch, copyFileSync } from 'node:fs';
+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';
@@ -61,9 +61,136 @@ async function build(config, cwd) {
   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 = readdirSync(outputDir).filter(f => f.endsWith('.js') && !f.startsWith('__') && f !== 'wcc-runtime.js' && f !== 'wcc-react.js' && f !== 'wcc-vue.js');
+  const components = [];
+
+  for (const file of files) {
+    const content = readFileSync(join(outputDir, 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\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';
+  }
+
+  writeFileSync(join(outputDir, 'wcc-vue.js'), vueJs);
+  writeFileSync(join(outputDir, 'wcc-vue.d.ts'), vueDts);
+}
+
 function discoverFiles(dir) {
   const results = [];
   const entries = readdirSync(dir, { withFileTypes: true, recursive: true });

package/integrations/react.js

@@ -841,130 +841,19 @@ export function wccReactPlugin(options = {}) {
 
 
 /**
- * Vite plugin that generates a virtual module with component stubs for
- * PascalCase imports. These stubs satisfy the linter/IDE (component is "defined")
- * and the wccReactPlugin transforms them to native custom elements at build time.
+ * @deprecated Use the CLI-generated stubs instead (dist/wcc-react.js).
+ * The `wcc build` command now auto-generates importable stubs with types.
+ * This virtual module plugin is kept for backward compatibility but will be removed.
  *
- * This enables the standard React import pattern:
- *   import { WccCounter, WccCard } from '@wcc/react'
- *
- * The stubs are zero-runtime — they're just tag name strings with slot name
- * properties. The wccReactPlugin handles the actual JSX transformation.
- *
- * @param {Object} [options]
- * @param {string} [options.moduleId='@wcc/react'] - Virtual module ID for imports
- * @param {string} [options.componentsDir='./dist'] - Directory containing compiled WCC .js files
- * @param {string} [options.prefix='wcc-'] - Tag prefix filter
- * @returns {import('vite').Plugin}
- *
- * @example vite.config.js
- * ```js
- * import { wccReactPlugin, wccReactComponents } from '@sprlab/wccompiler/integrations/react'
- * export default {
- *   plugins: [
- *     wccReactComponents({ componentsDir: './src/wcc' }),
- *     wccReactPlugin(),
- *     react()
- *   ]
- * }
- * ```
- *
- * @example Component.jsx
- * ```jsx
- * import { WccCard, WccList } from '@wcc/react'
- *
- * <WccCard>
- *   <WccCard.Header><strong>Title</strong></WccCard.Header>
- *   <p>Body</p>
- * </WccCard>
- *
- * <WccList>
- *   <WccList.Item>{(item) => <li>{item}</li>}</WccList.Item>
- * </WccList>
- * ```
+ * Migration:
+ *   Before: import { WccCard } from '@wcc/react'  (virtual module)
+ *   After:  import { WccCard } from './dist/wcc-react'  (real file, tree-shakeable)
  */
 export function wccReactComponents(options = {}) {
-  const {
-    moduleId = '@wcc/react',
-    componentsDir = './dist',
-    prefix = 'wcc-'
-  } = options
-
-  const resolvedId = '\0' + moduleId
-
   return {
-    name: 'vite-plugin-wcc-react-components',
-    resolveId(id) {
-      if (id === moduleId) return resolvedId
-      return null
-    },
-    async load(id) {
-      if (id !== resolvedId) return null
-
-      // Scan componentsDir for .js files and extract __meta
-      const fs = await import('fs')
-      const path = await import('path')
-
-      const dir = path.default.resolve(componentsDir)
-      if (!fs.default.existsSync(dir)) {
-        this.warn(`[wcc-react-components] Directory not found: ${dir}`)
-        return 'export {}'
-      }
-
-      const files = fs.default.readdirSync(dir).filter(f => f.endsWith('.js'))
-      const components = []
-
-      for (const file of files) {
-        const content = fs.default.readFileSync(path.default.join(dir, file), 'utf-8')
-        const metaMatch = content.match(/static __meta\s*=\s*(\{[^}]+\})/)
-        if (!metaMatch) continue
-
-        try {
-          const metaStr = metaMatch[1]
-            .replace(/'/g, '"')
-            .replace(/(\w+):/g, '"$1":')
-            .replace(/,\s*}/g, '}')
-            .replace(/,\s*]/g, ']')
-          const meta = JSON.parse(metaStr)
-
-          if (!meta.tag || !meta.tag.startsWith(prefix)) continue
-
-          const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
-          components.push({ meta, pascalName, file })
-        } catch (e) {
-          // Skip files with unparseable meta
-        }
-      }
-
-      if (components.length === 0) {
-        return 'export {}'
-      }
-
-      // Generate lightweight stubs (zero runtime)
-      // The wccReactPlugin transforms these at build time
-      let code = '// Auto-generated WCC component stubs (transformed by wccReactPlugin at build time)\n'
-
-      // Import each component file to ensure custom element registration
-      for (const comp of components) {
-        code += `import '${path.default.resolve(dir, comp.file)}';\n`
-      }
-
-      code += '\n'
-
-      // Generate stub exports with compound slot properties
-      // Use Object.assign to create an object that holds the tag name and slot sub-properties
-      for (const comp of components) {
-        const slots = comp.meta.slots || []
-        code += `export const ${comp.pascalName} = Object.assign(() => '${comp.meta.tag}', { __tag: '${comp.meta.tag}'`
-        for (const slot of slots) {
-          if (!slot) continue
-          const pascalSlot = slot[0].toUpperCase() + slot.slice(1)
-          code += `, ${pascalSlot}: '${slot}'`
-        }
-        code += ` });\n`
-      }
-
-      return code
+    name: 'vite-plugin-wcc-react-components-deprecated',
+    buildStart() {
+      this.warn('[wcc] wccReactComponents() is deprecated. Use the CLI-generated stubs from dist/wcc-react.js instead.')
     }
   }
 }

package/package.json

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