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

package/src/config/enableReactTracking.ts

@@ -0,0 +1,60 @@
+import {
+    type GetOptions,
+    configureLegendState,
+    internal,
+    isObject,
+    tracking,
+    type NodeValue,
+    type TrackingType,
+} from '@legendapp/state';
+import { UseSelectorOptions, useSelector } from '@legendapp/state/react';
+import { createContext, useContext } from 'react';
+// @ts-expect-error Internals
+import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as ReactInternals } from 'react';
+
+const ReactRenderContext = createContext(0);
+
+function needsSelector() {
+    // If we're already tracking then we definitely don't need useSelector
+    if (!tracking.current) {
+        try {
+            // If there's no dispatcher we're definitely not in React
+            // This is an optimization to not need to run useContext. If in a future React version
+            // this works differently we can change it or just remove it.
+            const dispatcher = ReactInternals.ReactCurrentDispatcher.current;
+            if (dispatcher) {
+                // If there's a dispatcher then we may be inside of a hook.
+                // Attempt a useContext hook, which will throw an error if outside of render.
+                useContext(ReactRenderContext);
+                return true;
+            }
+        } catch {} // eslint-disable-line no-empty
+    }
+    return false;
+}
+
+interface ReactTrackingOptions {
+    auto?: boolean; // Make all get() calls act as useSelector() hooks
+    warnUnobserved?: boolean; // Warn if get() is used outside of an observer
+}
+
+export function enableReactTracking({ auto, warnUnobserved }: ReactTrackingOptions) {
+    const { get } = internal;
+
+    configureLegendState({
+        observableFunctions: {
+            get: (node: NodeValue, options?: TrackingType | (GetOptions & UseSelectorOptions)) => {
+                if (needsSelector()) {
+                    if (auto) {
+                        return useSelector(() => get(node, options), isObject(options) ? options : undefined);
+                    } else if (process.env.NODE_ENV === 'development' && warnUnobserved) {
+                        console.warn(
+                            '[legend-state] Detected a `get()` call in an unobserved component. You may want to wrap it in observer: https://legendapp.com/open-source/state/react-api/#observer-hoc',
+                        );
+                    }
+                }
+                return get(node, options);
+            },
+        },
+    });
+}

package/src/config/enableReactUse.ts

@@ -0,0 +1,23 @@
+import { configureLegendState, internal, NodeValue } from '@legendapp/state';
+import { useSelector, UseSelectorOptions } from '@legendapp/state/react';
+
+// TODO: Deprecate
+
+export function enableReactUse() {
+    configureLegendState({
+        observableFunctions: {
+            use: (node: NodeValue, options?: UseSelectorOptions) => useSelector(internal.getProxy(node), options),
+        },
+    });
+}
+
+// Types:
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { ImmutableObservableBase } from '@legendapp/state';
+
+declare module '@legendapp/state' {
+    interface ImmutableObservableBase<T> {
+        use(options?: UseSelectorOptions): T;
+    }
+}

package/src/config/enable_peek.ts

@@ -0,0 +1,31 @@
+import { configureLegendState, internal } from '@legendapp/state';
+
+export function enable_peek() {
+    configureLegendState({
+        observableProperties: {
+            _: {
+                get(node) {
+                    return internal.peek(node);
+                },
+                set(node, value) {
+                    internal.setNodeValue(node, value);
+                },
+            },
+        },
+    });
+}
+
+// TODOv4 deprecate
+export const enableDirectAccess = enable_peek;
+
+// Types:
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { ImmutableObservableBase } from '@legendapp/state';
+
+declare module '@legendapp/state' {
+    interface ImmutableObservableBase<T> {
+        get _(): T;
+        set _(value: T | null | undefined);
+    }
+}

package/src/config.ts

