@sprlab/wccompiler 0.7.3 → 0.8.1

package/lib/codegen.js

@@ -15,6 +15,7 @@
 
 import { reactiveRuntime } from './reactive-runtime.js';
 import { scopeCSS } from './css-scoper.js';
+import { camelToKebab } from './parser-extractors.js';
 
 /** @import { ParseResult } from './types.js' */
 
@@ -75,7 +76,7 @@ function slotPropRef(source, signalNames, computedNames, propNames) {
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @returns {string}
  */
-export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = []) {
+export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = [], modelVarMap = new Map()) {
   let result = expr;
 
   // Transform emit calls: emitsObjectName( → this._emit(
@@ -111,6 +112,18 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
     result = result.replace(bareRe, `this._s_${propName}()`);
   }
 
+  // Transform model signal reads: varName() → this._m_{propName}() (BEFORE regular signals)
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    // First: transform varName() calls → this._m_propName()
+    const callRe = new RegExp(`\\b${varName}\\(\\)`, 'g');
+    result = result.replace(callRe, `this._m_${propNameVal}()`);
+    // Then: transform bare varName references (not followed by ( or .set()) → this._m_propName()
+    const bareRe = new RegExp(`\\b(${varName})\\b(?!\\.set\\()(?!\\()`, 'g');
+    result = result.replace(bareRe, `this._m_${propNameVal}()`);
+  }
+
   // Transform computed names first (to avoid partial matches with signals)
   for (const name of computedNames) {
     // Skip propsObjectName and emitsObjectName
@@ -153,7 +166,9 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
  *
  * - `emitsObjectName(` → `this._emit(` (emit call)
  * - `props.x` → `this._s_x()` (prop access)
+ * - `varName.set(value)` → `this._modelSet_{propName}(value)` (model signal write)
  * - `x.set(value)` → `this._x(value)` (signal write via setter)
+ * - `varName()` → `this._m_{propName}()` (model signal read)
  * - `x()` → `this._x()` (signal read)
  * - Computed `x()` → `this._c_x()` (computed read)
  *
@@ -164,9 +179,11 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
  * @param {Set<string>} [propNames] — Set of prop names
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @param {string[]} [refVarNames] — Ref variable names from templateRef declarations
+ * @param {string[]} [constantNames] — Constant variable names
+ * @param {Map<string,string>} [modelVarMap] — Map from model varName → propName
  * @returns {string}
  */
-export function transformMethodBody(body, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, refVarNames = [], constantNames = []) {
+export function transformMethodBody(body, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, refVarNames = [], constantNames = [], modelVarMap = new Map()) {
   let result = body;
 
   // 0a. Transform emit calls: emitsObjectName( → this._emit(
@@ -192,6 +209,15 @@ export function transformMethodBody(body, signalNames, computedNames, propsObjec
     result = result.replace(refRe, `this._${name}.value`);
   }
 
+  // 0d. Transform model signal writes: varName.set(expr) → this._modelSet_{propName}(expr)
+  // Must run BEFORE regular signal .set() transforms
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    const setRe = new RegExp(`\\b${varName}\\.set\\(`, 'g');
+    result = result.replace(setRe, `this._modelSet_${propNameVal}(`);
+  }
+
   // 1. Transform signal writes: x.set(value) → this._x(value)
   for (const name of signalNames) {
     if (propsObjectName && name === propsObjectName) continue;
@@ -200,6 +226,15 @@ export function transformMethodBody(body, signalNames, computedNames, propsObjec
     result = result.replace(setRe, `this._${name}(`);
   }
 
+  // 1b. Transform model signal reads: varName() → this._m_{propName}()
+  // Must run BEFORE regular signal read transforms
+  for (const [varName, propNameVal] of modelVarMap) {
+    if (propsObjectName && varName === propsObjectName) continue;
+    if (emitsObjectName && varName === emitsObjectName) continue;
+    const readRe = new RegExp(`\\b${varName}\\(\\)`, 'g');
+    result = result.replace(readRe, `this._m_${propNameVal}()`);
+  }
+
   // 2. Transform computed reads: x() → this._c_x()
   for (const name of computedNames) {
     if (propsObjectName && name === propsObjectName) continue;
@@ -327,22 +362,23 @@ export function isStaticForExpr(expr, itemVar, indexVar, propsSet, rootVarNames,
  * @param {Set<string>} propNames
  * @param {string|null} emitsObjectName
  * @param {string[]} constantNames
+ * @param {Map<string,string>} [modelVarMap] — Map from model varName → propName
  * @returns {string}
  */
-export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames) {
+export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap = new Map()) {
   if (handler.includes('=>')) {
     // Arrow function expression: (e) => removeItem(item)
     const arrowIdx = handler.indexOf('=>');
     const params = handler.slice(0, arrowIdx).trim();
     let body = handler.slice(arrowIdx + 2).trim();
-    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames);
+    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames, modelVarMap);
     return `${params} => { ${body}; }`;
   } else if (handler.includes('(')) {
     // Function call expression: removeItem(item)
     const parenIdx = handler.indexOf('(');
     const fnName = handler.slice(0, parenIdx).trim();
     const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
-    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames) : '';
+    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap) : '';
     return `(e) => { this._${fnName}(${transformedArgs}); }`;
   } else {
     // Simple method name
@@ -829,6 +865,7 @@ export function generateComponent(parseResult, options = {}) {
     onMountHooks = [],
     onDestroyHooks = [],
     modelBindings = [],
+    modelPropBindings = [],
     attrBindings = [],
     slots = [],
     constantVars = [],
@@ -838,6 +875,7 @@ export function generateComponent(parseResult, options = {}) {
     childComponents = [],
     childImports = [],
     exposeNames = [],
+    modelDefs = [],
   } = parseResult;
 
   const signalNames = signals.map(s => s.name);
@@ -847,6 +885,12 @@ export function generateComponent(parseResult, options = {}) {
   const refVarNames = refs.map(r => r.varName);
   const propNames = new Set(propDefs.map(p => p.name));
 
+  // Build model var name → prop name map for transform functions
+  const modelVarMap = new Map();
+  for (const md of modelDefs) {
+    modelVarMap.set(md.varName, md.name);
+  }
+
   const lines = [];
 
   // ── 0. Source comment ──
@@ -859,7 +903,7 @@ export function generateComponent(parseResult, options = {}) {
     // Tree-shake: only import what this component actually uses
     const usedRuntime = new Set(['__signal']); // always need __signal
     if (computeds.length > 0) usedRuntime.add('__computed');
-    if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
+    if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || modelPropBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
     if (watchers.length > 0) usedRuntime.add('__untrack');
     const imports = [...usedRuntime].join(', ');
     lines.push(`import { ${imports} } from '${options.runtimeImportPath}';`);
@@ -897,10 +941,13 @@ export function generateComponent(parseResult, options = {}) {
   // ── 4. HTMLElement class ──
   lines.push(`class ${className} extends HTMLElement {`);
 
-  // Static observedAttributes (if props exist)
-  if (propDefs.length > 0) {
-    const attrNames = propDefs.map(p => `'${p.attrName}'`).join(', ');
-    lines.push(`  static get observedAttributes() { return [${attrNames}]; }`);
+  // Static observedAttributes (if props or model props exist)
+  const modelAttrNames = modelDefs.map(md => camelToKebab(md.name));
+  if (propDefs.length > 0 || modelDefs.length > 0) {
+    const propAttrNames = propDefs.map(p => `'${p.attrName}'`);
+    const modelAttrEntries = modelAttrNames.map(a => `'${a}'`);
+    const allAttrNames = [...propAttrNames, ...modelAttrEntries].join(', ');
+    lines.push(`  static get observedAttributes() { return [${allAttrNames}]; }`);
     lines.push('');
   }
 
@@ -918,6 +965,11 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`    this._${s.name} = __signal(${s.value});`);
   }
 
+  // Model signal initialization
+  for (const md of modelDefs) {
+    lines.push(`    this._m_${md.name} = __signal(${md.default});`);
+  }
+
   // Constant initialization
   for (const c of constantVars) {
     lines.push(`    this._const_${c.name} = ${c.value};`);
@@ -925,7 +977,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Computed initialization
   for (const c of computeds) {
-    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
 
@@ -1005,6 +1057,11 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`    this.${mb.varName} = ${pathExpr(mb.path, '__root')};`);
   }
 
+  // Assign DOM refs for model:propName bindings
+  for (const mpb of modelPropBindings) {
+    lines.push(`    this.${mpb.varName} = ${pathExpr(mpb.path, '__root')};`);
+  }
+
   // Assign DOM refs for slot placeholders
   for (const s of slots) {
     lines.push(`    this.${s.varName} = ${pathExpr(s.path, '__root')};`);
@@ -1107,7 +1164,7 @@ export function generateComponent(parseResult, options = {}) {
         ref = `this._s_${propName}()`;
       } else {
         // Use transformExpr for complex expressions (e.g. items().length, ternary)
-        ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
       }
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = ${ref} ?? '';`);
@@ -1158,7 +1215,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // User effects
   for (const eff of effects) {
-    const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     lines.push('    this.__disposers.push(__effect(() => {');
     // Indent each line of the body
     const bodyLines = body.split('\n');
@@ -1171,7 +1228,7 @@ export function generateComponent(parseResult, options = {}) {
   // Watcher effects
   for (let idx = 0; idx < watchers.length; idx++) {
     const w = watchers[idx];
-    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
 
     if (w.kind === 'signal') {
       // Determine the signal reference for the watch target
@@ -1200,7 +1257,7 @@ export function generateComponent(parseResult, options = {}) {
       lines.push('    }));');
     } else {
       // kind === 'getter' — transform the getter expression and use it directly
-      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
       const prevName = `__prev_watch${idx}`;
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${getterExpr};`);
@@ -1222,13 +1279,13 @@ export function generateComponent(parseResult, options = {}) {
 
   // Event listeners (with AbortController signal for cleanup)
   for (const e of events) {
-    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap);
     lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr}, { signal: this.__ac.signal });`);
   }
 
   // Show effects — one __effect per ShowBinding
   for (const sb of showBindings) {
-    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     lines.push('    this.__disposers.push(__effect(() => {');
     lines.push(`      this.${sb.varName}.style.display = (${expr}) ? '' : 'none';`);
     lines.push('    }));');
@@ -1268,9 +1325,35 @@ export function generateComponent(parseResult, options = {}) {
     }
   }
 
+  // model:propName effects and listeners — bidirectional WCC-to-WCC binding
+  for (const mpb of modelPropBindings) {
+    // Determine the signal read/write expressions
+    // If the signal is a model var, use this._m_propName(); otherwise use this._signalName()
+    const isModelVar = modelVarMap.has(mpb.signal);
+    const readExpr = isModelVar
+      ? `this._m_${modelVarMap.get(mpb.signal)}()`
+      : `this._${mpb.signal}()`;
+    const writeExpr = isModelVar
+      ? `this._m_${modelVarMap.get(mpb.signal)}`
+      : `this._${mpb.signal}`;
+
+    // Reactive parent → child sync: set child's attribute from parent signal
+    const attrName = camelToKebab(mpb.propName);
+    lines.push('    this.__disposers.push(__effect(() => {');
+    lines.push(`      this.${mpb.varName}.setAttribute('${attrName}', ${readExpr} ?? '');`);
+    lines.push('    }));');
+
+    // Child → parent sync: listen for wcc:model on child, update parent signal
+    lines.push(`    this.${mpb.varName}.addEventListener('wcc:model', (e) => {`);
+    lines.push(`      if (e.detail.prop === '${mpb.propName}') {`);
+    lines.push(`        ${writeExpr}(e.detail.value);`);
+    lines.push('      }');
+    lines.push('    }, { signal: this.__ac.signal });');
+  }
+
   // Attr binding effects — one __effect per AttrBinding
   for (const ab of attrBindings) {
-    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
     if (ab.kind === 'attr') {
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const __v = ${expr};`);
@@ -1322,10 +1405,10 @@ export function generateComponent(parseResult, options = {}) {
     for (let i = 0; i < ifBlock.branches.length; i++) {
       const branch = ifBlock.branches[i];
       if (branch.type === 'if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      if (${expr}) { __branch = ${i}; }`);
       } else if (branch.type === 'else-if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      else if (${expr}) { __branch = ${i}; }`);
       } else {
         // else
@@ -1435,7 +1518,7 @@ export function generateComponent(parseResult, options = {}) {
 
   // Lifecycle: onMount hooks (at the very end of connectedCallback)
   for (const hook of onMountHooks) {
-    const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     if (hook.async) {
       lines.push('    ;(async () => {');
       const bodyLines = body.split('\n');
@@ -1463,7 +1546,7 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('    this.__disposers.forEach(d => d());');
   if (onDestroyHooks.length > 0) {
     for (const hook of onDestroyHooks) {
-      const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
       if (hook.async) {
         lines.push('    ;(async () => {');
         const bodyLines = body.split('\n');
@@ -1484,8 +1567,8 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('  }');
   lines.push('');
 
-  // attributeChangedCallback (if props exist)
-  if (propDefs.length > 0) {
+  // attributeChangedCallback (if props or model props exist)
+  if (propDefs.length > 0 || modelDefs.length > 0) {
     lines.push('  attributeChangedCallback(name, oldVal, newVal) {');
     for (const p of propDefs) {
       const defaultVal = p.default;
@@ -1507,6 +1590,31 @@ export function generateComponent(parseResult, options = {}) {
 
       lines.push(`    if (name === '${p.attrName}') ${updateExpr};`);
     }
+
+    // Model props — update signal directly (NO event emission)
+    for (let i = 0; i < modelDefs.length; i++) {
+      const md = modelDefs[i];
+      const attrName = modelAttrNames[i];
+      const defaultVal = md.default;
+      let updateExpr;
+
+      if (defaultVal === 'true' || defaultVal === 'false') {
+        // Boolean coercion: attribute presence = true
+        updateExpr = `this._m_${md.name}(newVal != null)`;
+      } else if (/^-?\d+(\.\d+)?$/.test(defaultVal)) {
+        // Number coercion
+        updateExpr = `this._m_${md.name}(newVal != null ? Number(newVal) : ${defaultVal})`;
+      } else if (defaultVal === 'undefined') {
+        // Undefined default — pass through
+        updateExpr = `this._m_${md.name}(newVal)`;
+      } else {
+        // String default — use nullish coalescing
+        updateExpr = `this._m_${md.name}(newVal ?? ${defaultVal})`;
+      }
+
+      lines.push(`    if (name === '${attrName}') ${updateExpr};`);
+    }
+
     lines.push('  }');
     lines.push('');
 
@@ -1516,6 +1624,15 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`  set ${p.name}(val) { this._s_${p.name}(val); this.setAttribute('${p.attrName}', String(val)); }`);
       lines.push('');
     }
+
+    // Public getters and setters for model props
+    for (let i = 0; i < modelDefs.length; i++) {
+      const md = modelDefs[i];
+      const attrName = modelAttrNames[i];
+      lines.push(`  get ${md.name}() { return this._m_${md.name}(); }`);
+      lines.push(`  set ${md.name}(val) { this._m_${md.name}(val); this.setAttribute('${attrName}', String(val)); }`);
+      lines.push('');
+    }
   }
 
   // _emit method (if emits declared)
@@ -1526,9 +1643,23 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
+  // _modelSet methods (one per defineModel prop — emits wcc:model on internal write)
+  for (const md of modelDefs) {
+    lines.push(`  _modelSet_${md.name}(newVal) {`);
+    lines.push(`    const oldVal = this._m_${md.name}();`);
+    lines.push(`    this._m_${md.name}(newVal);`);
+    lines.push(`    this.dispatchEvent(new CustomEvent('wcc:model', {`);
+    lines.push(`      detail: { prop: '${md.name}', value: newVal, oldValue: oldVal },`);
+    lines.push(`      bubbles: true,`);
+    lines.push(`      composed: true`);
+    lines.push(`    }));`);
+    lines.push('  }');
+    lines.push('');
+  }
+
   // User methods (prefixed with _)
   for (const m of methods) {
-    const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    const body = transformMethodBody(m.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames, modelVarMap);
     lines.push(`  _${m.name}(${m.params}) {`);
     const bodyLines = body.split('\n');
     for (const line of bodyLines) {
@@ -1604,7 +1735,7 @@ export function generateComponent(parseResult, options = {}) {
             const propName = b.name.slice(propsObjectName.length + 1);
             ref = `this._s_${propName}()`;
           } else {
-            ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+            ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
           }
           lines.push(`      __effect(() => { ${b.varName}.textContent = ${ref} ?? ''; });`);
         }
@@ -1612,21 +1743,21 @@ export function generateComponent(parseResult, options = {}) {
 
       // Events: generate addEventListener
       for (const e of branch.events) {
-        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, modelVarMap);
         lines.push(`      const ${e.varName} = ${pathExpr(e.path, 'node')};`);
         lines.push(`      ${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
       }
 
       // Show bindings: generate effects
       for (const sb of branch.showBindings) {
-        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      const ${sb.varName} = ${pathExpr(sb.path, 'node')};`);
         lines.push(`      __effect(() => { ${sb.varName}.style.display = (${expr}) ? '' : 'none'; });`);
       }
 
       // Attr bindings: generate effects
       for (const ab of branch.attrBindings) {
-        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
+        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames, modelVarMap);
         lines.push(`      const ${ab.varName} = ${pathExpr(ab.path, 'node')};`);
         lines.push(`      __effect(() => {`);
         lines.push(`        const __val = ${expr};`);

package/lib/compiler-browser.js

@@ -69,10 +69,11 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   const events = [];
   const showBindings = [];
   const modelBindings = [];
+  const modelPropBindings = [];
   const attrBindings = [];
   const slots = [];
   const childComponents = [];
-  let bindIdx = 0, eventIdx = 0, showIdx = 0, modelIdx = 0, attrIdx = 0, slotIdx = 0, childIdx = 0;
+  let bindIdx = 0, eventIdx = 0, showIdx = 0, modelIdx = 0, modelPropIdx = 0, attrIdx = 0, slotIdx = 0, childIdx = 0;
 
   function bindingType(name) {
     if (propNames.has(name)) return 'prop';
@@ -105,7 +106,7 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
       if (tagLower.includes('-') && tagLower !== rootEl.tagName?.toLowerCase()) {
         const propBindings = [];
         for (const attr of Array.from(el.attributes)) {
-          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:')) continue;
+          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:') || attr.name.startsWith('model:')) continue;
           if (['show', 'model', 'if', 'else-if', 'else', 'each', 'ref'].includes(attr.name)) continue;
           const interpMatch = attr.value.match(/^\{\{([\w.]+)\}\}$/);
           if (interpMatch) {
@@ -158,6 +159,24 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
         modelBindings.push({ varName: `__model${modelIdx++}`, signal: signalName, prop, event, coerce, radioValue, path: [...pathParts] });
         el.removeAttribute('model');
       }
+
+      // Detect model:propName="signalName" attributes (for custom element binding)
+      const modelPropAttrsToRemove = [];
+      for (const attr of Array.from(el.attributes)) {
+        if (attr.name.startsWith('model:')) {
+          const propName = attr.name.slice(6);
+          const signal = attr.value;
+          const tag = el.tagName.toLowerCase();
+          if (!tag.includes('-')) {
+            const error = new Error(`model:propName is only valid on custom elements (tag must contain a hyphen)`);
+            error.code = 'MODEL_PROP_INVALID_TARGET';
+            throw error;
+          }
+          modelPropBindings.push({ varName: `__modelProp${modelPropIdx++}`, propName, signal, path: [...pathParts] });
+          modelPropAttrsToRemove.push(attr.name);
+        }
+      }
+      modelPropAttrsToRemove.forEach(a => el.removeAttribute(a));
     }
 
     if (node.nodeType === 3 && /\{\{[\w.]+\}\}/.test(node.textContent)) {
@@ -201,7 +220,7 @@ function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   }
 
   walk(rootEl, []);
-  return { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents };
+  return { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents };
 }
 
 function recomputeAnchorPath(rootEl, targetNode) {
@@ -486,7 +505,7 @@ export async function compileFromStrings({ script, template, style = '', tag, la
   for (const ib of ifBlocks) ib.anchorPath = recomputeAnchorPath(rootEl, ib._anchorNode);
 
   // 11. Walk tree
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNameSet, computedNameSet, propNameSet);
+  const { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNameSet, computedNameSet, propNameSet);
 
   // 12. Detect refs
   const refBindings = detectRefs(rootEl);

package/lib/compiler.js

@@ -33,6 +33,7 @@ import {
   extractRefs,
   extractConstants,
   extractExpose,
+  extractModels,
   validatePropsAssignment,
   validateDuplicateProps,
   validatePropsConflicts,
@@ -158,6 +159,7 @@ async function compileSFC(filePath, config) {
   const refs = extractRefs(sourceForExtraction);
   const constantVars = extractConstants(sourceForExtraction);
   const exposeNames = extractExpose(source);
+  const modelDefs = extractModels(sourceForExtraction);
 
   // 9. Extract props (array form — after type strip, if generic didn't find any)
   const propsFromArray = propsFromGeneric.length > 0 ? [] : extractPropsArray(source);
@@ -197,6 +199,58 @@ async function compileSFC(filePath, config) {
   validateEmitsConflicts(emitsObjectName, signalNameSet, computedNameSet, constantNameSet, propNameSet, propsObjectName, filePath);
   validateUndeclaredEmits(source, emitsObjectName, emitNames, filePath);
 
+  // 14b. Validate defineModel declarations
+  // MODEL_NO_ASSIGNMENT: detect bare defineModel() calls not assigned to a variable
+  const bareModelRe = /\bdefineModel\s*\(/g;
+  const assignedModelRe = /(?:const|let|var)\s+\w+\s*=\s*defineModel\s*\(/g;
+  const bareModelCount = (sourceForExtraction.match(bareModelRe) || []).length;
+  const assignedModelCount = (sourceForExtraction.match(assignedModelRe) || []).length;
+  if (bareModelCount > assignedModelCount) {
+    const error = new Error(`defineModel() must be assigned to a variable`);
+    /** @ts-expect-error — custom error code */
+    error.code = 'MODEL_NO_ASSIGNMENT';
+    throw error;
+  }
+
+  // MODEL_MISSING_NAME: check each extracted model has a name property
+  for (const md of modelDefs) {
+    if (!md.name) {
+      const error = new Error(`defineModel() requires a 'name' property in the options object`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_MISSING_NAME';
+      throw error;
+    }
+  }
+
+  // MODEL_NAME_CONFLICT: check model prop names against signals, computeds, constants, and props
+  for (const md of modelDefs) {
+    if (!md.name) continue;
+    if (signalNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing signal '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (computedNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing computed '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (constantNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing constant '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+    if (propNameSet.has(md.name)) {
+      const error = new Error(`defineModel prop '${md.name}' conflicts with existing prop '${md.name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_NAME_CONFLICT';
+      throw error;
+    }
+  }
+
   // 15. Build initial ParseResult
   /** @type {import('./types.js').ParseResult} */
   const parseResult = {
@@ -223,6 +277,7 @@ async function compileSFC(filePath, config) {
     onMountHooks,
     onDestroyHooks,
     modelBindings: [],
+    modelPropBindings: [],
     attrBindings: [],
     slots: [],
     refs,
@@ -230,6 +285,7 @@ async function compileSFC(filePath, config) {
     childComponents: [],
     childImports: [],
     exposeNames,
+    modelDefs,
   };
 
   // 16. Process template through linkedom → tree-walker → codegen
@@ -237,6 +293,10 @@ async function compileSFC(filePath, config) {
   const rootEl = document.getElementById('__root');
 
   const signalNames = new Set(signals.map(s => s.name));
+  // Add model var names so they are recognized as writable signals in tree-walker
+  for (const md of modelDefs) {
+    signalNames.add(md.varName);
+  }
   const computedNames = new Set(computeds.map(c => c.name));
   const propNamesSet = new Set(propDefs.map(p => p.name));
 
@@ -252,7 +312,7 @@ async function compileSFC(filePath, config) {
     ib.anchorPath = recomputeAnchorPath(rootEl, ib._anchorNode);
   }
 
-  const { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNamesSet);
+  const { bindings, events, showBindings, modelBindings, modelPropBindings, attrBindings, slots, childComponents } = walkTree(rootEl, signalNames, computedNames, propNamesSet);
 
   const refBindings = detectRefs(rootEl);
 
@@ -300,6 +360,38 @@ async function compileSFC(filePath, config) {
     }
   }
 
+  // 17c. Validate model:propName bindings
+  for (const mpb of modelPropBindings) {
+    const name = mpb.signal;
+    // Check if the referenced variable exists at all
+    const isKnown = signalNames.has(name) || computedNames.has(name) || propNamesSet.has(name) || constantNamesForModel.has(name);
+    if (!isKnown) {
+      const error = new Error(`model:propName references undeclared variable '${name}'`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_UNKNOWN_VAR';
+      throw error;
+    }
+    // Check if the referenced variable is read-only
+    if (propNamesSet.has(name)) {
+      const error = new Error(`model:propName cannot bind to prop '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+    if (computedNames.has(name)) {
+      const error = new Error(`model:propName cannot bind to computed '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+    if (constantNamesForModel.has(name)) {
+      const error = new Error(`model:propName cannot bind to constant '${name}' (read-only)`);
+      /** @ts-expect-error — custom error code */
+      error.code = 'MODEL_PROP_READONLY';
+      throw error;
+    }
+  }
+
   // 18. Resolve child component imports (from main template + if branches + each blocks)
   /** @type {import('./types.js').ChildComponentImport[]} */
   const childImports = [];
@@ -339,6 +431,7 @@ async function compileSFC(filePath, config) {
   parseResult.events = events;
   parseResult.showBindings = showBindings;
   parseResult.modelBindings = modelBindings;
+  parseResult.modelPropBindings = modelPropBindings;
   parseResult.attrBindings = attrBindings;
   parseResult.ifBlocks = ifBlocks;
   parseResult.forBlocks = forBlocks;