zag-ripple 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "RippleJS Adapter for Zag JS",
   "keywords": [
     "js",

package/src/machine.ripple

@@ -108,6 +108,40 @@ export function useMachine(
 
   const refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
+  const send = (event) => {
+    
+    if (status !== MachineStatus.Started) return
+
+    previousEventRef.current = eventRef.current
+    eventRef.current = event
+
+    let currentState = state.get()
+
+    const transitions = 
+      machine.states[currentState]?.on?.[event.type] ?? 
+      machine.on?.[event.type]
+
+    const transition = choose(transitions)
+    if (!transition) return
+
+    // save current transition
+    transitionRef.current = transition
+    const target = transition.target ?? currentState
+
+    debug("transition", event.type, transition.target || currentState, `(${transition.actions})`)
+
+    const changed = target !== currentState
+    if (changed) {
+      state.set(target)
+    } else if (transition.reenter && !changed) {
+      // reenter will re-invoke the current state
+      state.invoke?.(currentState, currentState)
+    } else {
+      // call transition actions
+      action(transition.actions ?? [])
+    }
+  }
+  
   const getParams = () => ({
     state: getState(),
     context: ctx,
@@ -220,45 +254,27 @@ export function useMachine(
 
   let status = MachineStatus.NotStarted
 
-   // Initialize machine immediately - RippleJS components run imperatively
-   status = MachineStatus.Started
-   debug("initializing...")
-   const initialState = machine.initialState({ prop })
-   state.set(initialState)
-
-   const send = (event) => {
-    console.log("send", event)
-     if (status !== MachineStatus.Started) return
-
-     previousEventRef.current = eventRef.current
-     eventRef.current = event
-
-     let currentState = state.get()
-
-     const transitions = 
-       machine.states[currentState]?.on?.[event.type] ?? 
-       machine.on?.[event.type]
-
-     const transition = choose(transitions)
-     if (!transition) return
-
-     // save current transition
-     transitionRef.current = transition
-     const target = transition.target ?? currentState
-
-     debug("transition", event.type, transition.target || currentState, `(${transition.actions})`)
-
-     const changed = target !== currentState
-     if (changed) {
-       state.set(target)
-     } else if (transition.reenter && !changed) {
-       // reenter will re-invoke the current state
-       state.invoke?.(currentState, currentState)
-     } else {
-       // call transition actions
-       action(transition.actions ?? [])
-     }
-   }
+  effect(() => {
+    queueMicrotask(() => {
+      const started = status === MachineStatus.Started
+      status = MachineStatus.Started
+      debug(started ? "rehydrating..." : "initializing...")
+      state.invoke(state.initial, INIT_STATE)
+    })
+
+    return () => {
+      debug("unmounting...")
+      status = MachineStatus.Stopped
+      effects.forEach((fn) => fn?.())
+      effects = new Map()
+      transitionRef.current = null
+      queueMicrotask(() => {
+        action(machine.exit)
+      })
+    }
+  })
+
+  
 
   machine.watch?.(getParams())
 

package/src/normalize-props.ripple

@@ -34,16 +34,9 @@ export function toStyleString(style: Record<string, number | string>) {
   return string
 }
 
-const preserveKeys = new Set<string>(
-  "viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(
-    ",",
-  ),
-)
-
 function toRippleProp(key: string) {
   if (key in propMap) return propMap[key]
-  if (preserveKeys.has(key)) return key
-  return key.toLowerCase()
+  return key
 }
 
 function toRipplePropValue(key: string, value: Dict[string]) {