@legendapp/state 2.2.0-next.8 → 2.2.0-next.80

package/src/sync-plugins/supabase.ts

@@ -0,0 +1,261 @@
+import {
+    Observable,
+    computeSelector,
+    getNodeValue,
+    mergeIntoObservable,
+    observable,
+    symbolDelete,
+} from '@legendapp/state';
+import {
+    SyncedOptions,
+    SyncedOptionsGlobal,
+    removeNullUndefined,
+    type SyncedGetParams,
+    type SyncedSubscribeParams,
+} from '@legendapp/state/sync';
+import {
+    CrudAsOption,
+    SyncedCrudPropsBase,
+    SyncedCrudPropsMany,
+    SyncedCrudReturnType,
+    syncedCrud,
+} from '@legendapp/state/sync-plugins/crud';
+import type { PostgrestFilterBuilder, PostgrestQueryBuilder } from '@supabase/postgrest-js';
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+// Unused types but maybe useful in the future so keeping them for now
+// type DatabaseOf<Client extends SupabaseClient> = Client extends SupabaseClient<infer TDB> ? TDB : never;
+// type SchemaNameOf<Client extends SupabaseClient> = Client extends SupabaseClient<infer _, infer SchemaName>
+//     ? SchemaName
+//     : never;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type SchemaOf<Client extends SupabaseClient> = Client extends SupabaseClient<infer _, infer __, infer Schema>
+    ? Schema
+    : never;
+type TableOf<Client extends SupabaseClient> = SchemaOf<Client>['Tables'];
+type CollectionOf<Client extends SupabaseClient> = keyof TableOf<Client>;
+type RowOf<Client extends SupabaseClient, Collection extends CollectionOf<Client>> = TableOf<Client>[Collection]['Row'];
+
+export type SyncedSupabaseConfig<T extends { id: string }> = Omit<
+    SyncedCrudPropsBase<T>,
+    'create' | 'update' | 'delete' | 'onSaved' | 'transform' | 'updatePartial' | 'subscribe'
+>;
+
+export interface SyncedSupabaseGlobalConfig
+    extends Omit<SyncedSupabaseConfig<{ id: string }>, 'persist' | keyof SyncedOptions> {
+    persist?: SyncedOptionsGlobal;
+    enabled?: Observable<boolean>;
+    as?: Exclude<CrudAsOption, 'first'>;
+}
+
+interface SyncedSupabaseProps<
+    Client extends SupabaseClient,
+    Collection extends CollectionOf<Client>,
+    TOption extends CrudAsOption = 'object',
+> extends SyncedSupabaseConfig<RowOf<Client, Collection>>,
+        SyncedCrudPropsMany<RowOf<Client, Collection>, RowOf<Client, Collection>, TOption> {
+    supabase: Client;
+    collection: Collection;
+    select?: (
+        query: PostgrestQueryBuilder<SchemaOf<Client>, TableOf<Client>[Collection], Collection>,
+    ) => PostgrestFilterBuilder<
+        SchemaOf<Client>,
+        RowOf<Client, Collection>,
+        RowOf<Client, Collection>[],
+        Collection,
+        []
+    >;
+    filter?: (
+        select: PostgrestFilterBuilder<
+            SchemaOf<Client>,
+            RowOf<Client, Collection>,
+            RowOf<Client, Collection>[],
+            Collection,
+            []
+        >,
+        params: SyncedGetParams,
+    ) => PostgrestFilterBuilder<
+        SchemaOf<Client>,
+        RowOf<Client, Collection>,
+        RowOf<Client, Collection>[],
+        Collection,
+        []
+    >;
+    actions?: ('create' | 'read' | 'update' | 'delete')[];
+    realtime?: { schema?: string; filter?: string };
+}
+
+let channelNum = 1;
+const supabaseConfig: SyncedSupabaseGlobalConfig = {};
+const isEnabled$ = observable(true);
+
+export function configureSyncedSupabase(config: SyncedSupabaseGlobalConfig) {
+    const { enabled, ...rest } = config;
+    if (enabled !== undefined) {
+        isEnabled$.set(enabled);
+    }
+    Object.assign(supabaseConfig, removeNullUndefined(rest));
+}
+
+export function syncedSupabase<
+    Client extends SupabaseClient,
+    Collection extends CollectionOf<Client> & string,
+    AsOption extends CrudAsOption = 'object',
+>(props: SyncedSupabaseProps<Client, Collection, AsOption>): SyncedCrudReturnType<RowOf<Client, Collection>, AsOption> {
+    mergeIntoObservable(props, supabaseConfig);
+    const {
+        supabase: client,
+        collection,
+        select: selectFn,
+        filter,
+        actions,
+        fieldCreatedAt,
+        fieldUpdatedAt,
+        realtime,
+        changesSince,
+        waitFor,
+        waitForSet,
+        generateId: generateIdParam,
+        ...rest
+    } = props;
+
+    const generateId = generateIdParam || supabaseConfig.generateId;
+
+    const list =
+        !actions || actions.includes('read')
+            ? async (params: SyncedGetParams) => {
+                  const { lastSync } = params;
+                  const from = client.from(collection);
+                  let select = selectFn ? selectFn(from) : from.select();
+                  if (changesSince === 'last-sync') {
+                      select = select.neq('deleted', true);
+                      if (lastSync) {
+                          const date = new Date(lastSync).toISOString();
+                          select = select.or(
+                              [
+                                  fieldCreatedAt && `${fieldCreatedAt}.gt.${date}`,
+                                  fieldUpdatedAt && `${fieldUpdatedAt}.gt.${date}`,
+                              ].join(','),
+                          );
+                      }
+                  }
+                  if (filter) {
+                      select = filter(select, params);
+                  }
+                  const { data, error } = await select;
+                  if (error) {
+                      throw new Error(error?.message);
+                  }
+                  return (data! || []) as RowOf<Client, Collection>[];
+              }
+            : undefined;
+
+    const upsert = async (input: RowOf<Client, Collection>) => {
+        const res = await client.from(collection).upsert(input).select();
+        const { data, error } = res;
+        if (data) {
+            const created = data[0];
+            return created;
+        } else {
+            throw new Error(error?.message);
+        }
+    };
+    const create = !actions || actions.includes('create') ? upsert : undefined;
+    const update = !actions || actions.includes('update') ? upsert : undefined;
+    const deleteFn =
+        !actions || actions.includes('delete')
+            ? async (input: RowOf<Client, Collection>) => {
+                  const id = input.id;
+                  const from = client.from(collection);
+                  const res = await (changesSince === 'last-sync' ? from.update({ deleted: true }) : from.delete())
+                      .eq('id', id)
+                      .select();
+                  const { data, error } = res;
+                  if (data) {
+                      const created = data[0];
+                      return created;
+                  } else {
+                      throw new Error(error?.message);
+                  }
+              }
+            : undefined;
+    const subscribe = realtime
+        ? ({ node, update }: SyncedSubscribeParams) => {
+              const { filter, schema } = realtime;
+              const channel = client
+                  .channel(`LS_${node.key || ''}${channelNum++}`)
+                  .on(
+                      'postgres_changes',
+                      {
+                          event: '*',
+                          table: collection,
+                          schema: schema || 'public',
+                          filter: filter || undefined,
+                      },
+                      (payload) => {
+                          const { eventType, new: value, old } = payload;
+                          if (eventType === 'INSERT' || eventType === 'UPDATE') {
+                              const cur = getNodeValue(node)?.[value.id];
+                              const curDateStr =
+                                  cur &&
+                                  ((fieldUpdatedAt && cur[fieldUpdatedAt]) ||
+                                      fieldCreatedAt ||
+                                      cur[fieldCreatedAt as any]);
+                              const valueDateStr =
+                                  (fieldUpdatedAt && value[fieldUpdatedAt]) ||
+                                  (fieldCreatedAt && value[fieldCreatedAt]);
+                              const valueDate = +new Date(valueDateStr);
+                              // Check if new or newer than last seen locally
+                              if (valueDateStr && (!curDateStr || valueDate > +new Date(curDateStr))) {
+                                  // Update local with the new value
+                                  update({
+                                      value: { [value.id]: value },
+                                      lastSync: valueDate,
+                                      mode: 'merge',
+                                  });
+                              }
+                          } else if (eventType === 'DELETE') {
+                              const { id } = old;
+                              update({
+                                  value: { [id]: symbolDelete },
+                              });
+                          }
+                      },
+                  )
+                  .subscribe();
+
+              return channel.unsubscribe;
+          }
+        : undefined;
+
+    return syncedCrud<RowOf<Client, Collection>, RowOf<Client, Collection>, AsOption>({
+        ...rest,
+        list,
+        create,
+        update,
+        delete: deleteFn,
+        onSaved: (saved) => {
+            // Update the local timestamps with server response
+            if (fieldCreatedAt || fieldUpdatedAt) {
+                const ret: any = {
+                    id: saved.id,
+                };
+                if (fieldCreatedAt) {
+                    ret[fieldCreatedAt] = fieldCreatedAt;
+                }
+                if (fieldUpdatedAt) {
+                    ret[fieldUpdatedAt] = fieldUpdatedAt;
+                }
+                return ret;
+            }
+        },
+        subscribe,
+        fieldCreatedAt,
+        fieldUpdatedAt,
+        updatePartial: true,
+        generateId,
+        waitFor: () => isEnabled$.get() && (waitFor ? computeSelector(waitFor) : true),
+        waitForSet: () => isEnabled$.get() && (waitForSet ? computeSelector(waitForSet) : true),
+    });
+}

