chore: allow composing bindable

Author: segunadebayo

.changeset/kind-cows-divide.md

@@ -0,0 +1,10 @@
+---
+"@zag-js/preact": patch
+"@zag-js/svelte": patch
+"@zag-js/react": patch
+"@zag-js/solid": patch
+"@zag-js/vue": patch
+"@zag-js/core": patch
+---
+
+[Internal] Support `ref` and `cleanup` on bindable function to help create using state compositions

examples/next-ts/pages/sandbox.composable.tsx

@@ -0,0 +1,107 @@
+import { Bindable, BindableFn, BindableParams } from "@zag-js/core"
+import { useMachine } from "@zag-js/react"
+import { isFunction } from "@zag-js/utils"
+
+interface ValidateParams<T> {
+  validate?: (b: T) => boolean
+  defaultValid?: boolean
+  onValidityChange?: (props: { valid: boolean; lastValid: T }) => void
+}
+
+function withLastValid<T>(bindable: BindableFn, props: () => BindableParams<T> & ValidateParams<T>): Bindable<T> {
+  const value = bindable(props)
+
+  const lastValidValue = bindable(() => ({
+    defaultValue: props().validate?.(value.get()) ? value.get() : undefined,
+  }))
+
+  const valid = bindable<boolean>(() => ({
+    defaultValue: props().defaultValid,
+    onChange(valid) {
+      props().onValidityChange?.({ valid, lastValid: lastValidValue.get() })
+    },
+  }))
+
+  return {
+    ...value,
+    set(valueOrFn) {
+      const nextValue = isFunction(valueOrFn) ? valueOrFn(value.get()) : valueOrFn
+      if (props().validate?.(nextValue)) {
+        lastValidValue.set(nextValue)
+        valid.set(true)
+      } else {
+        valid.set(false)
+      }
+      value.set(nextValue)
+    },
+  }
+}
+
+function withAutoreset<T>(bindable: BindableFn, props: () => BindableParams<T> & { resetAfter: number }): Bindable<T> {
+  const value = bindable(props)
+
+  const timer = bindable.ref<NodeJS.Timeout | undefined>(undefined)
+
+  const resetValue = () =>
+    setTimeout(() => {
+      value.set(value.initial)
+    }, props().resetAfter)
+
+  bindable.cleanup(() => {
+    if (timer.get()) clearTimeout(timer.get()!)
+    timer.set(undefined)
+  })
+
+  return {
+    ...value,
+    set(valueOrFn) {
+      value.set(valueOrFn)
+      const currentTimer = timer.get()
+      if (currentTimer) clearTimeout(currentTimer)
+      timer.set(resetValue())
+    },
+  }
+}
+
+export default function Page() {
+  const service = useMachine({
+    initialState() {
+      return "idle"
+    },
+
+    context({ bindable }) {
+      return {
+        count: withLastValid<string>(bindable, () => ({
+          defaultValue: "hello",
+          validate(value) {
+            return value.length > 3
+          },
+          onValidityChange(valid) {
+            console.log("valid", valid)
+          },
+        })),
+        index: withAutoreset<number>(bindable, () => ({
+          defaultValue: 0,
+          resetAfter: 1000,
+        })),
+      }
+    },
+
+    states: {
+      idle: {
+        on: {
+          CLICK: { target: "active" },
+        },
+      },
+    },
+  })
+  return (
+    <main>
+      <div>{service.context.get("count")}</div>
+      <button onClick={() => service.context.set("count", "df")}>Click</button>
+      <hr />
+      <div>{service.context.get("index")}</div>
+      <button onClick={() => service.context.set("index", (prev) => prev + 1)}>Click</button>
+    </main>
+  )
+}

packages/core/src/types.ts

@@ -63,8 +63,15 @@ export interface BindableContext<T extends Dict> {
   hash<K extends keyof T["context"]>(key: K): string
 }
 
-interface BindableFn {
+interface BindableRef<T> {
+  get: () => T
+  set: (next: T) => void
+}
+
+export interface BindableFn {
   <K>(params: () => BindableParams<K>): Bindable<K>
+  cleanup: (fn: VoidFunction) => void
+  ref: <T>(defaultValue: T) => BindableRef<T>
 }
 
 export interface Scope {

packages/frameworks/preact/src/bindable.ts

@@ -57,3 +57,17 @@ export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
     },
   }
 }
+
+useBindable.cleanup = (fn: VoidFunction) => {
+  useLayoutEffect(() => fn, [])
+}
+
+useBindable.ref = <T>(defaultValue: T) => {
+  const value = useRef(defaultValue)
+  return {
+    get: () => value.current,
+    set: (next: T) => {
+      value.current = next
+    },
+  }
+}

packages/frameworks/react/src/bindable.ts

@@ -1,6 +1,6 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
 import { identity, isFunction } from "@zag-js/utils"
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { useSafeLayoutEffect } from "./use-layout-effect"
 
@@ -56,3 +56,17 @@ export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
     },
   }
 }
+
+useBindable.cleanup = (fn: VoidFunction) => {
+  useEffect(() => fn, [])
+}
+
+useBindable.ref = <T>(defaultValue: T) => {
+  const value = useRef(defaultValue)
+  return {
+    get: () => value.current,
+    set: (next: T) => {
+      value.current = next
+    },
+  }
+}

packages/frameworks/solid/src/bindable.ts

@@ -1,6 +1,6 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
 import { isFunction } from "@zag-js/utils"
-import { createEffect, createMemo, createSignal, type Accessor } from "solid-js"
+import { createEffect, createMemo, createSignal, type Accessor, onCleanup } from "solid-js"
 
 export function createBindable<T>(props: Accessor<BindableParams<T>>): Bindable<T> {
   const initial = props().value ?? props().defaultValue
@@ -51,3 +51,17 @@ export function createBindable<T>(props: Accessor<BindableParams<T>>): Bindable<
     },
   }
 }
+
+createBindable.cleanup = (fn: VoidFunction) => {
+  onCleanup(() => fn())
+}
+
+createBindable.ref = <T>(defaultValue: T) => {
+  let value = defaultValue
+  return {
+    get: () => value,
+    set: (next: T) => {
+      value = next
+    },
+  }
+}

packages/frameworks/svelte/src/bindable.svelte.ts

@@ -1,6 +1,6 @@
 import { type Bindable, type BindableParams } from "@zag-js/core"
 import { identity, isFunction } from "@zag-js/utils"
-import { flushSync } from "svelte"
+import { flushSync, onDestroy } from "svelte"
 
 export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().defaultValue ?? props().value
@@ -51,3 +51,17 @@ export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
     },
   }
 }
+
+bindable.cleanup = (fn: VoidFunction) => {
+  onDestroy(() => fn())
+}
+
+bindable.ref = <T>(defaultValue: T) => {
+  let value = defaultValue
+  return {
+    get: () => value,
+    set: (next: T) => {
+      value = next
+    },
+  }
+}

packages/frameworks/vue/src/bindable.ts

@@ -1,6 +1,6 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
 import { isFunction } from "@zag-js/utils"
-import { computed as __computed, shallowRef } from "vue"
+import { computed as __computed, onUnmounted, shallowRef } from "vue"
 
 export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().defaultValue ?? props().value
@@ -36,3 +36,17 @@ export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
     },
   }
 }
+
+bindable.cleanup = (fn: VoidFunction) => {
+  onUnmounted(() => fn())
+}
+
+bindable.ref = <T>(defaultValue: T) => {
+  let value = defaultValue
+  return {
+    get: () => value,
+    set: (next: T) => {
+      value = next
+    },
+  }
+}