zag-ripple 0.0.1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "zag-ripple",
+  "version": "0.0.1",
+  "description": "RippleJS Adapter for Zag JS",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "zag-js",
+    "RippleJS",
+    "ripple"
+  ],
+  "author": "Abraham Aremu <anubra266@gmail.com>",
+  "homepage": "https://github.com/anubra266/zag-ripple#readme",
+  "license": "MIT",
+  "main": "src/index.ripple",
+  "repository": "https://github.com/anubra266/zag-ripple/tree/main/packages/zag-ripple",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/anubra266i/zag-ripple/issues"
+  },
+  "scripts": {
+    "test": "echo \"No test specified\""
+  },
+  "dependencies": {
+    "@zag-js/core": "^1.3.3",
+    "@zag-js/types": "latest",
+    "@zag-js/utils": "latest"
+  },
+  "devDependencies": {
+    "typescript": "~5.6.2"
+  }
+}

package/src/bindable.ripple

@@ -0,0 +1,68 @@
+import { identity, isFunction } from "@zag-js/utils"
+import { track, effect, flushSync, untrack } from "ripple"
+
+export function createBindable(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
+  }
+
+  return {
+    initial,
+    ref: valueRef,
+    get,
+    set(val) {
+      const exec = props().sync ? flushSync : identity
+      exec(() => setValueFn(val))
+    },
+    invoke: (nextValue, prevValue) => {
+      props().onChange?.(nextValue, prevValue)
+    },
+    hash: (value) => {
+      return props().hash?.(value) ?? String(value)
+    },
+  }
+}
+
+createBindable.cleanup = (_fn: VoidFunction) => {
+  effect(() => fn, [])
+}
+
+createBindable.ref = (defaultValue: any) => {
+  let value = defaultValue
+  return {
+    get: () => value,
+    set: (next) => {
+      value = next
+    },
+  }
+}

package/src/index.ripple

@@ -0,0 +1,3 @@
+export { mergeProps } from "@zag-js/core"
+export * from "./normalize-props.ripple"
+export * from "./machine.ripple"

package/src/machine.ripple