package/src/trace/traceHelpers.ts

@@ -0,0 +1,11 @@
+import type { NodeValue } from '@legendapp/state';
+
+export function getNodePath(node: NodeValue) {
+    const arr: (string | number)[] = [];
+    let n = node;
+    while (n?.key !== undefined) {
+        arr.splice(0, 0, n.key);
+        n = n.parent;
+    }
+    return arr.join('.');
+}

package/src/trace/useTraceListeners.ts

@@ -0,0 +1,34 @@
+import { NodeValue, internal, TrackingNode } from '@legendapp/state';
+import { getNodePath } from './traceHelpers';
+const { optimized, tracking } = internal;
+
+export function useTraceListeners(this: any, name?: string) {
+    if (process.env.NODE_ENV === 'development' && tracking.current) {
+        tracking.current.traceListeners = traceNodes.bind(this, name);
+    }
+}
+
+function traceNodes(name: string | undefined, nodes: Map<NodeValue, TrackingNode>) {
+    if (process.env.NODE_ENV === 'development' && tracking.current) {
+        tracking.current.traceListeners = undefined;
+        const arr: string[] = [];
+        if (nodes) {
+            for (const tracked of nodes.values()) {
+                const { node, track } = tracked;
+                const shallow = track === true;
+                const isOptimized = track === optimized;
+                arr.push(
+                    `${arr.length + 1}: ${getNodePath(node)}${shallow ? ' (shallow)' : ''}${
+                        isOptimized ? ' (optimized)' : ''
+                    }`,
+                );
+            }
+        }
+
+        console.log(
+            `[legend-state] ${name ? name + ' ' : ''}tracking ${arr.length} observable${
+                arr.length !== 1 ? 's' : ''
+            }:\n${arr.join('\n')}`,
+        );
+    }
+}