@@ -0,0 +1,47 @@
+import { globalState } from './globals';
+import { observableProperties as _observableProperties, observableFns } from './ObservableObject';
+import { ObservablePrimitiveClass } from './ObservablePrimitive';
+import type { NodeValue } from './observableInterfaces';
+
+export function configureLegendState({
+    observableFunctions,
+    observableProperties,
+    jsonReplacer,
+    jsonReviver,
+}: {
+    observableFunctions?: Record<string, (node: NodeValue, ...args: any[]) => any>;
+    observableProperties?: Record<string, { get: (node: NodeValue) => any; set: (node: NodeValue, value: any) => any }>;
+    jsonReplacer?: (this: any, key: string, value: any) => any;
+    jsonReviver?: (this: any, key: string, value: any) => any;
+}) {
+    if (observableFunctions) {
+        for (const key in observableFunctions) {
+            const fn = observableFunctions[key];
+            observableFns.set(key, fn);
+            ObservablePrimitiveClass.prototype[key] = function (...args: any[]) {
+                return fn.call(this, this._node, ...args);
+            };
+        }
+    }
+    if (observableProperties) {
+        for (const key in observableProperties) {
+            const fns = observableProperties[key];
+            _observableProperties.set(key, fns);
+            Object.defineProperty(ObservablePrimitiveClass.prototype, key, {
+                configurable: true,
+                get() {
+                    return fns.get.call(this, this._node);
+                },
+                set(value: any) {
+                    return fns.set.call(this, this._node, value);
+                },
+            });
+        }
+    }
+    if (jsonReplacer) {
+        globalState.replacer = jsonReplacer;
+    }
+    if (jsonReviver) {
+        globalState.reviver = jsonReviver;
+    }
+}

package/src/createObservable.ts

@@ -0,0 +1,46 @@
+import { isObservable, setNodeValue } from './globals';
+import { isActualPrimitive, isFunction, isPromise } from './is';
+import type { ClassConstructor, ObservableRoot } from './observableInterfaces';
+import { NodeValue } from './observableInterfaces';
+import { Observable, ObservablePrimitive } from './observableTypes';
+
+export function createObservable<T>(
+    value: T | undefined,
+    makePrimitive: boolean,
+    extractPromise: Function,
+    createObject: Function,
+    createPrimitive?: Function,
+): Observable<T> {
+    if (isObservable(value)) {
+        return value as Observable<T>;
+    }
+    const valueIsPromise = isPromise<T>(value);
+    const valueIsFunction = isFunction(value);
+
+    const root: ObservableRoot = {
+        _: value,
+    };
+
+    let node: NodeValue = {
+        root,
+        lazy: true,
+    };
+
+    if (valueIsFunction) {
+        node = Object.assign(() => {}, node);
+        node.lazyFn = value;
+    }
+
+    const prim = makePrimitive || isActualPrimitive(value);
+
+    const obs = prim
+        ? (new (createPrimitive as ClassConstructor<T>)(node) as ObservablePrimitive<T>)
+        : (createObject(node) as Observable<T>);
+
+    if (valueIsPromise) {
+        setNodeValue(node, undefined);
+        extractPromise(node, value);
+    }
+
+    return obs as any;
+}

package/src/event.ts

@@ -0,0 +1,26 @@
+import { getNode, symbolGetNode } from './globals';
+import { observable } from './observable';
+import type { ObservableEvent } from './observableInterfaces';
+
+export function event(): ObservableEvent {
+    // event simply wraps around a number observable
+    // which increments its value to dispatch change events
+    const obs = observable(0);
+    const node = getNode(obs);
+    node.isEvent = true;
+    return {
+        fire: function () {
+            // Notify increments the value so that the observable changes
+            obs.set((v) => v + 1);
+        },
+        on: function (cb: () => void) {
+            return obs.onChange(cb);
+        },
+        get: function () {
+            // Return the value so that when will be truthy
+            return obs.get();
+        },
+        // @ts-expect-error eslint doesn't like adding symbols to the object but this does work
+        [symbolGetNode]: node,
+    };
+}

package/src/globals.ts

