@sprlab/wccompiler 0.9.9 → 0.10.1

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

@@ -8,19 +8,21 @@
  * The integrations/react file is for vite.config.js only (contains Babel).
  *
  * Usage:
- *   import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ *   import { useWccEvent, useWccModel, createWccWrapper } from '@sprlab/wccompiler/adapters/react'
  *
- *   // Listen to custom events
+ *   // Option A: Low-level hooks (full control)
  *   const ref = useWccEvent('change', (e) => console.log(e.detail))
  *   <wcc-counter ref={ref}></wcc-counter>
  *
- *   // Two-way binding with defineModel
- *   const [text, setText] = useState('')
- *   const inputRef = useWccModel('value', text, setText)
- *   <wcc-input ref={inputRef}></wcc-input>
+ *   // Option B: Wrapper components (idiomatic React DX)
+ *   const WccCounter = createWccWrapper('wcc-counter', {
+ *     events: ['change'],
+ *     models: ['count']
+ *   })
+ *   <WccCounter onChange={handler} count={count} onCountChanged={setCount} />
  */
 
-import { useRef, useEffect } from 'react'
+import React, { useRef, useEffect } from 'react'
 
 /**
  * Hook that attaches a CustomEvent listener to a DOM element via ref.
@@ -101,3 +103,149 @@ export function useWccModel(propName, value, setValue, existingRef) {
 
   return elementRef
 }
+
+
+/**
+ * Creates a React wrapper component for a WCC custom element.
+ *
+ * The wrapper provides idiomatic React DX:
+ * - Event props: `onChange`, `onCountChanged` → automatically wired via addEventListener
+ * - Model props: two-way binding via attribute + event listener
+ * - Regular props: passed as attributes on the custom element
+ * - Children: passed through as-is (use `<div slot="name">` for named slots)
+ * - Ref forwarding: supports React refs via forwardRef
+ *
+ * @param {string} tagName - The custom element tag name (e.g., 'wcc-card')
+ * @param {Object} [config] - Configuration for the wrapper
+ * @param {string[]} [config.events] - Custom event names to expose as onEventName props
+ *   Event names are converted: 'count-changed' → onCountChanged prop
+ * @param {string[]} [config.models] - Model prop names for two-way binding
+ *   Each model 'name' creates: `name` prop (sets attribute) + `onNameChanged` event
+ * @returns {import('react').ForwardRefExoticComponent} A React component
+ *
+ * @example
+ * const WccCounter = createWccWrapper('wcc-counter', {
+ *   events: ['change'],
+ *   models: ['count']
+ * })
+ *
+ * function App() {
+ *   const [count, setCount] = useState(0)
+ *   return (
+ *     <WccCounter
+ *       count={count}
+ *       onCountChanged={(e) => setCount(e.detail)}
+ *       onChange={(e) => console.log('changed', e.detail)}
+ *       label="Clicks"
+ *     >
+ *       <div slot="footer">Footer content</div>
+ *     </WccCounter>
+ *   )
+ * }
+ */
+export function createWccWrapper(tagName, config = {}) {
+  const { events = [], models = [] } = config
+
+  // Build a set of event prop names for quick lookup
+  // 'count-changed' → 'onCountChanged'
+  // 'change' → 'onChange'
+  const eventPropMap = new Map()
+  for (const eventName of events) {
+    const propName = 'on' + eventName.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+    eventPropMap.set(propName, eventName)
+  }
+
+  // Model events: 'count' → 'count-changed' → 'onCountChanged'
+  const modelEventMap = new Map()
+  for (const modelName of models) {
+    const eventName = `${modelName}-changed`
+    const propName = 'on' + eventName.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+    eventPropMap.set(propName, eventName)
+    modelEventMap.set(modelName, eventName)
+  }
+
+  // Reserved prop names that should not be passed as attributes
+  const SKIP_PROPS = new Set(['children', 'key', 'ref', 'style', 'className', 'dangerouslySetInnerHTML'])
+
+  const WccWrapper = React.forwardRef(function WccWrapper(props, externalRef) {
+    const internalRef = useRef(null)
+    const ref = externalRef || internalRef
+
+    // Store event handlers in a ref to avoid re-subscribing on every render
+    const handlersRef = useRef({})
+
+    // Collect event handlers and regular props
+    const regularProps = {}
+    const eventHandlers = {}
+
+    for (const [key, value] of Object.entries(props)) {
+      if (SKIP_PROPS.has(key)) continue
+
+      if (eventPropMap.has(key)) {
+        eventHandlers[eventPropMap.get(key)] = value
+      } else if (key.startsWith('on') && key.length > 2 && key[2] >= 'A' && key[2] <= 'Z') {
+        // Generic React event handler pattern: onClick, onFocus, etc.
+        // Convert onSomething → 'something' (lowercase first char)
+        const nativeEvent = key[2].toLowerCase() + key.slice(3)
+        eventHandlers[nativeEvent] = value
+      } else {
+        regularProps[key] = value
+      }
+    }
+
+    // Update handlers ref
+    handlersRef.current = eventHandlers
+
+    // Subscribe to custom events
+    useEffect(() => {
+      const el = typeof ref === 'function' ? null : ref?.current
+      if (!el) return
+
+      const listeners = []
+      const allEvents = new Set([...eventPropMap.values(), ...Object.keys(eventHandlers)])
+
+      for (const eventName of allEvents) {
+        const listener = (e) => {
+          const handler = handlersRef.current[eventName]
+          if (handler) handler(e)
+        }
+        el.addEventListener(eventName, listener)
+        listeners.push([eventName, listener])
+      }
+
+      return () => {
+        for (const [name, listener] of listeners) {
+          el.removeEventListener(name, listener)
+        }
+      }
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Sync regular props as attributes
+    useEffect(() => {
+      const el = typeof ref === 'function' ? null : ref?.current
+      if (!el) return
+
+      for (const [key, value] of Object.entries(regularProps)) {
+        if (value == null || value === false) {
+          el.removeAttribute(key)
+        } else if (value === true) {
+          el.setAttribute(key, '')
+        } else {
+          el.setAttribute(key, String(value))
+        }
+      }
+    })
+
+    // Build the element props for React's createElement
+    const elementProps = { ref }
+    if (props.style) elementProps.style = props.style
+    if (props.className) elementProps.className = props.className
+
+    return React.createElement(tagName, elementProps, props.children)
+  })
+
+  WccWrapper.displayName = tagName.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+
+  return WccWrapper
+}
+

package/package.json

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