@sprlab/wccompiler 0.10.12 → 0.11.1

package/adapters/angular.ts

@@ -6,6 +6,7 @@
  *   - WccSlotsDirective: Main directive activated via [wccSlots] attribute
  *   - WccEvent: Single-event directive (wccEvent="name" + wccEmit output)
  *   - WccEvents: Multi-event bridging directive (kebab-case → camelCase)
+ *   - WccModel: Two-way binding bridge for [(prop)] banana-box syntax
  *   - SlotContext: Interface for template context typing
  *
  * Usage:
@@ -547,3 +548,83 @@ export class WccEvents implements OnInit, OnDestroy {
     this.listeners = [];
   }
 }
+
+
+// ─── WccModel — Two-way Binding Bridge (OPTIONAL) ───────────────────────────
+
+/**
+ * Optional directive for Angular's [(prop)] banana-box syntax on WCC elements.
+ *
+ * NOTE: As of WCC v0.11+, the compiled component emits `propChange` directly,
+ * so [(prop)] works zero-config without this directive. This directive is kept
+ * as an alternative that uses the structured wcc:model event instead.
+ *
+ * Angular's [(prop)] expands to:
+ *   [prop]="value" (propChange)="value = $event.detail"
+ *
+ * The component already emits `propChange` natively, so this works out of the box.
+ * This directive provides an alternative path via wcc:model for advanced use cases
+ * (e.g., when you need access to oldValue or want to handle multiple models centrally).
+ *
+ * Usage (optional):
+ *   <wcc-input wccModel [(value)]="text"></wcc-input>
+ */
+@Directive({
+  selector: '[wccModel]',
+  standalone: true,
+})
+export class WccModel implements OnInit, OnDestroy {
+  /** Optional explicit list of model prop names to bridge */
+  @Input() wccModel: string[] | '' = '';
+
+  private el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private listener: ((e: Event) => void) | null = null;
+
+  ngOnInit(): void {
+    const hostEl = this.el.nativeElement;
+    const tagName = hostEl.tagName.toLowerCase();
+    if (!tagName.includes('-')) return;
+
+    this.setupModelBridge(hostEl, tagName);
+  }
+
+  private async setupModelBridge(hostEl: HTMLElement, tagName: string): Promise<void> {
+    // Determine which model props to bridge
+    let modelNames: string[];
+
+    if (Array.isArray(this.wccModel) && this.wccModel.length > 0) {
+      modelNames = this.wccModel;
+    } else {
+      // Auto-discover from component metadata
+      await customElements.whenDefined(tagName);
+      const ctor = customElements.get(tagName) as any;
+      modelNames = ctor?.__meta?.models || [];
+    }
+
+    if (modelNames.length === 0) return;
+
+    const modelSet = new Set(modelNames);
+
+    // Listen for wcc:model and re-dispatch as propChange
+    this.listener = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail || !modelSet.has(detail.prop)) return;
+
+      // Dispatch propChange (Angular banana-box convention)
+      hostEl.dispatchEvent(new CustomEvent(`${detail.prop}Change`, {
+        detail: detail.value,
+        bubbles: false,
+        cancelable: false,
+      }));
+    };
+
+    hostEl.addEventListener('wcc:model', this.listener);
+  }
+
+  ngOnDestroy(): void {
+    if (this.listener) {
+      this.el.nativeElement.removeEventListener('wcc:model', this.listener);
+      this.listener = null;
+    }
+  }
+}

package/adapters/vue.js

@@ -20,11 +20,11 @@
  */
 
 // ── Vue directive: v-wcc-model ──────────────────────────────────────
