@sprlab/wccompiler 0.10.2 → 0.10.4

package/adapters/react.js

@@ -105,11 +105,33 @@ export function useWccModel(propName, value, setValue, existingRef) {
 }
 
 
+/**
+ * Converts a kebab-case event name to a React-idiomatic prop name.
+ *
+ * Rules:
+ * - 'change' → 'onChange'
+ * - 'count-changed' → 'onCountChange' (strips trailing 'd' from past tense)
+ * - 'value-updated' → 'onValueUpdate' (strips trailing 'd')
+ * - 'reset' → 'onReset'
+ * - 'item-click' → 'onItemClick'
+ *
+ * @param {string} eventName - kebab-case event name
+ * @returns {string} React prop name (onCamelCase)
+ */
+function toReactEventProp(eventName) {
+  const parts = eventName.split('-')
+  const camel = parts.map(s => s[0].toUpperCase() + s.slice(1)).join('')
+  // Strip trailing 'd' from past tense verbs (changed→Change, updated→Update)
+  const normalized = camel.replace(/(Changed|Updated|Removed|Added|Closed|Opened|Submitted|Cancelled)$/, (m) => m.slice(0, -1))
+  return 'on' + normalized
+}
+
 /**
  * Creates a React wrapper component for a WCC custom element.
  *
  * The wrapper provides idiomatic React DX:
- * - Event props: `onChange`, `onCountChanged` → automatically wired via addEventListener
+ * - Event props: `onChange`, `onCountChange` → automatically wired via addEventListener
+ *   Handlers receive the unwrapped value (event.detail), not the raw CustomEvent.
  * - Model props: two-way binding via attribute + event listener
  * - Regular props: passed as attributes on the custom element
  * - Children: passed through as-is (use `<div slot="name">` for named slots)
@@ -118,9 +140,9 @@ export function useWccModel(propName, value, setValue, existingRef) {
  * @param {string} tagName - The custom element tag name (e.g., 'wcc-card')
  * @param {Object} [config] - Configuration for the wrapper
  * @param {string[]} [config.events] - Custom event names to expose as onEventName props
- *   Event names are converted: 'count-changed' → onCountChanged prop
+ *   Event names are converted: 'count-changed' → onCountChange prop (React convention)
  * @param {string[]} [config.models] - Model prop names for two-way binding
- *   Each model 'name' creates: `name` prop (sets attribute) + `onNameChanged` event
+ *   Each model 'name' creates: `name` prop (sets attribute) + `onNameChange` event
  * @returns {import('react').ForwardRefExoticComponent} A React component
  *
  * @example
@@ -134,8 +156,8 @@ export function useWccModel(propName, value, setValue, existingRef) {
  *   return (
  *     <WccCounter
  *       count={count}
- *       onCountChanged={(e) => setCount(e.detail)}
- *       onChange={(e) => console.log('changed', e.detail)}
+ *       onCountChange={(value) => setCount(value)}
+ *       onChange={(value) => console.log('changed', value)}
  *       label="Clicks"
  *     >
  *       <div slot="footer">Footer content</div>
@@ -147,19 +169,21 @@ export function createWccWrapper(tagName, config = {}) {
   const { events = [], models = [] } = config
 
   // Build a set of event prop names for quick lookup
-  // 'count-changed' → 'onCountChanged'
+  // Convention: kebab-case event → React onCamelCase (without trailing 'd' from 'changed')
+  // 'count-changed' → 'onCountChange' (not 'onCountChanged')
   // 'change' → 'onChange'
+  // 'value-updated' → 'onValueUpdate' (strips trailing 'd' from past tense)
   const eventPropMap = new Map()
   for (const eventName of events) {
-    const propName = 'on' + eventName.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+    const propName = toReactEventProp(eventName)
     eventPropMap.set(propName, eventName)
   }
 
-  // Model events: 'count' → 'count-changed' → 'onCountChanged'
+  // Model events: 'count' → 'count-changed' → 'onCountChange'
   const modelEventMap = new Map()
   for (const modelName of models) {
     const eventName = `${modelName}-changed`
-    const propName = 'on' + eventName.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+    const propName = toReactEventProp(eventName)
     eventPropMap.set(propName, eventName)
     modelEventMap.set(modelName, eventName)
   }
@@ -207,7 +231,7 @@ export function createWccWrapper(tagName, config = {}) {
       for (const eventName of allEvents) {
         const listener = (e) => {
           const handler = handlersRef.current[eventName]
-          if (handler) handler(e)
+          if (handler) handler(e instanceof CustomEvent ? e.detail : e)
         }
         el.addEventListener(eventName, listener)
         listeners.push([eventName, listener])
@@ -268,7 +292,8 @@ export function createWccWrapper(tagName, config = {}) {
  * const WccCounter = wrapWccComponent(customElements.get('wcc-counter'))
  *
  * // Use idiomatically — no manual config needed
- * <WccCounter count={count} onCountChanged={setCount} onChange={handler} />
+ * // Handlers receive the value directly (not the event)
+ * <WccCounter count={count} onCountChange={setCount} onChange={(val) => console.log(val)} />
  */
 export function wrapWccComponent(WccClass) {
   const meta = WccClass?.__meta

package/integrations/react.js

@@ -745,3 +745,120 @@ export function wccReactPlugin(options = {}) {
     }
   }
 }