@@ -0,0 +1,224 @@
+import { isArray, isChildNodeValue, isDate, isFunction, isObject } from './is';
+import type { NodeValue, ObservableEvent, TypeAtPath, UpdateFn } from './observableInterfaces';
+import type { Observable, ObservableParam } from './observableTypes';
+
+export const symbolToPrimitive = Symbol.toPrimitive;
+export const symbolGetNode = Symbol('getNode');
+export const symbolDelete = /* @__PURE__ */ Symbol('delete');
+export const symbolOpaque = Symbol('opaque');
+export const optimized = Symbol('optimized');
+export const symbolLinked = Symbol('linked');
+
+export const globalState = {
+    isLoadingLocal: false,
+    isMerging: false,
+    isLoadingRemote: false,
+    activateSyncedNode: undefined as unknown as (node: NodeValue, newValue: any) => { update: UpdateFn; value: any },
+    pendingNodes: new Map<NodeValue, () => void>(),
+    dirtyNodes: new Set<NodeValue>(),
+    replacer: undefined as undefined | ((this: any, key: string, value: any) => any),
+    reviver: undefined as undefined | ((this: any, key: string, value: any) => any),
+};
+
+export function getPathType(value: any): TypeAtPath {
+    return isArray(value) ? 'array' : value instanceof Map ? 'map' : value instanceof Set ? 'set' : 'object';
+}
+
+function replacer(key: string, value: any) {
+    if (value instanceof Map) {
+        return {
+            __LSType: 'Map',
+            value: Array.from(value.entries()), // or with spread: value: [...value]
+        };
+    } else if (value instanceof Set) {
+        return {
+            __LSType: 'Set',
+            value: Array.from(value), // or with spread: value: [...value]
+        };
+    } else if (globalState.replacer) {
+        value = globalState.replacer(key, value);
+    }
+    return value;
+}
+
+const ISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+function reviver(key: string, value: any) {
+    if (value) {
+        if (typeof value === 'string' && ISO8601.test(value)) {
+            return new Date(value);
+        }
+        if (typeof value === 'object') {
+            if (value.__LSType === 'Map') {
+                return new Map(value.value);
+            } else if (value.__LSType === 'Set') {
+                return new Set(value.value);
+            }
+        }
+        if (globalState.reviver) {
+            value = globalState.reviver(key, value);
+        }
+    }
+    return value;
+}
+
+export function safeStringify(value: any) {
+    return JSON.stringify(value, replacer);
+}
+export function safeParse(value: any) {
+    return JSON.parse(value, reviver);
+}
+export function clone(value: any) {
+    return safeParse(safeStringify(value));
+}
+
+export function isObservable(obs: any): obs is Observable {
+    return !!obs && !!obs[symbolGetNode as any];
+}
+
+export function getNode(obs: ObservableParam): NodeValue {
+    return obs && (obs as any)[symbolGetNode];
+}
+
+export function isEvent(obs: any): obs is ObservableEvent {
+    return obs && (obs[symbolGetNode as any] as NodeValue)?.isEvent;
+}
+
+export function setNodeValue(node: NodeValue, newValue: any) {
+    const parentNode = node.parent ?? node;
+    const key = node.parent ? node.key : '_';
+
+    const isDelete = newValue === symbolDelete;
+    if (isDelete) newValue = undefined;
+
+    // Get the value of the parent
+    const parentValue = node.parent ? ensureNodeValue(parentNode) : parentNode.root;
+
+    // Save the previous value first
+    const prevValue = parentValue[key];
+
+    const isFunc = isFunction(newValue);
+
+    // Compute newValue if newValue is a function or an observable
+    newValue = !parentNode.isAssigning && isFunc && !isFunction(prevValue) ? newValue(prevValue) : newValue;
+
+    if (
+        !globalState.isMerging ||
+        prevValue === undefined ||
+        isFunction(prevValue) ||
+        !node.parent?.functions?.get(key)
+    ) {
+        try {
+            parentNode.isSetting = (parentNode.isSetting || 0) + 1;
+
+            // Save the new value
+            if (isDelete) {
+                delete parentValue[key];
+            } else {
+                parentValue[key] = newValue;
+            }
+        } finally {
+            parentNode.isSetting!--;
+        }
+    }
+
+    return { prevValue, newValue };
+}
+
+const arrNodeKeys: string[] = [];
+export function getNodeValue(node: NodeValue): any {
+    let count = 0;
+    let n: NodeValue = node;
+    while (isChildNodeValue(n)) {
+        arrNodeKeys[count++] = n.key;
+        n = n.parent;
+    }
+    let child = node.root._;
+    for (let i = count - 1; child && i >= 0; i--) {
+        const key = arrNodeKeys[i] as any;
+        child = key !== 'size' && (child instanceof Map || child instanceof WeakMap) ? child.get(key) : child[key];
+    }
+    return child;
+}
+
+export function getChildNode(node: NodeValue, key: string, asFunction?: Function): NodeValue {
+    // Get the child by key
+    let child = node.children?.get(key);
+
+    // Create the child node if it doesn't already exist
+    if (!child) {
+        child = {
+            root: node.root,
+            parent: node,
+            key,
+            lazy: true,
+        };
+        // Lookup functions are bound with the child key
+        if (node.lazyFn?.length === 1) {
+            asFunction = node.lazyFn.bind(node, key);
+        }
+        if (isFunction(asFunction)) {
+            child = Object.assign(() => {}, child);
+            child.lazyFn = asFunction;
+        }
+        if (!node.children) {
+            node.children = new Map();
+        }
+        node.children.set(key, child);
+    }
+
+    return child;
+}
+
+export function ensureNodeValue(node: NodeValue) {
+    let value = getNodeValue(node);
+    if (!value || isFunction(value)) {
+        if (isChildNodeValue(node)) {
+            const parent = ensureNodeValue(node.parent);
+            value = parent[node.key] = {};
+        } else {
+            value = node.root._ = {};
+        }
+    }
+    return value;
+}
+
+export function findIDKey(obj: unknown | undefined, node: NodeValue): string | ((value: any) => string) | undefined {
+    let idKey: string | ((value: any) => string) | undefined = isObservable(obj)
+        ? undefined
+        : isObject(obj)
+        ? 'id' in obj
+            ? 'id'
+            : 'key' in obj
+            ? 'key'
+            : '_id' in obj
+            ? '_id'
+            : '__id' in obj
+            ? '__id'
+            : undefined
+        : undefined;
+
+    if (!idKey && node.parent) {
+        const k = node.key + '_keyExtractor';
+        const keyExtractor =
+            (node.functions?.get(k) as (value: any) => string) ??
+            (getNodeValue(node.parent)[node.key + '_keyExtractor'] as (value: any) => string);
+        if (keyExtractor && isFunction(keyExtractor)) {
+            idKey = keyExtractor;
+        }
+    }
+
+    return idKey;
+}
+
+export function extractFunction(node: NodeValue, key: string, fnOrComputed: Function): void;
+export function extractFunction(node: NodeValue, key: string, fnOrComputed: Observable): void;
+export function extractFunction(node: NodeValue, key: string, fnOrComputed: Function | Observable): void {
+    if (!node.functions) {
+        node.functions = new Map();
+    }
+
+    node.functions.set(key, fnOrComputed);
+}
+export function equals(a: unknown, b: unknown) {
+    return a === b || (isDate(a) && isDate(b) && +a === +b);
+}

