@sprlab/wccompiler 0.10.9 → 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

@@ -80,14 +80,28 @@ function generateFrameworkStubs(outputDir) {
 
   for (const file of files) {
     const content = readFileSync(join(outputDir, file), 'utf-8');
-    const metaMatch = content.match(/static __meta\s*=\s*\{([^}]+)\}/);
-    if (!metaMatch) continue;
+    // 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 metaStr = '{' + metaMatch[1] + '}';
       const parsed = metaStr
         .replace(/'/g, '"')
-        .replace(/(\w+):/g, '"$1":')
+        .replace(/(\w+)\s*:/g, '"$1":')
         .replace(/,\s*}/g, '}')
         .replace(/,\s*]/g, ']');
       const meta = JSON.parse(parsed);
@@ -153,8 +167,10 @@ function generateFrameworkStubs(outputDir) {
 
     // TypeScript declaration with props/events/slots info
     const propTypes = props.map(p => {
-      const type = typeof p.default === 'number' || /^\d/.test(p.default) ? 'number'
-        : p.default === 'true' || p.default === 'false' ? 'boolean' : 'string';
+      const def = String(p.default);
+      const type = def === 'true' || def === 'false' ? 'boolean'
+        : /^-?\d+(\.\d+)?$/.test(def) ? 'number'
+        : 'string';
       return `    ${p.name}?: ${type};`;
     }).join('\n');
 
@@ -164,7 +180,7 @@ function generateFrameworkStubs(outputDir) {
 
     vueDts += `export declare const ${comp.pascalName}: '${comp.meta.tag}';\n`;
     vueDts += `/** Component: ${comp.meta.tag} */\n`;
-    vueDts += `export interface ${comp.pascalName}Props {\n${propTypes}\n}\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`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.10.9",
+  "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": {