@sprlab/wccompiler 0.10.4 → 0.10.5

package/integrations/vue.js

@@ -65,11 +65,15 @@ export function wccVuePlugin(options = {}) {
 
       let result = code
 
-      // NOTE: As of WCC 0.10.3+, v-model:propName works WITHOUT this plugin
-      // because the compiled component emits 'update:propName' natively (Vue 3.4+ CE support).
-      // This transform is still useful for:
-      //   1. v-model modifiers (.trim, .number) — Vue doesn't apply modifiers to CE v-model natively
-      //   2. Older Vue versions (< 3.4) that don't support v-model on CE via update:propName
+      // 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".
+      //
+      // This plugin is needed for:
+      //   1. v-model:propName (Vue can't unwrap CustomEvent.detail natively)
+      //   2. v-model modifiers (.trim, .number)
       //   3. Scoped slot syntax transformation ({{prop}} → {%prop%})
 
       // Transform v-model:propName="expr" on custom elements (tags with hyphens)

package/lib/codegen.js

@@ -1799,11 +1799,14 @@ export function generateComponent(parseResult, options = {}) {
   // _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
+  //   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
-  //   6. update:propName — for Vue v-model:propName on custom elements (Vue 3.4+)
+  //
+  // 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.
   for (const md of modelDefs) {
     const kebabName = camelToKebab(md.name);
     const camelChanged = `${md.name}Changed`;
@@ -1815,16 +1818,14 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
-    // Kebab-case: prop-name-changed
+    // Kebab-case: prop-name-changed (Vue plugin, addEventListener)
     lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
-    // camelCase: propNameChanged
+    // 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 }));`);
-    // Vue v-model: update:propName
-    lines.push(`    this.dispatchEvent(new CustomEvent('update:${md.name}', { detail: newVal, bubbles: true }));`);
     lines.push('  }');
     lines.push('');
   }

package/package.json

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