package/src/trace/useTraceUpdates.ts

@@ -0,0 +1,24 @@
+import { ListenerParams, internal } from '@legendapp/state';
+const { tracking } = internal;
+
+export function useTraceUpdates(name?: string) {
+    if (process.env.NODE_ENV === 'development' && tracking.current) {
+        tracking.current.traceUpdates = replaceUpdateFn.bind(undefined, name);
+    }
+}
+
+function replaceUpdateFn(name: string | undefined, updateFn: Function) {
+    return onChange.bind(undefined, name, updateFn);
+}
+
+function onChange(name: string | undefined, updateFn: Function, params: ListenerParams<any>) {
+    const { changes } = params;
+    if (process.env.NODE_ENV === 'development') {
+        changes.forEach(({ path, valueAtPath, prevAtPath }) => {
+            console.log(`[legend-state] Rendering ${name ? name + ' ' : ''}because "${path}" changed:
+from: ${JSON.stringify(prevAtPath)}
+to: ${JSON.stringify(valueAtPath)}`);
+        });
+        return updateFn();
+    }
+}

package/src/trace/useVerifyNotTracking.ts

@@ -0,0 +1,33 @@
+import { internal, NodeValue, TrackingNode } from '@legendapp/state';
+import { getNodePath } from './traceHelpers';
+const { optimized, tracking } = internal;
+
+export function useVerifyNotTracking(this: any, name?: string) {
+    if (process.env.NODE_ENV === 'development') {
+        tracking.current!.traceListeners = traceNodes.bind(this, name);
+    }
+}
+
+function traceNodes(name: string | undefined, nodes: Map<NodeValue, TrackingNode>) {
+    if (process.env.NODE_ENV === 'development') {
+        tracking.current!.traceListeners = undefined;
+        const arr: string[] = [];
+        if (nodes) {
+            for (const tracked of nodes.values()) {
+                const { node, track } = tracked;
+                const shallow = track === true;
+                const isOptimized = track === optimized;
+                arr.push(
+                    `${arr.length + 1}: ${getNodePath(node)}${shallow ? ' (shallow)' : ''}${
+                        isOptimized ? ' (optimized)' : ''
+                    }`,
+                );
+            }
+            console.error(
+                `[legend-state] ${name ? name + ' ' : ''}tracking ${arr.length} observable${
+                    arr.length !== 1 ? 's' : ''
+                } when it should not be:\n${arr.join('\n')}`,
+            );
+        }
+    }
+}

package/src/trace/useVerifyOneRender.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+
+export function useVerifyOneRender(name?: string) {
+    if (process.env.NODE_ENV === 'development') {
+        const numRenders = ++useRef(0).current;
+        if (numRenders > 1) {
+            console.error(`[legend-state] ${name ? name + ' ' : ''}Component rendered more than once`);
+        }
+    }
+}

package/src/trackSelector.ts

@@ -0,0 +1,52 @@
+import { computeSelector } from './helpers';
+import type { ListenerParams, ObserveEvent, Selector } from './observableInterfaces';
+import type { ObserveOptions } from './observe';
+import { setupTracking } from './setupTracking';
+import { beginTracking, endTracking, tracking } from './tracking';
+
+export function trackSelector<T>(
+    selector: Selector<T>,
+    update: (params: ListenerParams) => void,
+    observeEvent?: ObserveEvent<T>,
+    observeOptions?: ObserveOptions,
+    createResubscribe?: boolean,
+) {
+    let dispose: undefined | (() => void);
+    let resubscribe: (() => () => void) | undefined;
+    let updateFn = update;
+
+    beginTracking();
+    const value = selector ? computeSelector(selector, observeEvent, observeOptions?.fromComputed) : selector;
+    const tracker = tracking.current;
+    const nodes = tracker!.nodes;
+    endTracking();
+
+    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && tracker && nodes) {
+        tracker.traceListeners?.(nodes);
+        if (tracker.traceUpdates) {
+            updateFn = tracker.traceUpdates(update) as () => void;
+        }
+        // Clear tracing so it doesn't leak to other components
+        tracker.traceListeners = undefined;
+        tracker.traceUpdates = undefined;
+    }
+
+    if (!observeEvent?.cancel) {
+        // Do tracing if it was requested
+
+        // useSyncExternalStore doesn't subscribe until after the component mount.
+        // We want to subscribe immediately so we don't miss any updates
+        dispose = setupTracking(nodes, updateFn, false, observeOptions?.immediate);
+        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+            resubscribe = createResubscribe
+                ? () => {
+                      dispose?.();
+                      dispose = setupTracking(nodes, updateFn);
+                      return dispose;
+                  }
+                : undefined;
+        }
+    }
+
+    return { nodes, value, dispose, resubscribe };
+}

