@sprlab/wccompiler 0.10.0 → 0.10.2

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

@@ -25,7 +25,7 @@
  *
  * @module @sprlab/wccompiler/adapters/angular
  */
-import { TemplateRef, QueryList, AfterContentInit, OnDestroy } from '@angular/core';
+import { TemplateRef, QueryList, AfterContentInit, OnDestroy, OnInit, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 /** Context object passed to createEmbeddedView for scoped slots */
 export interface SlotContext {
@@ -96,3 +96,78 @@ export declare class WccSlotsDirective implements AfterContentInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<WccSlotsDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<WccSlotsDirective, "[wccSlots]", never, {}, {}, ["slotDefs"], never, true, never>;
 }
+/**
+ * Directive that bridges WCC custom element events to Angular output bindings.
+ *
+ * Problem: Angular's `(event-name)="handler($event)"` works on custom elements,
+ * but `$event` is the raw CustomEvent. The developer must write `$event.detail`
+ * to get the payload. This is verbose and error-prone.
+ *
+ * Solution: This directive listens for CustomEvents on the host element and
+ * re-emits them as Angular outputs with `$event = event.detail`.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="onCount($event)"></wcc-counter>
+ *
+ * Or for multiple events, use WccEvents (plural) with a comma-separated list:
+ *   <wcc-counter wccEvents="count-changed, value-changed"
+ *     (countChanged)="onCount($event)"
+ *     (valueChanged)="onValue($event)">
+ *   </wcc-counter>
+ *
+ * The event name is converted from kebab-case to camelCase for the output:
+ *   'count-changed' → (countChanged)
+ *   'value-changed' → (valueChanged)
+ *   'change' → (change)
+ */
+/**
+ * Single-event directive: listens for one CustomEvent and emits its detail.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="handler($event)"></wcc-counter>
+ */
+export declare class WccEvent implements OnInit, OnDestroy {
+    wccEvent: string;
+    wccEmit: EventEmitter<any>;
+    private el;
+    private listener;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WccEvent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WccEvent, "[wccEvent]", never, { "wccEvent": { "alias": "wccEvent"; "required": false; }; }, { "wccEmit": "wccEmit"; }, never, never, true, never>;
+}
+/**
+ * Event bridging directive: allows using camelCase event bindings on WCC elements.
+ *
+ * Without this directive, Angular devs must use kebab-case event names:
+ *   <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
+ *
+ * With this directive, they can use camelCase (more Angular-idiomatic):
+ *   <wcc-counter wccEvents (countChanged)="onCount($event.detail)"></wcc-counter>
+ *
+ * The directive listens for kebab-case CustomEvents from the WCC component
+ * and re-dispatches them with camelCase names so Angular's event binding picks them up.
+ *
+ * Event name conversion:
+ *   'count-changed' → dispatches 'countChanged'
+ *   'value-changed' → dispatches 'valueChanged'
+ *   'change' → dispatches 'change' (no conversion needed)
+ *
+ * Event discovery:
+ *   - Auto: reads `static __events` from the WCC component class (set by codegen)
+ *   - Manual: pass an explicit array via [wccEvents]="['count-changed', 'value-changed']"
+ *
+ * Note: $event is still the CustomEvent — use $event.detail to get the payload.
+ * This is consistent with how Angular handles all DOM events.
+ */
+export declare class WccEvents implements OnInit, OnDestroy {
+    /** Optional explicit list of kebab-case event names to bridge */
+    wccEvents: string[] | '';
+    private el;
+    private listeners;
+    ngOnInit(): void;
+    private setupEvents;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WccEvents, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WccEvents, "[wccEvents]", never, { "wccEvents": { "alias": "wccEvents"; "required": false; }; }, {}, never, never, true, never>;
+}

package/adapters/angular-compiled/angular.mjs

@@ -25,7 +25,7 @@
  *
  * @module @sprlab/wccompiler/adapters/angular
  */
-import { Directive, TemplateRef, ElementRef, ViewContainerRef, ChangeDetectorRef, ContentChildren, inject, Attribute, } from '@angular/core';
+import { Directive, TemplateRef, ElementRef, ViewContainerRef, ChangeDetectorRef, ContentChildren, Output, EventEmitter, inject, Attribute, Input, } from '@angular/core';
 import * as i0 from "@angular/core";
 // ─── WccSlotDef — Auxiliary Directive ───────────────────────────────────────
 /**
@@ -297,3 +297,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: ContentChildren,
                 args: [WccSlotDef]
             }] } });
+// ─── WccEvent — Event Binding Directive ─────────────────────────────────────
+/**
+ * Directive that bridges WCC custom element events to Angular output bindings.
+ *
+ * Problem: Angular's `(event-name)="handler($event)"` works on custom elements,
+ * but `$event` is the raw CustomEvent. The developer must write `$event.detail`
+ * to get the payload. This is verbose and error-prone.
+ *
+ * Solution: This directive listens for CustomEvents on the host element and
+ * re-emits them as Angular outputs with `$event = event.detail`.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="onCount($event)"></wcc-counter>
+ *
+ * Or for multiple events, use WccEvents (plural) with a comma-separated list:
+ *   <wcc-counter wccEvents="count-changed, value-changed"
+ *     (countChanged)="onCount($event)"
+ *     (valueChanged)="onValue($event)">
+ *   </wcc-counter>
+ *
+ * The event name is converted from kebab-case to camelCase for the output:
+ *   'count-changed' → (countChanged)
+ *   'value-changed' → (valueChanged)
+ *   'change' → (change)
+ */
+/**
+ * Single-event directive: listens for one CustomEvent and emits its detail.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="handler($event)"></wcc-counter>
+ */
+export class WccEvent {
+    wccEvent = '';
+    wccEmit = new EventEmitter();
+    el = inject(ElementRef);
+    listener = null;
+    ngOnInit() {
+        if (!this.wccEvent)
+            return;
+        this.listener = (e) => {
+            this.wccEmit.emit(e.detail);
+        };
+        this.el.nativeElement.addEventListener(this.wccEvent, this.listener);
+    }
+    ngOnDestroy() {
+        if (this.listener && this.wccEvent) {
+            this.el.nativeElement.removeEventListener(this.wccEvent, this.listener);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WccEvent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: WccEvent, isStandalone: true, selector: "[wccEvent]", inputs: { wccEvent: "wccEvent" }, outputs: { wccEmit: "wccEmit" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WccEvent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wccEvent]',
+                    standalone: true,
+                }]
+        }], propDecorators: { wccEvent: [{
+                type: Input
+            }], wccEmit: [{
+                type: Output
+            }] } });
+/**
+ * Event bridging directive: allows using camelCase event bindings on WCC elements.
+ *
+ * Without this directive, Angular devs must use kebab-case event names:
+ *   <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
+ *
+ * With this directive, they can use camelCase (more Angular-idiomatic):
+ *   <wcc-counter wccEvents (countChanged)="onCount($event.detail)"></wcc-counter>
+ *
+ * The directive listens for kebab-case CustomEvents from the WCC component
+ * and re-dispatches them with camelCase names so Angular's event binding picks them up.
+ *
+ * Event name conversion:
+ *   'count-changed' → dispatches 'countChanged'
+ *   'value-changed' → dispatches 'valueChanged'
+ *   'change' → dispatches 'change' (no conversion needed)
+ *
+ * Event discovery:
+ *   - Auto: reads `static __events` from the WCC component class (set by codegen)
+ *   - Manual: pass an explicit array via [wccEvents]="['count-changed', 'value-changed']"
+ *
+ * Note: $event is still the CustomEvent — use $event.detail to get the payload.
+ * This is consistent with how Angular handles all DOM events.
+ */
+export class WccEvents {
+    /** Optional explicit list of kebab-case event names to bridge */
+    wccEvents = '';
+    el = inject(ElementRef);
+    listeners = [];
+    ngOnInit() {
+        const hostEl = this.el.nativeElement;
+        const tagName = hostEl.tagName.toLowerCase();
+        if (!tagName.includes('-'))
+            return;
+        this.setupEvents(hostEl, tagName);
+    }
+    async setupEvents(hostEl, tagName) {
+        let eventNames;
+        if (Array.isArray(this.wccEvents) && this.wccEvents.length > 0) {
+            eventNames = this.wccEvents;
+        }
+        else {
+            // Auto-discover from component metadata
+            await customElements.whenDefined(tagName);
+            const ctor = customElements.get(tagName);
+            eventNames = ctor?.__events || [];
+        }
+        if (eventNames.length === 0)
+            return;
+        for (const eventName of eventNames) {
+            // Only bridge events that have hyphens (already camelCase events don't need bridging)
+            if (!eventName.includes('-'))
+                continue;
+            const camelName = eventName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            const listener = (e) => {
+                // Re-dispatch with camelCase name — Angular's (camelName) binding will catch it
+                hostEl.dispatchEvent(new CustomEvent(camelName, {
+                    detail: e.detail,
+                    bubbles: false,
+                    cancelable: false,
+                }));
+            };
+            hostEl.addEventListener(eventName, listener);
+            this.listeners.push([eventName, listener]);
+        }
+    }
+    ngOnDestroy() {
+        const hostEl = this.el.nativeElement;
+        for (const [name, listener] of this.listeners) {
+            hostEl.removeEventListener(name, listener);
+        }
+        this.listeners = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WccEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: WccEvents, isStandalone: true, selector: "[wccEvents]", inputs: { wccEvents: "wccEvents" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: WccEvents, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wccEvents]',
+                    standalone: true,
+                }]
+        }], propDecorators: { wccEvents: [{
+                type: Input
+            }] } });

