@legendapp/state 3.0.0-alpha.1 → 3.0.0-alpha.3

package/src/persist-plugins/mmkv.ts

@@ -1,91 +0,0 @@
-import type { Change } from '@legendapp/state';
-import { internal, setAtPath } from '@legendapp/state';
-import type { ObservablePersistPlugin, PersistMetadata, PersistOptions } from '@legendapp/state/sync';
-import { MMKV } from 'react-native-mmkv';
-
-const symbolDefault = Symbol();
-const MetadataSuffix = '__m';
-
-const { safeParse, safeStringify } = internal;
-
-export class ObservablePersistMMKV implements ObservablePersistPlugin {
-    private data: Record<string, any> = {};
-    private storages = new Map<symbol | string, MMKV>([
-        [
-            symbolDefault,
-            new MMKV({
-                id: `obsPersist`,
-            }),
-        ],
-    ]);
-    // Gets
-    public getTable<T = any>(table: string, init: object, config: PersistOptions): T {
-        const storage = this.getStorage(config);
-        if (this.data[table] === undefined) {
-            try {
-                const value = storage.getString(table);
-                this.data[table] = value ? safeParse(value) : init;
-            } catch {
-                console.error('[legend-state] MMKV failed to parse', table);
-            }
-        }
-        return this.data[table];
-    }
-    public getMetadata(table: string, config: PersistOptions): PersistMetadata {
-        return this.getTable(table + MetadataSuffix, {}, config);
-    }
-    // Sets
-    public set(table: string, changes: Change[], config: PersistOptions) {
-        if (!this.data[table]) {
-            this.data[table] = {};
-        }
-        for (let i = 0; i < changes.length; i++) {
-            const { path, valueAtPath, pathTypes } = changes[i];
-            this.data[table] = setAtPath(this.data[table], path as string[], pathTypes, valueAtPath);
-        }
-        this.save(table, config);
-    }
-    public setMetadata(table: string, metadata: PersistMetadata, config: PersistOptions) {
-        return this.setValue(table + MetadataSuffix, metadata, config);
-    }
-    public deleteTable(table: string, config: PersistOptions): void {
-        const storage = this.getStorage(config);
-        delete this.data[table];
-        storage.delete(table);
-    }
-    public deleteMetadata(table: string, config: PersistOptions) {
-        this.deleteTable(table + MetadataSuffix, config);
-    }
-    // Private
-    private getStorage(config: PersistOptions): MMKV {
-        const { mmkv } = config;
-        if (mmkv) {
-            const key = JSON.stringify(mmkv);
-            let storage = this.storages.get(key);
-            if (!storage) {
-                storage = new MMKV(mmkv);
-                this.storages.set(key, storage);
-            }
-            return storage;
-        } else {
-            return this.storages.get(symbolDefault)!;
-        }
-    }
-    private async setValue(table: string, value: any, config: PersistOptions) {
-        this.data[table] = value;
-        this.save(table, config);
-    }
-    private save(table: string, config: PersistOptions) {
-        const storage = this.getStorage(config);
-        const v = this.data[table];
-        if (v !== undefined) {
-            try {
-                storage.set(table, safeStringify(v));
-            } catch (err) {
-                console.error(err);
-            }
-        } else {
-            storage.delete(table);
-        }
-    }
-}

package/src/proxy.ts

@@ -1,28 +0,0 @@
-import { linked } from './linked';
-import { observable } from './observable';
-import { Observable, ObservableParam } from './observableTypes';
-
-// Deprecated. Remove in v4
-
-export function proxy<T, T2 = T>(
-    get: (key: string) => T,
-    set: (key: string, value: T2) => void,
-): Observable<Record<string, T>>;
-export function proxy<T extends Record<string, any>>(
-    get: <K extends keyof T>(key: K) => ObservableParam<T[K]>,
-): Observable<T>;
-export function proxy<T>(get: (key: string) => ObservableParam<T>): Observable<Record<string, T>>;
-export function proxy<T>(get: (key: string) => T): Observable<Record<string, T>>;
-export function proxy<T extends Record<string, any>, T2 = T>(
-    get: (key: any) => ObservableParam<any>,
-    set?: (key: any, value: T2) => void,
-): any {
-    return observable((key: string) =>
-        set
-            ? linked({
-                  get: () => get(key),
-                  set: ({ value }) => set(key, value as any),
-              })
-            : get(key),
-    );
-}

package/src/react/Computed.tsx

