@legendapp/state 2.0.0-next.8 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.11.1
+
+- Removed the deprecation warning about reactive props since that might affect a lot of people and we can migrate that more slowly.
+
 ## 1.11.0
 
 - This version displays deprecation warnings to prepare for version 2.0 release which will remove the deprecated features. See https://legendapp.com/open-source/state/migrating/ for details on migration or disabling the warning.

package/config/enableReactNativeComponents.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var react$1 = require('react');
 var react = require('@legendapp/state/react');
 var reactNative = require('react-native');
 
@@ -34,6 +35,20 @@ function enableReactNativeComponents() {
                     defaultValue: false,
                 },
             },
+            FlatList: {
+                data: {
+                    selector: (propsOut, p) => {
+                        const state = react$1.useRef(0);
+                        // Increment renderNum whenever the array changes shallowly
+                        const [renderNum, value] = react.useSelector(() => [state.current++, p.get(true)]);
+                        // Set extraData to renderNum so that it will re-render when renderNum changes.
+                        // This is necessary because the observable array is mutable so changes to it
+                        // won't trigger re-renders by default.
+                        propsOut.extraData = renderNum;
+                        return value;
+                    },
+                },
+            },
         },
     });
 }

package/config/enableReactNativeComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"enableReactNativeComponents.js","sources":["../../../../src/config/enableReactNativeComponents.ts"],"sourcesContent":[null],"names":["configureReactive","ActivityIndicator","Button","FlatList","Image","Pressable","ScrollView","SectionList","Switch","Text","TextInput","TouchableWithoutFeedback","View"],"mappings":";;;;;SA4BgB,2BAA2B,GAAA;AACvC,IAAAA,uBAAiB,CAAC;AACd,QAAA,UAAU,EAAE;AACR,YAAA,iBAAiB,EAAEC,6BAAiB;AACpC,YAAA,MAAM,EAAEC,kBAAM;AACd,YAAA,QAAQ,EAAEC,oBAAQ;AAClB,YAAA,KAAK,EAAEC,iBAAK;AACZ,YAAA,SAAS,EAAEC,qBAAS;AACpB,YAAA,UAAU,EAAEC,sBAAU;AACtB,YAAA,WAAW,EAAEC,uBAAW;AACxB,YAAA,MAAM,EAAEC,kBAAM;AACd,YAAA,IAAI,EAAEC,gBAAI;AACV,YAAA,SAAS,EAAEC,qBAAS;AACpB,YAAA,wBAAwB,EAAEC,oCAAwB;AAClD,YAAA,IAAI,EAAEC,gBAAI;AACb,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE;AACP,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,IAAI;AACnC,oBAAA,YAAY,EAAE,EAAE;AACnB,iBAAA;AACJ,aAAA;AACD,YAAA,MAAM,EAAE;AACJ,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,eAAe;AACxB,oBAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAClB,oBAAA,YAAY,EAAE,KAAK;AACtB,iBAAA;AACJ,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}
+{"version":3,"file":"enableReactNativeComponents.js","sources":["../../../../src/config/enableReactNativeComponents.ts"],"sourcesContent":[null],"names":["configureReactive","ActivityIndicator","Button","FlatList","Image","Pressable","ScrollView","SectionList","Switch","Text","TextInput","TouchableWithoutFeedback","View","useRef","useSelector"],"mappings":";;;;;;SA8BgB,2BAA2B,GAAA;AACvC,IAAAA,uBAAiB,CAAC;AACd,QAAA,UAAU,EAAE;AACR,YAAA,iBAAiB,EAAEC,6BAAiB;AACpC,YAAA,MAAM,EAAEC,kBAAM;AACd,YAAA,QAAQ,EAAEC,oBAAQ;AAClB,YAAA,KAAK,EAAEC,iBAAK;AACZ,YAAA,SAAS,EAAEC,qBAAS;AACpB,YAAA,UAAU,EAAEC,sBAAU;AACtB,YAAA,WAAW,EAAEC,uBAAW;AACxB,YAAA,MAAM,EAAEC,kBAAM;AACd,YAAA,IAAI,EAAEC,gBAAI;AACV,YAAA,SAAS,EAAEC,qBAAS;AACpB,YAAA,wBAAwB,EAAEC,oCAAwB;AAClD,YAAA,IAAI,EAAEC,gBAAI;AACb,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE;AACP,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,IAAI;AACnC,oBAAA,YAAY,EAAE,EAAE;AACnB,iBAAA;AACJ,aAAA;AACD,YAAA,MAAM,EAAE;AACJ,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,eAAe;AACxB,oBAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAClB,oBAAA,YAAY,EAAE,KAAK;AACtB,iBAAA;AACJ,aAAA;AACD,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE;AACF,oBAAA,QAAQ,EAAE,CAAC,QAA6B,EAAE,CAAkB,KAAI;AAC5D,wBAAA,MAAM,KAAK,GAAGC,cAAM,CAAC,CAAC,CAAC,CAAC;;wBAExB,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,GAAGC,iBAAW,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;AAK7E,wBAAA,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;AAE/B,wBAAA,OAAO,KAAK,CAAC;qBAChB;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/config/enableReactNativeComponents.mjs

@@ -1,4 +1,5 @@
-import { configureReactive } from '@legendapp/state/react';
+import { useRef } from 'react';
+import { configureReactive, useSelector } from '@legendapp/state/react';
 import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
 
 function enableReactNativeComponents() {
@@ -32,6 +33,20 @@ function enableReactNativeComponents() {
                     defaultValue: false,
                 },
             },
+            FlatList: {
+                data: {
+                    selector: (propsOut, p) => {
+                        const state = useRef(0);
+                        // Increment renderNum whenever the array changes shallowly
+                        const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+                        // Set extraData to renderNum so that it will re-render when renderNum changes.
+                        // This is necessary because the observable array is mutable so changes to it
+                        // won't trigger re-renders by default.
+                        propsOut.extraData = renderNum;
+                        return value;
+                    },
+                },
+            },
         },
     });
 }