-// Fallback for non-Vite setups. Listens for propName-changed events directly.
+// Fallback for non-Vite setups. Listens for wcc:model and filters by prop name.
 
 /**
  * Vue custom directive for two-way binding with WCC defineModel props.
- * Listens for `propName-changed` CustomEvent (emitted by WCC _modelSet).
+ * Listens for `wcc:model` CustomEvent and filters by prop name.
  */
 export const vWccModel = {
   mounted(el, binding) {
@@ -39,9 +39,10 @@ export const vWccModel = {
       el.setAttribute(propName, String(binding.value));
     }
 
-    // Listen for propName-changed (WCC → Vue)
-    const kebabName = propName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    // Listen for wcc:model (WCC → Vue), filter by prop name
     const handler = (e) => {
+      if (e.detail?.prop !== propName) return;
+      const newVal = e.detail.value;
       // Try to update the Vue ref via setupState
       const instance = binding.instance;
       if (instance) {
@@ -51,9 +52,9 @@ export const vWccModel = {
           const val = setupState[key];
           if (val === binding.value || val?.value === binding.value) {
             if (val?.value !== undefined) {
-              val.value = e.detail;
+              val.value = newVal;
             } else {
-              setupState[key] = e.detail;
+              setupState[key] = newVal;
             }
             break;
           }
@@ -61,9 +62,9 @@ export const vWccModel = {
       }
     };
 
-    el.addEventListener(`${kebabName}-changed`, handler);
+    el.addEventListener('wcc:model', handler);
     el.__wccModelHandlers = el.__wccModelHandlers || {};
-    el.__wccModelHandlers[propName] = { handler, eventName: `${kebabName}-changed` };
+    el.__wccModelHandlers[propName] = { handler, eventName: 'wcc:model' };
   },
 
   updated(el, binding) {

package/integrations/angular.js

@@ -44,12 +44,12 @@
  * ```
  *
  * @example Two-way binding with [(prop)]
- * The adapter translates wcc:model events to Angular's propChange convention.
+ * The WccModel directive translates wcc:model events to Angular's propChange convention.
  * Angular's banana-in-a-box [(prop)] expands to:
  *   [prop]="value" (propChange)="value = $event.detail"
  *
  * So when the WCC component emits wcc:model with { prop: 'value', value: 'new' },
- * the adapter re-dispatches as 'valueChange' CustomEvent, which Angular picks up.
+ * the WccModel directive re-dispatches as 'valueChange' CustomEvent, which Angular picks up.
  *
  * @example ngModel support (requires ControlValueAccessor)
  * For ngModel/ReactiveForms, see the WccValueAccessor guide in:

package/integrations/vue.js

@@ -65,11 +65,9 @@ export function wccVuePlugin(options = {}) {
 
       let result = code
 
-      // NOTE: As of WCC 0.10.3+, basic events work WITHOUT this plugin because
-      // the compiled component emits events in multiple formats (kebab, camelCase, lowercase).
-      // However, v-model:propName STILL REQUIRES this plugin because Vue assigns the raw
-      // Event object to the ref — it doesn't extract .detail automatically.
-      // This transform rewrites v-model:prop to @prop-changed="ref = $event.detail".
+      // NOTE: The compiled WCC component emits only `wcc:model` as its single
+      // canonical model change event. Framework-specific event formats are handled
+      // by each framework's adapter/plugin.
       //
       // This plugin is needed for:
       //   1. v-model:propName (Vue can't unwrap CustomEvent.detail natively)
@@ -78,12 +76,14 @@ export function wccVuePlugin(options = {}) {
 
       // Transform v-model:propName="expr" on custom elements (tags with hyphens)
       // Also handles modifiers: v-model:propName.trim.number="expr"
-      // → :propName="expr" @propName-changed="expr = $event.detail"
-      //   with modifiers applied to the event handler value:
-      //   .trim   → $event.detail.trim()  (for string values)
-      //   .number → Number($event.detail)
-      //   .lazy   → uses @propName-changed (same event, no difference for CE)
-      // Run in a loop to handle multiple v-model on the same element
+      // → :propName="expr" + merged @wcc:model handler
+      //   with modifiers applied to the extracted value:
+      //   .trim   → value.trim()  (for string values)
+      //   .number → Number(value)
+      //   .lazy   → no-op for custom elements
+      //
+      // Multiple v-model:prop on the same element are merged into a single
+      // @wcc:model handler with semicolons (avoids Vue "Duplicate attribute" error).
       let prev = ''
       while (prev !== result) {
         prev = result
@@ -91,7 +91,7 @@ export function wccVuePlugin(options = {}) {
           /(<[\w]+-[\w-]*(?:\s[^>]*?)?)\bv-model:(\w+)((?:\.\w+)*)="([^"]+)"/,
           (match, prefix, prop, modifiersStr, expr) => {
             const modifiers = modifiersStr ? modifiersStr.slice(1).split('.') : []
-            let value = '$event.detail'
+            let value = '$event.detail.value'
             // Apply modifiers in order
             for (const mod of modifiers) {
               if (mod === 'trim') {
@@ -101,14 +101,23 @@ export function wccVuePlugin(options = {}) {
               }
               // .lazy is a no-op for custom elements (they already use change events)
             }
-            return `${prefix}:${prop}="${expr}" @${prop}-changed="${expr} = ${value}"`
+            const handler = `$event.detail.prop === '${prop}' && (${expr} = ${value})`
+            // Check if there's already a @wcc:model on this element — append to it
+            if (prefix.includes('@wcc:model="')) {
+              const merged = prefix.replace(
+                /@wcc:model="([^"]*)"/,
+                (_, existing) => `@wcc:model="${existing}; ${handler}"`
+              )
+              return `${merged}:${prop}="${expr}"`
+            }
+            return `${prefix}:${prop}="${expr}" @wcc:model="${handler}"`
           }
         )
       }
 
       // Transform v-model="expr" (without argument) on custom elements
       // Also handles modifiers: v-model.trim.lazy="expr"
-      // → :model-value="expr" @model-value-changed="expr = $event.detail"
+      // → :model-value="expr" + merged @wcc:model handler
       prev = ''
       while (prev !== result) {
         prev = result
@@ -116,7 +125,7 @@ export function wccVuePlugin(options = {}) {
           /(<[\w]+-[\w-]*(?:\s[^>]*?)?)\bv-model((?:\.\w+)*)="([^"]+)"/,
           (match, prefix, modifiersStr, expr) => {
             const modifiers = modifiersStr ? modifiersStr.slice(1).split('.') : []
-            let value = '$event.detail'
+            let value = '$event.detail.value'
             for (const mod of modifiers) {
               if (mod === 'trim') {
                 value = `(typeof ${value} === 'string' ? (${value}).trim() : ${value})`
@@ -124,11 +133,29 @@ export function wccVuePlugin(options = {}) {
                 value = `Number(${value})`
               }
             }
-            return `${prefix}:model-value="${expr}" @model-value-changed="${expr} = ${value}"`
+            const handler = `$event.detail.prop === 'modelValue' && (${expr} = ${value})`
+            // Check if there's already a @wcc:model on this element — append to it
+            if (prefix.includes('@wcc:model="')) {
+              const merged = prefix.replace(
+                /@wcc:model="([^"]*)"/,
+                (_, existing) => `@wcc:model="${existing}; ${handler}"`
+              )
+              return `${merged}:model-value="${expr}"`
+            }
+            return `${prefix}:model-value="${expr}" @wcc:model="${handler}"`
           }
         )
       }
 
+      // Post-process: merge any duplicate @wcc:model attributes on the same element
+      // This handles the case where v-model (no arg) was before v-model:prop in source order
+      result = result.replace(
+        /<([\w]+-[\w-]*)((?:\s[^>]*?)?)@wcc:model="([^"]*)"((?:\s[^>]*?)?)@wcc:model="([^"]*)"([^>]*?)>/g,
+        (match, tag, before, handler1, middle, handler2, after) => {
+          return `<${tag}${before}@wcc:model="${handler1}; ${handler2}"${middle}${after}>`
+        }
+      )
+
       // ── Slot transforms ──
       // Transform <template #name>content</template> inside custom elements
       // → <div slot="name">content</div>

package/lib/codegen.js

@@ -1773,43 +1773,23 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // _emit method (if emits declared)
-  // Emits the event in multiple formats for cross-framework compatibility:
-  //   1. Original name (kebab-case) — for direct addEventListener and Angular (event-name)
-  //   2. camelCase — for Angular WccEvents directive
-  //   3. lowercase — for React 19 (onEventName → addEventListener('eventname'))
+  // Emits the original event name + lowercase-no-hyphens for React 19 compatibility.
+  // React 19 maps `oncountchanged` → addEventListener('countchanged').
   if (emits.length > 0) {
     lines.push('  _emit(name, detail) {');
     lines.push('    const evt = { detail, bubbles: true, composed: true };');
     lines.push('    this.dispatchEvent(new CustomEvent(name, evt));');
-    // camelCase version (only if name contains hyphens)
-    lines.push("    if (name.includes('-')) {");
-    lines.push("      const camel = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());");
-    lines.push('      this.dispatchEvent(new CustomEvent(camel, evt));');
-    // lowercase version for React 19
-    lines.push('      this.dispatchEvent(new CustomEvent(camel.toLowerCase(), evt));');
-    lines.push('    } else {');
-    // If no hyphens, just emit lowercase (for React 19)
-    lines.push('      const lower = name.toLowerCase();');
-    lines.push('      if (lower !== name) this.dispatchEvent(new CustomEvent(lower, evt));');
-    lines.push('    }');
+    lines.push("    const lower = name.replace(/-/g, '').toLowerCase();");
+    lines.push('    if (lower !== name) this.dispatchEvent(new CustomEvent(lower, evt));');
     lines.push('  }');
     lines.push('');
   }
 
   // _modelSet methods (one per defineModel prop — emits events on internal write)
   // Emits:
-  //   1. wcc:model — generic event for vanilla JS and WCC-to-WCC binding
-  //   2. propName-changed — kebab-case for direct addEventListener and Vue plugin
-  //   3. propNameChanged — camelCase for Angular WccEvents / direct binding
-  //   4. propnamechanged — lowercase for React 19 (onPropnameChanged → 'propnamechanged')
-  //   5. propNameChange — for Angular [(prop)] banana-box syntax
-  //
-  // NOTE: Vue v-model:prop requires the wccVuePlugin because Vue assigns the raw
-  // Event object to the ref (not event.detail). The plugin transforms v-model:prop
-  // to @prop-changed="ref = $event.detail" which correctly extracts the value.
+  //   1. wcc:model — canonical event for vanilla JS, WCC-to-WCC, React adapter, Vue plugin
+  //   2. propNameChange — for Angular [(prop)] banana-box syntax (zero-config)
   for (const md of modelDefs) {
-    const kebabName = camelToKebab(md.name);
-    const camelChanged = `${md.name}Changed`;
     lines.push(`  _modelSet_${md.name}(newVal) {`);
     lines.push(`    const oldVal = this._m_${md.name}();`);
     lines.push(`    this._m_${md.name}(newVal);`);
@@ -1818,13 +1798,6 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
-    // Kebab-case: prop-name-changed (Vue plugin, addEventListener)
-    lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
-    // camelCase: propNameChanged (Angular, addEventListener)
-    lines.push(`    this.dispatchEvent(new CustomEvent('${camelChanged}', { detail: newVal, bubbles: true }));`);
-    // lowercase: propnamechanged (React 19)
-    lines.push(`    this.dispatchEvent(new CustomEvent('${camelChanged.toLowerCase()}', { detail: newVal, bubbles: true }));`);
-    // Angular banana-box: propNameChange
     lines.push(`    this.dispatchEvent(new CustomEvent('${md.name}Change', { detail: newVal, bubbles: true }));`);
     lines.push('  }');
     lines.push('');

package/package.json

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