+
+
+/**
+ * Vite plugin that generates a virtual module `@wcc/react` (or custom id)
+ * exporting pre-built React wrapper components for all WCC components found
+ * in the project's compiled output directory.
+ *
+ * This enables the ideal import experience:
+ *   import { WccCounter, WccCard } from '@wcc/react'
+ *
+ * The plugin scans the output directory for compiled .js files, reads their
+ * `static __meta` declarations, and generates wrapper code using createWccWrapper.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.moduleId='@wcc/react'] - Virtual module ID for imports
+ * @param {string} [options.componentsDir='./dist'] - Directory containing compiled WCC .js files
+ * @param {string} [options.prefix='wcc-'] - Tag prefix filter
+ * @returns {import('vite').Plugin}
+ *
+ * @example vite.config.js
+ * ```js
+ * import { wccReactPlugin, wccReactComponents } from '@sprlab/wccompiler/integrations/react'
+ * export default {
+ *   plugins: [
+ *     wccReactPlugin(),
+ *     wccReactComponents({ componentsDir: './src/wcc' })
+ *   ]
+ * }
+ * ```
+ *
+ * @example Component.jsx
+ * ```jsx
+ * import { WccCounter, WccCard } from '@wcc/react'
+ *
+ * <WccCounter count={count} onCountChange={setCount} />
+ * <WccCard><div slot="header">Title</div></WccCard>
+ * ```
+ */
+export function wccReactComponents(options = {}) {
+  const {
+    moduleId = '@wcc/react',
+    componentsDir = './dist',
+    prefix = 'wcc-'
+  } = options
+
+  const resolvedId = '\0' + moduleId
+
+  return {
+    name: 'vite-plugin-wcc-react-components',
+    resolveId(id) {
+      if (id === moduleId) return resolvedId
+      return null
+    },
+    async load(id) {
+      if (id !== resolvedId) return null
+
+      // Scan componentsDir for .js files and extract __meta
+      const fs = await import('fs')
+      const path = await import('path')
+
+      const dir = path.default.resolve(componentsDir)
+      if (!fs.default.existsSync(dir)) {
+        this.warn(`[wcc-react-components] Directory not found: ${dir}`)
+        return 'export {}'
+      }
+
+      const files = fs.default.readdirSync(dir).filter(f => f.endsWith('.js'))
+      const components = []
+
+      for (const file of files) {
+        const content = fs.default.readFileSync(path.default.join(dir, file), 'utf-8')
+        const metaMatch = content.match(/static __meta\s*=\s*(\{[^}]+\})/)
+        if (!metaMatch) continue
+
+        try {
+          // Parse the meta object (it's a JS object literal, evaluate safely)
+          const metaStr = metaMatch[1]
+            .replace(/'/g, '"')
+            .replace(/(\w+):/g, '"$1":')
+            .replace(/,\s*}/g, '}')
+            .replace(/,\s*]/g, ']')
+          const meta = JSON.parse(metaStr)
+
+          if (!meta.tag || !meta.tag.startsWith(prefix)) continue
+
+          const pascalName = meta.tag.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('')
+          components.push({ meta, pascalName, file })
+        } catch (e) {
+          // Skip files with unparseable meta
+        }
+      }
+
+      if (components.length === 0) {
+        return 'export {}'
+      }
+
+      // Generate the virtual module code
+      let code = `import { createWccWrapper } from '@sprlab/wccompiler/adapters/react';\n`
+
+      // Import each component file to ensure registration
+      for (const comp of components) {
+        code += `import '${path.default.resolve(dir, comp.file)}';\n`
+      }
+
+      code += '\n'
+
+      // Generate wrapper exports
+      for (const comp of components) {
+        const eventsArr = JSON.stringify(comp.meta.events || [])
+        const modelsArr = JSON.stringify(comp.meta.models || [])
+        code += `export const ${comp.pascalName} = createWccWrapper('${comp.meta.tag}', { events: ${eventsArr}, models: ${modelsArr} });\n`
+      }
+
+      return code
+    }
+  }
+}

