@sprlab/wccompiler 0.13.0 → 0.15.0

package/adapters/react.js

@@ -1,114 +1,114 @@
-/**
- * React browser-side hooks for WCC custom elements.
- * Bridges CustomEvent to React's ref-based event system.
- *
- * @module @sprlab/wccompiler/adapters/react
- *
- * NOTE: These hooks are optional utilities for React 18 or edge cases.
- * With React 19 + wccReactPlugin, WCC components work natively:
- *
- *   <WccCounter count={state} oncountchanged={(e) => setState(e.detail)} />
- *   <WccCard>
- *     <WccCard.Header><strong>Title</strong></WccCard.Header>
- *   </WccCard>
- *
- * The plugin handles PascalCase → kebab-case, compound components, and
- * scoped slots at build time. No runtime wrappers needed.
- *
- * These hooks are for cases where you need manual event bridging
- * (e.g., React 18, non-Vite builds, or dynamic event names):
- *
- *   import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
- */
-
-import { useRef, useEffect } from 'react'
-
-/**
- * Hook that attaches a CustomEvent listener to a DOM element via ref.
- *
- * Supports two calling conventions:
- * - useWccEvent(ref, eventName, handler) — uses an existing ref
- * - useWccEvent(eventName, handler) — creates and returns a new ref
- *
- * @param {import('react').RefObject<HTMLElement> | string} refOrEventName
- * @param {string | ((event: CustomEvent) => void)} eventNameOrHandler
- * @param {((event: CustomEvent) => void)} [handler]
- * @returns {import('react').RefObject<HTMLElement> | void}
- *
- * @example
- * // Form 1: Let the hook create the ref
- * const ref = useWccEvent('count-changed', (e) => setCount(e.detail))
- * <wcc-counter ref={ref}></wcc-counter>
- *
- * // Form 2: Pass an existing ref
- * const myRef = useRef(null)
- * useWccEvent(myRef, 'count-changed', (e) => setCount(e.detail))
- * <wcc-counter ref={myRef}></wcc-counter>
- */
-export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
-  const isRefForm = typeof refOrEventName !== 'string'
-  const elementRef = isRefForm ? refOrEventName : useRef(null)
-  const eventName = isRefForm ? eventNameOrHandler : refOrEventName
-  const callback = isRefForm ? handler : eventNameOrHandler
-
-  const handlerRef = useRef(callback)
-  handlerRef.current = callback
-
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-    const listener = (e) => handlerRef.current(e)
-    el.addEventListener(eventName, listener)
-    return () => el.removeEventListener(eventName, listener)
-  }, [eventName])
-
-  if (!isRefForm) return elementRef
-}
-
-/**
- * Hook for two-way binding with WCC defineModel props.
- *
- * @param {string} propName - The model prop name (e.g., 'value', 'count')
- * @param {*} value - Current React state value
- * @param {(newValue: *) => void} setValue - React state setter
- * @param {import('react').RefObject<HTMLElement>} [existingRef] - Optional existing ref
- * @returns {import('react').RefObject<HTMLElement>} Ref to attach to the WCC element
- *
- * @example
- * const [text, setText] = useState('')
- * const inputRef = useWccModel('value', text, setText)
- * <wcc-input ref={inputRef}></wcc-input>
- */
-export function useWccModel(propName, value, setValue, existingRef) {
-  const internalRef = useRef(null)
-  const elementRef = existingRef || internalRef
-
-  const setValueRef = useRef(setValue)
-  setValueRef.current = setValue
-
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-
-    const listener = (e) => {
-      if (e.detail && e.detail.prop === propName) {
-        setValueRef.current(e.detail.value)
-      }
-    }
-
-    el.addEventListener('wcc:model', listener)
-    return () => el.removeEventListener('wcc:model', listener)
-  }, [propName])
-
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-    if (value != null) {
-      el.setAttribute(propName, String(value))
-    } else {
-      el.removeAttribute(propName)
-    }
-  }, [propName, value])
-
-  return elementRef
-}
+/**
+ * React browser-side hooks for WCC custom elements.
+ * Bridges CustomEvent to React's ref-based event system.
+ *
+ * @module @sprlab/wccompiler/adapters/react
+ *
+ * NOTE: These hooks are optional utilities for React 18 or edge cases.
+ * With React 19 + wccReactPlugin, WCC components work natively:
+ *
+ *   <WccCounter count={state} oncountchanged={(e) => setState(e.detail)} />
+ *   <WccCard>
+ *     <WccCard.Header><strong>Title</strong></WccCard.Header>
+ *   </WccCard>
+ *
+ * The plugin handles PascalCase → kebab-case, compound components, and
+ * scoped slots at build time. No runtime wrappers needed.
+ *
+ * These hooks are for cases where you need manual event bridging
+ * (e.g., React 18, non-Vite builds, or dynamic event names):
+ *
+ *   import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ */
+
+import { useRef, useEffect } from 'react'
+
+/**
+ * Hook that attaches a CustomEvent listener to a DOM element via ref.
+ *
+ * Supports two calling conventions:
+ * - useWccEvent(ref, eventName, handler) — uses an existing ref
+ * - useWccEvent(eventName, handler) — creates and returns a new ref
+ *
+ * @param {import('react').RefObject<HTMLElement> | string} refOrEventName
+ * @param {string | ((event: CustomEvent) => void)} eventNameOrHandler
+ * @param {((event: CustomEvent) => void)} [handler]
+ * @returns {import('react').RefObject<HTMLElement> | void}
+ *
+ * @example
+ * // Form 1: Let the hook create the ref
+ * const ref = useWccEvent('count-changed', (e) => setCount(e.detail))
+ * <wcc-counter ref={ref}></wcc-counter>
+ *
+ * // Form 2: Pass an existing ref
+ * const myRef = useRef(null)
+ * useWccEvent(myRef, 'count-changed', (e) => setCount(e.detail))
+ * <wcc-counter ref={myRef}></wcc-counter>
+ */
+export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
+  const isRefForm = typeof refOrEventName !== 'string'
+  const elementRef = isRefForm ? refOrEventName : useRef(null)
+  const eventName = isRefForm ? eventNameOrHandler : refOrEventName
+  const callback = isRefForm ? handler : eventNameOrHandler
+
+  const handlerRef = useRef(callback)
+  handlerRef.current = callback
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+    const listener = (e) => handlerRef.current(e)
+    el.addEventListener(eventName, listener)
+    return () => el.removeEventListener(eventName, listener)
+  }, [eventName])
+
+  if (!isRefForm) return elementRef
+}
+
+/**
+ * Hook for two-way binding with WCC defineModel props.
+ *
+ * @param {string} propName - The model prop name (e.g., 'value', 'count')
+ * @param {*} value - Current React state value
+ * @param {(newValue: *) => void} setValue - React state setter
+ * @param {import('react').RefObject<HTMLElement>} [existingRef] - Optional existing ref
+ * @returns {import('react').RefObject<HTMLElement>} Ref to attach to the WCC element
+ *
+ * @example
+ * const [text, setText] = useState('')
+ * const inputRef = useWccModel('value', text, setText)
+ * <wcc-input ref={inputRef}></wcc-input>
+ */
+export function useWccModel(propName, value, setValue, existingRef) {
+  const internalRef = useRef(null)
+  const elementRef = existingRef || internalRef
+
+  const setValueRef = useRef(setValue)
+  setValueRef.current = setValue
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+
+    const listener = (e) => {
+      if (e.detail && e.detail.prop === propName) {
+        setValueRef.current(e.detail.value)
+      }
+    }
+
+    el.addEventListener('wcc:model', listener)
+    return () => el.removeEventListener('wcc:model', listener)
+  }, [propName])
+
+  useEffect(() => {
+    const el = elementRef.current
+    if (!el) return
+    if (value != null) {
+      el.setAttribute(propName, String(value))
+    } else {
+      el.removeAttribute(propName)
+    }
+  }, [propName, value])
+
+  return elementRef
+}

