@sprlab/wccompiler 0.8.5 → 0.8.8

package/adapters/angular.js

@@ -1,51 +1,32 @@
 /**
- * Angular adapter for WCC defineModel — enables [(propName)] two-way binding.
+ * Angular adapter for WCC defineModel (OPTIONAL).
  *
- * Import this ONCE in your Angular app's main.ts:
- *   import '@sprlab/wccompiler/adapters/angular'
+ * The WCC component already emits `propNameChange` directly from _modelSet,
+ * so Angular's [(prop)] banana-box syntax works WITHOUT this adapter.
  *
- * What it does:
- * 1. Translates wcc:model events → propNameChange (enables [(prop)] syntax)
- * 2. Uses queueMicrotask to defer event emission outside Angular's render cycle
- *    (prevents NG0600: "Writing to signals is not allowed while Angular renders")
+ * This file is kept for:
+ * 1. Documentation of the Angular integration approach
+ * 2. The ControlValueAccessor guide for ngModel support
+ *
+ * Setup (Angular):
+ *   // No adapter import needed! Just use CUSTOM_ELEMENTS_SCHEMA:
+ *   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+ *   @Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
  *
  * Usage:
- *   <!-- In Angular template (with CUSTOM_ELEMENTS_SCHEMA) -->
  *   <wcc-input [(value)]="text"></wcc-input>
  *   <wcc-counter [(count)]="myCount"></wcc-counter>
  *
- * For ngModel support, you need a ControlValueAccessor.
- * See the exported WccValueAccessor class below.
+ * How it works:
+ *   Angular's [(prop)] expands to [prop]="value" (propChange)="value = $event.detail"
+ *   WCC _modelSet emits propNameChange CustomEvent with detail=newValue
+ *   Angular picks it up automatically — no adapter needed.
  *
  * @module @sprlab/wccompiler/adapters/angular
  */
 
-// ── Document-level adapter: wcc:model → propNameChange ──────────────
-// Angular's [(prop)] syntax listens for `propChange` events.
-// Uses queueMicrotask to defer the re-dispatch outside Angular's synchronous
-// render cycle, preventing NG0600 errors when Angular is mid-render.
-
-if (typeof document !== 'undefined') {
-  document.addEventListener('wcc:model', (e) => {
-    const { prop, value } = e.detail;
-    const target = e.target;
-
-    // Defer to next microtask to avoid NG0600
-    // (Angular doesn't allow signal writes during render)
-    queueMicrotask(() => {
-      target.dispatchEvent(new CustomEvent(`${prop}Change`, {
-        detail: value,
-        bubbles: true
-      }));
-    });
-  });
-}
-
 // ── ControlValueAccessor for ngModel/ReactiveForms ──────────────────
 // Angular's ngModel requires a ControlValueAccessor to bridge form controls.
-// Since this is a JS file (not TypeScript with decorators), we export the
-// implementation as a guide. Users need to create a TypeScript directive.
-//
 // Copy this into your Angular project as a .ts file:
 //
 // ```ts