@@ -1,8 +0,0 @@
-import { computeSelector } from '@legendapp/state';
-import { ReactElement, ReactNode } from 'react';
-import type { ObservableParam } from '../observableTypes';
-import { useSelector } from './useSelector';
-
-export function Computed({ children }: { children: ObservableParam | (() => ReactNode) }): ReactElement {
-    return useSelector(() => computeSelector(computeSelector(children)), { skipCheck: true }) as ReactElement;
-}

package/src/react/For.tsx

@@ -1,116 +0,0 @@
-import type { Observable, ObservableObject, ObservableParam } from '@legendapp/state';
-import { internal, isArray, isFunction, isMap } from '@legendapp/state';
-import { FC, ReactElement, createElement, memo, useMemo, useRef } from 'react';
-import { observer } from './reactive-observer';
-import { useSelector } from './useSelector';
-const { findIDKey, getNode, optimized } = internal;
-
-const autoMemoCache = new Map<FC<any>, FC<any>>();
-
-type ForItemProps<T, TProps = {}> = {
-    item$: Observable<T>;
-    id?: string;
-} & TProps;
-
-export function For<T, TProps>({
-    each,
-    optimized: isOptimized,
-    item,
-    itemProps,
-    sortValues,
-    children,
-}: {
-    each?: ObservableParam<T[] | Record<any, T> | Map<any, T>>;
-    optimized?: boolean;
-    item?: FC<ForItemProps<T, TProps>>;
-    itemProps?: TProps;
-    sortValues?: (A: T, B: T, AKey: string, BKey: string) => number;
-    children?: (value: Observable<T>, id: string | undefined) => ReactElement;
-}): ReactElement | null {
-    if (!each) return null;
-
-    // Get the raw value with a shallow listener so this list only re-renders
-    // when the array length changes
-    const value = useSelector(() => each!.get(isOptimized ? optimized : true));
-
-    // The child function gets wrapped in a memoized observer component
-    if (!item && children) {
-        // Update the ref so the generated component uses the latest function
-        const refChildren = useRef<(value: Observable<T>, id: string | undefined) => ReactElement>();
-        refChildren.current = children;
-
-        item = useMemo(() => observer(({ item$, id }) => refChildren.current!(item$, id)), []);
-    } else {
-        // @ts-expect-error $$typeof is private
-        if (item.$$typeof !== Symbol.for('react.memo')) {
-            let memod = autoMemoCache.get(item!);
-            if (!memod) {
-                memod = memo(item!);
-                autoMemoCache.set(item!, memod);
-            }
-            item = memod;
-        }
-    }
-
-    // This early out needs to be after any hooks
-    if (!value) return null;
-
-    // Create the child elements
-    const out: ReactElement[] = [];
-
-    const isArr = isArray(value);
-
-    if (isArr) {
-        // Get the appropriate id field
-        const v0 = value[0] as any;
-        const node = getNode(each!);
-        const length = (value as any[]).length;
-
-        const idField =
-            length > 0
-                ? (node && findIDKey(v0, node)) ||
-                  (v0.id !== undefined ? 'id' : v0.key !== undefined ? 'key' : undefined)
-                : undefined;
-
-        const isIdFieldFunction = isFunction(idField);
-
-        for (let i = 0; i < length; i++) {
-            if (value[i]) {
-                const val = value[i];
-                const key = (isIdFieldFunction ? idField(val) : (val as Record<string, any>)[idField as string]) ?? i;
-                const item$ = (each as Observable<any[]>)[i];
-                // TODOV3 Remove item
-                const props: ForItemProps<any> & { key: string; item: Observable<any> } = {
-                    key,
-                    id: key,
-                    item$,
-                    item: item$,
-                };
-
-                out.push(createElement(item as FC, itemProps ? Object.assign(props, itemProps) : props));
-            }
-        }
-    } else {
-        // Render the values of the object / Map
-        const asMap = isMap(value);
-        const keys = asMap ? Array.from(value.keys()) : Object.keys(value);
-        if (sortValues) {
-            keys.sort((A, B) => sortValues(asMap ? value.get(A)! : value[A], asMap ? value.get(B)! : value[B], A, B));
-        }
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (asMap ? value.get(key) : value[key]) {
-                const item$ = asMap ? each!.get(key) : (each as ObservableObject<Record<string, any>>)[key];
-                const props: ForItemProps<any> & { key: string; item: Observable<any> } = {
-                    key,
-                    id: key,
-                    item$,
-                    item: item$,
-                };
-                out.push(createElement(item as FC, itemProps ? Object.assign(props, itemProps) : props));
-            }
-        }
-    }
-
-    return out as unknown as ReactElement;
-}

package/src/react/Memo.tsx

