@sprlab/wccompiler 0.7.3 → 0.8.1

package/lib/parser-extractors.js

@@ -596,7 +596,7 @@ export function extractSignals(source) {
 /**
  * Known macro/reactive call patterns that should NOT be treated as constants.
  */
-export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineComponent|templateRef|defineExpose|onMount|onDestroy)\s*[<(]/;
+export const REACTIVE_CALLS = /\b(?:signal|computed|effect|watch|defineProps|defineEmits|defineModel|defineComponent|templateRef|defineExpose|onMount|onDestroy)\s*[<(]/;
 
 /**
  * Extract plain const/let/var declarations that are NOT reactive calls.
@@ -1028,6 +1028,110 @@ export function extractRefs(source) {
   return refs;
 }
 
+// ── defineModel extraction ───────────────────────────────────────────
+
+/**
+ * Extract defineModel() declarations from source.
+ * Pattern: const/let/var varName = defineModel({ name: 'propName', default: value })
+ *          const/let/var varName = defineModel({ name: 'propName', required: true })
+ *
+ * @param {string} source
+ * @returns {{ varName: string, name: string, default: string, required: boolean }[]}
+ */
+export function extractModels(source) {
+  /** @type {{ varName: string, name: string, default: string, required: boolean }[]} */
+  const models = [];
+  const re = /(?:const|let|var)\s+(\w+)\s*=\s*defineModel\(\s*\{/g;
+  let m;
+
+  while ((m = re.exec(source)) !== null) {
+    const varName = m[1];
+    const objStart = m.index + m[0].length - 1; // position of '{'
+
+    // Use depth counting to extract the full object literal
+    let depth = 0;
+    let i = objStart;
+    /** @type {string | null} */
+    let inString = null;
+
+    for (; i < source.length; i++) {
+      const ch = source[i];
+
+      if (inString) {
+        if (ch === '\\') { i++; continue; }
+        if (ch === inString) inString = null;
+        continue;
+      }
+
+      if (ch === '"' || ch === "'" || ch === '`') {
+        inString = ch;
+        continue;
+      }
+
+      if (ch === '{') depth++;
+      if (ch === '}') {
+        depth--;
+        if (depth === 0) { i++; break; }
+      }
+    }
+
+    const objLiteral = source.slice(objStart, i).trim();
+    // Remove outer braces
+    const inner = objLiteral.slice(1, -1).trim();
+
+    // Extract 'name' property
+    const nameMatch = inner.match(/name\s*:\s*['"]([^'"]+)['"]/);
+    const propName = nameMatch ? nameMatch[1] : '';
+
+    // Extract 'default' property using depth counting
+    let defaultValue = 'undefined';
+    const defaultIdx = inner.search(/\bdefault\s*:\s*/);
+    if (defaultIdx !== -1) {
+      const afterDefault = inner.slice(defaultIdx);
+      const colonMatch = afterDefault.match(/^default\s*:\s*/);
+      if (colonMatch) {
+        const valStart = defaultIdx + colonMatch[0].length;
+        let valDepth = 0;
+        let pos = valStart;
+        /** @type {string | null} */
+        let valInString = null;
+
+        for (; pos < inner.length; pos++) {
+          const ch = inner[pos];
+
+          if (valInString) {
+            if (ch === '\\') { pos++; continue; }
+            if (ch === valInString) valInString = null;
+            continue;
+          }
+
+          if (ch === '"' || ch === "'" || ch === '`') {
+            valInString = ch;
+            continue;
+          }
+
+          if (ch === '(' || ch === '[' || ch === '{') valDepth++;
+          if (ch === ')' || ch === ']' || ch === '}') valDepth--;
+
+          if (valDepth === 0 && ch === ',') {
+            break;
+          }
+        }
+
+        defaultValue = inner.slice(valStart, pos).trim();
+      }
+    }
+
+    // Extract 'required' property
+    const requiredMatch = inner.match(/required\s*:\s*true/);
+    const required = !!requiredMatch;
+
+    models.push({ varName, name: propName, default: defaultValue, required });
+  }
+
+  return models;
+}
+
 // ── defineExpose extraction ─────────────────────────────────────────
 
 /**

package/lib/tree-walker.js

@@ -15,7 +15,7 @@
 import { parseHTML } from 'linkedom';
 import { BOOLEAN_ATTRIBUTES } from './types.js';
 
-/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
+/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, ModelPropBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
 
 /**
  * Walk a DOM tree rooted at rootEl, discovering bindings and events.
@@ -24,7 +24,7 @@ import { BOOLEAN_ATTRIBUTES } from './types.js';
  * @param {Set<string>} signalNames — Set of signal variable names
  * @param {Set<string>} computedNames — Set of computed variable names
  * @param {Set<string>} [propNames] — Set of prop names from defineProps
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], modelPropBindings: ModelPropBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
  */
 export function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   /** @type {Binding[]} */
@@ -35,6 +35,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   const showBindings = [];
   /** @type {ModelBinding[]} */
   const modelBindings = [];
+  /** @type {ModelPropBinding[]} */
+  const modelPropBindings = [];
   /** @type {AttrBinding[]} */
   const attrBindings = [];
   /** @type {SlotBinding[]} */
@@ -45,6 +47,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   let eventIdx = 0;
   let showIdx = 0;
   let modelIdx = 0;
+  let modelPropIdx = 0;
   let attrIdx = 0;
   let slotIdx = 0;
   let childIdx = 0;
@@ -121,7 +124,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         const propBindings = [];
         for (const attr of Array.from(el.attributes)) {
           // Skip directive attributes (@event, :bind, show, model, etc.)
-          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;
 
           // Check for {{interpolation}} in attribute value
@@ -245,6 +248,29 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         modelBindings.push({ varName, 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); // after 'model:'
+          const signal = attr.value;
+          const tag = el.tagName.toLowerCase();
+
+          // Validate the element is a custom element (tag contains a hyphen)
+          if (!tag.includes('-')) {
+            const error = new Error(`model:propName is only valid on custom elements (tag must contain a hyphen)`);
+            /** @ts-expect-error — custom error code */
+            error.code = 'MODEL_PROP_INVALID_TARGET';
+            throw error;
+          }
+
+          const varName = `__modelProp${modelPropIdx++}`;
+          modelPropBindings.push({ varName, propName, signal, path: [...pathParts] });
+          modelPropAttrsToRemove.push(attr.name);
+        }
+      }
+      modelPropAttrsToRemove.forEach((a) => el.removeAttribute(a));
     }
 
     // --- Text node with interpolations ---
@@ -317,7 +343,7 @@ export 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 };
 }
 
 // ── Conditional chain processing (if / else-if / else) ──────────────
@@ -363,7 +389,7 @@ function isChainPredecessor(el) {
  * @param {Set<string>} signalNames
  * @param {Set<string>} computedNames
  * @param {Set<string>} propNames
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], attrBindings: AttrBinding[], modelBindings: ModelBinding[], slots: SlotBinding[], processedHtml: string }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], attrBindings: AttrBinding[], modelBindings: ModelBinding[], modelPropBindings: ModelPropBinding[], slots: SlotBinding[], processedHtml: string }}
  */
 export function walkBranch(html, signalNames, computedNames, propNames) {
   const { document } = parseHTML(`<div id="__branchRoot">${html}</div>`);
@@ -398,6 +424,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   stripFirstSegment(result.showBindings);
   stripFirstSegment(result.attrBindings);
   stripFirstSegment(result.modelBindings);
+  stripFirstSegment(result.modelPropBindings);
   stripFirstSegment(result.slots);
   stripFirstSegment(result.childComponents);
 
@@ -418,6 +445,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
     showBindings: result.showBindings,
     attrBindings: result.attrBindings,
     modelBindings: result.modelBindings,
+    modelPropBindings: result.modelPropBindings,
     slots: result.slots,
     childComponents: result.childComponents,
     forBlocks,

package/lib/types.js

@@ -93,6 +93,7 @@
  * @property {LifecycleHook[]} onMountHooks — Mount lifecycle hooks (empty array if none)
  * @property {LifecycleHook[]} onDestroyHooks — Destroy lifecycle hooks (empty array if none)
  * @property {ModelBinding[]} modelBindings — Model bindings (empty array if none)
+ * @property {ModelPropBinding[]} modelPropBindings — Model prop bindings from model:propName directives (empty array if none)
  * @property {AttrBinding[]} attrBindings — Attribute bindings (empty array if none)
  * @property {SlotBinding[]} slots — Slot bindings (empty array if no slots)
  * @property {RefDeclaration[]} refs — templateRef declarations from script (empty array if none)
@@ -168,6 +169,14 @@
  * @property {string[]} path       — DOM path from root to the element
  */
 
+/**
+ * @typedef {Object} ModelPropBinding
+ * @property {string} varName      — Internal name: '__modelProp0', '__modelProp1', ...
+ * @property {string} propName     — The prop name after 'model:' (e.g., 'value')
+ * @property {string} signal       — Parent signal name (e.g., 'searchText')
+ * @property {string[]} path       — DOM path to the child element
+ */
+
 /**
  * @typedef {Object} RefDeclaration
  * @property {string} varName  — Variable name from script (e.g., 'canvas')

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {
     ".": "./lib/compiler.js",
     "./integrations/vue": "./integrations/vue.js",
     "./integrations/react": "./integrations/react.js",
-    "./integrations/angular": "./integrations/angular.js"
+    "./integrations/angular": "./integrations/angular.js",
+    "./adapters/vue": "./adapters/vue.js",
+    "./adapters/angular": "./adapters/angular.js"
   },
   "bin": {
     "wcc": "./bin/wcc.js"
@@ -17,6 +19,7 @@
     "lib/*.js",
     "!lib/*.test.js",
     "integrations/",
+    "adapters/",
     "types/",
     "README.md"
   ],