package/config/enableReactNativeComponents.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"enableReactNativeComponents.mjs","sources":["../../../../src/config/enableReactNativeComponents.ts"],"sourcesContent":[null],"names":[],"mappings":";;;SA4BgB,2BAA2B,GAAA;AACvC,IAAA,iBAAiB,CAAC;AACd,QAAA,UAAU,EAAE;AACR,YAAA,iBAAiB,EAAE,iBAAiB;AACpC,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,wBAAwB,EAAE,wBAAwB;AAClD,YAAA,IAAI,EAAE,IAAI;AACb,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE;AACP,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,IAAI;AACnC,oBAAA,YAAY,EAAE,EAAE;AACnB,iBAAA;AACJ,aAAA;AACD,YAAA,MAAM,EAAE;AACJ,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,eAAe;AACxB,oBAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAClB,oBAAA,YAAY,EAAE,KAAK;AACtB,iBAAA;AACJ,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}
+{"version":3,"file":"enableReactNativeComponents.mjs","sources":["../../../../src/config/enableReactNativeComponents.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;SA8BgB,2BAA2B,GAAA;AACvC,IAAA,iBAAiB,CAAC;AACd,QAAA,UAAU,EAAE;AACR,YAAA,iBAAiB,EAAE,iBAAiB;AACpC,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,wBAAwB,EAAE,wBAAwB;AAClD,YAAA,IAAI,EAAE,IAAI;AACb,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE;AACP,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,UAAU;oBACnB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,IAAI;AACnC,oBAAA,YAAY,EAAE,EAAE;AACnB,iBAAA;AACJ,aAAA;AACD,YAAA,MAAM,EAAE;AACJ,gBAAA,KAAK,EAAE;AACH,oBAAA,OAAO,EAAE,eAAe;AACxB,oBAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAClB,oBAAA,YAAY,EAAE,KAAK;AACtB,iBAAA;AACJ,aAAA;AACD,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE;AACF,oBAAA,QAAQ,EAAE,CAAC,QAA6B,EAAE,CAAkB,KAAI;AAC5D,wBAAA,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;;wBAExB,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;AAK7E,wBAAA,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;AAE/B,wBAAA,OAAO,KAAK,CAAC;qBAChB;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/index.d.ts

@@ -3,15 +3,15 @@ export { computed } from './src/computed';
 export { configureLegendState } from './src/config';
 export { event } from './src/event';
 export { computeSelector, constructObjectWithPath, deconstructObjectWithPath, getObservableIndex, isObservable, isObservableValueReady, lockObservable, mergeIntoObservable, opaqueObject, setAtPath, setInObservableAtPath, setSilently, } from './src/helpers';
-export { isArray, isBoolean, isEmpty, isFunction, isObject, isPrimitive, isPromise, isString, isSymbol, } from './src/is';
+export { hasOwnProperty, isArray, isBoolean, isEmpty, isFunction, isObject, isPrimitive, isPromise, isString, isSymbol, } from './src/is';
 export { observable, observablePrimitive } from './src/observable';
 export * from './src/observableInterfaces';
 export { observe } from './src/observe';
 export { proxy } from './src/proxy';
 export { trackSelector } from './src/trackSelector';
 export { when, whenReady } from './src/when';
-import { getProxy, set } from './src/ObservableObject';
-import { ensureNodeValue, findIDKey, get, getNode, peek, setNodeValue } from './src/globals';
+import { get, getProxy, peek, set } from './src/ObservableObject';
+import { ensureNodeValue, findIDKey, getNode, setNodeValue } from './src/globals';
 import { setAtPath } from './src/helpers';
 export declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;

package/index.js

@@ -50,50 +50,6 @@ function isChildNodeValue(node) {
     return !!node.parent;
 }
 
-let trackCount = 0;
-const trackingQueue = [];
-const tracking = {
-    current: undefined,
-    inRender: false,
-};
-function beginTracking(inRender) {
-    // Keep a copy of the previous tracking context so it can be restored
-    // when this context is complete
-    trackingQueue.push(tracking.current);
-    trackCount++;
-    tracking.inRender = inRender;
-    tracking.current = {};
-}
-function endTracking(fromRender) {
-    // Restore the previous tracking context
-    trackCount--;
-    if (trackCount < 0) {
-        trackCount = 0;
-    }
-    if (fromRender) {
-        tracking.inRender = false;
-    }
-    tracking.current = trackingQueue.pop();
-}
-function updateTracking(node, track) {
-    if (trackCount) {
-        const tracker = tracking.current;
-        if (tracker) {
-            if (!tracker.nodes) {
-                tracker.nodes = new Map();
-            }
-            const existing = tracker.nodes.get(node);
-            if (existing) {
-                existing.track = existing.track || track;
-                existing.num++;
-            }
-            else {
-                tracker.nodes.set(node, { node, track, num: 1 });
-            }
-        }
-    }
-}
-
 const symbolToPrimitive = Symbol.toPrimitive;
 const symbolGetNode = Symbol('getNode');
 const symbolDelete = /* @__PURE__ */ Symbol('delete');
@@ -116,15 +72,6 @@ function checkActivate(node) {
 function getNode(obs) {
     return obs && obs[symbolGetNode];
 }
-function get(node, track) {
-    // Track by default
-    updateTracking(node, track);
-    return peek(node);
-}
-function peek(node) {
-    checkActivate(node);
-    return getNodeValue(node);
-}
 function setNodeValue(node, newValue) {
     var _a;
     const parentNode = (_a = node.parent) !== null && _a !== void 0 ? _a : node;
@@ -188,6 +135,7 @@ function getChildNode(node, key) {
             root: node.root,
             parent: node,
             key,
+            lazy: true,
         };
         if (!node.children) {
             node.children = new Map();
@@ -516,6 +464,45 @@ function onChange(node, callback, options = {}) {
     return () => listeners.delete(listener);
 }
 
+let trackCount = 0;
+const trackingQueue = [];
+const tracking = {
+    current: undefined,
+};
+function beginTracking() {
+    // Keep a copy of the previous tracking context so it can be restored
+    // when this context is complete
+    trackingQueue.push(tracking.current);
+    trackCount++;
+    tracking.current = {};
+}
+function endTracking() {
+    // Restore the previous tracking context
+    trackCount--;
+    if (trackCount < 0) {
+        trackCount = 0;
+    }
+    tracking.current = trackingQueue.pop();
+}
+function updateTracking(node, track) {
+    if (trackCount) {
+        const tracker = tracking.current;
+        if (tracker) {
+            if (!tracker.nodes) {
+                tracker.nodes = new Map();
+            }
+            const existing = tracker.nodes.get(node);
+            if (existing) {
+                existing.track = existing.track || track;
+                existing.num++;
+            }
+            else {
+                tracker.nodes.set(node, { node, track, num: 1 });
+            }
+        }
+    }
+}
+
 const ArrayModifiers = new Set([
     'copyWithin',
     'fill',
@@ -678,7 +665,6 @@ function updateNodes(parent, obj, prevValue) {
             const prev = isMap ? prevValue === null || prevValue === void 0 ? void 0 : prevValue.get(key) : prevValue === null || prevValue === void 0 ? void 0 : prevValue[key];
             let isDiff = value !== prev;
             if (isDiff) {
-                extractFunctionOrComputed(parent, obj, key, value);
                 const id = idField && value
                     ? isIdFieldFunction
                         ? idField(value)
@@ -773,12 +759,13 @@ const proxyHandler = {
         if (p === symbolGetNode) {
             return node;
         }
+        const value = peek(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.
+        // This needs to be below peek because it activates there.
         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);
             if (ret !== undefined) {
@@ -986,7 +973,7 @@ function setKey(node, key, newValue, level) {
     if (savedValue !== prevValue) {
         updateNodesAndNotify(node, savedValue, prevValue, childNode, isPrim, isRoot, level);
     }
-    extractFunctionOrComputed(node, parentValue, key, newValue);
+    extractFunctionOrComputed(node, parentValue, key, savedValue);
     return isFunc ? savedValue : isRoot ? getProxy(node) : getProxy(node, key);
 }
 function assign(node, value) {
@@ -1123,7 +1110,6 @@ function extractPromise(node, value) {
         set(node, { error, status: 'rejected' });
     });
 }
-const __devExtractFunctionsAndComputedsNodes = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ? new Set() : undefined;
 function extractFunctionOrComputed(node, obj, k, v) {
     if (isPromise(v)) {
         extractPromise(getChildNode(node, k), v);
@@ -1142,21 +1128,25 @@ function extractFunctionOrComputed(node, obj, k, v) {
         }
     }
 }
-function extractFunctionsAndComputeds(node, obj) {
-    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') &&
-        typeof __devExtractFunctionsAndComputedsNodes !== 'undefined') {
-        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 (v && extractFunctionOrComputed(node, obj, k, v) && !v[symbolOpaque]) {
-            extractFunctionsAndComputeds(getChildNode(node, k), v);
+function get(node, track) {
+    // Track by default
+    updateTracking(node, track);
+    return peek(node);
+}
+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]);
+            }
         }
     }
+    // Check if computed needs to activate
+    checkActivate(node);
+    return value;
 }
 
 function isObservable(obs) {
@@ -1374,6 +1364,7 @@ function createObservable(value, makePrimitive) {
     };
     const node = {
         root,
+        lazy: true,
     };
     const prim = makePrimitive || isActualPrimitive(value);
     const obs = prim
@@ -1382,14 +1373,6 @@ function createObservable(value, makePrimitive) {
     if (valueIsPromise) {
         extractPromise(node, value);
     }
-    else if (!prim) {
-        if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
-            __devExtractFunctionsAndComputedsNodes.clear();
-        }
-        if (value) {
-            extractFunctionsAndComputeds(node, value);
-        }
-    }
     return obs;
 }
 function observable(value) {
@@ -1416,7 +1399,7 @@ function setupTracking(nodes, update, noArgs, immediate) {
     };
 }
 
-function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe, inRender) {
+function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
     var _a;
     let nodes;
     let value;
@@ -1424,23 +1407,21 @@ function trackSelector(selector, update, observeEvent, observeOptions, createRes
     let tracker;
     let resubscribe;
     let updateFn = update;
-    let noArgs = true;
     if (isObservable(selector)) {
         value = selector.peek();
-        dispose = selector.onChange(update, { noArgs: true });
-        resubscribe = createResubscribe ? selector.onChange(update, { noArgs: true }) : undefined;
+        dispose = selector.onChange(update);
+        resubscribe = createResubscribe ? selector.onChange(update) : undefined;
     }
     else {
         // Compute the selector inside a tracking context
-        beginTracking(inRender);
+        beginTracking();
         value = selector ? computeSelector(selector, observeEvent, observeOptions === null || observeOptions === void 0 ? void 0 : observeOptions.retainObservable) : selector;
         tracker = tracking.current;
         nodes = tracker.nodes;
-        endTracking(inRender);
+        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) {
-                noArgs = false;
                 updateFn = tracker.traceUpdates(update);
             }
             // Clear tracing so it doesn't leak to other components
@@ -1452,8 +1433,8 @@ function trackSelector(selector, update, observeEvent, observeOptions, createRes
         // 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, noArgs, observeOptions === null || observeOptions === void 0 ? void 0 : observeOptions.immediate);
-        resubscribe = createResubscribe ? () => setupTracking(nodes, updateFn, noArgs) : undefined;
+        dispose = setupTracking(nodes, updateFn, false, observeOptions === null || observeOptions === void 0 ? void 0 : observeOptions.immediate);
+        resubscribe = createResubscribe ? () => setupTracking(nodes, updateFn) : undefined;
     }
     return { value, dispose, resubscribe };
 }
@@ -1467,6 +1448,7 @@ function observe(selectorOrRun, reactionOrOptions, options) {
         options = reactionOrOptions;
     }
     let dispose;
+    let isFirstRun = true;
     const e = { num: 0 };
     // Wrap it in a function so it doesn't pass all the arguments to run()
     const update = function () {
@@ -1487,15 +1469,16 @@ function observe(selectorOrRun, reactionOrOptions, options) {
             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) {
+        if (reaction && (e.num > 0 || !isEvent(selectorOrRun)) && (isFirstRun || e.previous !== e.value)) {
             reaction(e);
         }
         // Update the previous value
         e.previous = e.value;
         // Increment the counter
         e.num++;
-        endBatch();
+        isFirstRun = false;
     };
     update();
     // Return function calling dispose because dispose may be changed in update()
@@ -1672,20 +1655,27 @@ function proxy(get, set) {
 }
 
 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;
-            // If value is truthy then run the effect
-            effect === null || effect === void 0 ? void 0 : effect(ret);
-            // Set cancel so that observe does not track
+            // 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);
+    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)) {
@@ -1750,6 +1740,7 @@ exports.findIDKey = findIDKey;
 exports.getNode = getNode;
 exports.getNodeValue = getNodeValue;
 exports.getObservableIndex = getObservableIndex;
+exports.hasOwnProperty = hasOwnProperty;
 exports.internal = internal;
 exports.isArray = isArray;
 exports.isBoolean = isBoolean;