@sprlab/wccompiler 0.11.0 → 0.11.2

package/integrations/vue.js

@@ -76,12 +76,14 @@ export function wccVuePlugin(options = {}) {
 
       // Transform v-model:propName="expr" on custom elements (tags with hyphens)
       // Also handles modifiers: v-model:propName.trim.number="expr"
-      // → :propName="expr" @wcc:model="$event.detail.prop === 'propName' && (expr = value)"
+      // → :propName="expr" + merged @wcc:model handler
       //   with modifiers applied to the extracted value:
       //   .trim   → value.trim()  (for string values)
       //   .number → Number(value)
       //   .lazy   → no-op for custom elements
-      // Run in a loop to handle multiple v-model on the same element
+      //
+      // Multiple v-model:prop on the same element are merged into a single
+      // @wcc:model handler with semicolons (avoids Vue "Duplicate attribute" error).
       let prev = ''
       while (prev !== result) {
         prev = result
@@ -99,14 +101,23 @@ export function wccVuePlugin(options = {}) {
               }
               // .lazy is a no-op for custom elements (they already use change events)
             }
-            return `${prefix}:${prop}="${expr}" @wcc:model="$event.detail.prop === '${prop}' && (${expr} = ${value})"`
+            const handler = `$event.detail.prop === '${prop}' && (${expr} = ${value})`
+            // Check if there's already a @wcc:model on this element — append to it
+            if (prefix.includes('@wcc:model="')) {
+              const merged = prefix.replace(
+                /@wcc:model="([^"]*)"/,
+                (_, existing) => `@wcc:model="${existing}; ${handler}"`
+              )
+              return `${merged}:${prop}="${expr}"`
+            }
+            return `${prefix}:${prop}="${expr}" @wcc:model="${handler}"`
           }
         )
       }
 
       // Transform v-model="expr" (without argument) on custom elements
       // Also handles modifiers: v-model.trim.lazy="expr"
-      // → :model-value="expr" @wcc:model="$event.detail.prop === 'modelValue' && (expr = value)"
+      // → :model-value="expr" + merged @wcc:model handler
       prev = ''
       while (prev !== result) {
         prev = result
@@ -122,11 +133,29 @@ export function wccVuePlugin(options = {}) {
                 value = `Number(${value})`
               }
             }
-            return `${prefix}:model-value="${expr}" @wcc:model="$event.detail.prop === 'modelValue' && (${expr} = ${value})"`
+            const handler = `$event.detail.prop === 'modelValue' && (${expr} = ${value})`
+            // Check if there's already a @wcc:model on this element — append to it
+            if (prefix.includes('@wcc:model="')) {
+              const merged = prefix.replace(
+                /@wcc:model="([^"]*)"/,
+                (_, existing) => `@wcc:model="${existing}; ${handler}"`
+              )
+              return `${merged}:model-value="${expr}"`
+            }
+            return `${prefix}:model-value="${expr}" @wcc:model="${handler}"`
           }
         )
       }
 
+      // Post-process: merge any duplicate @wcc:model attributes on the same element
+      // This handles the case where v-model (no arg) was before v-model:prop in source order
+      result = result.replace(
+        /<([\w]+-[\w-]*)((?:\s[^>]*?)?)@wcc:model="([^"]*)"((?:\s[^>]*?)?)@wcc:model="([^"]*)"([^>]*?)>/g,
+        (match, tag, before, handler1, middle, handler2, after) => {
+          return `<${tag}${before}@wcc:model="${handler1}; ${handler2}"${middle}${after}>`
+        }
+      )
+
       // ── Slot transforms ──
       // Transform <template #name>content</template> inside custom elements
       // → <div slot="name">content</div>

package/lib/tree-walker.js

@@ -88,7 +88,9 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
       // Detect <slot> elements — replace with <span data-slot="..."> placeholder
       if (el.tagName === 'SLOT') {
         const slotName = el.getAttribute('name') || '';
-        const varName = `__s${slotIdx++}`;
+        const safeName = slotName ? slotName.replace(/[^a-zA-Z0-9_]/g, '_') : 'default';
+        const varName = `__slot_${safeName}_${slotIdx}`;
+        slotIdx++;
         const defaultContent = el.innerHTML.trim();
 
         // Collect :prop="expr" attributes (slot props for scoped slots)
@@ -155,10 +157,13 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
       const attrsToRemove = [];
       for (const attr of Array.from(el.attributes)) {
         if (attr.name.startsWith('@')) {
-          const varName = `__e${eventIdx++}`;
+          const eventName = attr.name.slice(1);
+          const handlerName = attr.value.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 20);
+          const varName = `__evt_${eventName.replace(/-/g, '_')}_${handlerName}`;
+          eventIdx++;
           events.push({
             varName,
-            event: attr.name.slice(1),
+            event: eventName,
             handler: attr.value,
             path: [...pathParts],
           });
@@ -180,7 +185,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
             kind = 'attr';
           }
 
-          const varName = `__attr${attrIdx++}`;
+          const varName = `__attr_${attrName.replace(/-/g, '_')}_${attrIdx}`;
+          attrIdx++;
           attrBindings.push({
             varName,
             attr: attrName,
@@ -195,7 +201,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
 
       // Detect show attribute
       if (el.hasAttribute('show')) {
-        const varName = `__show${showIdx++}`;
+        const varName = `__show_${showIdx}`;
+        showIdx++;
         showBindings.push({
           varName,
           expression: el.getAttribute('show'),
@@ -244,7 +251,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
           prop = 'value'; event = 'input';
         }
 
-        const varName = `__model${modelIdx++}`;
+        const varName = `__model_${signalName}`;
+        modelIdx++;
         modelBindings.push({ varName, signal: signalName, prop, event, coerce, radioValue, path: [...pathParts] });
         el.removeAttribute('model');
       }
@@ -265,7 +273,8 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
             throw error;
           }
 
-          const varName = `__modelProp${modelPropIdx++}`;
+          const varName = `__modelProp_${propName}`;
+          modelPropIdx++;
           modelPropBindings.push({ varName, propName, signal, path: [...pathParts] });
           modelPropAttrsToRemove.push(attr.name);
         }
@@ -287,8 +296,10 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
 
       // Case 1: {{var}} is the sole content of the parent element and parent has only one child text node
       if (soleMatch && parent.childNodes.length === 1) {
-        const varName = `__b${bindIdx++}`;
         const name = baseName(soleMatch[1]);
+        const safeName = name.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 30);
+        const varName = `__text_${safeName}`;
+        bindIdx++;
         bindings.push({
           varName,
           name,
@@ -317,8 +328,10 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         const bm = part.match(/^\{\{((?:[^}]|\}(?!\}))+)\}\}$/);
         if (bm) {
           fragment.appendChild(doc.createElement('span'));
-          const varName = `__b${bindIdx++}`;
           const name = baseName(bm[1]);
+          const safeName = name.replace(/[^a-zA-Z0-9_]/g, '_').slice(0, 30);
+          const varName = `__text_${safeName}_${bindIdx}`;
+          bindIdx++;
           bindings.push({
             varName,
             name,

package/package.json

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