package/adapters/vue.js

@@ -1,103 +1,103 @@
-/**
- * Vue adapter for WCC defineModel (OPTIONAL — only needed without 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.
- *
- * 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.
- *
- * Setup:
- *   import { createApp } from 'vue'
- *   import { wccVue } from '@sprlab/wccompiler/adapters/vue'
- *   app.use(wccVue)
- *
- * Usage:
- *   <wcc-input v-wcc-model:value="textRef"></wcc-input>
- *   <wcc-form v-wcc-model:count="countRef"></wcc-form>
- *
- * @module @sprlab/wccompiler/adapters/vue
- */
-
-// ── Vue directive: v-wcc-model ──────────────────────────────────────
-// Fallback for non-Vite setups. Listens for wcc:model and filters by prop name.
-
-/**
- * Vue custom directive for two-way binding with WCC defineModel props.
- * Listens for `wcc:model` CustomEvent and filters by prop name.
- */
-export const vWccModel = {
-  mounted(el, binding) {
-    const propName = binding.arg;
-    if (!propName) {
-      console.warn('[v-wcc-model] Missing argument. Usage: v-wcc-model:propName="ref"');
-      return;
-    }
-
-    // Set initial value (parent → child)
-    if (binding.value != null) {
-      el.setAttribute(propName, String(binding.value));
-    }
-
-    // Listen for wcc:model (WCC → Vue), filter by prop name
-    const handler = (e) => {
-      if (e.detail?.prop !== propName) return;
-      const newVal = e.detail.value;
-      // 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 = newVal;
-            } else {
-              setupState[key] = newVal;
-            }
-            break;
-          }
-        }
-      }
-    };
-
-    el.addEventListener('wcc:model', handler);
-    el.__wccModelHandlers = el.__wccModelHandlers || {};
-    el.__wccModelHandlers[propName] = { handler, eventName: 'wcc:model' };
-  },
-
-  updated(el, binding) {
-    const propName = binding.arg;
-    if (!propName) return;
-
-    if (binding.value != null) {
-      el.setAttribute(propName, String(binding.value));
-    } else {
-      el.removeAttribute(propName);
-    }
-  },
-
-  beforeUnmount(el, binding) {
-    const propName = binding.arg;
-    if (!propName) return;
-
-    const entry = el.__wccModelHandlers?.[propName];
-    if (entry) {
-      el.removeEventListener(entry.eventName, entry.handler);
-      delete el.__wccModelHandlers[propName];
-    }
-  }
-};
-
-// ── Vue Plugin ──────────────────────────────────────────────────────
-
-/**
- * Vue plugin that registers v-wcc-model directive globally.
- * Only needed if NOT using wccVuePlugin() in vite.config.js.
- */
-export const wccVue = {
-  install(app) {
-    app.directive('wcc-model', vWccModel);
-  }
-};
+/**
+ * Vue adapter for WCC defineModel (OPTIONAL — only needed without 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.
+ *
+ * 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.
+ *
+ * Setup:
+ *   import { createApp } from 'vue'
+ *   import { wccVue } from '@sprlab/wccompiler/adapters/vue'
+ *   app.use(wccVue)
+ *
+ * Usage:
+ *   <wcc-input v-wcc-model:value="textRef"></wcc-input>
+ *   <wcc-form v-wcc-model:count="countRef"></wcc-form>
+ *
+ * @module @sprlab/wccompiler/adapters/vue
+ */
+
+// ── Vue directive: v-wcc-model ──────────────────────────────────────
+// Fallback for non-Vite setups. Listens for wcc:model and filters by prop name.
+
+/**
+ * Vue custom directive for two-way binding with WCC defineModel props.
+ * Listens for `wcc:model` CustomEvent and filters by prop name.
+ */
+export const vWccModel = {
+  mounted(el, binding) {
+    const propName = binding.arg;
+    if (!propName) {
+      console.warn('[v-wcc-model] Missing argument. Usage: v-wcc-model:propName="ref"');
+      return;
+    }
+
+    // Set initial value (parent → child)
+    if (binding.value != null) {
+      el.setAttribute(propName, String(binding.value));
+    }
+
+    // Listen for wcc:model (WCC → Vue), filter by prop name
+    const handler = (e) => {
+      if (e.detail?.prop !== propName) return;
+      const newVal = e.detail.value;
+      // 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 = newVal;
+            } else {
+              setupState[key] = newVal;
+            }
+            break;
+          }
+        }
+      }
+    };
+
+    el.addEventListener('wcc:model', handler);
+    el.__wccModelHandlers = el.__wccModelHandlers || {};
+    el.__wccModelHandlers[propName] = { handler, eventName: 'wcc:model' };
+  },
+
+  updated(el, binding) {
+    const propName = binding.arg;
+    if (!propName) return;
+
+    if (binding.value != null) {
+      el.setAttribute(propName, String(binding.value));
+    } else {
+      el.removeAttribute(propName);
+    }
+  },
+
+  beforeUnmount(el, binding) {
+    const propName = binding.arg;
+    if (!propName) return;
+
+    const entry = el.__wccModelHandlers?.[propName];
+    if (entry) {
+      el.removeEventListener(entry.eventName, entry.handler);
+      delete el.__wccModelHandlers[propName];
+    }
+  }
+};
+
+// ── Vue Plugin ──────────────────────────────────────────────────────
+
+/**
+ * Vue plugin that registers v-wcc-model directive globally.
+ * Only needed if NOT using wccVuePlugin() in vite.config.js.
+ */
+export const wccVue = {
+  install(app) {
+    app.directive('wcc-model', vWccModel);
+  }
+};