@legendapp/state 3.0.0-alpha.0 → 3.0.0-alpha.2

package/src/ObservablePrimitive.ts

@@ -1,62 +0,0 @@
-import { set, get, peek, flushPending } from './ObservableObject';
-import { symbolGetNode } from './globals';
-import { isBoolean } from './is';
-import type { NodeValue, TrackingType } from './observableInterfaces';
-import type { ObservablePrimitive, ObservableBoolean } from './observableTypes';
-import { onChange } from './onChange';
-
-interface ObservablePrimitiveState {
-    _node: NodeValue;
-    toggle: () => void;
-}
-
-const fns: (keyof ObservableBoolean)[] = ['get', 'set', 'peek', 'onChange', 'toggle'];
-
-export function ObservablePrimitiveClass<T>(this: ObservablePrimitive<T> & ObservablePrimitiveState, node: NodeValue) {
-    this._node = node;
-
-    // Bind to this
-    for (let i = 0; i < fns.length; i++) {
-        const key: keyof typeof this = fns[i];
-        this[key] = (this[key] as Function).bind(this);
-    }
-}
-
-// Add observable functions to prototype
-function proto(key: string, fn: Function) {
-    ObservablePrimitiveClass.prototype[key] = function (...args: any[]) {
-        return fn.call(this, this._node, ...args);
-    };
-}
-proto('peek', (node: NodeValue) => {
-    flushPending();
-    return peek(node);
-});
-proto('get', (node: NodeValue, options?: TrackingType) => {
-    flushPending();
-    return get(node, options);
-});
-proto('set', set);
-proto('onChange', onChange);
-
-// Getters
-Object.defineProperty(ObservablePrimitiveClass.prototype, symbolGetNode, {
-    configurable: true,
-    get() {
-        return this._node;
-    },
-});
-
-ObservablePrimitiveClass.prototype.toggle = function (): void {
-    const value = this.peek();
-    if (value === undefined || value === null || isBoolean(value)) {
-        this.set(!value);
-    } else if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
-        throw new Error('[legend-state] Cannot toggle a non-boolean value');
-    }
-};
-ObservablePrimitiveClass.prototype.delete = function () {
-    this.set(undefined);
-
-    return this;
-};

package/src/babel/index.ts

@@ -1,83 +0,0 @@
-import {
-    arrowFunctionExpression,
-    jsxClosingElement,
-    jsxClosingFragment,
-    jsxElement,
-    jsxExpressionContainer,
-    jsxFragment,
-    jsxIdentifier,
-    jsxOpeningElement,
-    jsxOpeningFragment,
-} from '@babel/types';
-
-export default function () {
-    let hasLegendImport = false;
-    return {
-        visitor: {
-            ImportDeclaration: {
-                enter(path: { node: any; replaceWith: (param: any) => any; skip: () => void }) {
-                    if (path.node.source.value === '@legendapp/state/react') {
-                        const specifiers = path.node.specifiers;
-                        for (let i = 0; i < specifiers.length; i++) {
-                            const s = specifiers[i].imported.name;
-                            if (!hasLegendImport && (s === 'Computed' || s === 'Memo' || s === 'Show')) {
-                                hasLegendImport = true;
-                                path.skip();
-                                break;
-                            }
-                        }
-                    }
-                },
-            },
-            JSXElement: {
-                enter(path: {
-                    node: any;
-                    replaceWith: (param: any) => any;
-                    skip: () => void;
-                    traverse: (path: any) => any;
-                }) {
-                    if (!hasLegendImport) {
-                        path.skip();
-                        return;
-                    }
-
-                    const openingElement = path.node.openingElement;
-                    const name = openingElement.name.name;
-
-                    if (name === 'Computed' || name === 'Memo' || name === 'Show') {
-                        const children = removeEmptyText(path.node.children);
-                        if (children.length === 0) return;
-
-                        if (
-                            children[0].type === 'JSXElement' ||
-                            (children[0].type === 'JSXExpressionContainer' &&
-                                children[0].expression.type !== 'ArrowFunctionExpression' &&
-                                children[0].expression.type !== 'FunctionExpression' &&
-                                children[0].expression.type !== 'MemberExpression' &&
-                                children[0].expression.type !== 'Identifier')
-                        ) {
-                            const attrs = openingElement.attributes;
-                            path.replaceWith(
-                                jsxElement(
-                                    jsxOpeningElement(jsxIdentifier(name), attrs),
-                                    jsxClosingElement(jsxIdentifier(name)),
-                                    [jsxExpressionContainer(arrowFunctionExpression([], maybeWrapFragment(children)))],
-                                ),
-                            );
-                        }
-                    }
-                },
-            },
-        },
-    };
-}
-
-function maybeWrapFragment(children: any[]) {
-    if (children.length === 1 && children[0].type == 'JSXElement') return children[0];
-    if (children.length === 1 && children[0].type == 'JSXExpressionContainer') return children[0].expression;
-    return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), children);
-}
-
-function removeEmptyText(nodes: any[]) {
-    return nodes.filter((node) => !(node.type === 'JSXText' && node.value.trim().length === 0));
-}