@@ -1,4 +0,0 @@
-import { memo } from 'react';
-import { Computed } from './Computed';
-
-export const Memo = memo(Computed, () => true);

package/src/react/Reactive.tsx

@@ -1,53 +0,0 @@
-import { isEmpty, isFunction } from '@legendapp/state';
-import { ComponentClass, FC, createElement, forwardRef } from 'react';
-import { BindKeys } from './reactInterfaces';
-import { reactive } from './reactive-observer';
-
-const ReactiveFns = new Map<string, FC | ComponentClass>();
-const ReactiveFnBinders = new Map<string, BindKeys>();
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IReactive {}
-
-export const Reactive: IReactive = new Proxy(
-    {},
-    {
-        get(target: Record<string, FC>, p: string) {
-            if (!target[p]) {
-                const Component = ReactiveFns.get(p) || p;
-
-                // Create a wrapper around createElement with the string so we can proxy it
-                // eslint-disable-next-line react/display-name
-                const render = forwardRef((props, ref) => {
-                    const propsOut = { ...props } as any;
-                    if (ref && (isFunction(ref) || !isEmpty(ref))) {
-                        propsOut.ref = ref;
-                    }
-                    return createElement(Component, propsOut);
-                });
-
-                target[p] = reactive(render, ReactiveFnBinders.get(p));
-            }
-            return target[p];
-        },
-    },
-) as unknown as IReactive;
-
-export function configureReactive({
-    components,
-    binders,
-}: {
-    components?: Record<string, FC | ComponentClass<any>>;
-    binders?: Record<string, BindKeys>;
-}) {
-    if (components) {
-        for (const key in components) {
-            ReactiveFns.set(key, components[key]);
-        }
-    }
-    if (binders) {
-        for (const key in binders) {
-            ReactiveFnBinders.set(key, binders[key]);
-        }
-    }
-}

package/src/react/Show.tsx

@@ -1,33 +0,0 @@
-import type { Selector } from '@legendapp/state';
-import { isFunction, isObservableValueReady } from '@legendapp/state';
-import { FC, ReactElement, ReactNode, createElement } from 'react';
-import { useSelector } from './useSelector';
-
-interface PropsIf<T> {
-    if: Selector<T>;
-    ifReady?: never;
-}
-interface PropsIfReady<T> {
-    if?: never;
-    ifReady: Selector<T>;
-}
-
-interface PropsBase<T> {
-    else?: ReactNode | (() => ReactNode);
-    wrap?: FC;
-    children: ReactNode | ((value?: T) => ReactNode);
-}
-
-type Props<T> = PropsBase<T> & (PropsIf<T> | PropsIfReady<T>);
-
-export function Show<T>(props: Props<T>): ReactElement;
-export function Show<T>({ if: if_, ifReady, else: else_, wrap, children }: Props<T>): ReactElement {
-    const value = useSelector(if_ ?? ifReady);
-    const show = ifReady !== undefined ? isObservableValueReady(value) : value;
-    const child = useSelector(
-        show ? (isFunction(children) ? () => children(value) : (children as any)) : else_ ?? null,
-        { skipCheck: true },
-    );
-
-    return wrap ? createElement(wrap, undefined, child) : child;
-}

package/src/react/Switch.tsx

@@ -1,43 +0,0 @@
-import type { Selector } from '@legendapp/state';
-import { ReactElement, ReactNode } from 'react';
-import { useSelector } from './useSelector';
-
-export function Switch<T extends object>({
-    value,
-    children,
-}: {
-    value?: Selector<T>;
-    children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
-}): ReactElement | null;
-export function Switch<T extends string | number | symbol>({
-    value,
-    children,
-}: {
-    value?: Selector<T>;
-    children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
-}): ReactElement | null;
-export function Switch<T extends boolean>({
-    value,
-    children,
-}: {
-    value?: Selector<T>;
-    children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
-}): ReactElement | null;
-export function Switch<T>({
-    value,
-    children,
-}: {
-    value?: Selector<T>;
-    children: Partial<Record<'undefined' | 'default', () => ReactNode>>;
-}): ReactElement | null;
-export function Switch<T>({
-    value,
-    children,
-}: {
-    value?: Selector<T>;
-    children: Partial<Record<any, () => ReactNode>>;
-}): ReactNode {
-    // Select from an object of cases
-    const child = children[useSelector(value)!];
-    return (child ? child() : children['default']?.()) ?? null;
-}

package/src/react/react-globals.ts

@@ -1,3 +0,0 @@
-export const reactGlobals = {
-    inObserver: false,
-};

package/src/react/reactInterfaces.ts

