@sprlab/wccompiler 0.10.3 → 0.10.4

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,13 @@ 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
+      //   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,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 — 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
+  //   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+)
   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,10 +1815,16 @@ 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
     lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
-    // Angular: propNameChange (Angular's [(prop)] listens for propChange)
+    // camelCase: propNameChanged
+    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.3",
+  "version": "0.10.4",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {