@legendapp/state 2.2.0-next.57 → 2.2.0-next.59

package/README.md

@@ -21,9 +21,11 @@ observe(() => {
     console.log(state$.settings.theme.get())
 })
 
+// Automatically re-render components when observables change
+enableReactTracking({ auto: true })
+
 const Component = function Component() {
-    // use() makes this component re-render whenever it changes
-    const theme = state$.settings.theme.use()
+    const theme = state$.settings.theme.get()
 
     return <div>Theme: {theme}</div>
 }

package/index.d.ts

@@ -1,4 +1,3 @@
-export { activated } from './src/activated';
 export { batch, beginBatch, endBatch } from './src/batching';
 export { computed } from './src/computed';
 export { configureLegendState } from './src/config';
@@ -15,14 +14,16 @@ export { proxy } from './src/proxy';
 export { trackSelector } from './src/trackSelector';
 export { when, whenReady } from './src/when';
 import { get, getProxy, peek, set } from './src/ObservableObject';
-import { ensureNodeValue, findIDKey, getNode, setNodeValue } from './src/globals';
-import { setAtPath } from './src/helpers';
+import { clone, ensureNodeValue, findIDKey, getNode, getPathType, safeParse, safeStringify, setNodeValue } from './src/globals';
+import { initializePathType, setAtPath } from './src/helpers';
 import { runWithRetry } from './src/retry';
 export declare const internal: {
+    clone: typeof clone;
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
     getNode: typeof getNode;
+    getPathType: typeof getPathType;
     getProxy: typeof getProxy;
     globalState: {
         isLoadingLocal: boolean;
@@ -35,13 +36,16 @@ export declare const internal: {
         pendingNodes: Map<import("./src/observableInterfaces").NodeValue, () => void>;
         dirtyNodes: Set<import("./src/observableInterfaces").NodeValue>;
     };
+    initializePathType: typeof initializePathType;
     observableFns: Map<string, (node: import("./src/observableInterfaces").NodeValue, ...args: any[]) => any>;
     optimized: symbol;
     peek: typeof peek;
     runWithRetry: typeof runWithRetry;
+    safeParse: typeof safeParse;
+    safeStringify: typeof safeStringify;
     set: typeof set;
     setAtPath: typeof setAtPath;
     setNodeValue: typeof setNodeValue;
-    symbolActivated: symbol;
+    symbolBound: symbol;
     symbolDelete: symbol;
 };

package/index.js

@@ -61,7 +61,7 @@ const symbolGetNode = Symbol('getNode');
 const symbolDelete = /* @__PURE__ */ Symbol('delete');
 const symbolOpaque = Symbol('opaque');
 const optimized = Symbol('optimized');
-const symbolActivated = Symbol('activated');
+const symbolBound = Symbol('bound');
 const globalState = {
     isLoadingLocal: false,
     isMerging: false,
@@ -70,6 +70,52 @@ const globalState = {
     pendingNodes: new Map(),
     dirtyNodes: new Set(),
 };
+function getPathType(value) {
+    return isArray(value) ? 'array' : value instanceof Map ? 'map' : value instanceof Set ? 'set' : 'object';
+}
+function replacer(_, value) {
+    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 {
+        return value;
+    }
+}
+const ISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+function reviver(_, value) {
+    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);
+            }
+        }
+    }
+    return value;
+}
+function safeStringify(value) {
+    return JSON.stringify(value, replacer);
+}
+function safeParse(value) {
+    return JSON.parse(value, reviver);
+}
+function clone(value) {
+    return safeParse(safeStringify(value));
+}
 function isObservable(obs) {
     return !!obs && !!obs[symbolGetNode];
 }
@@ -197,12 +243,6 @@ function extractFunction(node, key, fnOrComputed) {
     node.functions.set(key, fnOrComputed);
 }
 
-function activated(params) {
-    return (() => ({
-        [symbolActivated]: params,
-    }));
-}
-
 let timeout;
 let numInBatch = 0;
 let isRunningBatch = false;
@@ -229,22 +269,28 @@ function isArraySubset(mainArr, subsetArr) {
 function createPreviousHandlerInner(value, changes) {
     try {
         // Clones the current state and inject the previous data at the changed path
-        let clone = value ? JSON.parse(JSON.stringify(value)) : {};
+        let cloned = value ? clone(value) : {};
         for (let i = 0; i < changes.length; i++) {
             const { path, prevAtPath } = changes[i];
-            let o = clone;
+            let o = cloned;
             if (path.length > 0) {
                 let i;
                 for (i = 0; i < path.length - 1; i++) {
                     o = o[path[i]];
                 }
-                o[path[i]] = prevAtPath;
+                const key = path[i];
+                if (o instanceof Map) {
+                    o.set(key, prevAtPath);
+                }
+                else {
+                    o[key] = prevAtPath;
+                }
             }
             else {
-                clone = prevAtPath;
+                cloned = prevAtPath;
             }
         }
-        return clone;
+        return cloned;
     }
     catch (_a) {
         return undefined;
@@ -319,7 +365,7 @@ function computeChangesRecursive(changesInBatch, node, value, path, pathTypes, v
         const parent = node.parent;
         if (parent) {
             const parentValue = getNodeValue(parent);
-            computeChangesRecursive(changesInBatch, parent, parentValue, [node.key].concat(path), [(isArray(value) ? 'array' : 'object')].concat(pathTypes), valueAtPath, prevAtPath, immediate, level + 1, whenOptimizedOnlyIf);
+            computeChangesRecursive(changesInBatch, parent, parentValue, [node.key].concat(path), [getPathType(value)].concat(pathTypes), valueAtPath, prevAtPath, immediate, level + 1, whenOptimizedOnlyIf);
         }
     }
 }
@@ -460,6 +506,9 @@ function getNodeAtPath(obj, path) {
 }
 
 function createObservable(value, makePrimitive, extractPromise, createObject, createPrimitive) {
+    if (isObservable(value)) {
+        return value;
+    }
     const valueIsPromise = isPromise(value);
     const valueIsFunction = isFunction(value);
     const root = {
@@ -528,7 +577,7 @@ function setAtPath(obj, path, pathTypes, value, fullObj, restore) {
                 break;
             }
             else if (o[p] === undefined || o[p] === null) {
-                o[p] = pathTypes[i] === 'array' ? [] : {};
+                o[p] = initializePathType(pathTypes[i]);
             }
             o = o[p];
             if (oFull) {
@@ -546,8 +595,8 @@ function setInObservableAtPath(obs, path, pathTypes, value, mode) {
     let v = value;
     for (let i = 0; i < path.length; i++) {
         const p = path[i];
-        if (!o.peek()[p] && pathTypes[i] === 'array') {
-            o[p].set([]);
+        if (!o.peek()[p]) {
+            o[p].set(initializePathType(pathTypes[i]));
         }
         o = o[p];
         v = v[p];
@@ -623,7 +672,7 @@ function constructObjectWithPath(path, pathTypes, value) {
         let o = (out = {});
         for (let i = 0; i < path.length; i++) {
             const p = path[i];
-            o[p] = i === path.length - 1 ? value : pathTypes[i] === 'array' ? [] : {};
+            o[p] = i === path.length - 1 ? value : initializePathType(pathTypes[i]);
             o = o[p];
         }
     }
@@ -636,7 +685,7 @@ function deconstructObjectWithPath(path, pathTypes, value) {
     let o = value;
     for (let i = 0; i < path.length; i++) {
         const p = path[i];
-        o = o ? o[p] : pathTypes[i] === 'array' ? [] : {};
+        o = o ? o[p] : initializePathType(pathTypes[i]);
     }
     return o;
 }
@@ -647,6 +696,18 @@ function setSilently(obs, newValue) {
     const node = getNode(obs);
     return setNodeValue(node, newValue).newValue;
 }
+function initializePathType(pathType) {
+    switch (pathType) {
+        case 'array':
+            return [];
+        case 'object':
+            return {};
+        case 'map':
+            return new Map();
+        case 'set':
+            return new Set();
+    }
+}
 
 function onChange(node, callback, options = {}, fromLinks) {
     var _a;
@@ -815,42 +876,39 @@ function updateTracking(node, track) {
 
 function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
     var _a;
-    let nodes;
-    let value;
     let dispose;
-    let tracker;
     let resubscribe;
     let updateFn = update;
-    if (isObservable(selector)) {
-        value = selector.peek();
-        dispose = selector.onChange(update);
-        resubscribe = createResubscribe ? selector.onChange(update) : undefined;
-    }
-    else {
-        // Compute the selector inside a tracking context
-        beginTracking();
-        value = selector ? computeSelector(selector, observeEvent, observeOptions === null || observeOptions === void 0 ? void 0 : observeOptions.fromComputed) : selector;
-        tracker = tracking.current;
-        nodes = tracker.nodes;
-        endTracking();
-        if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && tracker && nodes) {
-            (_a = tracker.traceListeners) === null || _a === void 0 ? void 0 : _a.call(tracker, nodes);
-            if (tracker.traceUpdates) {
-                updateFn = tracker.traceUpdates(update);
-            }
-            // Clear tracing so it doesn't leak to other components
-            tracker.traceListeners = undefined;
-            tracker.traceUpdates = undefined;
-        }
+    beginTracking();
+    const value = selector ? computeSelector(selector, observeEvent, observeOptions === null || observeOptions === void 0 ? void 0 : 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) {
+        (_a = tracker.traceListeners) === null || _a === void 0 ? void 0 : _a.call(tracker, nodes);
+        if (tracker.traceUpdates) {
+            updateFn = tracker.traceUpdates(update);
+        }
+        // Clear tracing so it doesn't leak to other components
+        tracker.traceListeners = undefined;
+        tracker.traceUpdates = undefined;
     }
     if (!(observeEvent === null || observeEvent === void 0 ? void 0 : 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 === null || observeOptions === void 0 ? void 0 : observeOptions.immediate);
-        resubscribe = createResubscribe ? () => setupTracking(nodes, updateFn) : undefined;
+        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+            resubscribe = createResubscribe
+                ? () => {
+                    dispose === null || dispose === void 0 ? void 0 : dispose();
+                    dispose = setupTracking(nodes, updateFn);
+                    return dispose;
+                }
+                : undefined;
+        }
     }
-    return { value, nodes, dispose, resubscribe };
+    return { nodes, value, dispose, resubscribe };
 }
 
 function observe(selectorOrRun, reactionOrOptions, options) {
@@ -1076,15 +1134,22 @@ function updateNodes(parent, obj, prevValue) {
                     isIdFieldFunction = isFunction(idField);
                     prevChildrenById = new Map();
                     moved = [];
-                    const keysSeen = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test'
-                        ? new Set()
-                        : undefined;
-                    if (parent.children) {
-                        for (let i = 0; i < prevValue.length; i++) {
-                            const p = prevValue[i];
-                            if (p) {
-                                const child = parent.children.get(i + '');
-                                if (child) {
+                }
+                const keysSeen = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test'
+                    ? new Set()
+                    : undefined;
+                if (parent.children) {
+                    for (let i = 0; i < prevValue.length; i++) {
+                        const p = prevValue[i];
+                        if (p) {
+                            const child = parent.children.get(i + '');
+                            if (child) {
+                                if (!obj[i]) {
+                                    // If the previous value is not in the new array and it
+                                    // is an activated, disable its listeners
+                                    handleDeletedChild(child, p);
+                                }
+                                if (idField) {
                                     const key = isIdFieldFunction
                                         ? idField(p)
                                         : p[idField];
@@ -1113,12 +1178,7 @@ function updateNodes(parent, obj, prevValue) {
                 const child = getChildNode(parent, key);
                 const prev = isPrevMap ? prevValue.get(key) : prevValue[key];
                 if (prev !== undefined) {
-                    if (!isPrimitive(prev)) {
-                        updateNodes(child, undefined, prev);
-                    }
-                    if (child.listeners || child.listenersImmediate) {
-                        notify(child, undefined, prev, 0);
-                    }
+                    handleDeletedChild(child, prev);
                 }
             }
         }
@@ -1140,7 +1200,10 @@ function updateNodes(parent, obj, prevValue) {
                     : undefined;
                 const existingChild = (_c = parent.children) === null || _c === void 0 ? void 0 : _c.get(key);
                 if (isObservable(value)) {
-                    if ((existingChild === null || existingChild === void 0 ? void 0 : existingChild.linkedToNode) === getNode(value)) {
+                    const valueNode = getNode(value);
+                    if ((existingChild === null || existingChild === void 0 ? void 0 : existingChild.linkedToNode) === valueNode) {
+                        const targetValue = getNodeValue(valueNode);
+                        isMap ? obj.set(key, targetValue) : (obj[key] = targetValue);
                         continue;
                     }
                     const obs = value;
@@ -1224,6 +1287,19 @@ function updateNodes(parent, obj, prevValue) {
     }
     return retValue !== null && retValue !== void 0 ? retValue : false;
 }
+function handleDeletedChild(child, p) {
+    var _a, _b;
+    // If the previous value is not in the new array and it
+    // is an activated, disable its listeners
+    (_a = child.linkedToNodeDispose) === null || _a === void 0 ? void 0 : _a.call(child);
+    (_b = child.activatedObserveDispose) === null || _b === void 0 ? void 0 : _b.call(child);
+    if (!isPrimitive(p)) {
+        updateNodes(child, undefined, p);
+    }
+    if (child.listeners || child.listenersImmediate) {
+        notify(child, undefined, p, 0);
+    }
+}
 function getProxy(node, p, asFunction) {
     // Get the child node if p prop
     if (p !== undefined)
@@ -1582,6 +1658,9 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
         childNode = node;
     // Make sure we don't call too many listeners for every property set
     beginBatch();
+    if (isPrim === undefined) {
+        isPrim = isPrimitive(newValue);
+    }
     let hasADiff = isPrim;
     let whenOptimizedOnlyIf = false;
     // If new value is an object or array update notify down the tree
@@ -1728,7 +1807,7 @@ function activateNodeFunction(node, lazyFn) {
             value = value();
         }
         const activated = !isObservable(value)
-            ? value === null || value === void 0 ? void 0 : value[symbolActivated]
+            ? value === null || value === void 0 ? void 0 : value[symbolBound]
             : undefined;
         if (activated) {
             node.activationState = activated;
@@ -1826,12 +1905,12 @@ function activateNodeBase(node, value) {
         }, false, extractPromise, getProxy);
     }
     if (node.activationState) {
-        const { onSet, get: getFn, initial } = node.activationState;
+        const { set: setFn, get: getFn, initial } = node.activationState;
         value = getFn === null || getFn === void 0 ? void 0 : getFn();
         if (value == undefined || value === null) {
             value = initial;
         }
-        if (onSet) {
+        if (setFn) {
             let allChanges = [];
             let latestValue = undefined;
             let runNumber = 0;
@@ -1865,7 +1944,7 @@ function activateNodeBase(node, value) {
                         }
                         node.isComputing = true;
                         batch(() => {
-                            onSet({
+                            setFn({
                                 value,
                                 changes,
                                 getPrevious,
@@ -1988,13 +2067,9 @@ function syncState(obs) {
 }
 globalState.isLoadingRemote$ = observable(false);
 
-function computed(compute, set) {
-    return observable(set
-        ? activated({
-            get: compute,
-            onSet: ({ value }) => set(value),
-        })
-        : compute);
+function computed(get, set) {
+    const bound = isObject(get) ? get : set ? { get, set: ({ value }) => set(value) } : false;
+    return observable(bound ? () => ({ [symbolBound]: bound }) : get);
 }
 
 function configureLegendState({ observableFunctions, observableProperties: observableProperties$1, }) {
@@ -2048,12 +2123,7 @@ function event() {
 }
 
 function proxy(get, set) {
-    return observable((key) => set
-        ? activated({
-            get: () => get(key),
-            onSet: ({ value }) => set(key, value),
-        })
-        : get(key));
+    return observable((key) => computed({ get: () => get(key), set: set ? ({ value }) => set(key, value) : undefined }));
 }
 
 function calculateRetryDelay(retryOptions, attemptNum) {
@@ -2115,25 +2185,29 @@ function runWithRetry(node, state, fn) {
 }
 
 const internal = {
+    clone,
     ensureNodeValue,
     findIDKey,
     get,
     getNode,
+    getPathType,
     getProxy,
     globalState,
+    initializePathType,
     observableFns,
     optimized,
     peek,
     runWithRetry,
+    safeParse,
+    safeStringify,
     set,
     setAtPath,
     setNodeValue,
-    symbolActivated,
+    symbolBound,
     symbolDelete,
 };
 
 exports.ObservablePrimitiveClass = ObservablePrimitiveClass;
-exports.activated = activated;
 exports.batch = batch;
 exports.beginBatch = beginBatch;
 exports.beginTracking = beginTracking;