@sprlab/wccompiler 0.10.3 → 0.10.5

package/integrations/vue.js

@@ -1,37 +1,39 @@
 /**
  * Vue Vite plugin for WCC custom elements.
- * Configures isCustomElement and enables v-model:propName on custom elements.
+ * Configures isCustomElement and provides enhanced DX for v-model modifiers and scoped slots.
  *
  * @module @sprlab/wccompiler/integrations/vue
  *
- * IMPORTANT: This file is for vite.config.js (Node.js context).
- * For browser-side, use app.use(wccVue) from '@sprlab/wccompiler/adapters/vue'.
+ * IMPORTANT: This plugin is OPTIONAL for basic usage.
+ * WCC components work in Vue with zero WCC-specific config:
+ *   - Props: <wcc-counter :count="val"></wcc-counter>
+ *   - Events: <wcc-counter @count-changed="handler($event.detail)"></wcc-counter>
+ *   - v-model: <wcc-counter v-model:count="val"></wcc-counter> (Vue 3.4+ CE support)
+ *   - Named slots: <div slot="header">...</div>
  *
- * @example vite.config.js
+ * The only Vue-specific config needed (same as Lit, Shoelace, FAST):
+ *   vue({ template: { compilerOptions: { isCustomElement: tag => tag.includes('-') } } })
+ *
+ * This plugin adds:
+ *   1. isCustomElement config (so you don't need to write it manually)
+ *   2. v-model modifier support (.trim, .number, .lazy)
+ *   3. Scoped slot syntax: <template #item="{ name }">{{name}}</template>
+ *
+ * @example vite.config.js (with plugin — full DX)
  * ```js
  * import { wccVuePlugin } from '@sprlab/wccompiler/integrations/vue'
  * export default { plugins: [wccVuePlugin()] }
  * ```
  *
- * @example main.js (optional — only needed if NOT using wccVuePlugin)
+ * @example vite.config.js (without plugin — still works for basic usage)
  * ```js
- * import { wccVue } from '@sprlab/wccompiler/adapters/vue'
- * app.use(wccVue)
- * ```
- *
- * With wccVuePlugin(), v-model:propName works natively on WCC custom elements:
- * ```vue
- * <wcc-input v-model="text"></wcc-input>
- * <wcc-form v-model:count="countRef" v-model:title="titleRef"></wcc-form>
+ * import vue from '@vitejs/plugin-vue'
+ * export default {
+ *   plugins: [vue({
+ *     template: { compilerOptions: { isCustomElement: tag => tag.includes('-') } }
+ *   })]
+ * }
  * ```
- *
- * How it works:
- * The plugin runs BEFORE @vitejs/plugin-vue and rewrites the template string:
- *   v-model:count="expr"  →  :count="expr" @count-changed="expr = $event.detail"
- *   v-model="expr"        →  :model-value="expr" @model-value-changed="expr = $event.detail"
- *
- * The WCC component emits `propName-changed` CustomEvent with detail=value on internal writes.
- * Vue compiles @propName-changed as a normal event listener (not filtered like update:*).
  */
 
 import vue from '@vitejs/plugin-vue'
@@ -63,6 +65,17 @@ 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".
+      //
+      // 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)
       // Also handles modifiers: v-model:propName.trim.number="expr"
       // → :propName="expr" @propName-changed="expr = $event.detail"

package/lib/codegen.js

@@ -1773,9 +1773,25 @@ 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'))
   if (emits.length > 0) {
     lines.push('  _emit(name, detail) {');
-    lines.push('    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));');
+    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('  }');
     lines.push('');
   }
@@ -1783,10 +1799,17 @@ 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 — for Vue v-model (Vue doesn't filter this name)
-  //   3. propNameChange — for Angular [(prop)] banana-box syntax
+  //   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.
   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);`);
@@ -1795,9 +1818,13 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
-    // Vue: propName-changed (not filtered by Vue's isModelListener)
+    // Kebab-case: prop-name-changed (Vue plugin, addEventListener)
     lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
-    // Angular: propNameChange (Angular's [(prop)] listens for propChange)
+    // 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.3",
+  "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": {