package/src/helpers/fetch.ts

@@ -0,0 +1,26 @@
+import { Observable, observable } from '@legendapp/state';
+
+export function observableFetch<T>(
+    input: RequestInfo | URL,
+    init?: RequestInit,
+    valueType?: 'arrayBuffer' | 'blob' | 'formData' | 'json' | 'text',
+): Observable<{
+    data?: T;
+    error?: any;
+    errorStr?: string;
+    loading: boolean;
+}> {
+    const obs: Observable<any> = observable({
+        data: undefined,
+        error: undefined,
+        errorStr: undefined,
+        loading: true,
+    });
+
+    fetch(input, init)
+        .then((response) => response[valueType || 'json']())
+        .then((value) => obs.set({ data: value, loading: false }))
+        .catch((error) => obs.set({ loading: false, error, errorStr: error?.toString?.() }));
+
+    return obs as any;
+}

package/src/helpers/pageHash.ts

@@ -0,0 +1,41 @@
+import { observable, Observable } from '@legendapp/state';
+
+interface Options {
+    setter: 'pushState' | 'replaceState' | 'hash';
+}
+let _options: Options = { setter: 'hash' };
+
+function configurePageHash(options: Options) {
+    _options = options;
+}
+
+const hasWindow = typeof window !== 'undefined';
+const pageHash: Observable<string> = observable(hasWindow ? window.location.hash.slice(1) : '');
+
+if (hasWindow) {
+    let isSetting = false;
+    // Set the page hash when the observable changes
+    pageHash.onChange(({ value }) => {
+        if (!isSetting) {
+            const hash = '#' + value;
+            const setter = _options?.setter || 'hash';
+            if (setter === 'pushState') {
+                history.pushState(null, null as any, hash);
+            } else if (setter === 'replaceState') {
+                history.replaceState(null, null as any, hash);
+            } else {
+                location.hash = hash;
+            }
+        }
+    });
+    // Update the observable whenever the hash changes
+    const cb = () => {
+        isSetting = true;
+        pageHash.set(window.location.hash.slice(1));
+        isSetting = false;
+    };
+    // Subscribe to window hashChange event
+    window.addEventListener('hashchange', cb);
+}
+
+export { configurePageHash, pageHash };