package/adapters/angular.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
@@ -37,8 +48,12 @@ import {
   EmbeddedViewRef,
   AfterContentInit,
   OnDestroy,
+  OnInit,
+  Output,
+  EventEmitter,
   inject,
   Attribute,
+  Input,
 } from '@angular/core';
 
 // ─── Interfaces ─────────────────────────────────────────────────────────────
@@ -351,3 +366,149 @@ export class WccSlotsDirective implements AfterContentInit, OnDestroy {
     this.eventCleanups = [];
   }
 }
+
+
+// ─── WccEvent — Event Binding Directive ─────────────────────────────────────
+
+/**
+ * Directive that bridges WCC custom element events to Angular output bindings.
+ *
+ * Problem: Angular's `(event-name)="handler($event)"` works on custom elements,
+ * but `$event` is the raw CustomEvent. The developer must write `$event.detail`
+ * to get the payload. This is verbose and error-prone.
+ *
+ * Solution: This directive listens for CustomEvents on the host element and
+ * re-emits them as Angular outputs with `$event = event.detail`.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="onCount($event)"></wcc-counter>
+ *
+ * Or for multiple events, use WccEvents (plural) with a comma-separated list:
+ *   <wcc-counter wccEvents="count-changed, value-changed"
+ *     (countChanged)="onCount($event)"
+ *     (valueChanged)="onValue($event)">
+ *   </wcc-counter>
+ *
+ * The event name is converted from kebab-case to camelCase for the output:
+ *   'count-changed' → (countChanged)
+ *   'value-changed' → (valueChanged)
+ *   'change' → (change)
+ */
+
+/**
+ * Single-event directive: listens for one CustomEvent and emits its detail.
+ *
+ * Usage:
+ *   <wcc-counter wccEvent="count-changed" (wccEmit)="handler($event)"></wcc-counter>
+ */
+@Directive({
+  selector: '[wccEvent]',
+  standalone: true,
+})
+export class WccEvent implements OnInit, OnDestroy {
+  @Input() wccEvent = '';
+  @Output() wccEmit = new EventEmitter<any>();
+
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private listener: ((e: Event) => void) | null = null;
+
+  ngOnInit(): void {
+    if (!this.wccEvent) return;
+    this.listener = (e: Event) => {
+      this.wccEmit.emit((e as CustomEvent).detail);
+    };
+    this.el.nativeElement.addEventListener(this.wccEvent, this.listener);
+  }
+
+  ngOnDestroy(): void {
+    if (this.listener && this.wccEvent) {
+      this.el.nativeElement.removeEventListener(this.wccEvent, this.listener);
+    }
+  }
+}
+
+/**
+ * Event bridging directive: allows using camelCase event bindings on WCC elements.
+ *
+ * Without this directive, Angular devs must use kebab-case event names:
+ *   <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
+ *
+ * With this directive, they can use camelCase (more Angular-idiomatic):
+ *   <wcc-counter wccEvents (countChanged)="onCount($event.detail)"></wcc-counter>
+ *
+ * The directive listens for kebab-case CustomEvents from the WCC component
+ * and re-dispatches them with camelCase names so Angular's event binding picks them up.
+ *
+ * Event name conversion:
+ *   'count-changed' → dispatches 'countChanged'
+ *   'value-changed' → dispatches 'valueChanged'
+ *   'change' → dispatches 'change' (no conversion needed)
+ *
+ * Event discovery:
+ *   - Auto: reads `static __events` from the WCC component class (set by codegen)
+ *   - Manual: pass an explicit array via [wccEvents]="['count-changed', 'value-changed']"
+ *
+ * Note: $event is still the CustomEvent — use $event.detail to get the payload.
+ * This is consistent with how Angular handles all DOM events.
+ */
+@Directive({
+  selector: '[wccEvents]',
+  standalone: true,
+})
+export class WccEvents implements OnInit, OnDestroy {
+  /** Optional explicit list of kebab-case event names to bridge */
+  @Input() wccEvents: string[] | '' = '';
+
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private listeners: Array<[string, (e: Event) => void]> = [];
+
+  ngOnInit(): void {
+    const hostEl = this.el.nativeElement;
+    const tagName = hostEl.tagName.toLowerCase();
+    if (!tagName.includes('-')) return;
+
+    this.setupEvents(hostEl, tagName);
+  }
+
+  private async setupEvents(hostEl: HTMLElement, tagName: string): Promise<void> {
+    let eventNames: string[];
+
+    if (Array.isArray(this.wccEvents) && this.wccEvents.length > 0) {
+      eventNames = this.wccEvents;
+    } else {
+      // Auto-discover from component metadata
+      await customElements.whenDefined(tagName);
+      const ctor = customElements.get(tagName) as any;
+      eventNames = ctor?.__events || [];
+    }
+
+    if (eventNames.length === 0) return;
+
+    for (const eventName of eventNames) {
+      // Only bridge events that have hyphens (already camelCase events don't need bridging)
+      if (!eventName.includes('-')) continue;
+
+      const camelName = eventName.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+
+      const listener = (e: Event) => {
+        // Re-dispatch with camelCase name — Angular's (camelName) binding will catch it
+        hostEl.dispatchEvent(new CustomEvent(camelName, {
+          detail: (e as CustomEvent).detail,
+          bubbles: false,
+          cancelable: false,
+        }));
+      };
+
+      hostEl.addEventListener(eventName, listener);
+      this.listeners.push([eventName, listener]);
+    }
+  }
+
+  ngOnDestroy(): void {
+    const hostEl = this.el.nativeElement;
+    for (const [name, listener] of this.listeners) {
+      hostEl.removeEventListener(name, listener);
+    }
+    this.listeners = [];
+  }
+}

