@legendapp/state 2.0.2 → 2.1.0-next.0

package/index.js

@@ -60,9 +60,17 @@ const extraPrimitiveActivators = new Map();
 const extraPrimitiveProps = new Map();
 const globalState = {
     isLoadingLocal: false,
-    isLoadingRemote: false,
     isMerging: false,
+    isLoadingRemote$: undefined,
+    onChangeRemote: undefined,
 };
+function isObservable(obs) {
+    return !!obs && !!obs[symbolGetNode];
+}
+function isComputed(obs) {
+    var _a;
+    return obs && ((_a = obs[symbolGetNode]) === null || _a === void 0 ? void 0 : _a.isComputed);
+}
 function checkActivate(node) {
     var _a;
     const root = node.root;
@@ -89,12 +97,13 @@ function setNodeValue(node, newValue) {
     const prevValue = parentValue[key];
     const isFunc = isFunction(newValue);
     // Compute newValue if newValue is a function or an observable
-    newValue =
-        !parentNode.isAssigning && isFunc
-            ? newValue(prevValue)
-            : isObject(newValue) && (newValue === null || newValue === void 0 ? void 0 : newValue[symbolGetNode])
-                ? newValue.peek()
-                : newValue;
+    newValue = !parentNode.isAssigning && isFunc ? newValue(prevValue) : newValue;
+    // If setting an observable, set a link to the observable instead
+    if (isObservable(newValue) && !isComputed(newValue)) {
+        const val = newValue;
+        node.lazy = () => val;
+        newValue = undefined;
+    }
     try {
         parentNode.isSetting = (parentNode.isSetting || 0) + 1;
         // Save the new value
@@ -128,7 +137,13 @@ function getNodeValue(node) {
     }
     return child;
 }
-function getChildNode(node, key) {
+const cloneFunction = (originalFunction) => {
+    const length = originalFunction.length;
+    return length > 1
+        ? (arg1, arg2) => originalFunction(arg1, arg2)
+        : (...args) => originalFunction(...args);
+};
+function getChildNode(node, key, asFunction) {
     var _a;
     // Get the child by key
     let child = (_a = node.children) === null || _a === void 0 ? void 0 : _a.get(key);
@@ -140,6 +155,12 @@ function getChildNode(node, key) {
             key,
             lazy: true,
         };
+        if (asFunction) {
+            child = Object.assign(cloneFunction(asFunction), child);
+        }
+        else if (node.proxyFn2) {
+            child = Object.assign(node.proxyFn2.bind(node, key), child);
+        }
         if (!node.children) {
             node.children = new Map();
         }
@@ -161,6 +182,7 @@ function ensureNodeValue(node) {
     return value;
 }
 function findIDKey(obj, node) {
+    var _a, _b;
     let idKey = isObject(obj)
         ? 'id' in obj
             ? 'id'
@@ -173,7 +195,8 @@ function findIDKey(obj, node) {
                         : undefined
         : undefined;
     if (!idKey && node.parent) {
-        const keyExtractor = getNodeValue(node.parent)[node.key + '_keyExtractor'];
+        const k = node.key + '_keyExtractor';
+        const keyExtractor = (_b = (_a = node.functions) === null || _a === void 0 ? void 0 : _a.get(k)) !== null && _b !== void 0 ? _b : getNodeValue(node.parent)[node.key + '_keyExtractor'];
         if (keyExtractor && isFunction(keyExtractor)) {
             idKey = keyExtractor;
         }
@@ -429,15 +452,19 @@ function endBatch(force) {
     }
 }
 
-function createObservable(value, makePrimitive, createObject, createPrimitive) {
+function createObservable(value, makePrimitive, extractPromise, createObject, createPrimitive) {
     const valueIsPromise = isPromise(value);
+    const valueIsFunction = isFunction(value);
     const root = {
         _: value,
     };
-    const node = {
+    let node = {
         root,
         lazy: true,
     };
+    if (valueIsFunction) {
+        node = Object.assign(cloneFunction(value), node);
+    }
     const prim = makePrimitive || isActualPrimitive(value);
     const obs = prim
         ? new createPrimitive(node)
@@ -448,6 +475,176 @@ function createObservable(value, makePrimitive, createObject, createPrimitive) {
     return obs;
 }
 
+function isEvent(obs) {
+    var _a;
+    return obs && ((_a = obs[symbolGetNode]) === null || _a === void 0 ? void 0 : _a.isEvent);
+}
+function computeSelector(selector, e, retainObservable) {
+    let c = selector;
+    if (isFunction(c)) {
+        c = e ? c(e) : c();
+    }
+    return isObservable(c) && !retainObservable ? c.get() : c;
+}
+function getObservableIndex(obs) {
+    const node = getNode(obs);
+    const n = +node.key;
+    return n - n < 1 ? +n : -1;
+}
+function opaqueObject(value) {
+    if (value) {
+        value[symbolOpaque] = true;
+    }
+    return value;
+}
+function lockObservable(obs, value) {
+    var _a;
+    const root = (_a = getNode(obs)) === null || _a === void 0 ? void 0 : _a.root;
+    if (root) {
+        root.locked = value;
+    }
+}
+function setAtPath(obj, path, pathTypes, value, fullObj, restore) {
+    let o = obj;
+    let oFull = fullObj;
+    if (path.length > 0) {
+        for (let i = 0; i < path.length; i++) {
+            const p = path[i];
+            if (i === path.length - 1) {
+                // Don't set if the value is the same. This prevents creating a new key
+                // when setting undefined on an object without this key
+                if (o[p] !== value) {
+                    o[p] = value;
+                }
+            }
+            else if (o[p] === symbolDelete) {
+                // If this was previously deleted, restore it
+                if (oFull) {
+                    o[p] = oFull[p];
+                    restore === null || restore === void 0 ? void 0 : restore(path.slice(0, i + 1), o[p]);
+                }
+                break;
+            }
+            else if (o[p] === undefined || o[p] === null) {
+                o[p] = pathTypes[i] === 'array' ? [] : {};
+            }
+            o = o[p];
+            if (oFull) {
+                oFull = oFull[p];
+            }
+        }
+    }
+    else {
+        obj = value;
+    }
+    return obj;
+}
+function setInObservableAtPath(obs, path, pathTypes, value, mode) {
+    let o = obs;
+    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([]);
+        }
+        o = o[p];
+        v = v[p];
+    }
+    if (v === symbolDelete) {
+        o.delete();
+    }
+    // Assign if possible, or set otherwise
+    else if (mode === 'assign' && o.assign && isObject(o.peek())) {
+        o.assign(v);
+    }
+    else {
+        o.set(v);
+    }
+}
+function mergeIntoObservable(target, ...sources) {
+    beginBatch();
+    globalState.isMerging = true;
+    for (let i = 0; i < sources.length; i++) {
+        target = _mergeIntoObservable(target, sources[i]);
+    }
+    globalState.isMerging = false;
+    endBatch();
+    return target;
+}
+function _mergeIntoObservable(target, source) {
+    var _a;
+    if (isObservable(source)) {
+        source = source.peek();
+    }
+    const needsSet = isObservable(target);
+    const targetValue = needsSet ? target.peek() : target;
+    const isTargetArr = isArray(targetValue);
+    const isTargetObj = !isTargetArr && isObject(targetValue);
+    if ((isTargetObj && isObject(source) && !isEmpty(targetValue)) ||
+        (isTargetArr && isArray(source) && targetValue.length > 0)) {
+        const keys = Object.keys(source);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const sourceValue = source[key];
+            if (sourceValue === symbolDelete) {
+                needsSet && ((_a = target[key]) === null || _a === void 0 ? void 0 : _a.delete) ? target[key].delete() : delete target[key];
+            }
+            else {
+                const isObj = isObject(sourceValue);
+                const isArr = !isObj && isArray(sourceValue);
+                const targetChild = target[key];
+                if ((isObj || isArr) && targetChild && (needsSet || !isEmpty(targetChild))) {
+                    if (!needsSet && (!targetChild || (isObj ? !isObject(targetChild) : !isArray(targetChild)))) {
+                        target[key] = sourceValue;
+                    }
+                    else {
+                        _mergeIntoObservable(targetChild, sourceValue);
+                    }
+                }
+                else {
+                    needsSet
+                        ? targetChild.set(sourceValue)
+                        : (target[key] = sourceValue);
+                }
+            }
+        }
+    }
+    else if (source !== undefined) {
+        needsSet ? target.set(source) : (target = source);
+    }
+    return target;
+}
+function constructObjectWithPath(path, pathTypes, value) {
+    let out;
+    if (path.length > 0) {
+        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 = o[p];
+        }
+    }
+    else {
+        out = value;
+    }
+    return out;
+}
+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' ? [] : {};
+    }
+    return o;
+}
+function isObservableValueReady(value) {
+    return !!value && ((!isObject(value) && !isArray(value)) || !isEmpty(value));
+}
+function setSilently(obs, newValue) {
+    const node = getNode(obs);
+    return setNodeValue(node, newValue).newValue;
+}
+
 function onChange(node, callback, options = {}) {
     const { initial, immediate, noArgs } = options;
     const { trackingType } = options;
@@ -486,6 +683,23 @@ function onChange(node, callback, options = {}) {
     return () => listeners.delete(listener);
 }
 
+function setupTracking(nodes, update, noArgs, immediate) {
+    let listeners = [];
+    // Listen to tracked nodes
+    nodes === null || nodes === void 0 ? void 0 : nodes.forEach((tracked) => {
+        const { node, track } = tracked;
+        listeners.push(onChange(node, update, { trackingType: track, immediate, noArgs }));
+    });
+    return () => {
+        if (listeners) {
+            for (let i = 0; i < listeners.length; i++) {
+                listeners[i]();
+            }
+            listeners = undefined;
+        }
+    };
+}
+
 let trackCount = 0;
 const trackingQueue = [];
 const tracking = {
@@ -525,56 +739,148 @@ function updateTracking(node, track) {
     }
 }
 
-const ArrayModifiers = new Set([
-    'copyWithin',
-    'fill',
-    'from',
-    'pop',
-    'push',
-    'reverse',
-    'shift',
-    'sort',
-    'splice',
-    'unshift',
-]);
-const ArrayLoopers = new Set([
-    'every',
-    'filter',
-    'find',
-    'findIndex',
-    'forEach',
-    'includes',
-    'join',
-    'map',
-    'some',
-]);
-const ArrayLoopersReturn = new Set(['filter', 'find']);
-const observableProperties = new Map();
-const observableFns = new Map([
-    ['get', get],
-    ['set', set],
-    ['peek', peek],
-    ['onChange', onChange],
-    ['assign', assign],
-    ['delete', deleteFn],
-    ['toggle', toggle],
-]);
-if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
-    // eslint-disable-next-line no-var
-    var __devUpdateNodes = new Set();
-}
-function collectionSetter(node, target, prop, ...args) {
+function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
     var _a;
-    const prevValue = (isArray(target) && target.slice()) || target;
-    const ret = target[prop].apply(target, args);
-    if (node) {
-        const hasParent = isChildNodeValue(node);
-        const key = hasParent ? node.key : '_';
-        const parentValue = hasParent ? getNodeValue(node.parent) : node.root;
-        // Set the object to the previous value first
-        parentValue[key] = prevValue;
-        // Then set with the new value so it notifies with the correct prevValue
-        setKey((_a = node.parent) !== null && _a !== void 0 ? _a : node, key, target);
+    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;
+        }
+    }
+    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;
+    }
+    return { value, dispose, resubscribe };
+}
+
+function observe(selectorOrRun, reactionOrOptions, options) {
+    let reaction;
+    if (isFunction(reactionOrOptions)) {
+        reaction = reactionOrOptions;
+    }
+    else {
+        options = reactionOrOptions;
+    }
+    let dispose;
+    const e = { num: 0 };
+    // Wrap it in a function so it doesn't pass all the arguments to run()
+    const update = function () {
+        if (e.onCleanup) {
+            e.onCleanup();
+            e.onCleanup = undefined;
+        }
+        // Run in a batch so changes don't happen until we're done tracking here
+        beginBatch();
+        // Run the function/selector
+        delete e.value;
+        // Dispose listeners from previous run
+        dispose === null || dispose === void 0 ? void 0 : dispose();
+        const { dispose: _dispose, value } = trackSelector(selectorOrRun, update, e, options);
+        dispose = _dispose;
+        e.value = value;
+        if (e.onCleanupReaction) {
+            e.onCleanupReaction();
+            e.onCleanupReaction = undefined;
+        }
+        endBatch();
+        // Call the reaction if there is one and the value changed
+        if (reaction &&
+            ((options === null || options === void 0 ? void 0 : options.fromComputed) || ((e.num > 0 || !isEvent(selectorOrRun)) && e.previous !== e.value))) {
+            reaction(e);
+        }
+        // Update the previous value
+        e.previous = e.value;
+        // Increment the counter
+        e.num++;
+    };
+    update();
+    // Return function calling dispose because dispose may be changed in update()
+    return () => {
+        var _a, _b;
+        (_a = e.onCleanup) === null || _a === void 0 ? void 0 : _a.call(e);
+        e.onCleanup = undefined;
+        (_b = e.onCleanupReaction) === null || _b === void 0 ? void 0 : _b.call(e);
+        e.onCleanupReaction = undefined;
+        dispose === null || dispose === void 0 ? void 0 : dispose();
+    };
+}
+
+const ArrayModifiers = new Set([
+    'copyWithin',
+    'fill',
+    'from',
+    'pop',
+    'push',
+    'reverse',
+    'shift',
+    'sort',
+    'splice',
+    'unshift',
+]);
+const ArrayLoopers = new Set([
+    'every',
+    'filter',
+    'find',
+    'findIndex',
+    'forEach',
+    'includes',
+    'join',
+    'map',
+    'some',
+]);
+const ArrayLoopersReturn = new Set(['filter', 'find']);
+const observableProperties = new Map();
+const observableFns = new Map([
+    ['get', get],
+    ['set', set],
+    ['peek', peek],
+    ['onChange', onChange],
+    ['assign', assign],
+    ['delete', deleteFn],
+    ['toggle', toggle],
+]);
+if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line no-var
+    var __devUpdateNodes = new Set();
+}
+function collectionSetter(node, target, prop, ...args) {
+    var _a;
+    const prevValue = (isArray(target) && target.slice()) || target;
+    const ret = target[prop].apply(target, args);
+    if (node) {
+        const hasParent = isChildNodeValue(node);
+        const key = hasParent ? node.key : '_';
+        const parentValue = hasParent ? getNodeValue(node.parent) : node.root;
+        // Set the object to the previous value first
+        parentValue[key] = prevValue;
+        // Then set with the new value so it notifies with the correct prevValue
+        setKey((_a = node.parent) !== null && _a !== void 0 ? _a : node, key, target);
     }
     // Return the original value
     return ret;
@@ -763,10 +1069,10 @@ function updateNodes(parent, obj, prevValue) {
     }
     return retValue !== null && retValue !== void 0 ? retValue : false;
 }
