@legendapp/state 1.3.5 → 1.4.0-next.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.4.0
+
+- Feat: Returning an observable in a computed creates a two-way link to the target observable.
+- Feat: `computed` is supported as a child of an observable
+- Feat: Functions and computeds in the hierarchy of the constructing object in an observable are extracted into observable metadata so that setting the observable does not delete them.
+
+## 1.3.6
+
+- Fix: Setting a primitive observable to the same value was still notifying listeners
+
 ## 1.3.5
 
 - Fix: array.find was returning `[]` instead of `undefined` when it found no matches

package/index.d.ts

@@ -9,9 +9,9 @@ export { when, whenReady } from './src/when';
 export { configureLegendState } from './src/config';
 export * from './src/observableInterfaces';
 export { isEmpty, isArray, isBoolean, isFunction, isObject, isPrimitive, isPromise, isString, isSymbol, } from './src/is';
-import { setAtPath, getNode } from './src/helpers';
-import { ensureNodeValue, get, peek } from './src/globals';
-import { getProxy, set } from './src/observable';
+import { setAtPath } from './src/helpers';
+import { ensureNodeValue, get, getNode, peek } from './src/globals';
+import { getProxy, set } from './src/ObservableObject';
 export declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;
     get: typeof get;

package/index.js

@@ -10,7 +10,6 @@ function isString(obj) {
 function isObject(obj) {
     return !!obj && typeof obj === 'object' && !isArray(obj);
 }
-// eslint-disable-next-line @typescript-eslint/ban-types
 function isFunction(obj) {
     return typeof obj === 'function';
 }
@@ -92,14 +91,13 @@ function updateTracking(node, track) {
 }
 
 const symbolToPrimitive = Symbol.toPrimitive;
-const symbolIsObservable = Symbol('isObservable');
-const symbolIsEvent = Symbol('isEvent');
 const symbolGetNode = Symbol('getNode');
 const symbolDelete = /* @__PURE__ */ Symbol('delete');
 const symbolOpaque = Symbol('opaque');
 const optimized = Symbol('optimized');
 const extraPrimitiveActivators = new Map();
 const extraPrimitiveProps = new Map();
+const __devExtractFunctionsAndComputedsNodes = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ? new Set() : undefined;
 function checkActivate(node) {
     const root = node.root;
     const activate = root.activate;
@@ -108,6 +106,9 @@ function checkActivate(node) {
         activate();
     }
 }
+function getNode(obs) {
+    return obs && obs[symbolGetNode];
+}
 function get(node, track) {
     // Track by default
     updateTracking(node, track);
@@ -183,6 +184,36 @@ function findIDKey(obj, node) {
     }
     return idKey;
 }
+function extractFunction(node, value, key) {
+    if (!node.functions) {
+        node.functions = new Map();
+    }
+    node.functions.set(key, value[key]);
+}
+function extractFunctionsAndComputeds(obj, node) {
+    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+        if (__devExtractFunctionsAndComputedsNodes.has(obj)) {
+            console.error('[legend-state] Circular reference detected in object. You may want to use opaqueObject to stop traversing child nodes.', obj);
+            return false;
+        }
+        __devExtractFunctionsAndComputedsNodes.add(obj);
+    }
+    for (const k in obj) {
+        const v = obj[k];
+        if (typeof v === 'function') {
+            extractFunction(node, obj, k);
+        }
+        else if (typeof v == 'object' && v !== null && v !== undefined) {
+            const childNode = getNode(v);
+            if (childNode === null || childNode === void 0 ? void 0 : childNode.isComputed) {
+                extractFunction(node, obj, k);
+            }
+            else {
+                extractFunctionsAndComputeds(obj[k], getChildNode(node, k));
+            }
+        }
+    }
+}
 
 let timeout;
 let numInBatch = 0;