package/integrations/vue.js

@@ -1,37 +1,39 @@
 /**
  * Vue Vite plugin for WCC custom elements.
- * Configures isCustomElement and enables v-model:propName on custom elements.
+ * Configures isCustomElement and provides enhanced DX for v-model modifiers and scoped slots.
  *
  * @module @sprlab/wccompiler/integrations/vue
  *
- * IMPORTANT: This file is for vite.config.js (Node.js context).
- * For browser-side, use app.use(wccVue) from '@sprlab/wccompiler/adapters/vue'.
+ * IMPORTANT: This plugin is OPTIONAL for basic usage.
+ * WCC components work in Vue with zero WCC-specific config:
+ *   - Props: <wcc-counter :count="val"></wcc-counter>
+ *   - Events: <wcc-counter @count-changed="handler($event.detail)"></wcc-counter>
+ *   - v-model: <wcc-counter v-model:count="val"></wcc-counter> (Vue 3.4+ CE support)
+ *   - Named slots: <div slot="header">...</div>
  *
- * @example vite.config.js
+ * The only Vue-specific config needed (same as Lit, Shoelace, FAST):
+ *   vue({ template: { compilerOptions: { isCustomElement: tag => tag.includes('-') } } })
+ *
+ * This plugin adds:
+ *   1. isCustomElement config (so you don't need to write it manually)
+ *   2. v-model modifier support (.trim, .number, .lazy)
+ *   3. Scoped slot syntax: <template #item="{ name }">{{name}}</template>
+ *
+ * @example vite.config.js (with plugin — full DX)
  * ```js
  * import { wccVuePlugin } from '@sprlab/wccompiler/integrations/vue'
  * export default { plugins: [wccVuePlugin()] }
  * ```
  *
- * @example main.js (optional — only needed if NOT using wccVuePlugin)
+ * @example vite.config.js (without plugin — still works for basic usage)
  * ```js
- * import { wccVue } from '@sprlab/wccompiler/adapters/vue'
- * app.use(wccVue)
- * ```
- *
- * 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>
+ * import vue from '@vitejs/plugin-vue'
+ * export default {
+ *   plugins: [vue({
+ *     template: { compilerOptions: { isCustomElement: tag => tag.includes('-') } }
+ *   })]
+ * }
  * ```
- *
- * 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'
@@ -63,6 +65,13 @@ export function wccVuePlugin(options = {}) {
 
       let result = code
 
+      // NOTE: As of WCC 0.10.3+, v-model:propName works WITHOUT this plugin
+      // because the compiled component emits 'update:propName' natively (Vue 3.4+ CE support).
+      // This transform is still useful for:
+      //   1. v-model modifiers (.trim, .number) — Vue doesn't apply modifiers to CE v-model natively
+      //   2. Older Vue versions (< 3.4) that don't support v-model on CE via update:propName
+      //   3. Scoped slot syntax transformation ({{prop}} → {%prop%})
+
       // Transform v-model:propName="expr" on custom elements (tags with hyphens)
       // Also handles modifiers: v-model:propName.trim.number="expr"
       // → :propName="expr" @propName-changed="expr = $event.detail"

package/lib/codegen.js

@@ -1773,9 +1773,25 @@ export function generateComponent(parseResult, options = {}) {
   }
 
   // _emit method (if emits declared)
+  // Emits the event in multiple formats for cross-framework compatibility:
+  //   1. Original name (kebab-case) — for direct addEventListener and Angular (event-name)
+  //   2. camelCase — for Angular WccEvents directive
+  //   3. lowercase — for React 19 (onEventName → addEventListener('eventname'))
   if (emits.length > 0) {
     lines.push('  _emit(name, detail) {');
-    lines.push('    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));');
+    lines.push('    const evt = { detail, bubbles: true, composed: true };');
+    lines.push('    this.dispatchEvent(new CustomEvent(name, evt));');
+    // camelCase version (only if name contains hyphens)
+    lines.push("    if (name.includes('-')) {");
+    lines.push("      const camel = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());");
+    lines.push('      this.dispatchEvent(new CustomEvent(camel, evt));');
+    // lowercase version for React 19
+    lines.push('      this.dispatchEvent(new CustomEvent(camel.toLowerCase(), evt));');
+    lines.push('    } else {');
+    // If no hyphens, just emit lowercase (for React 19)
+    lines.push('      const lower = name.toLowerCase();');
+    lines.push('      if (lower !== name) this.dispatchEvent(new CustomEvent(lower, evt));');
+    lines.push('    }');
     lines.push('  }');
     lines.push('');
   }
@@ -1783,10 +1799,14 @@ export function generateComponent(parseResult, options = {}) {
   // _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
+  //   2. propName-changed — kebab-case for direct addEventListener
+  //   3. propNameChanged — camelCase for Angular WccEvents / direct binding
+  //   4. propnamechanged — lowercase for React 19 (onPropnameChanged → 'propnamechanged')
+  //   5. propNameChange — for Angular [(prop)] banana-box syntax
+  //   6. update:propName — for Vue v-model:propName on custom elements (Vue 3.4+)
   for (const md of modelDefs) {
     const kebabName = camelToKebab(md.name);
+    const camelChanged = `${md.name}Changed`;
     lines.push(`  _modelSet_${md.name}(newVal) {`);
     lines.push(`    const oldVal = this._m_${md.name}();`);
     lines.push(`    this._m_${md.name}(newVal);`);
@@ -1795,10 +1815,16 @@ export function generateComponent(parseResult, options = {}) {
     lines.push(`      bubbles: true,`);
     lines.push(`      composed: true`);
     lines.push(`    }));`);
-    // Vue: propName-changed (not filtered by Vue's isModelListener)
+    // Kebab-case: prop-name-changed
     lines.push(`    this.dispatchEvent(new CustomEvent('${kebabName}-changed', { detail: newVal, bubbles: true }));`);
-    // Angular: propNameChange (Angular's [(prop)] listens for propChange)
+    // camelCase: propNameChanged
+    lines.push(`    this.dispatchEvent(new CustomEvent('${camelChanged}', { detail: newVal, bubbles: true }));`);
+    // lowercase: propnamechanged (React 19)
+    lines.push(`    this.dispatchEvent(new CustomEvent('${camelChanged.toLowerCase()}', { detail: newVal, bubbles: true }));`);
+    // Angular banana-box: propNameChange
     lines.push(`    this.dispatchEvent(new CustomEvent('${md.name}Change', { detail: newVal, bubbles: true }));`);
+    // Vue v-model: update:propName
+    lines.push(`    this.dispatchEvent(new CustomEvent('update:${md.name}', { detail: newVal, bubbles: true }));`);
     lines.push('  }');
     lines.push('');
   }

package/package.json

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