package/src/tracking.ts

@@ -0,0 +1,43 @@
+import type { NodeValue, TrackingState, TrackingType } from './observableInterfaces';
+
+let trackCount = 0;
+const trackingQueue: (TrackingState | undefined)[] = [];
+
+export const tracking = {
+    current: undefined as TrackingState | undefined,
+};
+
+export function beginTracking() {
+    // Keep a copy of the previous tracking context so it can be restored
+    // when this context is complete
+    trackingQueue.push(tracking.current);
+    trackCount++;
+    tracking.current = {};
+}
+export function endTracking() {
+    // Restore the previous tracking context
+    trackCount--;
+    if (trackCount < 0) {
+        trackCount = 0;
+    }
+    tracking.current = trackingQueue.pop();
+}
+
+export function updateTracking(node: NodeValue, track?: TrackingType) {
+    if (trackCount) {
+        const tracker = tracking.current;
+        if (tracker) {
+            if (!tracker.nodes) {
+                tracker.nodes = new Map();
+            }
+
+            const existing = tracker.nodes.get(node);
+            if (existing) {
+                existing.track = existing.track || track;
+                existing.num++;
+            } else {
+                tracker.nodes.set(node, { node, track, num: 1 });
+            }
+        }
+    }
+}

package/src/types/babel.d.ts

@@ -0,0 +1,12 @@
+import type { ObservableParam } from '@legendapp/state';
+import { ReactNode } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Computed, Memo } from '@legendapp/state/react';
+declare module '@legendapp/state/react' {
+    export declare const Computed: (props: {
+        children: ObservableParam | (() => ReactNode) | ReactNode;
+    }) => React.ReactElement;
+    export declare const Memo: (props: {
+        children: ObservableParam | (() => ReactNode) | ReactNode;
+    }) => React.ReactElement;
+}

package/src/when.ts

@@ -0,0 +1,75 @@
+import { computeSelector, isObservableValueReady } from './helpers';
+import { isPromise } from './is';
+import type { ObserveEvent, Selector } from './observableInterfaces';
+import { observe } from './observe';
+
+function _when<T, T2>(predicate: Selector<T>, effect?: (value: T) => T2, checkReady?: boolean): any {
+    // If predicate is a regular Promise skip all the observable stuff
+    if (isPromise<T>(predicate)) {
+        return effect ? predicate.then(effect) : (predicate as any);
+    }
+
+    let value: T | undefined;
+    let effectValue: T2 | undefined;
+
+    // Create a wrapping fn that calls the effect if predicate returns true
+    function run(e: ObserveEvent<T>) {
+        const ret = computeSelector(predicate);
+
+        if (isPromise(ret)) {
+            value = ret as any;
+            // We want value to be the Promise but return undefined
+            // so it doesn't run the effect with the Promise as the value
+            return undefined;
+        } else if (!isPromise(ret) && (checkReady ? isObservableValueReady(ret) : ret)) {
+            value = ret;
+
+            // Set cancel so that observe does not track anymore
+            e.cancel = true;
+        }
+
+        return value;
+    }
+    function doEffect() {
+        // If value is truthy then run the effect
+        effectValue = effect?.(value!);
+    }
+    // Run in an observe
+    observe(run, doEffect);
+
+    // If first run resulted in a truthy value just return it.
+    // It will have set e.cancel so no need to dispose
+    if (isPromise<T>(value)) {
+        return effect ? value.then(effect) : (value as any);
+    } else if (value !== undefined) {
+        return effect ? effectValue : Promise.resolve(value);
+    } else {
+        // Wrap it in a promise
+        const promise = new Promise<T2>((resolve) => {
+            if (effect) {
+                const originalEffect = effect;
+                effect = ((value: T) => {
+                    const effectValue = originalEffect(value);
+                    resolve(isPromise(effectValue) ? effectValue.then((value) => value as T2) : effectValue);
+                }) as any;
+            } else {
+                effect = resolve as any;
+            }
+        });
+
+        return promise;
+    }
+}
+
+export function when<T, T2>(predicate: Promise<T>, effect: (value: T) => T2): Promise<T2>;
+export function when<T, T2>(predicate: Selector<T>, effect: (value: T) => T2): Promise<T2>;
+export function when<T>(predicate: Selector<T>): Promise<T>;
+export function when<T, T2>(predicate: Selector<T>, effect?: (value: T) => T2): Promise<T | T2> {
+    return _when<T, T2>(predicate, effect, false);
+}
+export function whenReady<T, T2>(predicate: Promise<T>, effect: (value: T) => T2): Promise<T2>;
+export function whenReady<T, T2>(predicate: Selector<T>, effect: (value: T) => T2): Promise<T2>;
+export function whenReady<T>(predicate: Selector<T>): Promise<T>;
+export function whenReady<T, T2>(predicate: Selector<T>, effect?: (value: T) => T2): Promise<T | T2> {
+    return _when<T, T2>(predicate, effect, true);
+}

