@sprlab/wccompiler 0.8.1 → 0.8.3

package/adapters/vue.js

@@ -1,7 +1,7 @@
 /**
  * Vue adapter for WCC defineModel — enables v-model and multi-model binding.
  *
- * Usage (ONE line in main.js):
+ * Setup (ONE line in main.js):
  *   import { createApp } from 'vue'
  *   import { wccVue } from '@sprlab/wccompiler/adapters/vue'
  *
@@ -9,23 +9,29 @@
  *   app.use(wccVue)  // registers adapter + v-wcc-model directive globally
  *   app.mount('#app')
  *
- * What it does:
- * 1. Registers document-level wcc:model → update:propName translation (enables v-model)
- * 2. Registers v-wcc-model directive globally (enables multi-prop two-way binding)
+ * IMPORTANT: Also use wccVuePlugin() in vite.config.js to enable v-model:propName
+ * on custom elements (via AST nodeTransform):
+ *   import { wccVuePlugin } from '@sprlab/wccompiler/integrations/vue'
+ *   export default { plugins: [wccVuePlugin()] }
  *
- * Template usage:
- *   <!-- Single model prop (Vue's native v-model) -->
- *   <!-- Component must declare: defineModel({ name: 'modelValue', default: '' }) -->
+ * With both configured, you can use:
+ *   <!-- Native v-model:propName (preferred, requires wccVuePlugin) -->
+ *   <wcc-input v-model:value="text"></wcc-input>
+ *   <wcc-form v-model:count="countRef" v-model:title="titleRef"></wcc-form>
+ *
+ *   <!-- v-model without argument (uses modelValue convention) -->
  *   <wcc-input v-model="text"></wcc-input>
  *
- *   <!-- Multiple model props (v-wcc-model:propName) -->
- *   <wcc-form v-model="mainValue" v-wcc-model:count="countRef" v-wcc-model:title="titleRef"></wcc-form>
+ *   <!-- Fallback directive (for non-Vite setups without nodeTransform) -->
+ *   <wcc-input v-wcc-model:value="textRef"></wcc-input>
  *
  * @module @sprlab/wccompiler/adapters/vue
  */
 
 // ── Document-level adapter: wcc:model → update:propName ─────────────
 // This enables Vue's native v-model on WCC custom elements.