@@ -272,6 +303,11 @@ function computeChangesAtNode(changesInBatch, node, value, path, pathTypes, valu
 function computeChangesRecursive(changesInBatch, node, value, path, pathTypes, valueAtPath, prevAtPath, immediate, level, whenOptimizedOnlyIf) {
     // Do the compute at this node
     computeChangesAtNode(changesInBatch, node, value, path, pathTypes, valueAtPath, prevAtPath, immediate, level, whenOptimizedOnlyIf);
+    if (node.linkedFromNodes) {
+        for (const linkedFromNode of node.linkedFromNodes) {
+            computeChangesAtNode(changesInBatch, linkedFromNode, value, path, pathTypes, valueAtPath, prevAtPath, immediate, level, whenOptimizedOnlyIf);
+        }
+    }
     // If not root notify up through parents
     if (node.parent) {
         const parent = node.parent;
@@ -395,17 +431,18 @@ function afterBatch(fn) {
 }
 
 function isObservable(obs) {
-    return obs && !!obs[symbolIsObservable];
+    return obs && !!obs[symbolGetNode];
+}
+function isEvent(obs) {
+    var _a;
+    return obs && ((_a = obs[symbolGetNode]) === null || _a === void 0 ? void 0 : _a.isEvent);
 }
-function computeSelector(selector, e) {
+function computeSelector(selector, e, retainObservable) {
     let c = selector;
     if (isFunction(c)) {
         c = e ? c(e) : c();
     }
-    return isObservable(c) ? c.get() : c;
-}
-function getNode(obs) {
-    return obs[symbolGetNode];
+    return isObservable(c) && !retainObservable ? c.get() : c;
 }
 function getObservableIndex(obs) {
     const node = getNode(obs);
@@ -640,7 +677,7 @@ function trackSelector(selector, update, observeEvent, observeOptions, createRes
     else {
         // Compute the selector inside a tracking context
         beginTracking();
-        value = selector ? computeSelector(selector, observeEvent) : selector;
+        value = selector ? computeSelector(selector, observeEvent, observeOptions === null || observeOptions === void 0 ? void 0 : observeOptions.retainObservable) : selector;
         tracker = tracking.current;
         nodes = tracker.nodes;
         endTracking();
@@ -665,70 +702,6 @@ function trackSelector(selector, update, observeEvent, observeOptions, createRes
     return { value, dispose, resubscribe };
 }
 
-function ObservablePrimitiveClass(node) {
-    this._node = node;
-    this.set = this.set.bind(this);
-    this.toggle = this.toggle.bind(this);
-}
-// Getters
-Object.defineProperty(ObservablePrimitiveClass.prototype, symbolGetNode, {
-    configurable: true,
-    get() {
-        return this._node;
-    },
-});
-Object.defineProperty(ObservablePrimitiveClass.prototype, symbolIsObservable, {
-    configurable: true,
-    value: true,
-});
-Object.defineProperty(ObservablePrimitiveClass.prototype, symbolIsEvent, {
-    configurable: true,
-    value: false,
-});
-ObservablePrimitiveClass.prototype.peek = function () {
-    checkActivate(this._node);
-    return this._node.root._;
-};
-ObservablePrimitiveClass.prototype.get = function () {
-    const node = this._node;
-    updateTracking(node);
-    return this.peek();
-};
-// Setters
-ObservablePrimitiveClass.prototype.set = function (value) {
-    if (isFunction(value)) {
-        value = value(this._node.root._);
-    }
-    if (this._node.root.locked) {
-        throw new Error(process.env.NODE_ENV === 'development'
-            ? '[legend-state] Cannot modify an observable while it is locked. Please make sure that you unlock the observable before making changes.'
-            : '[legend-state] Modified locked observable');
-    }
-    const root = this._node.root;
-    const prev = root._;
-    root._ = value;
-    notify(this._node, value, prev, 0);
-    return this;
-};
-ObservablePrimitiveClass.prototype.toggle = function () {
-    const value = this.peek();
-    if (value === undefined || 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');
-    }
-    return !value;
-};
-ObservablePrimitiveClass.prototype.delete = function () {
-    this.set(undefined);
-    return this;
-};
-// Listener
-ObservablePrimitiveClass.prototype.onChange = function (cb, options) {
-    return onChange(this._node, cb, options);
-};
-
 const ArrayModifiers = new Set([
     'copyWithin',
     'fill',
@@ -753,9 +726,7 @@ const ArrayLoopers = new Set([
     'some',
 ]);
 const ArrayLoopersReturn = new Set(['filter', 'find']);
-// eslint-disable-next-line @typescript-eslint/ban-types
 const observableProperties = new Map();
-// eslint-disable-next-line @typescript-eslint/ban-types
 const observableFns = new Map([
     ['get', get],
     ['set', set],
@@ -772,7 +743,6 @@ if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
 function collectionSetter(node, target, prop, ...args) {
     var _a;
     const prevValue = (isArray(target) && target.slice()) || target;
-    // eslint-disable-next-line @typescript-eslint/ban-types
     const ret = target[prop].apply(target, args);
     if (node) {
         const hasParent = isChildNodeValue(node);
@@ -966,22 +936,24 @@ function getProxy(node, p) {
     return node.proxy || (node.proxy = new Proxy(node, proxyHandler));
 }
 const proxyHandler = {
-    get(node, p) {
+    get(node, p, receiver) {
+        var _a;
         if (p === symbolToPrimitive) {
             throw new Error(process.env.NODE_ENV === 'development'
                 ? '[legend-state] observable should not be used as a primitive. You may have forgotten to use .get() or .peek() to get the value of the observable.'
                 : '[legend-state] observable is not a primitive.');
         }
-        if (p === symbolIsObservable) {
-            // Return true if called by isObservable()
-            return true;
-        }
-        if (p === symbolIsEvent) {
-            return false;
-        }
         if (p === symbolGetNode) {
             return node;
         }
+        if (node.isComputed) {
+            checkActivate(node);
+        }
+        // If this node is linked to another observable then forward to the target's handler.
+        // The exception is onChange because it needs to listen to this node for changes.
+        if (node.linkedToNode && p !== 'onChange') {
+            return proxyHandler.get(node.linkedToNode, p, receiver);
+        }
         const value = peek(node);
         if (value instanceof Map || value instanceof WeakMap || value instanceof Set || value instanceof WeakSet) {
             const ret = handlerMapSet(node, p, value);
@@ -1080,6 +1052,10 @@ const proxyHandler = {
                 return vProp;
             }
         }
+        const fnOrComputed = (_a = node.functions) === null || _a === void 0 ? void 0 : _a.get(p);
+        if (fnOrComputed) {
+            return fnOrComputed;
+        }
         // Return an observable proxy to the property
         return getProxy(node, p);
     },
@@ -1143,11 +1119,11 @@ const proxyHandler = {
     },
 };
 function set(node, newValue) {
-    if (!node.parent) {
-        return setKey(node, undefined, newValue);
+    if (node.parent) {
+        return setKey(node.parent, node.key, newValue);
     }
     else {
-        return setKey(node.parent, node.key, newValue);
+        return setKey(node, undefined, newValue);
     }
 }
 function toggle(node) {
@@ -1189,12 +1165,12 @@ function setKey(node, key, newValue, level) {
     newValue =
         !node.isAssigning && isFunc
             ? newValue(prevValue)
-            : isObject(newValue) && (newValue === null || newValue === void 0 ? void 0 : newValue[symbolIsObservable])
+            : isObject(newValue) && (newValue === null || newValue === void 0 ? void 0 : newValue[symbolGetNode])
                 ? newValue.peek()
                 : newValue;
     const isPrim = isPrimitive(newValue) || newValue instanceof Date;
     try {
-        node.isSetting++;
+        node.isSetting = (node.isSetting || 0) + 1;
         // Save the new value
         if (isDelete) {
             delete parentValue[key];
@@ -1209,7 +1185,9 @@ function setKey(node, key, newValue, level) {
     if (node.root.locked && node.root.set) {
         node.root.set(node.root._);
     }
-    updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRoot, level);
+    if (newValue !== prevValue) {
+        updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRoot, level);
+    }
     return isFunc ? newValue : isRoot ? getProxy(node) : getProxy(node, key);
 }
 function assign(node, value) {
@@ -1237,33 +1215,6 @@ function deleteFn(node, key) {
     }
     setKey(node, key, symbolDelete, /*level*/ -1);
 }
-function createObservable(value, makePrimitive) {
-    const valueIsPromise = isPromise(value);
-    const root = {
-        _: valueIsPromise ? undefined : value,
-    };
-    const node = {
-        root,
-    };
-    const obs = makePrimitive || isActualPrimitive(value)
-        ? new ObservablePrimitiveClass(node)
-        : getProxy(node);
-    if (valueIsPromise) {
-        value.catch((error) => {
-            obs.set({ error });
-        });
-        value.then((value) => {
-            obs.set(value);
-        });
-    }
-    return obs;
-}
-function observable(value) {
-    return createObservable(value);
-}
-function observablePrimitive(value) {
-    return createObservable(value, /*makePrimitive*/ true);
-}
 function handlerMapSet(node, p, value) {
     const vProp = value === null || value === void 0 ? void 0 : value[p];
     if (isFunction(vProp)) {
@@ -1359,6 +1310,82 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
     endBatch();
 }
 
+const fns = ['get', 'set', 'peek', 'onChange', 'toggle'];
+function ObservablePrimitiveClass(node) {
+    this._node = node;
+    // Bind to this
+    for (let i = 0; i < fns.length; i++) {
+        const key = fns[i];
+        this[key] = this[key].bind(this);
+    }
+}
+// Add observable functions to prototype
+function proto(key, fn) {
+    ObservablePrimitiveClass.prototype[key] = function (...args) {
+        return fn.call(this, this._node, ...args);
+    };
+}
+proto('peek', peek);
+proto('get', get);
+proto('set', set);
+proto('onChange', onChange);
+// Getters
+Object.defineProperty(ObservablePrimitiveClass.prototype, symbolGetNode, {
+    configurable: true,
+    get() {
+        return this._node;
+    },
+});
+ObservablePrimitiveClass.prototype.toggle = function () {
+    const value = this.peek();
+    if (value === undefined || 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');
+    }
+    return !value;
+};
+ObservablePrimitiveClass.prototype.delete = function () {
+    this.set(undefined);
+    return this;
+};
+
+function createObservable(value, makePrimitive) {
+    const valueIsPromise = isPromise(value);
+    const root = {
+        _: valueIsPromise ? undefined : value,
+    };
+    const node = {
+        root,
+    };
+    const prim = makePrimitive || isActualPrimitive(value);
+    const obs = prim
+        ? new ObservablePrimitiveClass(node)
+        : getProxy(node);
+    if (valueIsPromise) {
+        value.catch((error) => {
+            obs.set({ error });
+        });
+        value.then((value) => {
+            obs.set(value);
+        });
+    }
+    else if (!prim) {
+        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+            __devExtractFunctionsAndComputedsNodes.clear();
+        }
+        extractFunctionsAndComputeds(value, node);
+    }
+    return obs;
+}
+function observable(value) {
+    return createObservable(value);
+}
+function observablePrimitive(value) {
+    return createObservable(value, /*makePrimitive*/ true);
+}
+
 function observe(selectorOrRun, reactionOrOptions, options) {
     let reaction;
     if (isFunction(reactionOrOptions)) {
@@ -1389,7 +1416,7 @@ function observe(selectorOrRun, reactionOrOptions, options) {
             e.onCleanupReaction = undefined;
         }
         // Call the reaction if there is one and the value changed
-        if (reaction && (e.num > 0 || !(selectorOrRun === null || selectorOrRun === void 0 ? void 0 : selectorOrRun[symbolIsEvent])) && e.previous !== e.value) {
+        if (reaction && (e.num > 0 || !isEvent(selectorOrRun)) && e.previous !== e.value) {
             reaction(e);
         }
         // Update the previous value
@@ -1414,16 +1441,40 @@ function computed(compute, set$1) {
     // Create an observable for this computed variable
     const obs = observable();
     lockObservable(obs, true);
-    // Lazily activate the observable when get is called
     const node = getNode(obs);
+    node.isComputed = true;
     const setInner = function (val) {
-        if (val !== obs.peek()) {
+        const prevNode = node.linkedToNode;
+        // If it was previously linked to a node remove self
+        // from its linkedFromNodes
+        if (prevNode) {
+            node.linkedToNode.linkedFromNodes.delete(node);
+            node.linkedToNode = undefined;
+        }
+        if (isObservable(val)) {
+            // If the computed is a proxy to another observable
+            // link it to the target observable
+            const linkedNode = getNode(val);
+            node.linkedToNode = linkedNode;
+            if (!linkedNode.linkedFromNodes) {
+                linkedNode.linkedFromNodes = new Set();
+            }
+            linkedNode.linkedFromNodes.add(node);
+            // If the target observable is different then notify for the change
+            if (prevNode) {
+                const value = getNodeValue(linkedNode);
+                const prevValue = getNodeValue(prevNode);
+                notify(node, value, prevValue, 0);
+            }
+        }
+        else if (val !== obs.peek()) {
             // Update the computed value
             lockObservable(obs, false);
             set(node, val);
             lockObservable(obs, true);
         }
     };
+    // Lazily activate the observable when get is called
     node.root.activate = () => {
         observe(compute, ({ value }) => {
             if (isPromise(value)) {
@@ -1432,7 +1483,7 @@ function computed(compute, set$1) {
             else {
                 setInner(value);
             }
-        }, { immediate: true });
+        }, { immediate: true, retainObservable: true });
     };
     if (set$1) {
         node.root.set = (value) => {
@@ -1446,6 +1497,8 @@ function event() {
     // 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
@@ -1454,10 +1507,12 @@ function event() {
         on: function (cb) {
             return obs.onChange(cb);
         },
-        get: () => obs.get(),
+        get: function () {
+            // Need to return undefined
+            obs.get();
+        },
         // @ts-expect-error eslint doesn't like adding symbols to the object but this does work
-        [symbolIsObservable]: true,
-        [symbolIsEvent]: true,
+        [symbolGetNode]: node,
     };
 }
 
@@ -1586,8 +1641,6 @@ exports.setAtPath = setAtPath;
 exports.setInObservableAtPath = setInObservableAtPath;
 exports.setupTracking = setupTracking;
 exports.symbolDelete = symbolDelete;
-exports.symbolIsEvent = symbolIsEvent;
-exports.symbolIsObservable = symbolIsObservable;
 exports.trackSelector = trackSelector;
 exports.tracking = tracking;
 exports.updateTracking = updateTracking;