zag-ripple 0.0.8 → 0.0.9

package/package.json

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

package/src/bindable.ripple

@@ -1,63 +1,48 @@
-import { identity, isFunction } from "@zag-js/utils"
-import { track, effect, flushSync, untrack } from "ripple"
+import { isFunction } from "@zag-js/utils"
+import { track, effect } from "ripple"
 
-export function createBindable(props) {
+export function bindable(props) {
   const initial = props().defaultValue ?? props().value
   const eq = props().isEqual ?? Object.is
 
-  let value = track(initial)
-  let controlled = track(() => props().value !== undefined)
-
-  let valueRef = { current: untrack(() => @value) }
-  let prevValue = { current: undefined }
-
-  effect(() => {
-    const v = @controlled ? props().value : @value
-    valueRef = { current: v }
-    prevValue = { current: v }
-  })
-
-  const setValueFn = (v) => {
-    const next = isFunction(v) ? v(valueRef.current) : v
-    const prev = prevValue.current
-    if (props().debug) {
-      console.log(`[bindable > ${props().debug}] setValue`, { next, prev })
-    }
-
-    if (!@controlled) {
-      @value = next;
-    }
-    if (!eq(next, prev)) {
-      props().onChange?.(next, prev)
-    }
-  }
-
-  function get(): T {
-    return @controlled ? props().value : @value
-  }
+  const v = track(initial)
+  const controlled = track(() => props().value !== undefined)
+  const valueRef = track(@controlled ? props().value : @v)
 
   return {
     initial,
     ref: valueRef,
-    get,
-    set(val) {
-      const exec = props().sync ? flushSync : identity
-      exec(() => setValueFn(val))
+    get() {
+      return (@controlled ? props().value : @v)
     },
-    invoke: (nextValue, prevValue) => {
+    set(val){
+      const prev = @controlled ? props().value : @v
+      const next = isFunction(val) ? val(prev) : val
+      if (props().debug) {
+        console.log(`[bindable > ${props().debug}] setValue`, { next, prev })
+      }
+      
+      if (!@controlled) @v = next
+      
+      if (!eq(next, prev)) {
+        props().onChange?.(next, prev)
+      }
+    },
+    invoke(nextValue, prevValue) {
       props().onChange?.(nextValue, prevValue)
     },
-    hash: (value) => {
+    hash(value) {
       return props().hash?.(value) ?? String(value)
     },
   }
+
 }
 
-createBindable.cleanup = (fn: VoidFunction) => {
-  effect(() => fn(), [])
+bindable.cleanup = (fn: VoidFunction) => {
+  effect(() => fn())
 }
 
-createBindable.ref = (defaultValue: any) => {
+bindable.ref = (defaultValue: any) => {
   let value = defaultValue
   return {
     get: () => value,

package/src/machine.ripple

@@ -11,10 +11,10 @@ import type {
   Service,
 } from "@zag-js/core"
 import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
-import {  ensure, isFunction, isPlainObject, isString, toArray, warn } from "@zag-js/utils"
-import { track, trackSplit, untrack, effect, flushSync } from "ripple"
-import { createBindable } from "./bindable.ripple"
-import { createRefs } from "./refs.ripple"
+import { ensure, isFunction, isPlainObject, isString, toArray, warn } from "@zag-js/utils"
+import { track, trackSplit, effect, flushSync } from "ripple"
+import { bindable } from "./bindable.ripple"
+import { useRefs } from "./refs.ripple"
 import { createTrack } from "./track.ripple"
 
 function access(userProps) {
@@ -29,10 +29,10 @@ function compact(obj) {
   for (const key of keys) {
     const value = (obj)[key]
     if (@value !== undefined) {
-      filtered[key as keyof T] = compact(@value)
+      filtered[key] = compact(@value)
     }
   }
-  return filtered as T
+  return filtered
 }
 
 export function useMachine(
@@ -43,6 +43,7 @@ export function useMachine(
   let scope = track(() => {
     return createScope({ id: @id, ids: @ids, getRootNode: @getRootNode })
   })
+
   const debug = (...args: any[]) => {
     if (machine.debug) console.log(...args)
   }
@@ -56,7 +57,7 @@ export function useMachine(
 
   const context = machine.context?.({
     prop,
-    bindable: createBindable,
+    bindable: bindable,
     get scope() {
       return @scope
     },
@@ -109,51 +110,18 @@ export function useMachine(
 
   const getState = () => ({
     ...state,
-    matches(...values) {
-      const current = state.get()
-      return values.includes(current)
-    },
     hasTag(tag) {
-      const current = state.get()
-      return !!machine.states[current]?.tags?.includes(tag)
+      const currentState = state.get()
+      return !!machine.states[currentState]?.tags?.includes(tag)
+    },
+    matches(...values) {
+      const currentState = state.get()
+      return values.includes(currentState)
     },
   })
 
-  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 refs = useRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
-    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,
@@ -226,7 +194,7 @@ export function useMachine(
     })
   }
 
-  const state = createBindable(() => ({
+  const state = bindable(() => ({
     defaultValue: machine.initialState({ prop }),
     onChange(nextState: string, prevState: string | undefined) {
       // compute effects: exit -> transition -> enter
@@ -239,14 +207,12 @@ export function useMachine(
       }
 
       // exit actions
-      if (prevState && prevState !== INIT_STATE) {
+      if (prevState) {
         action(machine.states[prevState]?.exit)
       }
 
       // transition actions
-      if (transitionRef.current?.actions) {
-        action(transitionRef.current.actions)
-      }
+      action(transitionRef.current?.actions)
 
       // enter effects
       const cleanup = effectFn( machine.states[nextState]?.effects)
@@ -277,9 +243,11 @@ export function useMachine(
     return () => {
       debug("unmounting...")
       status = MachineStatus.Stopped
+
       effects.forEach((fn) => fn?.())
       effects = new Map()
       transitionRef.current = null
+      
       queueMicrotask(() => {
         action(machine.exit)
       })
@@ -287,6 +255,39 @@ export function useMachine(
   })
 
 
+  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 change is high priority
+      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 ?? [])
+    }
+  }
+  
+
   machine.watch?.(getParams())
 
   return {

package/src/refs.ripple

@@ -1,6 +1,4 @@
-import { track } from "ripple";
-
-export function createRefs(refs) {
+export function useRefs(refs) {
   const ref = { current: refs }
   return {
     get(key) {

package/src/track.ripple

@@ -1,10 +1,10 @@
-import { isEqual, isFunction } from "@zag-js/utils";
-import { effect, track } from "ripple";
+import { isEqual } from "@zag-js/utils";
+import { effect } from "ripple";
 
-const access = (v) => {
-  if (isFunction(v)) return v()
-  return v;
-};
+const access = (value: any) => {
+  if (typeof value === "function") return value()
+  return value
+}
 
 export const createTrack = (deps: any[], effectCallback: VoidFunction   ) => {
   let prevDeps: any[] = [];