@sprlab/wccompiler 0.16.4 → 0.16.6

package/lib/codegen.js

@@ -1596,8 +1596,9 @@ export function generateComponent(parseResult, options = {}) {
         lines.push('    }));');
       } else {
         // String expression: set className
+        // Wrap ternary/logical expressions to prevent precedence issues
         lines.push('    this.__disposers.push(__effect(() => {');
-        lines.push(`      this.${ab.varName}.className = ${expr};`);
+        lines.push(`      this.${ab.varName}.className = ${wrapTernaryExpr(expr)};`);
         lines.push('    }));');
       }
     } else if (ab.kind === 'style') {
@@ -1939,8 +1940,10 @@ export function generateComponent(parseResult, options = {}) {
   // _modelSet methods (one per defineModel prop — emits events on internal write)
   // Emits:
   //   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)
+  //   2. propName-changed — kebab-case for Web Components standard and parent listeners
   for (const md of modelDefs) {
+    // Convert camelCase to kebab-case for event name (e.g., userName → user-name-changed)
+    const eventName = md.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() + '-changed';
     lines.push(`  _modelSet_${md.name}(newVal) {`);
     lines.push(`    const oldVal = this._m_${md.name}();`);
     lines.push(`    this._m_${md.name}(newVal);`);
@@ -1949,11 +1952,29 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
-    lines.push(`    this.dispatchEvent(new CustomEvent('${md.name}Change', { detail: newVal, bubbles: true }));`);
+    lines.push(`    this.dispatchEvent(new CustomEvent('${eventName}', { detail: newVal, bubbles: true }));`);
     lines.push('  }');
     lines.push('');
   }
 
+  // Wrapper methods for defineModel signals (dual getter/setter)
+  // These act as the interface between template code and internal signals
+  // - As getter (no args): returns signal value
+  // - As setter (with arg): calls _modelSet_* to update and dispatch events
+  if (modelDefs.length > 0) {
+    lines.push('  // --- Model wrapper methods ---');
+    for (const md of modelDefs) {
+      lines.push(`  _${md.name}(val) {`);
+      lines.push(`    if (arguments.length === 0) {`);
+      lines.push(`      return this._m_${md.name}();`);
+      lines.push(`    } else {`);
+      lines.push(`      this._modelSet_${md.name}(val);`);
+      lines.push(`    }`);
+      lines.push(`  }`);
+      lines.push('');
+    }
+  }
+
   // __scopedSlots instance getter and registerSlotRenderer (if scoped slots exist)
   if (scopedSlotNames.length > 0) {
     lines.push('  get __scopedSlots() { return this.constructor.__scopedSlots || []; }');

package/package.json

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