package/src/helpers/pageHashParams.ts

@@ -0,0 +1,55 @@
+import { observable, Observable } from '@legendapp/state';
+
+interface Options {
+    setter: 'pushState' | 'replaceState' | 'hash';
+}
+let _options: Options = { setter: 'hash' };
+
+function configurePageHashParams(options: Options) {
+    _options = options;
+}
+
+function toParams(str: string) {
+    const ret: Record<string, string> = {};
+    const searchParams = new URLSearchParams(str);
+    for (const [key, value] of searchParams) {
+        ret[key] = value;
+    }
+    return ret;
+}
+function toString(params: Record<string, string>) {
+    return new URLSearchParams(params).toString().replace(/=$/, '');
+}
+
+const hasWindow = typeof window !== 'undefined';
+const pageHashParams: Observable<Record<string, string>> = observable(
+    hasWindow ? toParams(window.location.hash.slice(1)) : {},
+);
+
+if (hasWindow) {
+    let isSetting = false;
+    // Set the page hash when the observable changes
+    pageHashParams.onChange(({ value }) => {
+        if (!isSetting) {
+            const hash = '#' + toString(value);
+            const setter = _options?.setter || 'hash';
+            if (setter === 'pushState') {
+                history.pushState(null, null as any, hash);
+            } else if (setter === 'replaceState') {
+                history.replaceState(null, null as any, hash);
+            } else {
+                location.hash = hash;
+            }
+        }
+    });
+    // Update the observable whenever the hash changes
+    const cb = () => {
+        isSetting = true;
+        pageHashParams.set(toParams(window.location.hash.slice(1)));
+        isSetting = false;
+    };
+    // Subscribe to window hashChange event
+    window.addEventListener('hashchange', cb);
+}
+
+export { configurePageHashParams, pageHashParams };

package/src/helpers/time.ts

@@ -0,0 +1,30 @@
+import { observable } from '@legendapp/state';
+
+const MSPerMinute = 60000;
+
+function clearTime(date: Date | number) {
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+    return date;
+}
+
+let time = new Date();
+const currentTime = observable(time);
+const currentDay = observable(clearTime(time));
+const timeToSecond = (60 - time.getSeconds() + 1) * 1000;
+function update() {
+    const now = new Date();
+    currentTime.set(now);
+
+    if (now.getDate() !== time.getDate()) {
+        currentDay.set(clearTime(now));
+    }
+
+    time = now;
+}
+setTimeout(() => {
+    update();
+    setInterval(update, MSPerMinute);
+}, timeToSecond);
+
+export { currentTime, currentDay };