@@ -1,32 +0,0 @@
-import type { FC, LegacyRef, ReactNode } from 'react';
-import type { Observable } from '../observableTypes';
-import type { Selector } from '../observableInterfaces';
-
-export type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & { children?: Selector<ReactNode> };
-
-export interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
-    defaultValue?: any;
-    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
-}
-
-export type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
-
-export type FCReactiveObject<T> = {
-    [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
-};
-
-export type FCReactive<P, P2> = P &
-    FC<
-        ShapeWithNew$<P2> & {
-            ref?: LegacyRef<P> | undefined;
-        }
-    >;
-
-export interface UseSelectorOptions {
-    suspense?: boolean;
-    skipCheck?: boolean;
-}

package/src/react/reactive-observer.tsx

@@ -1,210 +0,0 @@
-import { isFunction, isObservable, Selector } from '@legendapp/state';
-import { ChangeEvent, FC, forwardRef, memo, useCallback } from 'react';
-import { reactGlobals } from './react-globals';
-import type { BindKeys } from './reactInterfaces';
-import { useSelector } from './useSelector';
-
-export type ShapeWithPick$<T, T2 extends keyof T = keyof T> = Partial<T> & {
-    [K in T2 as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-};
-export type ShapeWith$<T> = Partial<T> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-};
-export type ObjectShapeWith$<T> = {
-    [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
-};
-export type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
-
-// Extracting the forwardRef inspired by https://github.com/mobxjs/mobx/blob/main/packages/mobx-react-lite/src/observer.ts
-export const hasSymbol = /* @__PURE__ */ typeof Symbol === 'function' && Symbol.for;
-
-let didWarnProps = false;
-
-// TODOV2: Change bindKeys to an options object, where one of the options is "convertChildren" so that behavior can be optional
-function createReactiveComponent<P = object>(
-    component: FC<P>,
-    observe: boolean,
-    reactive?: boolean,
-    bindKeys?: BindKeys<P>,
-) {
-    const ReactForwardRefSymbol = hasSymbol
-        ? Symbol.for('react.forward_ref')
-        : // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
-          typeof forwardRef === 'function' && forwardRef((props: any) => null)['$$typeof'];
-
-    const ReactMemoSymbol = hasSymbol
-        ? Symbol.for('react.memo')
-        : // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
-          typeof forwardRef === 'function' && memo((props) => null)['$$typeof'];
-
-    // If this component is already reactive bail out early
-    // This can happen with Fast Refresh.
-    if ((component as any)['__legend_proxied']) return component;
-
-    let useForwardRef = false;
-    let useMemo = false;
-    let render = component;
-
-    // Unwrap memo on the component
-    if (ReactMemoSymbol && (render as any)['$$typeof'] === ReactMemoSymbol && (render as any)['type']) {
-        useMemo = true;
-        render = (render as any)['type'];
-    }
-    // Unwrap forwardRef on the component
-    if (ReactForwardRefSymbol && (render as any)['$$typeof'] === ReactForwardRefSymbol) {
-        useForwardRef = true;
-        render = (render as any)['render'];
-        if (process.env.NODE_ENV === 'development' && typeof render !== 'function') {
-            throw new Error(`[legend-state] \`render\` property of ForwardRef was not a function`);
-        }
-    }
-
-    const proxyHandler: ProxyHandler<any> = {
-        apply(target, thisArg, argArray) {
-            // If this is a reactive component, convert all props ending in $
-            // to regular props and set up a useSelector listener
-            if (reactive) {
-                const props = argArray[0];
-                const propsOut = {} as Record<string, any>;
-                const keys = Object.keys(props);
-                for (let i = 0; i < keys.length; i++) {
-                    const key = keys[i];
-                    const p = props[key];
-
-                    // Convert children if it's a function
-                    if (key === 'children' && (isFunction(p) || isObservable(p))) {
-                        props[key] = useSelector(p, { skipCheck: true });
-                    }
-                    // Convert reactive props
-                    else if (key.startsWith('$') || key.endsWith('$')) {
-                        // TODOV3 Add this warning
-                        // TODOV4 Remove the deprecated endsWith option
-                        if (process.env.NODE_ENV === 'development' && !didWarnProps && key.endsWith('$')) {
-                            didWarnProps = true;
-                            console.warn(
-                                `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
-                                    '$',
-                                    '',
-                                )}. See https://legendapp.com/open-source/state/migrating for more details.`,
-                            );
-                        }
-                        const k = key.endsWith('$') ? key.slice(0, -1) : key.slice(1);
-                        // Return raw value and listen to the selector for changes
-
-                        const bind = bindKeys?.[k as keyof P];
-                        const shouldBind = bind && isObservable(p);
-
-                        propsOut[k] = shouldBind && bind?.selector ? bind.selector(propsOut, p) : useSelector(p);
-
-                        // If this key is one of the bind keys set up a two-way binding
-                        if (shouldBind) {
-                            // Use the bind's defaultValue if value is undefined
-                            if (bind.defaultValue !== undefined && propsOut[k] === undefined) {
-                                propsOut[k] = bind.defaultValue;
-                            }
-
-                            if (bind.handler && bind.getValue) {
-                                // Hook up the change lander
-                                const handlerFn = (e: ChangeEvent) => {
-                                    p.set(bind.getValue!(e));
-                                    props[bind.handler!]?.(e);
-                                };
-
-                                (propsOut[bind.handler as string] as any) =
-                                    // If in development mode, don't memoize the handler. fix fast refresh bug
-                                    process.env.NODE_ENV === 'development'
-                                        ? handlerFn
-                                        : useCallback(handlerFn, [props[bind.handler], bindKeys]);
-                            }
-                        }
-
-                        // Delete the reactive key
-                        delete propsOut[key];
-                    } else if (propsOut[key] === undefined) {
-                        propsOut[key] = p;
-                    }
-                }
-                argArray[0] = propsOut;
-            }
-
-            // If observing wrap the whole render in a useSelector to listen to it
-            if (observe) {
-                return useSelector(
-                    () => {
-                        reactGlobals.inObserver = true;
-                        try {
-                            return Reflect.apply(target, thisArg, argArray);
-                        } finally {
-                            reactGlobals.inObserver = false;
-                        }
-                    },
-                    { skipCheck: true },
-                );
-            } else {
-                return Reflect.apply(target, thisArg, argArray);
-            }
-        },
-    };
-
-    const proxy = new Proxy(render, proxyHandler);
-
-    let ret;
-
-    if (useForwardRef) {
-        ret = forwardRef(proxy);
-        (ret as any)['__legend_proxied'] = true;
-    } else {
-        ret = proxy;
-    }
-
-    return observe || useMemo ? memo(ret) : ret;
-}
-
-export function observer<P extends FC<any>>(component: P): P {
-    return createReactiveComponent(component, true);
-}
-
-export function reactive<T extends FC<any>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-export function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-export function reactive<T extends FC<any>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWith$<ExtractFCPropsType<T>>> {
-    return createReactiveComponent(component, false, true, bindKeys);
-}
-
-export function reactiveObserver<T extends FC<any>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-export function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-export function reactiveObserver<T extends FC<any>>(
-    component: T,
-    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
-): T | FC<ShapeWith$<ExtractFCPropsType<T>>> {
-    return createReactiveComponent(component, true, true, bindKeys);
-}
-
-export function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P> {
-    return new Proxy(
-        {},
-        {
-            get(target: Record<string, any>, p: string) {
-                if (!target[p] && components[p]) {
-                    target[p] = createReactiveComponent(components[p], false, true) as FC<ShapeWith$<P>>;
-                }
-
-                return target[p];
-            },
-        },
-    ) as ObjectShapeWith$<P>;
-}

package/src/react/useComputed.ts

@@ -1,36 +0,0 @@
-import { computed, isArray, isFunction, Observable, ObservableParam } from '@legendapp/state';
-import { useMemo, useRef } from 'react';
-
-export function useComputed<T>(compute: () => T | Promise<T>): Observable<T>;
-export function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
-export function useComputed<T, T2 = T>(
-    compute: (() => T | Promise<T>) | ObservableParam<T>,
-    set: (value: T2) => void,
-): Observable<T>;
-export function useComputed<T, T2 = T>(
-    compute: (() => T | Promise<T>) | ObservableParam<T>,
-    set: (value: T2) => void,
-    deps: any[],
-): Observable<T>;
-export function useComputed<T, T2 = T>(
-    compute: (() => T | Promise<T>) | ObservableParam<T>,
-    set?: ((value: T2) => void) | any[],
-    deps?: any[],
-): Observable<T> {
-    if (!deps && isArray(set)) {
-        deps = set;
-        set = undefined;
-    }
-    const ref = useRef<{ compute?: (() => T | Promise<T>) | ObservableParam<T>; set?: (value: T2) => void }>({});
-    ref.current.compute = compute;
-    ref.current.set = set as (value: T2) => void;
-
-    return useMemo(
-        () =>
-            computed<T, T2>(
-                () => (isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute) as any,
-                (set ? (value) => ref.current.set!(value) : undefined) as (value: T2) => void,
-            ),
-        deps || [],
-    );
-}