@sprlab/wccompiler 0.9.3 → 0.9.4

package/adapters/react.js

@@ -0,0 +1,103 @@
+/**
+ * React browser-side hooks for WCC custom elements.
+ * Bridges CustomEvent to React's ref-based event system.
+ *
+ * @module @sprlab/wccompiler/adapters/react
+ *
+ * IMPORTANT: Import hooks from THIS file (not from integrations/react).
+ * The integrations/react file is for vite.config.js only (contains Babel).
+ *
+ * Usage:
+ *   import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ *
+ *   // Listen to custom events
+ *   const ref = useWccEvent('change', (e) => console.log(e.detail))
+ *   <wcc-counter ref={ref}></wcc-counter>
+ *
+ *   // Two-way binding with defineModel
+ *   const [text, setText] = useState('')
+ *   const inputRef = useWccModel('value', text, setText)
+ *   <wcc-input ref={inputRef}></wcc-input>
+ */
+
+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}
+ */
+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/integrations/react.js

@@ -1,126 +1,30 @@
 /**
- * React hook for WCC custom element events.
- * Bridges CustomEvent to React's ref-based event system.
+ * React Vite plugin for WCC custom elements.
+ * Transforms idiomatic React JSX slot patterns into WCC-compatible slot markup.
  *
  * @module @sprlab/wccompiler/integrations/react
  *
- * Usage:
- *   // Form 1: Pass an existing ref
- *   const ref = useRef(null)
- *   useWccEvent(ref, 'change', (e) => console.log(e.detail))
- *   <wcc-counter ref={ref}></wcc-counter>
+ * IMPORTANT: This file is for vite.config.js (Node.js context) ONLY.
+ * For browser-side hooks, import from '@sprlab/wccompiler/adapters/react'.
  *
- *   // Form 2: Let the hook create the ref
- *   const ref = useWccEvent('change', (e) => console.log(e.detail))
- *   <wcc-counter ref={ref}></wcc-counter>
+ * @example vite.config.js
+ * ```js
+ * import { wccReactPlugin } from '@sprlab/wccompiler/integrations/react'
+ * export default { plugins: [wccReactPlugin()] }
+ * ```
  *
- *   // Form 3: Two-way binding with defineModel
- *   const [value, setValue] = useState('')
- *   const ref = useWccModel('value', value, setValue)
- *   <wcc-input ref={ref}></wcc-input>
+ * @example Component (browser — import hooks from adapters)
+ * ```jsx
+ * import { useWccEvent, useWccModel } from '@sprlab/wccompiler/adapters/react'
+ * ```
  */
 
-import { useRef, useEffect, useCallback } from 'react'
 import { parse } from '@babel/parser'
 import _traverse from '@babel/traverse'
 import _generate from '@babel/generator'
 const traverse = _traverse.default || _traverse
 const generate = _generate.default || _generate
 
-/**
- * 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}
- */
-export function useWccEvent(refOrEventName, eventNameOrHandler, handler) {
-  // Detect calling convention
-  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])
-
-  // Only return ref if we created it (Form 2)
-  if (!isRefForm) return elementRef
-}
-
-
-/**
- * Hook for two-way binding with WCC defineModel props.
- *
- * Listens for `wcc:model` events on the element and calls the setter
- * when the matching prop changes internally. Also syncs the React state
- * to the element's attribute when the value changes externally.
- *
- * @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
- * ```jsx
- * function App() {
- *   const [text, setText] = useState('')
- *   const inputRef = useWccModel('value', text, setText)
- *   return <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
-
-  // Listen for wcc:model events from the component (child → parent)
-  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])
-
-  // Sync React state to the element's attribute (parent → child)
-  useEffect(() => {
-    const el = elementRef.current
-    if (!el) return
-    if (value != null) {
-      el.setAttribute(propName, String(value))
-    } else {
-      el.removeAttribute(propName)
-    }
-  }, [propName, value])
-
-  return elementRef
-}
-
-
 /**
  * JSX attribute name to HTML attribute name mapping.
  * React uses camelCase for some attributes that HTML uses lowercase.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {
@@ -9,7 +9,8 @@
     "./integrations/react": "./integrations/react.js",
     "./integrations/angular": "./integrations/angular.js",
     "./adapters/vue": "./adapters/vue.js",
-    "./adapters/angular": "./adapters/angular.js"
+    "./adapters/angular": "./adapters/angular.js",
+    "./adapters/react": "./adapters/react.js"
   },
   "bin": {
     "wcc": "./bin/wcc.js"