package/src/batching.ts

@@ -1,357 +0,0 @@
-import { clone, getChildNode, getNodeValue, getPathType, globalState, optimized } from './globals';
-import { applyChanges } from './helpers';
-import type { Change, ListenerFn, ListenerParams, NodeValue, TypeAtPath } from './observableInterfaces';
-
-interface BatchItem {
-    value: any;
-    prev: any;
-    level: number;
-    loading: boolean;
-    remote: boolean;
-    whenOptimizedOnlyIf?: boolean;
-}
-interface ChangeInBatch {
-    value: any;
-    level: number;
-    remote: boolean;
-    loading: boolean;
-    whenOptimizedOnlyIf?: boolean;
-    changes: Change[];
-}
-let timeout: ReturnType<typeof setTimeout> | undefined;
-let numInBatch = 0;
-let isRunningBatch = false;
-let didDelayEndBatch = false;
-let _batchMap = new Map<NodeValue, BatchItem>();
-
-function onActionTimeout() {
-    if (_batchMap.size > 0) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error(
-                'Forcibly completing observableBatcher because end() was never called. This may be due to an uncaught error between begin() and end().',
-            );
-        }
-        endBatch(/*force*/ true);
-    }
-}
-
-export function isArraySubset<T>(mainArr: T[], subsetArr: T[]) {
-    for (let i = 0; i < mainArr.length; i++) {
-        if (mainArr[i] !== subsetArr[i]) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-function createPreviousHandlerInner(value: any, changes: Change[]) {
-    try {
-        // Clones the current state and inject the previous data at the changed path
-        return applyChanges(value ? clone(value) : {}, changes, true);
-    } catch {
-        return undefined;
-    }
-}
-
-export function createPreviousHandler(value: any, changes: Change[]) {
-    // Create a function that generates the previous state
-    // We don't want to always do this because cloning is expensive
-    // so it's better to run on demand.
-    return function () {
-        return createPreviousHandlerInner(value, changes);
-    };
-}
-
-export function notify(node: NodeValue, value: any, prev: any, level: number, whenOptimizedOnlyIf?: boolean) {
-    // Run immediate listeners if there are any
-    const changesInBatch = new Map<NodeValue, ChangeInBatch>();
-    computeChangesRecursive(
-        changesInBatch,
-        node,
-        /*loading*/ globalState.isLoadingLocal,
-        /*remote*/ globalState.isLoadingRemote,
-        value,
-        [],
-        [],
-        value,
-        prev,
-        /*immediate*/ true,
-        level,
-        whenOptimizedOnlyIf,
-    );
-    if (changesInBatch.size) {
-        batchNotifyChanges(changesInBatch, /*immediate*/ true);
-    }
-
-    // Update the current batch
-    const existing = _batchMap.get(node);
-    if (existing) {
-        existing.value = value;
-        // TODO: level, whenOptimizedOnlyIf
-    } else {
-        _batchMap.set(node, {
-            value,
-            prev,
-            level,
-            whenOptimizedOnlyIf,
-            remote: globalState.isLoadingRemote,
-            loading: globalState.isLoadingLocal,
-        });
-    }
-
-    // If not in a batch run it immediately
-    if (numInBatch <= 0) {
-        runBatch();
-    }
-}
-
-function computeChangesAtNode(
-    changesInBatch: Map<NodeValue, ChangeInBatch>,
-    node: NodeValue,
-    loading: boolean,
-    remote: boolean,
-    value: any,
-    path: string[],
-    pathTypes: TypeAtPath[],
-    valueAtPath: any,
-    prevAtPath: any,
-    immediate: boolean,
-    level: number,
-    whenOptimizedOnlyIf?: boolean,
-) {
-    // If there are listeners at this node compute the changes that need to be run
-    if (immediate ? node.listenersImmediate : node.listeners) {
-        const change: Change = {
-            path,
-            pathTypes,
-            valueAtPath,
-            prevAtPath,
-        };
-
-        const changeInBatch = changesInBatch.get(node);
-        // If the node itself has been changed then we can ignore all the child changes
-        if (changeInBatch && path.length > 0) {
-            const { changes } = changeInBatch;
-            if (!isArraySubset(changes[0].path, change.path)) {
-                changes.push(change);
-            }
-        } else {
-            changesInBatch.set(node, {
-                level,
-                value,
-                remote,
-                loading,
-                whenOptimizedOnlyIf,
-                changes: [change],
-            });
-        }
-    }
-}
-
-function computeChangesRecursive(
-    changesInBatch: Map<NodeValue, ChangeInBatch>,
-    node: NodeValue,
-    loading: boolean,
-    remote: boolean,
-    value: any,
-    path: string[],
-    pathTypes: TypeAtPath[],
-    valueAtPath: any,
-    prevAtPath: any,
-    immediate: boolean,
-    level: number,
-    whenOptimizedOnlyIf?: boolean,
-) {
-    // Do the compute at this node
-    computeChangesAtNode(
-        changesInBatch,
-        node,
-        loading,
-        remote,
-        value,
-        path,
-        pathTypes,
-        valueAtPath,
-        prevAtPath,
-        immediate,
-        level,
-        whenOptimizedOnlyIf,
-    );
-    if (node.linkedFromNodes) {
-        for (const linkedFromNode of node.linkedFromNodes) {
-            const childNode = getNodeAtPath(linkedFromNode, path);
-            computeChangesRecursive(
-                changesInBatch,
-                childNode,
-                loading,
-                remote,
-                valueAtPath,
-                [],
-                [],
-                valueAtPath,
-                prevAtPath,
-                immediate,
-                0,
-                whenOptimizedOnlyIf,
-            );
-        }
-    }
-    // If not root notify up through parents
-    if (node.parent) {
-        const parent = node.parent;
-        if (parent) {
-            const parentValue = getNodeValue(parent);
-            computeChangesRecursive(
-                changesInBatch,
-                parent,
-                loading,
-                remote,
-                parentValue,
-                [node.key].concat(path),
-                [getPathType(value)].concat(pathTypes),
-                valueAtPath,
-                prevAtPath,
-                immediate,
-                level + 1,
-                whenOptimizedOnlyIf,
-            );
-        }
-    }
-}
-
-function batchNotifyChanges(changesInBatch: Map<NodeValue, ChangeInBatch>, immediate: boolean) {
-    const listenersNotified = new Set<ListenerFn>();
-    // For each change in the batch, notify all of the listeners
-    changesInBatch.forEach(({ changes, level, value, loading, remote, whenOptimizedOnlyIf }, node) => {
-        const listeners = immediate ? node.listenersImmediate : node.listeners;
-        if (listeners) {
-            let listenerParams: ListenerParams | undefined;
-            // Need to convert to an array here instead of using a for...of loop because listeners can change while iterating
-            const arr = Array.from(listeners);
-            for (let i = 0; i < arr.length; i++) {
-                const listenerFn = arr[i];
-                const { track, noArgs, listener } = listenerFn;
-                if (!listenersNotified.has(listener)) {
-                    const ok =
-                        track === true ? level <= 0 : track === optimized ? whenOptimizedOnlyIf && level <= 0 : true;
-
-                    // Notify if listener is not shallow or if this is the first level
-                    if (ok) {
-                        // Create listenerParams if not already created
-                        if (!noArgs && !listenerParams) {
-                            listenerParams = {
-                                value,
-                                loading,
-                                remote,
-                                getPrevious: createPreviousHandler(value, changes),
-                                changes,
-                            };
-                        }
-
-                        if (!track) {
-                            listenersNotified.add(listener);
-                        }
-
-                        listener(listenerParams!);
-                    }
-                }
-            }
-        }
-    });
-}
-
-export function runBatch() {
-    const dirtyNodes = Array.from(globalState.dirtyNodes);
-    globalState.dirtyNodes.clear();
-    dirtyNodes.forEach((node) => {
-        const dirtyFn = node.dirtyFn;
-        if (dirtyFn) {
-            node.dirtyFn = undefined;
-            dirtyFn();
-        }
-    });
-    // Save batch locally and reset _batchMap first because a new batch could begin while looping over callbacks.
-    // This can happen with computeds for example.
-    const map = _batchMap;
-    _batchMap = new Map();
-    const changesInBatch = new Map<NodeValue, ChangeInBatch>();
-    // First compute all of the changes at each node. It's important to do this first before
-    // running all the notifications because createPreviousHandler depends on knowing
-    // all of the changes happening at the node.
-    map.forEach(({ value, prev, level, loading, remote, whenOptimizedOnlyIf }, node) => {
-        computeChangesRecursive(
-            changesInBatch,
-            node,
-            loading,
-            remote,
-            value,
-            [],
-            [],
-            value,
-            prev,
-            false,
-            level,
-            whenOptimizedOnlyIf,
-        );
-    });
-
-    // Once all changes are computed, notify all listeners for each node with the computed changes.
-    if (changesInBatch.size) {
-        batchNotifyChanges(changesInBatch, false);
-    }
-}
-
-export function batch(fn: () => void) {
-    beginBatch();
-    try {
-        fn();
-    } finally {
-        endBatch();
-    }
-}
-export function beginBatch() {
-    numInBatch++;
-    if (!timeout) {
-        timeout = setTimeout(onActionTimeout, 0);
-    }
-}
-export function endBatch(force?: boolean) {
-    numInBatch--;
-
-    if (numInBatch <= 0 || force) {
-        if (isRunningBatch) {
-            // Don't want to run multiple endBatches recursively, so just note that an endBatch
-            // was delayed so that the top level endBatch will run endBatch again after it's done.
-            didDelayEndBatch = true;
-        } else {
-            if (timeout) {
-                clearTimeout(timeout);
-                timeout = undefined;
-            }
-            numInBatch = 0;
-
-            isRunningBatch = true;
-
-            runBatch();
-
-            isRunningBatch = false;
-
-            // If an endBatch was delayed run it now
-            if (didDelayEndBatch) {
-                didDelayEndBatch = false;
-                endBatch(true);
-            }
-        }
-    }
-}
-
-function getNodeAtPath(obj: NodeValue, path: string[]): NodeValue {
-    let o: NodeValue = obj;
-    for (let i = 0; i < path.length; i++) {
-        const p = path[i];
-        o = getChildNode(o, p);
-    }
-
-    return o;
-}

package/src/computed.ts

@@ -1,18 +0,0 @@
-import { linked } from './linked';
-import { observable } from './observable';
-import { LinkedOptions } from './observableInterfaces';
-import { Observable, ObservableParam, RecursiveValueOrFunction } from './observableTypes';
-
-export function computed<T>(get: () => RecursiveValueOrFunction<T>): Observable<T>;
-export function computed<T, T2 = T>(
-    get: (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>,
-    set: (value: T2) => void,
-): Observable<T>;
-export function computed<T, T2 = T>(
-    get: (() => T | Promise<T>) | ObservableParam<T> | LinkedOptions<T>,
-    set?: (value: T2) => void,
-): Observable<T> {
-    return observable(
-        set ? linked({ get: get as LinkedOptions['get'], set: ({ value }: any) => set(value) }) : get,
-    ) as any;
-}

package/src/config/enable$GetSet.ts

@@ -1,30 +0,0 @@
-import { configureLegendState, internal } from '@legendapp/state';
-
-export function enable$GetSet() {
-    configureLegendState({
-        observableProperties: {
-            $: {
-                get(node) {
-                    return internal.get(node);
-                },
-                set(node, value) {
-                    internal.set(node, value);
-                },
-            },
-        },
-    });
-}
-// TODOv4 deprecate
-export const enableDirectAccess = enable$GetSet;
-
-// 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/enableReactComponents.ts

@@ -1,26 +0,0 @@
-import { BindKeys, FCReactiveObject, configureReactive } from '@legendapp/state/react';
-
-export function enableReactComponents() {
-    const bindInfo: BindKeys = { value: { handler: 'onChange', getValue: (e) => e.target.value, defaultValue: '' } };
-    const bindInfoInput: BindKeys = Object.assign(
-        { checked: { handler: 'onChange', getValue: (e: { target: { checked: boolean } }) => e.target.checked } },
-        bindInfo,
-    );
-    configureReactive({
-        binders: {
-            input: bindInfoInput,
-            textarea: bindInfo,
-            select: bindInfo,
-        },
-    });
-}
-
-// Types:
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { IReactive } from '@legendapp/state/react';
-
-declare module '@legendapp/state/react' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {}
-}

package/src/config/enableReactNativeComponents.ts

@@ -1,102 +0,0 @@
-import { useRef } from 'react';
-import type { Observable } from '@legendapp/state';
-import { FCReactive, FCReactiveObject, configureReactive, useSelector } from '@legendapp/state/react';
-import {
-    ActivityIndicator,
-    ActivityIndicatorProps,
-    Button,
-    ButtonProps,
-    FlatList,
-    FlatListProps,
-    Image,
-    ImageProps,
-    Pressable,
-    PressableProps,
-    ScrollView,
-    ScrollViewProps,
-    SectionList,
-    SectionListProps,
-    Switch,
-    SwitchProps,
-    Text,
-    TextInput,
-    TextInputProps,
-    TextProps,
-    TouchableWithoutFeedback,
-    TouchableWithoutFeedbackProps,
-    View,
-    ViewProps,
-} from 'react-native';
-
-export function enableReactNativeComponents() {
-    configureReactive({
-        components: {
-            ActivityIndicator: ActivityIndicator,
-            Button: Button,
-            FlatList: FlatList,
-            Image: Image,
-            Pressable: Pressable,
-            ScrollView: ScrollView,
-            SectionList: SectionList,
-            Switch: Switch,
-            Text: Text,
-            TextInput: TextInput,
-            TouchableWithoutFeedback: TouchableWithoutFeedback,
-            View: View,
-        },
-        binders: {
-            TextInput: {
-                value: {
-                    handler: 'onChange',
-                    getValue: (e) => e.nativeEvent.text,
-                    defaultValue: '',
-                },
-            },
-            Switch: {
-                value: {
-                    handler: 'onValueChange',
-                    getValue: (e) => e,
-                    defaultValue: false,
-                },
-            },
-            FlatList: {
-                data: {
-                    selector: (propsOut: Record<string, any>, p: Observable<any>) => {
-                        const state = useRef(0);
-                        // Increment renderNum whenever the array changes shallowly
-                        const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
-
-                        // Set extraData to renderNum so that it will re-render when renderNum changes.
-                        // This is necessary because the observable array is mutable so changes to it
-                        // won't trigger re-renders by default.
-                        propsOut.extraData = renderNum;
-
-                        return value;
-                    },
-                },
-            },
-        },
-    });
-}
-
-// Types:
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { IReactive } from '@legendapp/state/react';
-
-declare module '@legendapp/state/react' {
-    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
-        ActivityIndicator: FCReactive<ActivityIndicator, ActivityIndicatorProps>;
-        Button: FCReactive<Button, ButtonProps>;
-        FlatList: FCReactive<FlatList, FlatListProps<any>>;
-        Image: FCReactive<Image, ImageProps>;
-        Pressable: FCReactive<typeof Pressable, PressableProps>;
-        ScrollView: FCReactive<ScrollView, ScrollViewProps>;
-        SectionList: FCReactive<SectionList, SectionListProps<any>>;
-        Switch: FCReactive<Switch, SwitchProps>;
-        Text: FCReactive<Text, TextProps>;
-        TextInput: FCReactive<TextInput, TextInputProps>;
-        TouchableWithoutFeedback: FCReactive<TouchableWithoutFeedback, TouchableWithoutFeedbackProps>;
-        View: FCReactive<View, ViewProps>;
-    }
-}