zag-ripple 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zag-ripple",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "RippleJS Adapter for Zag JS",
   "keywords": [
     "js",
@@ -16,12 +16,12 @@
   "homepage": "https://github.com/anubra266/zag-ripple#readme",
   "license": "MIT",
   "main": "src/index.ripple",
-  "types": "src/index.d.ts",
   "exports": {
     ".": {
       "import": "./src/index.ripple",
       "types": "./src/index.d.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "repository": "https://github.com/anubra266/zag-ripple/tree/main/packages/zag-ripple",
   "sideEffects": false,
@@ -32,9 +32,9 @@
     "url": "https://github.com/anubra266i/zag-ripple/issues"
   },
   "dependencies": {
-    "@zag-js/core": "^1.24.2",
-    "@zag-js/types": "^1.24.2",
-    "@zag-js/utils": "^1.24.2"
+    "@zag-js/core": "^1.34.1",
+    "@zag-js/types": "^1.34.1",
+    "@zag-js/utils": "^1.34.1"
   },
   "peerDependencies": {
     "ripple": ">=0.2.0"

package/src/bindable.ripple

@@ -1,7 +1,8 @@
+import type { Bindable, BindableParams } from "@zag-js/core"
 import { isFunction } from "@zag-js/utils"
 import { track, effect } from "ripple"
 
-export function bindable(props) {
+export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().defaultValue ?? props().value
   const eq = props().isEqual ?? Object.is
 

package/src/index.d.ts

@@ -1,64 +1,65 @@
-import type { Machine, Scope } from "@zag-js/core";
-import { Component } from "ripple";
+import type {
+    Bindable,
+    BindableParams,
+    Machine,
+    MachineSchema,
+    Service,
+} from "@zag-js/core";
+import type { Component } from "ripple";
 
+// Re-export from @zag-js/core
 export { mergeProps } from "@zag-js/core";
 
-// From normalize-props.ripple
-import { NormalizeProps, PropTypes } from "@zag-js/types";
-export declare const normalizeProps: NormalizeProps<PropTypes>;
-
-// From machine.ripple  
-export interface MachineApi<TContext = Record<string, any>, TState extends string = string> {
-    state: {
-        value: TState;
-        matches(...values: TState[]): boolean;
-        hasTag(tag: string): boolean;
-        get(): TState;
-    };
-    send: (event: { type: string;[key: string]: any }) => void;
-    context: {
-        get(key: keyof TContext): any;
-        set(key: keyof TContext, value: any): void;
-        initial(key: keyof TContext): any;
-        hash(key: keyof TContext): string;
-    };
-    prop: (key: string) => any;
-    scope: Scope;
-    refs: Record<string, { current: any }>;
-    computed: (key: string) => any;
-    event: {
-        type: string;
-        current(): any;
-        previous(): any;
-        [key: string]: any;
-    };
-    getStatus: () => "started" | "stopped" | "not_started";
+// Bindable function and related types
+export declare function bindable<T>(props: () => BindableParams<T>): Bindable<T>;
+export declare namespace bindable {
+    function cleanup(fn: VoidFunction): void;
+    function ref<T>(defaultValue: T): { get(): T; set(next: T): void };
 }
 
-export interface MachineOptions {
-    id?: string;
-    ids?: Record<string, string>;
-    getRootNode?: () => Document | ShadowRoot | Node;
-}
+// Machine hook
+export declare function useMachine<T extends MachineSchema>(
+    machine: Machine<T>,
+    userProps?: Partial<T["props"]>
+): Service<T>;
 
-export declare function useMachine<
-    TContext = Record<string, any>,
-    TState extends string = string
->(
-    machine: Machine<TContext>,
-    options?: MachineOptions | (() => MachineOptions)
-): MachineApi<TContext, TState>;
+// Normalize props functionality
+export declare function normalizeProps<T extends Record<string, any>>(
+    props: T
+): T;
 
+export declare function toStyleString(style: Record<string, number | string>): string;
 
+// Portal component and types
+type RootNode = ShadowRoot | Document | Node;
+type GetRootNode = () => RootNode;
 
+export interface PortalActionProps {
+    disabled?: boolean | undefined;
+    container?: HTMLElement | undefined;
+    getRootNode?: GetRootNode | undefined;
+}
 
-export interface PortalProps {
-    disabled?: boolean | undefined
-    container?: HTMLElement | undefined
-    getRootNode?: (() => ShadowRoot | Document | Node) | undefined
-    children: Component
+export interface PortalProps extends PortalActionProps {
+    children?: Component;
 }
 
-export declare const Portal: Component<PortalProps>;
-// export declare function Portal(props: PortalProps): Component;
+export declare function Portal(props: PortalProps): void;
+
+// Refs hook
+export declare function useRefs<T>(refs: T): {
+    get<K extends keyof T>(key: K): T[K];
+    set<K extends keyof T>(key: K, value: T[K]): void;
+};
+
+// Track utility
+export declare function createTrack(
+    deps: any[],
+    effectCallback: VoidFunction
+): void;
+
+
+
+
+
 

package/src/machine.ripple

@@ -12,12 +12,18 @@ import type {
 } 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, effect, flushSync } from "ripple"
+import { track, effect, flushSync, untrack } from "ripple"
 import { bindable } from "./bindable.ripple"
 import { useRefs } from "./refs.ripple"
 import { createTrack } from "./track.ripple"
 
-function compact(obj) {
+function onMount(mount) {
+  effect(() => {
+    return untrack(mount);
+  });
+}
+
+function compact<T extends Record<string, unknown> | undefined>(obj: T): T {
   if (!isPlainObject(obj) || obj === undefined) return obj
   const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string")
   const filtered = {}
@@ -30,13 +36,12 @@ function compact(obj) {
   return filtered
 }
 
-export function useMachine(
-  machine,
-  _userProps,
-) {
-  const userProps = track(() => @_userProps)
+export function useMachine<T extends MachineSchema>(
+  machine: Machine<T>,
+  userProps: Partial<T["props"]> = {},
+): Service<T> {
   let scope = track(() => {
-    return createScope({ id: @userProps.id, ids: @userProps.ids, getRootNode: @userProps.getRootNode })
+    return createScope({ id: @userProps.@id, ids: @userProps.@ids, getRootNode: @userProps.@getRootNode })
   })
 
   const debug = (...args: any[]) => {
@@ -70,7 +75,7 @@ export function useMachine(
     },
   })
 
-  const ctx = {
+  const ctx: BindableContext<T> = {
     get(key) {
       return context?.[key]?.get()
     },
@@ -116,7 +121,7 @@ export function useMachine(
 
   const refs = useRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
-  const getParams = () => ({
+  const getParams = (): Params<T> => ({
     state: getState(),
     context: ctx,
     event: getEvent(),
@@ -132,7 +137,7 @@ export function useMachine(
     choose,
   })
 
-  const action = (keys) => {
+  const action = (keys: ActionsOrFn<T> | undefined) => {
     const strs = isFunction(keys) ? keys(getParams()) : keys
     if (!strs) return
     const fns = strs.map((s) => {
@@ -145,12 +150,12 @@ export function useMachine(
     }
   }
 
-  const guard = (str) => {
+  const guard = (str: T["guard"] | GuardFn<T>) => {
     if (isFunction(str)) return str(getParams())
     return machine.implementations?.guards?.[str](getParams())
   }
 
-  const effectFn = (keys) => {
+  const effectFn = (keys: EffectsOrFn<T> | undefined) => {
     const strs = isFunction(keys) ? keys(getParams()) : keys
     if (!strs) return
     const fns = strs.map((s) => {
@@ -166,7 +171,7 @@ export function useMachine(
     return () => cleanups.forEach((fn) => fn?.())
   }
 
-  const choose = (transitions) => {
+  const choose: ChooseFn<T> = (transitions) => {
     return toArray(transitions).find((t) => {
       let result = !t.guard
       if (isString(t.guard)) result = !!guard(t.guard)
@@ -175,7 +180,7 @@ export function useMachine(
     })
   }
 
-  const computed = (key) => {
+  const computed: ComputedFn<T> = (key) => {
     ensure(machine.computed, () => `[zag-js] No computed object found on machine`)
     const fn = machine.computed[key]
     return fn({
@@ -226,13 +231,11 @@ export function useMachine(
 
   let status = MachineStatus.NotStarted
 
-  effect(() => {
-    queueMicrotask(() => {
-      const started = status === MachineStatus.Started
-      status = MachineStatus.Started
-      debug(started ? "rehydrating..." : "initializing...")
-      state.invoke(state.initial, INIT_STATE)
-    })
+  onMount(() => {
+    const started = status === MachineStatus.Started
+    status = MachineStatus.Started
+    debug(started ? "rehydrating..." : "initializing...")
+    state.invoke(state.initial, INIT_STATE)
 
     return () => {
       debug("unmounting...")
@@ -242,9 +245,7 @@ export function useMachine(
       effects = new Map()
       transitionRef.current = null
       
-      queueMicrotask(() => {
-        action(machine.exit)
-      })
+      action(machine.exit)
     }
   })
 

package/src/portal.ripple

@@ -1,6 +1,15 @@
 import { Portal as RipplePortal } from 'ripple';
 
-export component Portal({ disabled, getRootNode, container, children }:any) {
+type RootNode = ShadowRoot | Document | Node
+type GetRootNode = () => RootNode
+
+export interface PortalActionProps {
+    disabled?: boolean | undefined
+    container?: HTMLElement | undefined
+    getRootNode?: GetRootNode | undefined
+}
+
+export component Portal({ disabled, getRootNode, container, children }: PortalActionProps) {
     const isServer = typeof window === "undefined"
     
     if(isServer || disabled){

package/src/refs.ripple

@@ -1,10 +1,10 @@
-export function useRefs(refs) {
+export function useRefs<T>(refs: T) {
   const ref = { current: refs }
   return {
-    get(key) {
+    get<K extends keyof T>(key: K): T[K] {
       return ref.current[key]
     },
-    set(key, value) {
+    set<K extends keyof T>(key: K, value: T[K]) {
       ref.current[key] = value
     },
   }

package/tsconfig.json

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