@@ -67,7 +48,6 @@ if (typeof document !== 'undefined') {
 //   constructor(private el: ElementRef<HTMLElement>) {}
 //
 //   writeValue(value: any): void {
-//     // Parent → Child: set attribute
 //     if (value != null) {
 //       this.el.nativeElement.setAttribute('value', String(value));
 //     } else {
@@ -96,9 +76,3 @@ if (typeof document !== 'undefined') {
 //   }
 // }
 // ```
-//
-// Usage with ngModel:
-//   <wcc-input wccModel [(ngModel)]="text"></wcc-input>
-//
-// Usage with Reactive Forms:
-//   <wcc-input wccModel [formControl]="myControl"></wcc-input>

package/adapters/vue.js

@@ -1,69 +1,30 @@
 /**
- * Vue adapter for WCC defineModel — enables v-model and multi-model binding.
+ * Vue adapter for WCC defineModel (OPTIONAL — only needed without wccVuePlugin).
  *
- * Setup (ONE line in main.js):
- *   import { createApp } from 'vue'
- *   import { wccVue } from '@sprlab/wccompiler/adapters/vue'
- *
- *   const app = createApp(App)
- *   app.use(wccVue)  // registers adapter + v-wcc-model directive globally
- *   app.mount('#app')
- *
- * 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()] }
+ * If you use wccVuePlugin() in vite.config.js, you DON'T need this adapter.
+ * The plugin handles v-model:propName transformation at build time.
  *
- * 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>
+ * This adapter is for non-Vite setups (webpack, etc.) where you can't use
+ * the Vite pre-transform plugin. It provides a Vue directive for two-way binding.
  *
- *   <!-- v-model without argument (uses modelValue convention) -->
- *   <wcc-input v-model="text"></wcc-input>
+ * Setup:
+ *   import { createApp } from 'vue'
+ *   import { wccVue } from '@sprlab/wccompiler/adapters/vue'
+ *   app.use(wccVue)
  *
- *   <!-- Fallback directive (for non-Vite setups without nodeTransform) -->
+ * Usage:
  *   <wcc-input v-wcc-model:value="textRef"></wcc-input>
+ *   <wcc-form v-wcc-model:count="countRef"></wcc-form>
  *
  * @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`.
-//
-// IMPORTANT: We listen in CAPTURE phase so the update:propName event is dispatched
-// BEFORE Vue's own bubble-phase listeners process the element. This ensures Vue
-// picks up the translated event synchronously.
-
-if (typeof document !== 'undefined') {
-  document.addEventListener('wcc:model', (e) => {
-    const { prop, value } = e.detail;
-    // Dispatch update:propName synchronously on the target element.
-    // bubbles:false because Vue listens directly on the element via addEventListener.
-    e.target.dispatchEvent(new CustomEvent(`update:${prop}`, {
-      detail: value,
-      bubbles: false
-    }));
-  }, true); // ← capture phase
-}
-
 // ── 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.
+// Fallback for non-Vite setups. Listens for propName-changed events directly.
 
 /**
  * Vue custom directive for two-way binding with WCC defineModel props.
- * This is a FALLBACK — prefer v-model:propName with wccVuePlugin() nodeTransform.
- *
- * @example
- * <wcc-counter v-wcc-model:count="myCountRef"></wcc-counter>
+ * Listens for `propName-changed` CustomEvent (emitted by WCC _modelSet).
  */
 export const vWccModel = {
   mounted(el, binding) {
@@ -74,62 +35,41 @@ 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
-    const wccHandler = (e) => {
-      if (e.detail && e.detail.prop === propName) {
-        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;
+    // Listen for propName-changed (WCC → Vue)
+    const kebabName = propName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    const handler = (e) => {
+      // Try to update the Vue ref via setupState
+      const instance = binding.instance;
+      if (instance) {
+        const setupState = instance.$.setupState;
+        // Find the ref that matches the current binding value
+        for (const key of Object.keys(setupState)) {
+          const val = setupState[key];
+          if (val === binding.value || val?.value === binding.value) {
+            if (val?.value !== undefined) {
+              val.value = e.detail;
             } 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;
-              }
+              setupState[key] = e.detail;
             }
+            break;
           }
         }
       }
     };
 
-    el.addEventListener('wcc:model', wccHandler);
+    el.addEventListener(`${kebabName}-changed`, handler);
     el.__wccModelHandlers = el.__wccModelHandlers || {};
-    el.__wccModelHandlers[propName] = wccHandler;
+    el.__wccModelHandlers[propName] = { handler, eventName: `${kebabName}-changed` };
   },
 
   updated(el, binding) {
     const propName = binding.arg;
     if (!propName) return;
 
-    // Sync parent → child on updates
     if (binding.value != null) {
       el.setAttribute(propName, String(binding.value));
     } else {
@@ -141,27 +81,19 @@ export const vWccModel = {
     const propName = binding.arg;
     if (!propName) return;
 
-    const handler = el.__wccModelHandlers?.[propName];
-    if (handler) {
-      el.removeEventListener('wcc:model', handler);
+    const entry = el.__wccModelHandlers?.[propName];
+    if (entry) {
+      el.removeEventListener(entry.eventName, entry.handler);
       delete el.__wccModelHandlers[propName];
     }
   }
 };
 
-// ── Vue Plugin: app.use(wccVue) ─────────────────────────────────────
+// ── Vue Plugin ──────────────────────────────────────────────────────
 
 /**
- * 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'
- * import { wccVue } from '@sprlab/wccompiler/adapters/vue'
- *
- * const app = createApp(App)
- * app.use(wccVue)
- * app.mount('#app')
+ * Vue plugin that registers v-wcc-model directive globally.
+ * Only needed if NOT using wccVuePlugin() in vite.config.js.
  */
 export const wccVue = {
   install(app) {

package/integrations/vue.js

@@ -5,7 +5,7 @@
  * @module @sprlab/wccompiler/integrations/vue
  *
  * IMPORTANT: This file is for vite.config.js (Node.js context).
- * For browser-side model adapter, use app.use(wccVue) from '@sprlab/wccompiler/adapters/vue'.
+ * For browser-side, use app.use(wccVue) from '@sprlab/wccompiler/adapters/vue'.
  *
  * @example vite.config.js
  * ```js
@@ -13,17 +13,25 @@
  * export default { plugins: [wccVuePlugin()] }
  * ```
  *
- * @example main.js (browser — enables v-model event translation)
+ * @example main.js (optional — only needed if NOT using wccVuePlugin)
  * ```js
  * import { wccVue } from '@sprlab/wccompiler/adapters/vue'
  * app.use(wccVue)
  * ```
  *
- * With this plugin, v-model:propName works natively on WCC custom elements:
+ * With wccVuePlugin(), 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>
  * ```
+ *
+ * How it works:
+ * The plugin runs BEFORE @vitejs/plugin-vue and rewrites the template string:
+ *   v-model:count="expr"  →  :count="expr" @count-changed="expr = $event.detail"
+ *   v-model="expr"        →  :model-value="expr" @model-value-changed="expr = $event.detail"
+ *
+ * The WCC component emits `propName-changed` CustomEvent with detail=value on internal writes.
+ * Vue compiles @propName-changed as a normal event listener (not filtered like update:*).
  */
 
 import vue from '@vitejs/plugin-vue'
@@ -34,115 +42,96 @@ import vue from '@vitejs/plugin-vue'
  */
 
 /**
- * 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.
+ * Vite plugin that pre-transforms v-model:propName on custom elements
+ * before Vue's compiler processes the template.
  *
- * Transforms:
- *   <wcc-input v-model:value="text" />
- * Into the equivalent of:
- *   <wcc-input :value="text" @update:value="text = $event" />
+ * This is necessary because Vue's compiler filters out `onUpdate:*` event listeners
+ * for custom elements (isModelListener check in patchProp). By rewriting to
+ * `@propName-changed`, we use an event name that Vue registers normally.
  *
- * @param {object} node - Vue compiler AST node
- * @param {object} context - Vue compiler transform context
+ * @param {WccVuePluginOptions} [options]
+ * @returns {import('vite').Plugin[]}
  */
-function wccVModelTransform(node, context) {
-  // Only process element nodes (type 1 = ELEMENT)
-  if (node.type !== 1) return;
+export function wccVuePlugin(options = {}) {
+  const prefix = typeof options.prefix === 'string' ? options.prefix : 'wcc-'
 
-  // Only process custom elements (tag contains a hyphen)
-  if (!node.tag.includes('-')) return;
+  const preTransformPlugin = {
+    name: 'vite-plugin-wcc-vmodel',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!id.endsWith('.vue')) return null
 
-  // Find v-model directives with arguments
-  const newProps = [];
-  let modified = false;
+      let result = code
 
-  for (const prop of node.props) {
-    // Check if this is a v-model directive (with or without argument)
-    if (
-      prop.type === 7 && // DIRECTIVE
-      prop.name === 'model'
-    ) {
-      // Determine prop name: explicit arg or default 'modelValue'
-      const propName = prop.arg ? prop.arg.content : 'modelValue';
-      const expr = prop.exp;
+      // Transform v-model:propName="expr" on custom elements (tags with hyphens)
+      // → :propName="expr" @propName-changed="expr = $event.detail"
+      // Run in a loop to handle multiple v-model on the same element
+      let prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /(<[\w]+-[\w-]*(?:\s[^>]*?)?)\bv-model:(\w+)="([^"]+)"/,
+          (match, prefix, prop, expr) => {
+            return `${prefix}:${prop}="${expr}" @${prop}-changed="${expr} = $event.detail"`
+          }
+        )
+      }
 
-      if (!expr) {
-        newProps.push(prop);
-        continue;
+      // Transform v-model="expr" (without argument) on custom elements
+      // → :model-value="expr" @model-value-changed="expr = $event.detail"
+      prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /(<[\w]+-[\w-]*(?:\s[^>]*?)?)\bv-model="([^"]+)"/,
+          (match, prefix, expr) => {
+            return `${prefix}:model-value="${expr}" @model-value-changed="${expr} = $event.detail"`
+          }
+        )
       }
 
-      // Create the arg node (use existing or create for modelValue)
-      const argNode = prop.arg || {
-        type: 4, // SIMPLE_EXPRESSION
-        content: 'modelValue',
-        isStatic: true,
-        constType: 3,
-        loc: prop.loc
-      };
+      // ── Slot transforms ──
+      // Transform <template #name>content</template> inside custom elements
+      // → <div slot="name">content</div>
+      // This prevents Vue from intercepting the slot syntax and erroring.
+      // The WCC component's runtime slot parser detects slot="name" on regular elements.
 
-      // Replace v-model:propName="expr" with:
-      // :propName="expr" (bind directive)
-      newProps.push({
-        type: 7, // DIRECTIVE
-        name: 'bind',
-        arg: argNode,
-        exp: expr,
-        modifiers: [],
-        loc: prop.loc
-      });
+      // Handle <template #name>...</template> (shorthand)
+      prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /<template\s+#(\w+)>([\s\S]*?)<\/template>/,
+          (match, slotName, content) => {
+            return `<div slot="${slotName}">${content}</div>`
+          }
+        )
+      }
 
-      // @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.detail ?? $event }`,
-          isStatic: false,
-          constType: 0,
-          loc: prop.loc
-        },
-        modifiers: [],
-        loc: prop.loc
-      });
+      // Handle <template v-slot:name>...</template> (verbose)
+      prev = ''
+      while (prev !== result) {
+        prev = result
+        result = result.replace(
+          /<template\s+v-slot:(\w+)>([\s\S]*?)<\/template>/,
+          (match, slotName, content) => {
+            return `<div slot="${slotName}">${content}</div>`
+          }
+        )
+      }
 
-      modified = true;
-    } else {
-      newProps.push(prop);
+      if (result !== code) return result
+      return null
     }
   }
 
-  if (modified) {
-    node.props = newProps;
-  }
-}
-
-/**
- * Creates a Vite plugin that configures Vue's template compiler
- * to recognize custom elements with the given prefix and enables
- * v-model:propName on those elements.
- *
- * @param {WccVuePluginOptions} [options]
- * @returns {import('vite').Plugin}
- */
-export function wccVuePlugin(options = {}) {
-  const prefix = typeof options.prefix === 'string' ? options.prefix : 'wcc-'
-  return vue({
+  const vuePlugin = vue({
     template: {
       compilerOptions: {
-        isCustomElement: (tag) => tag.startsWith(prefix),
-        nodeTransforms: [wccVModelTransform]
+        isCustomElement: (tag) => tag.startsWith(prefix)
       }
     }
   })
+
+  return [preTransformPlugin, vuePlugin]
 }

package/lib/codegen.js

@@ -1039,6 +1039,11 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('            __slotMap[slotName] = { content: child.innerHTML, propsExpr: attr.value };');
     lines.push('          }');
     lines.push('        }');
+    lines.push("      } else if (child.nodeType === 1 && child.getAttribute('slot')) {");
+    // NEW: regular element with slot="name" (cross-framework support)
+    lines.push("        const slotName = child.getAttribute('slot');");
+    lines.push("        child.removeAttribute('slot');");
+    lines.push('        __slotMap[slotName] = { content: child.outerHTML, propsExpr: \'\' };');
     lines.push("      } else if (child.nodeType === 1 || (child.nodeType === 3 && child.textContent.trim())) {");
     lines.push('        __defaultSlotNodes.push(child);');
     lines.push('      }');
@@ -1664,8 +1669,13 @@ export function generateComponent(parseResult, options = {}) {
     lines.push('');
   }
 
-  // _modelSet methods (one per defineModel prop — emits wcc:model on internal write)
+  // _modelSet methods (one per defineModel prop — emits events on internal write)
+  // Emits:
+  //   1. wcc:model — generic event for vanilla JS and WCC-to-WCC binding
+  //   2. propName-changed — for Vue v-model (Vue doesn't filter this name)
+  //   3. propNameChange — for Angular [(prop)] banana-box syntax
   for (const md of modelDefs) {
+    const kebabName = camelToKebab(md.name);
     lines.push(`  _modelSet_${md.name}(newVal) {`);
     lines.push(`    const oldVal = this._m_${md.name}();`);
     lines.push(`    this._m_${md.name}(newVal);`);
@@ -1674,6 +1684,10 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
+    // Vue: propName-changed (not filtered by Vue's isModelListener)
+    lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
+    // Angular: propNameChange (Angular's [(prop)] listens for propChange)
+    lines.push(`    this.dispatchEvent(new CustomEvent('${md.name}Change', { detail: newVal, bubbles: true }));`);
     lines.push('  }');
     lines.push('');
   }

package/package.json

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