package/adapters/react.js

@@ -249,3 +249,87 @@ export function createWccWrapper(tagName, config = {}) {
   return WccWrapper
 }
 
+
+
+/**
+ * Creates a React wrapper from a WCC component class that has `static __meta`.
+ *
+ * Unlike `createWccWrapper` which requires manual event/model configuration,
+ * this function reads the metadata directly from the compiled component class.
+ *
+ * @param {Function} WccClass - The WCC custom element class (must have static __meta)
+ * @returns {import('react').ForwardRefExoticComponent} A React component
+ *
+ * @example
+ * import { wrapWccComponent } from '@sprlab/wccompiler/adapters/react'
+ * import '../wcc-components/wcc-counter.js'  // registers the custom element
+ *
+ * // Read metadata directly from the registered class
+ * const WccCounter = wrapWccComponent(customElements.get('wcc-counter'))
+ *
+ * // Use idiomatically — no manual config needed
+ * <WccCounter count={count} onCountChanged={setCount} onChange={handler} />
+ */
+export function wrapWccComponent(WccClass) {
+  const meta = WccClass?.__meta
+  if (!meta) {
+    throw new Error(`wrapWccComponent: class does not have static __meta. Is it a compiled WCC component?`)
+  }
+
+  return createWccWrapper(meta.tag, {
+    events: meta.events || [],
+    models: meta.models || [],
+  })
+}
+
+/**
+ * Creates React wrappers for all registered WCC custom elements matching a prefix.
+ *
+ * Scans the custom elements registry for components with `static __meta` and
+ * generates typed wrapper components for each one.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.prefix='wcc-'] - Tag prefix to filter components
+ * @returns {Record<string, import('react').ForwardRefExoticComponent>} Map of PascalCase name → React component
+ *
+ * @example
+ * // In your app entry point, after importing all WCC components:
+ * import '../wcc-components/wcc-counter.js'
+ * import '../wcc-components/wcc-card.js'
+ * import { createWccWrappers } from '@sprlab/wccompiler/adapters/react'
+ *
+ * export const { WccCounter, WccCard } = createWccWrappers()
+ *
+ * // Then use anywhere:
+ * <WccCounter count={count} onCountChanged={setCount} />
+ * <WccCard><div slot="header">Title</div></WccCard>
+ */
+export function createWccWrappers(options = {}) {
+  const { prefix = 'wcc-' } = options
+  const wrappers = {}
+
+  // Note: customElements registry doesn't have a list API,
+  // so we need the component files to be imported first (which registers them).
+  // This function is meant to be called after all component imports.
+
+  // We'll use a Proxy that lazily creates wrappers on first access
+  return new Proxy(wrappers, {
+    get(target, prop) {
+      if (typeof prop !== 'string') return undefined
+      if (prop in target) return target[prop]
+
+      // Convert PascalCase to kebab-case: WccCounter → wcc-counter
+      const kebab = prop.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '')
+
+      // Check if it starts with the prefix
+      if (!kebab.startsWith(prefix)) return undefined
+
+      const ctor = customElements.get(kebab)
+      if (!ctor || !(ctor).__meta) return undefined
+
+      const wrapper = wrapWccComponent(ctor)
+      target[prop] = wrapper
+      return wrapper
+    }
+  })
+}

package/lib/codegen.js

@@ -970,6 +970,16 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
+  // Static __meta — component metadata for framework adapters (React wrappers, Angular events, etc.)
+  {
+    const metaProps = propDefs.map(p => `{ name: '${p.name}', default: ${p.default} }`).join(', ');
+    const metaEvents = emits.map(e => `'${e}'`).join(', ');
+    const metaModels = modelDefs.map(m => `'${m.name}'`).join(', ');
+    const metaSlots = slots.filter(s => s.name).map(s => `'${s.name}'`).join(', ');
+    lines.push(`  static __meta = { tag: '${tagName}', props: [${metaProps}], events: [${metaEvents}], models: [${metaModels}], slots: [${metaSlots}] };`);
+    lines.push('');
+  }
+
   // Constructor — reactive state only (no DOM manipulation per Custom Elements spec)
   lines.push('  constructor() {');
   lines.push('    super();');

package/package.json

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