@sprlab/wccompiler 0.10.11 → 0.11.0

package/README.md

@@ -695,38 +695,20 @@ Each standalone component has its own isolated reactive runtime. Signals from co
 
 ## Framework Integrations
 
-WCC components are native custom elements — they work in any framework. Props, events, and named slots work natively with zero WCC-specific config. Two-way binding is zero-config in Angular; Vue and React require a lightweight plugin. Scoped slots require a framework plugin for idiomatic syntax.
+WCC components are native custom elements — they work in any framework. Props, events, and named slots work natively with zero WCC-specific config. Two-way binding is zero-config in Angular; Vue requires a plugin. Scoped slots require a framework plugin or directive for idiomatic syntax.
 
-### Zero-Config (works immediately)
+### Feature Support Matrix
 
-Just import the compiled component and use it:
+| Feature | Vue (plugin) | Angular (directive) | React 19 (plugin) |
+|---------|--------------|--------------------|--------------------|
+| Props | ✅ `:count="ref"` | ✅ `[count]="signal()"` | ✅ `count={state}` |
+| Events | ✅ `@count-changed="handler($event.detail)"` | ✅ `(count-changed)="handler($event.detail)"` | ✅ `oncountchanged={(e) => handler(e.detail)}` |
+| Two-way binding | ✅ `v-model:count="ref"` | ✅ `[(count)]="signal"` | ❌ Not applicable |
+| Default slot | ✅ children | ✅ children | ✅ children |
+| Named slots | ✅ `<template #name>` | ✅ `<div slot-name>` | ✅ `<WccCard.Header>` |
+| Scoped slots | ✅ `<template #name="{ prop }">` | ✅ `<ng-template slot="name" let-prop>` | ✅ `<WccList.Item>{(prop) => jsx}</WccList.Item>` |
 
-```html
-<script type="module" src="dist/wcc-counter.js"></script>
-```
-
-**Vue:**
-```vue
-<wcc-counter :count="ref" @count-changed="handler($event.detail)">
-  <div slot="footer">Footer content</div>
-</wcc-counter>
-```
-
-**React 19:**
-```jsx
-<wcc-counter count={state} onCountchanged={(e) => handler(e.detail)}>
-  <div slot="footer">Footer content</div>
-</wcc-counter>
-```
-
-**Angular:**
-```html
-<wcc-counter [count]="signal()" (count-changed)="handler($event.detail)" [(count)]="signal">
-  <div slot="footer">Footer content</div>
-</wcc-counter>
-```
-
-### Vue Plugin (v-model, modifiers, scoped slots)
+### Vue (with `wccVuePlugin`)
 
 ```js
 // vite.config.js
@@ -735,65 +717,184 @@ export default defineConfig({ plugins: [wccVuePlugin()] })
 ```
 
 ```vue
-<wcc-input v-model="text" v-model:count.number="count"></wcc-input>
-<wcc-card>
-  <template #header><strong>Title</strong></template>
-  <template #stats="{ likes }">{{ likes }} likes</template>
-</wcc-card>
-```
-
-The plugin is needed for: v-model:prop (Vue assigns raw Event, not detail), v-model modifiers (.trim, .number), and scoped slot syntax (`{{prop}}` → `{%prop%}` escape).
-
-Without the plugin, use `:prop` + `@prop-changed` for two-way binding manually.
-
-### React Plugin + Wrappers (scoped slots, typed events, two-way)
-
-```js
-// vite.config.js
-import { wccReactPlugin } from '@sprlab/wccompiler/integrations/react'
-import react from '@vitejs/plugin-react'
-export default defineConfig({ plugins: [wccReactPlugin(), react()] })
-```
-
-```jsx
-// Auto-generated wrappers — events unwrapped, React-idiomatic naming
-import { createWccWrappers } from '@sprlab/wccompiler/adapters/react'
-const { WccCounter, WccCard } = createWccWrappers()
+<script setup>
+import { ref } from 'vue'
+const count = ref(0)
+const text = ref('')
+</script>
 
-<WccCounter count={count} onCountChange={(value) => setCount(value)} />
-<WccCard renderStats={(likes) => <span>{likes} likes</span>}>
-  <p>Body</p>
-</WccCard>
+<template>
+  <!-- Props -->
+  <wcc-counter :count="count" label="Clicks"></wcc-counter>
+
+  <!-- Events -->
+  <wcc-counter @count-changed="count = $event.detail"></wcc-counter>
+
+  <!-- Two-way binding (v-model) -->
+  <wcc-counter v-model:count="count"></wcc-counter>
+  <wcc-input v-model.trim="text"></wcc-input>
+
+  <!-- Default slot -->
+  <wcc-card>
+    <p>Body content</p>
+  </wcc-card>
+
+  <!-- Named slots -->
+  <wcc-card>
+    <template #header><strong>Title</strong></template>
+    <p>Body</p>
+    <template #footer>Footer text</template>
+  </wcc-card>
+
+  <!-- Scoped slots -->
+  <wcc-list>
+    <template #item="{ item, index }">
+      <li>{{ index }}: {{ item }}</li>
+    </template>
+  </wcc-list>
+</template>
 ```
 
-Wrappers read component metadata (`static __meta`) automatically — no manual event/model config needed.
-
-### Angular Directive (scoped slots only)
+The plugin provides: `isCustomElement` config, `v-model:prop` support, v-model modifiers (`.trim`, `.number`), and scoped slot syntax (`{{prop}}` → `{%prop%}` escape).
 
-Angular needs no plugin for props, events, or two-way binding. The directive is only needed for scoped slots:
+### Angular (with `WccSlotsDirective`)
 
 ```ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { WccSlotsDirective, WccSlotDef } from '@sprlab/wccompiler/adapters/angular'
 
 @Component({
   imports: [WccSlotsDirective, WccSlotDef],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: `