+// Vue v-model on custom elements listens for `update:modelValue` by default.
+// The nodeTransform in wccVuePlugin makes v-model:propName listen for `update:propName`.
 
 if (typeof document !== 'undefined') {
   document.addEventListener('wcc:model', (e) => {
@@ -38,16 +44,20 @@ if (typeof document !== 'undefined') {
 }
 
 // ── Vue directive: v-wcc-model ──────────────────────────────────────
+// Fallback for non-Vite setups. If using wccVuePlugin(), prefer v-model:propName instead.
+//
+// Usage:
+//   <wcc-input v-wcc-model:value="textRef"></wcc-input>
+//
+// The bound value MUST be a Vue ref (or reactive property).
+// The directive writes directly to ref.value for WCC→Vue updates.
 
 /**
  * Vue custom directive for two-way binding with WCC defineModel props.
- *
- * Binds a Vue ref to a WCC component's model prop bidirectionally:
- * - Parent → Child: sets the attribute when the Vue ref changes
- * - Child → Parent: updates the Vue ref when wcc:model fires for the matching prop
+ * This is a FALLBACK — prefer v-model:propName with wccVuePlugin() nodeTransform.
  *
  * @example
- * <wcc-counter v-wcc-model:count="myCount"></wcc-counter>
+ * <wcc-counter v-wcc-model:count="myCountRef"></wcc-counter>
  */
 export const vWccModel = {
   mounted(el, binding) {
@@ -58,31 +68,53 @@ export const vWccModel = {
     }
 
     // Set initial value (parent → child)
+    // Vue sets camelCase attributes, so set both camelCase and kebab-case
     if (binding.value != null) {
       el.setAttribute(propName, String(binding.value));
     }
 
-    // Listen for child → parent changes via the update:propName event
-    // (which is already dispatched by the document-level adapter above)
-    const handler = (e) => {
-      // Use the update:propName event dispatched by the adapter
-      // Vue will handle the ref update through the directive binding
-    };
-
-    // Listen directly for wcc:model to update the binding
+    // Listen for child → parent changes
     const wccHandler = (e) => {
       if (e.detail && e.detail.prop === propName) {
-        // Trigger Vue reactivity by emitting on the component instance
-        // This works because Vue tracks directive bindings
-        el.dispatchEvent(new CustomEvent(`update:${propName}`, {
-          detail: e.detail.value,
-          bubbles: false
-        }));
+        const newValue = e.detail.value;
+
+        // Try to update the Vue ref directly
+        // In Vue 3, if the binding expression is a ref, binding.value is the ref's current value
+        // We need to find the ref on the component instance and write to it
+        const instance = binding.instance;
+        if (instance) {
+          // Access the setup state to find the ref
+          const setupState = instance.$.setupState;
+          // The binding expression is stored in the directive's internal data
+          // In Vue 3, we can use the dir's exp to find the variable name
+          // Fallback: emit a custom event that a parent @update handler can catch
+          const refName = binding.dir?.__wccRefName?.[el]?.[propName];
+          if (refName && setupState[refName] !== undefined) {
+            // Direct ref write
+            if (setupState[refName]?.value !== undefined) {
+              setupState[refName].value = newValue;
+            } else {
+              setupState[refName] = newValue;
+            }
+          } else {
+            // Fallback: try to find by matching current value
+            for (const key of Object.keys(setupState)) {
+              const val = setupState[key];
+              if (val?.value === binding.value || val === binding.value) {
+                if (val?.value !== undefined) {
+                  val.value = newValue;
+                } else {
+                  setupState[key] = newValue;
+                }
+                break;
+              }
+            }
+          }
+        }
       }
     };
 
     el.addEventListener('wcc:model', wccHandler);
-    // Store handler for cleanup
     el.__wccModelHandlers = el.__wccModelHandlers || {};
     el.__wccModelHandlers[propName] = wccHandler;
   },
@@ -103,7 +135,6 @@ export const vWccModel = {
     const propName = binding.arg;
     if (!propName) return;
 
-    // Cleanup listener
     const handler = el.__wccModelHandlers?.[propName];
     if (handler) {
       el.removeEventListener('wcc:model', handler);
@@ -115,7 +146,8 @@ export const vWccModel = {
 // ── Vue Plugin: app.use(wccVue) ─────────────────────────────────────
 
 /**
- * Vue plugin that registers the wcc:model adapter and v-wcc-model directive globally.
+ * Vue plugin that registers the v-wcc-model directive globally.
+ * The document-level adapter is registered on import (side-effect above).
  *
  * @example
  * import { createApp } from 'vue'

package/integrations/vue.js

@@ -1,11 +1,11 @@
 /**
  * Vue Vite plugin for WCC custom elements.
- * Configures isCustomElement to recognize WCC component tags.
+ * Configures isCustomElement and enables v-model:propName on custom elements.
  *
  * @module @sprlab/wccompiler/integrations/vue
  *
  * IMPORTANT: This file is for vite.config.js (Node.js context).
- * For browser-side model adapter, import '@sprlab/wccompiler/adapters/vue' in your main.js.
+ * For browser-side model adapter, use app.use(wccVue) from '@sprlab/wccompiler/adapters/vue'.
  *
  * @example vite.config.js
  * ```js
@@ -13,9 +13,16 @@
  * export default { plugins: [wccVuePlugin()] }
  * ```
  *
- * @example main.js (browser — enables v-model on WCC components)
+ * @example main.js (browser — enables v-model event translation)
  * ```js
- * import '@sprlab/wccompiler/adapters/vue'
+ * import { wccVue } from '@sprlab/wccompiler/adapters/vue'
+ * app.use(wccVue)
+ * ```
+ *
+ * With this plugin, 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>
  * ```
  */
 
@@ -26,9 +33,95 @@ import vue from '@vitejs/plugin-vue'
  * @property {string} [prefix='wcc-'] - Tag prefix for custom element detection
  */
 
+/**
+ * AST node transform that enables v-model:propName on custom elements.
+ *
+ * Vue's compiler normally doesn't support v-model with arguments on custom elements.
+ * This transform intercepts v-model:arg directives on custom elements and rewrites them
+ * to the equivalent :prop + @update:prop binding that Vue understands.
+ *
+ * Transforms:
+ *   <wcc-input v-model:value="text" />
+ * Into the equivalent of:
+ *   <wcc-input :value="text" @update:value="text = $event" />
+ *
+ * @param {object} node - Vue compiler AST node
+ * @param {object} context - Vue compiler transform context
+ */
+function wccVModelTransform(node, context) {
+  // Only process element nodes (type 1 = ELEMENT)
+  if (node.type !== 1) return;
+
+  // Only process custom elements (tag contains a hyphen)
+  if (!node.tag.includes('-')) return;
+
+  // Find v-model directives with arguments
+  const newProps = [];
+  let modified = false;
+
+  for (const prop of node.props) {
+    // Check if this is a v-model directive with an argument
+    if (
+      prop.type === 7 && // DIRECTIVE
+      prop.name === 'model' &&
+      prop.arg // has argument (v-model:name)
+    ) {
+      const propName = prop.arg.content;
+      const expr = prop.exp;
+
+      if (!expr) {
+        newProps.push(prop);
+        continue;
+      }
+
+      // Replace v-model:propName="expr" with:
+      // :propName="expr" (bind directive)
+      newProps.push({
+        type: 7, // DIRECTIVE
+        name: 'bind',
+        arg: prop.arg,
+        exp: expr,
+        modifiers: [],
+        loc: prop.loc
+      });
+
+      // @update:propName="$event => { expr = $event }" (on directive)
+      newProps.push({
+        type: 7, // DIRECTIVE
+        name: 'on',
+        arg: {
+          type: 4, // SIMPLE_EXPRESSION
+          content: `update:${propName}`,
+          isStatic: true,
+          constType: 3,
+          loc: prop.loc
+        },
+        exp: {
+          type: 4, // SIMPLE_EXPRESSION
+          content: `$event => { ${expr.content} = $event }`,
+          isStatic: false,
+          constType: 0,
+          loc: prop.loc
+        },
+        modifiers: [],
+        loc: prop.loc
+      });
+
+      modified = true;
+    } else {
+      newProps.push(prop);
+    }
+  }
+
+  if (modified) {
+    node.props = newProps;
+  }
+}
+
 /**
  * Creates a Vite plugin that configures Vue's template compiler
- * to recognize custom elements with the given prefix.
+ * to recognize custom elements with the given prefix and enables
+ * v-model:propName on those elements.
  *
  * @param {WccVuePluginOptions} [options]
  * @returns {import('vite').Plugin}
@@ -38,7 +131,8 @@ export function wccVuePlugin(options = {}) {
   return vue({
     template: {
       compilerOptions: {
-        isCustomElement: (tag) => tag.startsWith(prefix)
+        isCustomElement: (tag) => tag.startsWith(prefix),
+        nodeTransforms: [wccVModelTransform]
       }
     }
   })

package/lib/codegen.js

@@ -945,7 +945,18 @@ export function generateComponent(parseResult, options = {}) {
   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}'`);
+    // For model props, observe BOTH kebab-case AND camelCase forms
+    // Vue sets camelCase (modelValue), native HTML uses kebab-case (model-value)
+    const modelAttrEntries = [];
+    for (let i = 0; i < modelDefs.length; i++) {
+      const kebab = modelAttrNames[i];
+      const camel = modelDefs[i].name;
+      modelAttrEntries.push(`'${kebab}'`);
+      // Only add camelCase if it differs from kebab-case
+      if (kebab !== camel) {
+        modelAttrEntries.push(`'${camel}'`);
+      }
+    }
     const allAttrNames = [...propAttrNames, ...modelAttrEntries].join(', ');
     lines.push(`  static get observedAttributes() { return [${allAttrNames}]; }`);
     lines.push('');
@@ -1149,8 +1160,11 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`      this.${b.varName}.textContent = this._s_${b.name}() ?? '';`);
       lines.push('    }));');
     } else if (b.type === 'signal') {
+      // Check if this is a model var (needs _m_ prefix instead of _)
+      const modelPropName = modelVarMap.get(b.name);
+      const signalRef = modelPropName ? `this._m_${modelPropName}()` : `this._${b.name}()`;
       lines.push('    this.__disposers.push(__effect(() => {');
-      lines.push(`      this.${b.varName}.textContent = this._${b.name}() ?? '';`);
+      lines.push(`      this.${b.varName}.textContent = ${signalRef} ?? '';`);
       lines.push('    }));');
     } else if (b.type === 'computed') {
       lines.push('    this.__disposers.push(__effect(() => {');
@@ -1201,7 +1215,8 @@ export function generateComponent(parseResult, options = {}) {
       } else if (pb.type === 'computed') {
         ref = `this._c_${pb.expr}()`;
       } else if (pb.type === 'signal') {
-        ref = `this._${pb.expr}()`;
+        const modelPropName = modelVarMap.get(pb.expr);
+        ref = modelPropName ? `this._m_${modelPropName}()` : `this._${pb.expr}()`;
       } else if (pb.type === 'constant') {
         ref = `this._const_${pb.expr}`;
       } else {
@@ -1595,6 +1610,7 @@ export function generateComponent(parseResult, options = {}) {
     for (let i = 0; i < modelDefs.length; i++) {
       const md = modelDefs[i];
       const attrName = modelAttrNames[i];
+      const camelName = md.name;
       const defaultVal = md.default;
       let updateExpr;
 
@@ -1612,7 +1628,12 @@ export function generateComponent(parseResult, options = {}) {
         updateExpr = `this._m_${md.name}(newVal ?? ${defaultVal})`;
       }
 
-      lines.push(`    if (name === '${attrName}') ${updateExpr};`);
+      // Handle both kebab-case (native HTML) and camelCase (Vue) attribute names
+      if (attrName !== camelName) {
+        lines.push(`    if (name === '${attrName}' || name === '${camelName}') ${updateExpr};`);
+      } else {
+        lines.push(`    if (name === '${attrName}') ${updateExpr};`);
+      }
     }
 
     lines.push('  }');
@@ -1725,7 +1746,9 @@ export function generateComponent(parseResult, options = {}) {
         if (b.type === 'prop') {
           lines.push(`      __effect(() => { ${b.varName}.textContent = this._s_${b.name}() ?? ''; });`);
         } else if (b.type === 'signal') {
-          lines.push(`      __effect(() => { ${b.varName}.textContent = this._${b.name}() ?? ''; });`);
+          const modelPropName = modelVarMap.get(b.name);
+          const signalRef = modelPropName ? `this._m_${modelPropName}()` : `this._${b.name}()`;
+          lines.push(`      __effect(() => { ${b.varName}.textContent = ${signalRef} ?? ''; });`);
         } else if (b.type === 'computed') {
           lines.push(`      __effect(() => { ${b.varName}.textContent = this._c_${b.name}() ?? ''; });`);
         } else {

package/package.json

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