-function getProxy(node, p) {
+function getProxy(node, p, asFunction) {
     // Get the child node if p prop
     if (p !== undefined)
-        node = getChildNode(node, p);
+        node = getChildNode(node, p, asFunction);
     // Create a proxy if not already cached and return it
     return (node.proxy || (node.proxy = new Proxy(node, proxyHandler)));
 }
@@ -844,6 +1150,15 @@ const proxyHandler = {
         if (isObject(value) && value[symbolOpaque]) {
             return vProp;
         }
+        const fnOrComputed = (_a = node.functions) === null || _a === void 0 ? void 0 : _a.get(p);
+        if (fnOrComputed) {
+            if (isObservable(fnOrComputed)) {
+                return fnOrComputed;
+            }
+            else {
+                return getProxy(node, p, fnOrComputed);
+            }
+        }
         // Handle function calls
         if (isFunction(vProp)) {
             if (isArray(value)) {
@@ -890,15 +1205,9 @@ const proxyHandler = {
             // Update that this primitive node was accessed for observers
             if (isArray(value) && p === 'length') {
                 updateTracking(node, true);
-                // } else if (!isPrimitive(value)) {
-                //     updateTracking(getChildNode(node, p));
                 return vProp;
             }
         }
-        const fnOrComputed = (_a = node.functions) === null || _a === void 0 ? void 0 : _a.get(p);
-        if (fnOrComputed) {
-            return fnOrComputed;
-        }
         // TODOV3: Remove "state"
         if (vProp === undefined && (p === 'state' || p === '_state') && node.state) {
             return node.state;
@@ -965,6 +1274,10 @@ const proxyHandler = {
         const value = getNodeValue(node);
         return Reflect.has(value, prop);
     },
+    apply(target, thisArg, argArray) {
+        // If it's a function call it as a function
+        return Reflect.apply(target, thisArg, argArray);
+    },
 };
 function set(node, newValue) {
     if (node.parent) {
@@ -1005,7 +1318,7 @@ function setKey(node, key, newValue, level) {
     }
     const isRoot = !node.parent && key === '_';
     // Get the child node for updating and notifying
-    const childNode = isRoot ? node : getChildNode(node, key);
+    const childNode = isRoot ? node : getChildNode(node, key, isFunction(newValue) ? newValue : undefined);
     // Set the raw value on the parent object
     const { newValue: savedValue, prevValue, parentValue } = setNodeValue(childNode, newValue);
     const isFunc = isFunction(savedValue);
@@ -1144,7 +1457,7 @@ function extractPromise(node, value) {
     if (!node.state) {
         node.state = createObservable({
             isLoaded: false,
-        }, false, getProxy);
+        }, false, extractPromise, getProxy);
     }
     value
         .then((value) => {
@@ -1161,6 +1474,7 @@ function extractFunctionOrComputed(node, obj, k, v) {
     }
     else if (typeof v === 'function') {
         extractFunction(node, k, v);
+        delete obj[k];
     }
     else if (typeof v == 'object' && v !== null && v !== undefined) {
         const childNode = getNode(v);
@@ -1183,195 +1497,130 @@ function peek(node) {
     const value = getNodeValue(node);
     // If node is not yet lazily computed go do that
     if (node.lazy) {
-        delete node.lazy;
-        for (const key in value) {
-            if (hasOwnProperty.call(value, key)) {
-                extractFunctionOrComputed(node, value, key, value[key]);
+        if (isFunction(node) || isFunction(node.lazy)) {
+            activateNodeFunction(node);
+        }
+        else {
+            for (const key in value) {
+                if (hasOwnProperty.call(value, key)) {
+                    extractFunctionOrComputed(node, value, key, value[key]);
+                }
             }
         }
+        delete node.lazy;
     }
     // Check if computed needs to activate
     checkActivate(node);
     return value;
 }
-
-function isObservable(obs) {
-    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, retainObservable) {
-    let c = selector;
-    if (isFunction(c)) {
-        c = e ? c(e) : c();
-    }
-    return isObservable(c) && !retainObservable ? c.get() : c;
-}
-function getObservableIndex(obs) {
-    const node = getNode(obs);
-    const n = +node.key;
-    return n - n < 1 ? +n : -1;
-}
-function opaqueObject(value) {
-    if (value) {
-        value[symbolOpaque] = true;
-    }
-    return value;
-}
-function lockObservable(obs, value) {
-    var _a;
-    const root = (_a = getNode(obs)) === null || _a === void 0 ? void 0 : _a.root;
-    if (root) {
-        root.locked = value;
-    }
-}
-function setAtPath(obj, path, pathTypes, value, fullObj, restore) {
-    let o = obj;
-    let oFull = fullObj;
-    if (path.length > 0) {
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (i === path.length - 1) {
-                // Don't set if the value is the same. This prevents creating a new key
-                // when setting undefined on an object without this key
-                if (o[p] !== value) {
-                    o[p] = value;
+function activateNodeFunction(node) {
+    let dispose;
+    let subscribed = false;
+    let isSetting = false;
+    // The onSet function handles the observable being set
+    // and forwards the set elsewhere
+    const onSet = (setter) => {
+        const doSet = (params) => {
+            // Don't call the set if this is the first value coming in
+            if (params.changes.length > 1 || !isFunction(params.changes[0].prevAtPath)) {
+                isSetting = true;
+                try {
+                    params.isRemote = globalState.isLoadingRemote$.peek();
+                    setter(params);
                 }
-            }
-            else if (o[p] === symbolDelete) {
-                // If this was previously deleted, restore it
-                if (oFull) {
-                    o[p] = oFull[p];
-                    restore === null || restore === void 0 ? void 0 : restore(path.slice(0, i + 1), o[p]);
+                finally {
+                    isSetting = false;
                 }
-                break;
             }
-            else if (o[p] === undefined || o[p] === null) {
-                o[p] = pathTypes[i] === 'array' ? [] : {};
+        };
+        dispose === null || dispose === void 0 ? void 0 : dispose();
+        dispose = onChange(node, doSet, { immediate: true });
+    };
+    // The subscribe function runs a function that listens to
+    // a data source and sends updates into the observable
+    const subscribe = (fn) => {
+        if (!subscribed) {
+            subscribed = true;
+            fn({
+                update: ({ value }) => {
+                    globalState.onChangeRemote(() => {
+                        set(node, value);
+                    });
+                },
+            });
+        }
+    };
+    // The proxy function simply marks the node as a proxy with this function
+    // so that child nodes will be created with this function, and then simply
+    // activated as a function
+    const proxy = (fn) => {
+        node.proxyFn2 = fn;
+    };
+    if (!node.state) {
+        node.state = createObservable({
+            isLoaded: false,
+        }, false, extractPromise, getProxy);
+    }
+    const { isLoaded } = node.state;
+    let prevTarget$;
+    let curTarget$;
+    let wasPromise;
+    const activator = (isFunction(node) ? node : node.lazy);
+    observe(() => {
+        // Run the function at this node
+        let value = activator({ onSet, subscribe, proxy });
+        // If target is an observable, get() it to make sure we listen to its changes
+        // and set up an onSet to write changes back to it
+        if (isObservable(value)) {
+            prevTarget$ = curTarget$;
+            curTarget$ = value;
+            onSet(({ value: newValue, getPrevious }) => {
+                // Don't set the target observable if the target has changed since the last run
+                if (!prevTarget$ || curTarget$ === prevTarget$) {
+                    // Set the node value back to what it was before before setting it.
+                    // This is a workaround for linked objects because it might not notify
+                    // if setting a property of an object
+                    // TODO: Is there a way to not do this? Or at least only do it in a
+                    // small subset of cases?
+                    setNodeValue(getNode(curTarget$), getPrevious());
+                    // Set the value on the curTarget
+                    curTarget$.set(newValue);
+                }
+            });
+            // Get the value from the observable because we still want the raw value
+            // for the effect.
+            value = value.get();
+        }
+        if (isPromise(value)) {
+            wasPromise = true;
+            extractPromise(node, value);
+            value = undefined;
+        }
+        return value;
+    }, ({ value }) => {
+        if (!isSetting) {
+            const doSet = () => {
+                set(node, value);
+                isLoaded.set(true);
+            };
+            if (wasPromise) {
+                wasPromise = false;
+                globalState.onChangeRemote(doSet);
             }
-            o = o[p];
-            if (oFull) {
-                oFull = oFull[p];
+            else {
+                doSet();
             }
         }
-    }
-    else {
-        obj = value;
-    }
-    return obj;
+    }, { immediate: true, fromComputed: true });
 }
-function setInObservableAtPath(obs, path, pathTypes, value, mode) {
-    let o = obs;
-    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([]);
-        }
-        o = o[p];
-        v = v[p];
-    }
-    if (v === symbolDelete) {
-        o.delete();
-    }
-    // Assign if possible, or set otherwise
-    else if (mode === 'assign' && o.assign && isObject(o.peek())) {
-        o.assign(v);
-    }
-    else {
-        o.set(v);
-    }
-}
-function mergeIntoObservable(target, ...sources) {
-    beginBatch();
-    globalState.isMerging = true;
-    for (let i = 0; i < sources.length; i++) {
-        target = _mergeIntoObservable(target, sources[i]);
-    }
-    globalState.isMerging = false;
-    endBatch();
-    return target;
-}
-function _mergeIntoObservable(target, source) {
-    var _a;
-    const needsSet = isObservable(target);
-    const targetValue = needsSet ? target.peek() : target;
-    const isTargetArr = isArray(targetValue);
-    const isTargetObj = !isTargetArr && isObject(targetValue);
-    if ((isTargetObj && isObject(source) && !isEmpty(targetValue)) ||
-        (isTargetArr && isArray(source) && targetValue.length > 0)) {
-        const keys = Object.keys(source);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            const sourceValue = source[key];
-            if (sourceValue === symbolDelete) {
-                needsSet && ((_a = target[key]) === null || _a === void 0 ? void 0 : _a.delete) ? target[key].delete() : delete target[key];
-            }
-            else {
-                const isObj = isObject(sourceValue);
-                const isArr = !isObj && isArray(sourceValue);
-                const targetChild = target[key];
-                if ((isObj || isArr) && targetChild && (needsSet || !isEmpty(targetChild))) {
-                    if (!needsSet && (!targetChild || (isObj ? !isObject(targetChild) : !isArray(targetChild)))) {
-                        target[key] = sourceValue;
-                    }
-                    else {
-                        _mergeIntoObservable(targetChild, sourceValue);
-                    }
-                }
-                else {
-                    needsSet
-                        ? targetChild.set(sourceValue)
-                        : (target[key] = sourceValue);
-                }
-            }
-        }
-    }
-    else if (source !== undefined) {
-        needsSet ? target.set(source) : (target = source);
-    }
-    return target;
-}
-function constructObjectWithPath(path, pathTypes, value) {
-    let out;
-    if (path.length > 0) {
-        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 = o[p];
-        }
-    }
-    else {
-        out = value;
-    }
-    return out;
-}
-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' ? [] : {};
-    }
-    return o;
-}
-function isObservableValueReady(value) {
-    return !!value && ((!isObject(value) && !isArray(value)) || !isEmpty(value));
-}
-function setSilently(obs, newValue) {
-    const node = getNode(obs);
-    return setNodeValue(node, newValue).newValue;
-}
-
-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);
+
+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
@@ -1406,122 +1655,76 @@ ObservablePrimitiveClass.prototype.delete = function () {
     return this;
 };
 
-function observable(value) {
-    return createObservable(value, false, getProxy, ObservablePrimitiveClass);
-}
-function observablePrimitive(value) {
-    return createObservable(value, true, getProxy, ObservablePrimitiveClass);
-}
-
-function setupTracking(nodes, update, noArgs, immediate) {
-    let listeners = [];
-    // Listen to tracked nodes
-    nodes === null || nodes === void 0 ? void 0 : nodes.forEach((tracked) => {
-        const { node, track } = tracked;
-        listeners.push(onChange(node, update, { trackingType: track, immediate, noArgs }));
-    });
-    return () => {
-        if (listeners) {
-            for (let i = 0; i < listeners.length; i++) {
-                listeners[i]();
-            }
-            listeners = undefined;
-        }
-    };
-}
-
-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;
+function _when(predicate, effect, checkReady) {
+    // If predicate is a regular Promise skip all the observable stuff
+    if (isPromise(predicate)) {
+        return effect ? predicate.then(effect) : predicate;
     }
-    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;
+    let value;
+    // Create a wrapping fn that calls the effect if predicate returns true
+    function run(e) {
+        const ret = computeSelector(predicate);
+        if (!isPromise(ret) && (checkReady ? isObservableValueReady(ret) : ret)) {
+            value = ret;
+            // Set cancel so that observe does not track anymore
+            e.cancel = true;
         }
+        return value;
     }
-    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;
+    function doEffect() {
+        // If value is truthy then run the effect
+        effect === null || effect === void 0 ? void 0 : effect(value);
     }
-    return { value, dispose, resubscribe };
-}
-
-function observe(selectorOrRun, reactionOrOptions, options) {
-    let reaction;
-    if (isFunction(reactionOrOptions)) {
-        reaction = reactionOrOptions;
+    // Run in an observe
+    observe(run, doEffect);
+    // If first run resulted in a truthy value just return it.
+    // It will have set e.cancel so no need to dispose
+    if (isPromise(value)) {
+        return effect ? value.then(effect) : value;
+    }
+    else if (value !== undefined) {
+        return Promise.resolve(value);
     }
     else {
-        options = reactionOrOptions;
+        // Wrap it in a promise
+        const promise = new Promise((resolve) => {
+            if (effect) {
+                const originalEffect = effect;
+                effect = (value) => {
+                    const effectValue = originalEffect(value);
+                    resolve(effectValue);
+                };
+            }
+            else {
+                effect = resolve;
+            }
+        });
+        return promise;
     }
-    let dispose;
-    const e = { num: 0 };
-    // Wrap it in a function so it doesn't pass all the arguments to run()
-    const update = function () {
-        if (e.onCleanup) {
-            e.onCleanup();
-            e.onCleanup = undefined;
-        }
-        // Run in a batch so changes don't happen until we're done tracking here
-        beginBatch();
-        // Run the function/selector
-        delete e.value;
-        // Dispose listeners from previous run
-        dispose === null || dispose === void 0 ? void 0 : dispose();
-        const { dispose: _dispose, value } = trackSelector(selectorOrRun, update, e, options);
-        dispose = _dispose;
-        e.value = value;
-        if (e.onCleanupReaction) {
-            e.onCleanupReaction();
-            e.onCleanupReaction = undefined;
-        }
-        endBatch();
-        // Call the reaction if there is one and the value changed
-        if (reaction &&
-            (e.num > 0 || !isEvent(selectorOrRun)) &&
-            (e.previous !== e.value || (options === null || options === void 0 ? void 0 : options.fromComputed))) {
-            reaction(e);
-        }
-        // Update the previous value
-        e.previous = e.value;
-        // Increment the counter
-        e.num++;
-    };
-    update();
-    // Return function calling dispose because dispose may be changed in update()
-    return () => {
-        var _a, _b;
-        (_a = e.onCleanup) === null || _a === void 0 ? void 0 : _a.call(e);
-        e.onCleanup = undefined;
-        (_b = e.onCleanupReaction) === null || _b === void 0 ? void 0 : _b.call(e);
-        e.onCleanupReaction = undefined;
-        dispose === null || dispose === void 0 ? void 0 : dispose();
-    };
 }
+function when(predicate, effect) {
+    return _when(predicate, effect, false);
+}
+function whenReady(predicate, effect) {
+    return _when(predicate, effect, true);
+}
+
+function observable(value) {
+    return createObservable(value, false, extractPromise, getProxy, ObservablePrimitiveClass);
+}
+function observablePrimitive(value) {
+    return createObservable(value, true, extractPromise, getProxy, ObservablePrimitiveClass);
+}
+globalState.isLoadingRemote$ = observable(false);
+globalState.onChangeRemote = function onChangeRemote(cb) {
+    when(() => !globalState.isLoadingRemote$.get(), () => {
+        // Remote changes should only update local state
+        globalState.isLoadingRemote$.set(true);
+        batch(cb, () => {
+            globalState.isLoadingRemote$.set(false);
+        });
+    });
+};
 
 function computed(compute, set$1) {
     // Create an observable for this computed variable
@@ -1685,60 +1888,6 @@ function proxy(get, set) {
     return obs;
 }
 
-function _when(predicate, effect, checkReady) {
-    // If predicate is a regular Promise skip all the observable stuff
-    if (isPromise(predicate)) {
-        return effect ? predicate.then(effect) : predicate;
-    }
-    let value;
-    // Create a wrapping fn that calls the effect if predicate returns true
-    function run(e) {
-        const ret = computeSelector(predicate);
-        if (!isPromise(ret) && (checkReady ? isObservableValueReady(ret) : ret)) {
-            value = ret;
-            // Set cancel so that observe does not track anymore
-            e.cancel = true;
-        }
-        return value;
-    }
-    function doEffect() {
-        // If value is truthy then run the effect
-        effect === null || effect === void 0 ? void 0 : effect(value);
-    }
-    // Run in an observe
-    observe(run, doEffect);
-    // If first run resulted in a truthy value just return it.
-    // It will have set e.cancel so no need to dispose
-    if (isPromise(value)) {
-        return effect ? value.then(effect) : value;
-    }
-    else if (value !== undefined) {
-        return Promise.resolve(value);
-    }
-    else {
-        // Wrap it in a promise
-        const promise = new Promise((resolve) => {
-            if (effect) {
-                const originalEffect = effect;
-                effect = (value) => {
-                    const effectValue = originalEffect(value);
-                    resolve(effectValue);
-                };
-            }
-            else {
-                effect = resolve;
-            }
-        });
-        return promise;
-    }
-}
-function when(predicate, effect) {
-    return _when(predicate, effect, false);
-}
-function whenReady(predicate, effect) {
-    return _when(predicate, effect, true);
-}
-
 const internal = {
     ensureNodeValue,
     findIDKey,