@@ -0,0 +1,293 @@
+import type {
+  ActionsOrFn,
+  BindableContext,
+  ChooseFn,
+  ComputedFn,
+  EffectsOrFn,
+  GuardFn,
+  Machine,
+  MachineSchema,
+  Params,
+  Service,
+} from "@zag-js/core"
+import { createScope, INIT_STATE, MachineStatus } from "@zag-js/core"
+import { compact, ensure, isFunction, isString, toArray, warn } from "@zag-js/utils"
+import { track, effect, flushSync } from "ripple"
+import { createBindable } from "./bindable.ripple"
+import { createRefs } from "./refs.ripple"
+import { createTrack } from "./track.ripple"
+
+function access(userProps) {
+  if (isFunction(userProps)) return userProps()
+  return userProps
+}
+
+export function useMachine(
+  machine,
+  userProps = {},
+) {
+  let scope = track(() => {
+    const { id, ids, getRootNode } = access(userProps)
+    return createScope({ id, ids, getRootNode })
+  })
+
+  const debug = (...args: any[]) => {
+    if (machine.debug) console.log(...args)
+  }
+
+  let props = track(() => 
+    machine.props?.({ props: compact(access(userProps)), scope: @scope }) ?? access(userProps)
+  )
+  
+  const prop = useProp(() => @props)
+
+  const context = machine.context?.({
+    prop,
+    bindable: createBindable,
+    get scope() {
+      return @scope
+    },
+    flush: flush,
+    getContext() {
+      return ctx
+    },
+    getComputed() {
+      return computed
+    },
+    getRefs() {
+      return refs
+    },
+    getEvent() {
+      return getEvent()
+    },
+  })
+
+  const ctx = {
+    get(key) {
+      return context?.[key]?.get()
+    },
+    set(key, value) {
+      context?.[key]?.set(value)
+    },
+    initial(key) {
+      return context?.[key]?.initial
+    },
+    hash(key) {
+      const current = context?.[key]?.get()
+      return context?.[key]?.hash(current)
+    },
+  }
+
+  let effects = new Map()
+  let transitionRef = { current: null }
+
+  let previousEventRef = { current: null }
+  let eventRef = { current: { type: "" } }
+
+  const getEvent = () => ({
+    ...eventRef.current,
+    current() {
+      return eventRef.current
+    },
+    previous() {
+      return previousEventRef.current
+    },
+  })
+
+  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 refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {})
+
+  const getParams = () => ({
+    state: getState(),
+    context: ctx,
+    event: getEvent(),
+    prop,
+    send,
+    action,
+    guard,
+    track: createTrack,
+    refs,
+    computed,
+    flush,
+    scope: @scope,
+    choose,
+  })
+
+  const action = (keys) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
+    const fns = strs.map((s) => {
+      const fn = machine.implementations?.actions?.[s]
+      if (!fn) warn(`[zag-js] No implementation found for action "${JSON.stringify(s)}"`)
+      return fn
+    })
+    for (const fn of fns) {
+      fn?.(getParams())
+    }
+  }
+
+  const guard = (str) => {
+    if (isFunction(str)) return str(getParams())
+    return machine.implementations?.guards?.[str](getParams())
+  }
+
+  const effectFn = (keys) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
+    const fns = strs.map((s) => {
+      const fn = machine.implementations?.effects?.[s]
+      if (!fn) warn(`[zag-js] No implementation found for effect "${JSON.stringify(s)}"`)
+      return fn
+    })
+    const cleanups = []
+    for (const fn of fns) {
+      const cleanup = fn?.(getParams())
+      if (cleanup) cleanups.push(cleanup)
+    }
+    return () => cleanups.forEach((fn) => fn?.())
+  }
+
+  const choose = (transitions) => {
+    return toArray(transitions).find((t) => {
+      let result = !t.guard
+      if (isString(t.guard)) result = !!guard(t.guard)
+      else if (isFunction(t.guard)) result = t.guard(getParams())
+      return result
+    })
+  }
+
+  const computed = (key) => {
+    ensure(machine.computed, () => `[zag-js] No computed object found on machine`)
+    const fn = machine.computed[key]
+    return fn({
+      context: ctx,
+      event: getEvent(),
+      prop,
+      refs,
+      scope: @scope,
+      computed: computed,
+    })
+  }
+
+  const state = createBindable(() => ({
+    defaultValue: machine.initialState({ prop }),
+    onChange(nextState: string, prevState: string | undefined) {
+      // compute effects: exit -> transition -> enter
+
+      // exit effects
+      if (prevState) {
+        const exitEffects = effects.get(prevState)
+        exitEffects?.()
+        effects.delete(prevState)
+      }
+
+      // exit actions
+      if (prevState && prevState !== INIT_STATE) {
+        action(machine.states[prevState]?.exit)
+      }
+
+      // transition actions
+      if (transitionRef.current?.actions) {
+        action(transitionRef.current.actions)
+      }
+
+      // enter effects
+      const cleanup = effectFn( machine.states[nextState]?.effects)
+      if (cleanup) effects.set(nextState, cleanup)
+
+      // root entry actions
+      if (prevState === INIT_STATE) {
+        action(machine.entry)
+        const cleanup = effectFn(machine.effects)
+        if (cleanup) effects.set(INIT_STATE, cleanup)
+      }
+
+      // enter actions
+      action(machine.states[nextState]?.entry)
+    },
+  }))
+
+  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) => {
+     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 ?? [])
+     }
+   }
+
+  machine.watch?.(getParams())
+
+  return {
+    get state() {
+      return getState()
+    },
+    send,
+    context: ctx,
+    prop,
+    get scope() {
+      return @scope
+    },
+    refs,
+    computed,
+    get event() {
+      return getEvent()
+    },
+    getStatus: () => status,
+  } 
+}
+
+function useProp(value) {
+  return function get(key) {
+    return value()[key]
+  }
+}
+
+function flush(fn: VoidFunction) {
+  flushSync(() => {
+    queueMicrotask(() => fn())
+  })
+}

package/src/normalize-props.ripple

@@ -0,0 +1,6 @@
+import { createNormalizer } from "@zag-js/types"
+
+ 
+
+// Simple prop normalizer for RippleJS - just pass through
+export const normalizeProps = createNormalizer((props) => props)

package/src/refs.ripple

@@ -0,0 +1,13 @@
+import { track } from "ripple";
+
+export function createRefs(refs) {
+  const ref = { current: refs }
+  return {
+    get(key) {
+      return ref.current[key]
+    },
+    set(key, value) {
+      ref.current[key] = value
+    },
+  }
+}

package/src/track.ripple

@@ -0,0 +1,31 @@
+import { isEqual, isFunction } from "@zag-js/utils";
+import { effect, track } from "ripple";
+
+const access = (v) => {
+  if (isFunction(v)) return v()
+  return v;
+};
+
+export const createTrack = (deps: any[], effectCallback: VoidFunction   ) => {
+  let prevDeps: any[] = [];
+  let isFirstRun = true;
+
+  effect(() => {
+    if (isFirstRun) {
+      prevDeps = deps.map(d => access(d));
+      isFirstRun = false;
+      return;
+    }
+    let changed = false;
+    for (let i = 0; i < deps.length; i++) {
+      if (!isEqual(prevDeps[i], access(deps[i]))) {
+        changed = true;
+        break;
+      }
+    }
+    if (changed) {
+      prevDeps = deps.map(d => access(d));
+      effectCallback();
+    }
+  });
+};

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
+  }
+}