+    <!-- Props -->
+    <wcc-counter [count]="count" label="Clicks"></wcc-counter>
+
+    <!-- Events -->
+    <wcc-counter (count-changed)="onCount($event.detail)"></wcc-counter>
+
+    <!-- Two-way binding (banana-box) -->
+    <wcc-counter [(count)]="count"></wcc-counter>
+
+    <!-- Default slot -->
+    <wcc-card>
+      <p>Body content</p>
+    </wcc-card>
+
+    <!-- Named slots -->
     <wcc-card wccSlots>
-      <ng-template slot="header"><strong>Title</strong></ng-template>
-      <ng-template slot="stats" let-likes>{{ likes }} likes</ng-template>
+      <strong slot-header>Title</strong>
+      <p>Body</p>
+      <span slot-footer>Footer text</span>
     </wcc-card>
+
+    <!-- Scoped slots -->
+    <wcc-list wccSlots>
+      <ng-template slot="item" let-item let-index="index">
+        <li>{{ index }}: {{ item }}</li>
+      </ng-template>
+    </wcc-list>
   `
 })
+export class AppComponent {
+  count = 0
+  onCount(value: number) { this.count = value }
+}
 ```
 
-### Vanilla
+Angular needs no plugin for props, events, or two-way binding — only `CUSTOM_ELEMENTS_SCHEMA`. The directive is only needed for named slots (with `slot-name` syntax) and scoped slots.
+
+### React 19 (with `wccReactPlugin`)
+
+```js
+// vite.config.js
+import { wccReactPlugin } from '@sprlab/wccompiler/integrations/react'
+import react from '@vitejs/plugin-react'
+export default defineConfig({ plugins: [wccReactPlugin({ prefix: 'wcc-' }), react()] })
+```
+
+```jsx
+import { useState } from 'react'
+import { WccCard, WccList } from './dist/wcc-react'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      {/* Props */}
+      <wcc-counter count={count} label="Clicks"></wcc-counter>
+
+      {/* Events */}
+      <wcc-counter oncountchanged={(e) => setCount(e.detail)}></wcc-counter>
+
+      {/* Default slot */}
+      <WccCard>
+        <p>Body content</p>
+      </WccCard>
+
+      {/* Named slots (compound pattern) */}
+      <WccCard>
+        <WccCard.Header><strong>Title</strong></WccCard.Header>
+        <p>Body</p>
+        <WccCard.Footer>Footer text</WccCard.Footer>
+      </WccCard>
+
+      {/* Named slots (props pattern) */}
+      <wcc-card header={<strong>Title</strong>} footer="Footer text">
+        <p>Body</p>
+      </wcc-card>
+
+      {/* Scoped slots (compound pattern) */}
+      <WccList>
+        <WccList.Item>{(item, index) => <li>{index}: {item}</li>}</WccList.Item>
+      </WccList>
+
+      {/* Scoped slots (render prop pattern) */}
+      <wcc-list renderItem={(item, index) => <li>{index}: {item}</li>} />
+    </>
+  )
+}
+```
+
+The plugin transforms PascalCase tags, compound components, props-as-slots, and render props at build time. Import stubs from `./dist/wcc-react` (auto-generated by `wcc build`).
+
+### Vanilla (no framework)
 
 No configuration needed:
 
 ```html
 <script type="module" src="dist/wcc-counter.js"></script>
-<wcc-counter></wcc-counter>
+<script type="module" src="dist/wcc-card.js"></script>
+<script type="module" src="dist/wcc-list.js"></script>
+
+<!-- Props (attributes) -->
+<wcc-counter count="0" label="Clicks"></wcc-counter>
+
+<!-- Events -->
+<script>
+  document.querySelector('wcc-counter')
+    .addEventListener('count-changed', (e) => console.log(e.detail))
+</script>
+
+<!-- Default slot -->
+<wcc-card>
+  <p>Body content</p>
+</wcc-card>
+
+<!-- Named slots -->
+<wcc-card>
+  <strong slot="header">Title</strong>
+  <p>Body</p>
+  <span slot="footer">Footer text</span>
+</wcc-card>
+
+<!-- Scoped slots -->
+<wcc-list>
+  <template #item="{ item, index }">
+    <li>{{index}}: {{item}}</li>
+  </template>
+</wcc-list>
 ```
 
 ## Editor Support

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,11 +76,11 @@ 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)
+      // → :propName="expr" @wcc:model="$event.detail.prop === 'propName' && (expr = value)"
+      //   with modifiers applied to the extracted value:
+      //   .trim   → value.trim()  (for string values)
+      //   .number → Number(value)
+      //   .lazy   → no-op for custom elements
       // Run in a loop to handle multiple v-model on the same element
       let prev = ''
       while (prev !== result) {
@@ -91,7 +89,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 +99,14 @@ 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}"`
+            return `${prefix}:${prop}="${expr}" @wcc:model="$event.detail.prop === '${prop}' && (${expr} = ${value})"`
           }
         )
       }
 
       // 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" @wcc:model="$event.detail.prop === 'modelValue' && (expr = value)"
       prev = ''
       while (prev !== result) {
         prev = result
@@ -116,7 +114,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,7 +122,7 @@ export function wccVuePlugin(options = {}) {
                 value = `Number(${value})`
               }
             }
-            return `${prefix}:model-value="${expr}" @model-value-changed="${expr} = ${value}"`
+            return `${prefix}:model-value="${expr}" @wcc:model="$event.detail.prop === 'modelValue' && (${expr} = ${value})"`
           }
         )
       }

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.11",
+  "version": "0.11.0",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {