@legendapp/state 1.3.6 → 1.4.0-next.1

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

@@ -5,12 +5,13 @@ export { batch, beginBatch, endBatch, afterBatch } from './src/batching';
 export { computed } from './src/computed';
 export { event } from './src/event';
 export { observe } from './src/observe';
+export { proxy } from './src/proxy';
 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 { 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;

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();
@@ -689,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],
@@ -708,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);
@@ -902,22 +936,29 @@ 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) {
+            if (node.proxyFn) {
+                return node.proxyFn(p);
+            }
+            else {
+                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);
@@ -1016,6 +1057,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);
     },
@@ -1125,7 +1170,7 @@ 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;
@@ -1270,11 +1315,25 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
     endBatch();
 }
 
+const fns = ['get', 'set', 'peek', 'onChange', 'toggle'];
 function ObservablePrimitiveClass(node) {
     this._node = node;
-    this.set = this.set.bind(this);
-    this.toggle = this.toggle.bind(this);
+    // 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,
@@ -1282,24 +1341,6 @@ Object.defineProperty(ObservablePrimitiveClass.prototype, symbolGetNode, {
         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 () {
-    return peek(this._node);
-};
-ObservablePrimitiveClass.prototype.get = function () {
-    return get(this._node);
-};
-// Setters
-ObservablePrimitiveClass.prototype.set = function (value) {
-    return set(this._node, value);
-};
 ObservablePrimitiveClass.prototype.toggle = function () {
     const value = this.peek();
     if (value === undefined || isBoolean(value)) {
@@ -1314,10 +1355,6 @@ ObservablePrimitiveClass.prototype.delete = function () {
     this.set(undefined);
     return this;
 };
-// Listener
-ObservablePrimitiveClass.prototype.onChange = function (cb, options) {
-    return onChange(this._node, cb, options);
-};
 
 function createObservable(value, makePrimitive) {
     const valueIsPromise = isPromise(value);
@@ -1327,7 +1364,8 @@ function createObservable(value, makePrimitive) {
     const node = {
         root,
     };
-    const obs = makePrimitive || isActualPrimitive(value)
+    const prim = makePrimitive || isActualPrimitive(value);
+    const obs = prim
         ? new ObservablePrimitiveClass(node)
         : getProxy(node);
     if (valueIsPromise) {
@@ -1338,6 +1376,12 @@ function createObservable(value, makePrimitive) {
             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) {
@@ -1377,7 +1421,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
@@ -1402,16 +1446,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)) {
@@ -1420,7 +1488,7 @@ function computed(compute, set$1) {
             else {
                 setInner(value);
             }
-        }, { immediate: true });
+        }, { immediate: true, retainObservable: true });
     };
     if (set$1) {
         node.root.set = (value) => {
@@ -1434,6 +1502,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
@@ -1442,13 +1512,33 @@ 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,
     };
 }
 
+function proxy(get) {
+    // Create an observable for this computed variable
+    const obs = observable();
+    lockObservable(obs, true);
+    const mapTargets = new Map();
+    const node = getNode(obs);
+    node.isComputed = true;
+    node.proxyFn = (key) => {
+        let target = mapTargets.get(key);
+        if (!target) {
+            target = get(key);
+            mapTargets.set(key, target);
+        }
+        return target;
+    };
+    return obs;
+}
+
 function _when(predicate, effect, checkReady) {
     let value;
     // Create a wrapping fn that calls the effect if predicate returns true
@@ -1570,12 +1660,11 @@ exports.observablePrimitive = observablePrimitive;
 exports.observe = observe;
 exports.opaqueObject = opaqueObject;
 exports.optimized = optimized;
+exports.proxy = proxy;
 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;