@legendapp/state 2.2.0-next.7 → 2.2.0-next.71

package/src/persist-plugins/query.ts

@@ -0,0 +1,133 @@
+import {
+    ObservablePersistRemoteFunctions,
+    isFunction,
+    observe,
+    type ObservablePersistRemoteSetParams,
+} from '@legendapp/state';
+import {
+    InfiniteQueryObserver,
+    MutationObserver,
+    QueryClient,
+    QueryKey,
+    QueryObserver,
+    UseBaseQueryOptions,
+    UseMutationOptions,
+    notifyManager,
+    useQueryClient,
+} from '@tanstack/react-query';
+
+type ObservableQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey> = Omit<
+    UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    'queryKey'
+> & { queryKey?: TQueryKey | (() => TQueryKey) };
+
+type Params<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey> = {
+    query: ObservableQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+    mutation?: UseMutationOptions<TData, TError, void>;
+    type?: 'Query' | 'Infinite';
+} & (
+    | {
+          queryClient: QueryClient;
+          useContext?: false | undefined | never;
+      }
+    | {
+          queryClient?: QueryClient;
+          useContext?: true;
+      }
+);
+
+export function persistPluginQuery<TObs, TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>({
+    query: options,
+    mutation: mutationOptions,
+    type = 'Query',
+    queryClient,
+    useContext,
+}: Params<TQueryFnData, TError, TData, TQueryData, TQueryKey>): ObservablePersistRemoteFunctions<TObs> {
+    if (useContext) {
+        queryClient = queryClient || useQueryClient();
+    }
+    // Set up the defaults like useBaseQuery does
+    const defaultedOptions = queryClient!.defaultQueryOptions(
+        options as UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    );
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+        defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+    }
+
+    if (defaultedOptions.onSuccess) {
+        defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+    }
+
+    if (defaultedOptions.onSettled) {
+        defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+    }
+
+    const Observer = type === 'Query' ? QueryObserver : (InfiniteQueryObserver as typeof QueryObserver);
+
+    const ret: ObservablePersistRemoteFunctions<unknown> = {
+        get({ onChange }) {
+            let observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey> | undefined = undefined;
+            let latestOptions = defaultedOptions;
+            let queryKeyFromFn: TQueryKey;
+
+            const origQueryKey = options.queryKey!;
+
+            // If the queryKey is a function, observe it and extract the raw value
+            const isKeyFunction = isFunction(origQueryKey);
+            if (isKeyFunction) {
+                observe(({ num }) => {
+                    queryKeyFromFn = origQueryKey();
+                    if (num > 0) {
+                        updateQueryOptions(latestOptions);
+                    }
+                });
+            }
+
+            const updateQueryOptions = (obj: any) => {
+                // Since legend-state mutates the query options, we need to clone it to make Query
+                // see it as changed
+                const options = Object.assign({}, obj);
+
+                // Use the latest value from the observed queryKey function
+                if (isKeyFunction) {
+                    options.queryKey = queryKeyFromFn;
+                }
+
+                latestOptions = options;
+
+                // Update the Query options
+                if (observer) {
+                    observer.setOptions(options, { listeners: false });
+                }
+            };
+            updateQueryOptions(defaultedOptions);
+
+            // Create the observer
+            observer = new Observer!<TQueryFnData, TError, TData, TQueryData, TQueryKey>(queryClient!, latestOptions);
+
+            // Get the initial optimistic results if it's already cached
+            const result = observer!.getOptimisticResult(latestOptions);
+            // Subscribe to Query's observer and update the observable
+            observer!.subscribe((result) => {
+                onChange({ value: result.data });
+            });
+
+            // Return the initial data
+            if (result) {
+                return result.data;
+            }
+        },
+    };
+
+    if (mutationOptions) {
+        const mutator = new MutationObserver(queryClient!, mutationOptions);
+        // When the observable changes call the mutator function
+        ret.set = async ({ value }: ObservablePersistRemoteSetParams<any>) => {
+            mutator.mutate(value);
+        };
+    }
+
+    return ret as any;
+}

package/src/persistTypes.ts

@@ -0,0 +1,226 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore
+import type { MMKVConfiguration } from 'react-native-mmkv';
+// @ts-ignore
+import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
+// @ts-ignore
+import type { DatabaseReference, Query } from 'firebase/database';
+
+import type { GetMode, PersistMetadata } from './syncTypes';
+import type {
+    ArrayValue,
+    Change,
+    ClassConstructor,
+    LinkedOptions,
+    RecordValue,
+    RetryOptions,
+    Selector,
+    TypeAtPath,
+} from './observableInterfaces';
+import type { Observable, ObservableParam, ObservableState } from './observableTypes';
+
+export interface PersistTransform<TOrig = any, TSaved = TOrig> {
+    load?: (value: TSaved) => TOrig | Promise<TOrig>;
+    save?: (value: TOrig) => TSaved | Promise<TSaved>;
+}
+
+export interface LegacyPersistOptionsLocal<T = any> {
+    name: string;
+    transform?: PersistTransform<T>;
+    fieldTransforms?: FieldTransforms<T>;
+    readonly?: boolean;
+    mmkv?: MMKVConfiguration;
+    indexedDB?: {
+        prefixID?: string;
+        itemID?: string;
+    };
+    options?: any;
+}
+export type LegacyPersistOptionsRemote<T = any> = ObservablePersistenceConfigRemoteGlobalOptions & {
+    readonly?: boolean;
+    waitForGet?: Selector<any>;
+    waitForSet?: LinkedOptions['waitForSet'];
+    manual?: boolean;
+    fieldTransforms?: FieldTransforms<T>;
+    allowSetIfError?: boolean;
+    transform?: PersistTransform<T>;
+    firebase?: {
+        refPath: (uid: string | undefined) => string;
+        query?: (ref: DatabaseReference) => DatabaseReference | Query;
+        queryByModified?: QueryByModified<T>;
+        ignoreKeys?: string[];
+        requireAuth?: boolean;
+        mode?: 'once' | 'realtime';
+    };
+    offlineBehavior?: false | 'retry';
+    changeTimeout?: number;
+    metadataTimeout?: number;
+    retry?: RetryOptions;
+    onGetError?: (error: Error) => void;
+    onSetError?: (error: Error) => void;
+    log?: (message?: any, ...optionalParams: any[]) => void;
+    onBeforeSet?: () => void;
+    onSet?: () => void;
+};
+export interface ObservablePersistenceConfigLocalGlobalOptions {
+    onGetError?: (error: Error) => void;
+    onSetError?: (error: Error) => void;
+    indexedDB?: {
+        databaseName: string;
+        version: number;
+        tableNames: string[];
+    };
+    asyncStorage?: {
+        AsyncStorage: AsyncStorageStatic;
+        preload?: boolean | string[];
+    };
+}
+export interface ObservablePersistenceConfigRemoteGlobalOptions {
+    debounceSet?: number;
+    dateModifiedKey?: string;
+    offlineBehavior?: false | 'retry';
+    retry?: RetryOptions;
+    onGetError?: (error: Error) => void;
+    onSetError?: (error: Error) => void;
+    log?: (logLevel: 'verbose' | 'warning' | 'error', message: any, ...optionalParams: any[]) => void;
+    onBeforeSet?: () => void;
+    onAfterSet?: () => void;
+}
+export interface ObservablePersistenceConfig {
+    pluginLocal?: ClassConstructor<ObservablePersistLocal>;
+    pluginRemote?: ClassConstructor<ObservablePersistRemoteClass> | ObservablePersistRemoteFunctions;
+    localOptions?: ObservablePersistenceConfigLocalGlobalOptions;
+    remoteOptions?: ObservablePersistenceConfigRemoteGlobalOptions;
+}
+export interface LegacyPersistOptions<T = any> {
+    local?: string | LegacyPersistOptionsLocal<T>;
+    remote?: LegacyPersistOptionsRemote<T>;
+    pluginLocal?: ClassConstructor<ObservablePersistLocal>;
+    pluginRemote?: ClassConstructor<ObservablePersistRemoteClass> | ObservablePersistRemoteFunctions<T>;
+}
+
+export interface ObservablePersistLocal {
+    initialize?(config: ObservablePersistenceConfigLocalGlobalOptions): void | Promise<void>;
+    loadTable?(table: string, config: LegacyPersistOptionsLocal): Promise<any> | void;
+    getTable<T = any>(table: string, config: LegacyPersistOptionsLocal): T;
+    set(table: string, changes: Change[], config: LegacyPersistOptionsLocal): Promise<any> | void;
+    deleteTable(table: string, config: LegacyPersistOptionsLocal): Promise<any> | void;
+    getMetadata(table: string, config: LegacyPersistOptionsLocal): PersistMetadata;
+    setMetadata(table: string, metadata: PersistMetadata, config: LegacyPersistOptionsLocal): Promise<any> | void;
+    deleteMetadata(table: string, config: LegacyPersistOptionsLocal): Promise<any> | void;
+}
+export interface ObservableOnChangeParams {
+    value: unknown;
+    path?: string[]; // TODOv4 remove
+    pathTypes?: TypeAtPath[]; // TODOv4 remove
+    mode?: GetMode;
+    dateModified?: number | undefined; // TODOv4 remove
+    lastSync?: number | undefined;
+}
+export interface ObservablePersistRemoteSetParams<T> {
+    syncState: Observable<ObservablePersistState>;
+    obs: ObservableParam<T>;
+    options: LegacyPersistOptions<T>;
+    changes: Change[];
+    value: T;
+}
+export interface ObservablePersistRemoteGetParams<T> {
+    state: Observable<ObservablePersistState>;
+    obs: ObservableParam<T>;
+    options: LegacyPersistOptions<T>;
+    dateModified?: number;
+    lastSync?: number;
+    mode?: GetMode;
+    onGet: () => void;
+    onError: (error: Error) => void;
+    onChange: (params: ObservableOnChangeParams) => void | Promise<void>;
+}
+export type ObservablePersistRemoteGetFnParams<T> = Omit<ObservablePersistRemoteGetParams<T>, 'onGet'>;
+
+export interface ObservablePersistRemoteClass {
+    get?<T>(params: ObservablePersistRemoteGetParams<T>): void;
+    set?<T>(
+        params: ObservablePersistRemoteSetParams<T>,
+    ): void | Promise<void | { changes?: object; dateModified?: number; lastSync?: number; pathStrs?: string[] }>;
+}
+
+export interface ObservablePersistRemoteFunctions<T = any> {
+    get?(params: ObservablePersistRemoteGetFnParams<T>): T | Promise<T>;
+    set?(
+        params: ObservablePersistRemoteSetParams<T>,
+    ): void | Promise<void | { changes?: object | undefined; dateModified?: number; lastSync?: number }>;
+}
+
+export interface ObservablePersistStateBase {
+    isLoadedLocal: boolean;
+    isEnabledLocal: boolean;
+    isEnabledRemote: boolean;
+    dateModified?: number;
+    lastSync?: number;
+    syncCount?: number;
+    clearLocal: () => Promise<void>;
+    sync: () => Promise<void>;
+    getPendingChanges: () =>
+        | Record<
+              string,
+              {
+                  p: any;
+                  v?: any;
+              }
+          >
+        | undefined;
+}
+export type ObservablePersistState = ObservableState & ObservablePersistStateBase;
+
+// This converts the state object's shape to the field transformer's shape
+// TODO: FieldTransformer and this shape can likely be refactored to be simpler
+declare type ObjectKeys<T> = Pick<
+    T,
+    {
+        [K in keyof T]-?: K extends string
+            ? T[K] extends Record<string, any>
+                ? T[K] extends any[]
+                    ? never
+                    : K
+                : never
+            : never;
+    }[keyof T]
+>;
+declare type DictKeys<T> = Pick<
+    T,
+    {
+        [K in keyof T]-?: K extends string ? (T[K] extends Record<string, Record<string, any>> ? K : never) : never;
+    }[keyof T]
+>;
+declare type ArrayKeys<T> = Pick<
+    T,
+    {
+        [K in keyof T]-?: K extends string | number ? (T[K] extends any[] ? K : never) : never;
+    }[keyof T]
+>;
+export declare type FieldTransforms<T> =
+    | (T extends Record<string, Record<string, any>> ? { _dict: FieldTransformsInner<RecordValue<T>> } : never)
+    | FieldTransformsInner<T>;
+export declare type FieldTransformsInner<T> = {
+    [K in keyof T]: string;
+} & (
+    | {
+          [K in keyof ObjectKeys<T> as `${K}_obj`]?: FieldTransforms<T[K]>;
+      }
+    | {
+          [K in keyof DictKeys<T> as `${K}_dict`]?: FieldTransforms<RecordValue<T[K]>>;
+      }
+) & {
+        [K in keyof ArrayKeys<T> as `${K}_arr`]?: FieldTransforms<ArrayValue<T[K]>>;
+    } & {
+        [K in keyof ArrayKeys<T> as `${K}_val`]?: FieldTransforms<ArrayValue<T[K]>>;
+    };
+
+export type QueryByModified<T> =
+    | boolean
+    | {
+          [K in keyof T]?: QueryByModified<T[K]>;
+      }
+    | {
+          '*'?: boolean;
+      };

package/src/proxy.ts

@@ -0,0 +1,28 @@
+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

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

package/src/react/For.tsx

@@ -0,0 +1,116 @@
+import type { Observable, ObservableObject, ObservableParam } from '@legendapp/state';
+import { internal, isArray, isFunction } 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 isMap = value instanceof Map;
+        const keys = isMap ? Array.from(value.keys()) : Object.keys(value);
+        if (sortValues) {
+            keys.sort((A, B) => sortValues(isMap ? value.get(A)! : value[A], isMap ? value.get(B)! : value[B], A, B));
+        }
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (isMap ? value.get(key) : value[key]) {
+                const item$ = isMap ? 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

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

package/src/react/Reactive.tsx

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,43 @@
+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

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