package/sync-plugins/crud.d.ts

@@ -0,0 +1,41 @@
+import { SyncTransform, SyncedGetParams, SyncedOptions, SyncedSetParams } from '@legendapp/state/sync';
+export type CrudAsOption = 'Map' | 'object' | 'first';
+export type CrudResult<T> = T;
+export interface SyncedCrudPropsSingle<TRemote, TLocal> {
+    get?: (params: SyncedGetParams) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    initial?: InitialValue<TLocal, 'first'>;
+    as?: never | 'first';
+}
+export interface SyncedCrudPropsMany<TRemote, TLocal, TAsOption extends CrudAsOption> {
+    list?: (params: SyncedGetParams) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+    as?: TAsOption;
+    initial?: InitialValue<TLocal, TAsOption>;
+}
+export interface SyncedCrudPropsBase<TRemote extends {
+    id: string | number;
+}, TLocal = TRemote> extends Omit<SyncedOptions<TLocal>, 'get' | 'set' | 'transform' | 'initial'> {
+    create?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<TRemote> | null | undefined>;
+    update?(input: Partial<TRemote>, params: SyncedSetParams<TRemote>): Promise<CrudResult<Partial<TRemote> | null | undefined>>;
+    delete?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<any>>;
+    onSaved?(saved: TLocal, input: TRemote, isCreate: boolean): Partial<TLocal> | void;
+    transform?: SyncTransform<TLocal, TRemote>;
+    fieldUpdatedAt?: string;
+    fieldCreatedAt?: string;
+    updatePartial?: boolean;
+    changesSince?: 'all' | 'last-sync';
+    generateId?: () => string | number;
+}
+type InitialValue<T, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<string, T> : TAsOption extends 'object' ? Record<string, T> : TAsOption extends 'first' ? T : T[];
+export type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<string, TLocal> : TAsOption extends 'object' ? Record<string, TLocal> : TAsOption extends 'first' ? TLocal : TLocal[];
+export declare function createTransform<T extends Record<string, any>, T2 extends Record<string, any>>(...keys: (keyof T | {
+    from: keyof T;
+    to: keyof T2;
+})[]): SyncTransform<T2, T>;
+export declare function combineTransforms<T, T2>(transform1: SyncTransform<T2, T>, ...transforms: Partial<SyncTransform<T2, T>>[]): SyncTransform<T2, T>;
+export declare function syncedCrud<TRemote extends {
+    id: string | number;
+}, TLocal = TRemote>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'first'>;
+export declare function syncedCrud<TRemote extends {
+    id: string | number;
+}, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsMany<TRemote, TLocal, TAsOption>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'first'>>;
+export {};