@arrai-innovations/reactive-helpers 11.0.4 → 11.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "11.0.4",
+    "version": "11.1.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "type": "module",

package/tests/unit/use/listFilter.spec.js

@@ -1,6 +1,6 @@
 import { useListFilters, useListSort } from "../../../use/index.js";
 import { doAwaitNot } from "../../../utils/watches.js";
-import { ref, unref, reactive } from "vue";
+import { reactive, ref, unref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/listFilter", () => {
@@ -122,6 +122,10 @@ describe("use/listFilter", () => {
         const filter = useListFilter({
             parentState: listInstance.state,
         });
+        await doAwaitNot({
+            obj: filter.state,
+            prop: "running",
+        });
         expect(filter.state.objects).toEqual(listInstance.state.objects);
     });
     describe("useListFilter operates on parentState modified by useListSort", () => {
@@ -373,10 +377,6 @@ describe("use/listFilter", () => {
             parentState: filter1.state,
             allowedFilter: filter2AllowedFilter,
         });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -386,10 +386,6 @@ describe("use/listFilter", () => {
         expect(filter2.state.objects).toEqual({});
         expect(filter2.state.order).toEqual([]);
         list.addListObject({ id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -403,10 +399,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -421,10 +413,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 3, name: "three", has_things: true, has_stuff: false, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -439,10 +427,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 4, name: "four", has_things: true, has_stuff: false, has_other_stuff: false });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -458,10 +442,6 @@ describe("use/listFilter", () => {
         expect(filter2.state.order).toEqual(["1"]);
         list.state.objects[1].has_stuff = false;
         list.state.objects[2].has_other_stuff = true;
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -478,10 +458,6 @@ describe("use/listFilter", () => {
         list.addListObject({ id: 6, name: "six", has_things: true, has_stuff: true, has_other_stuff: false });
         list.addListObject({ id: 7, name: "seven", has_things: false, has_stuff: true, has_other_stuff: true });
         list.addListObject({ id: 8, name: "eight", has_things: true, has_stuff: true, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",

package/tests/unit/use/listInstance.spec.js

@@ -381,7 +381,7 @@ describe("use/listInstance.spec.js", function () {
             listInstance.addListObject(listObject);
             expect(() => listInstance.addListObject({ listObject })).toThrowError(ListError);
         });
-        it("succeeded", function () {
+        it("succeeded", async function () {
             const listInstance = useListInstance({ props: {} });
             const newId = listInstance.getFakeId();
             listObject.id = newId;
@@ -389,6 +389,18 @@ describe("use/listInstance.spec.js", function () {
             expect(listInstance.state.objects[newId]).toEqual(listObject);
             const reactiveProxy = listInstance.state.objects[newId];
             expect(isReactive(reactiveProxy)).toBe(true);
+            expect(reactiveProxy.id).toBe(newId);
+            expect(reactiveProxy.__str__).toBe("nvm");
+            expect(reactiveProxy.name).toBe("nvm");
+            expect(listInstance.state.objectsInOrder).toEqual([]);
+            // order updates immediately due to not being proxied through objectsInOrderRefs
+            expect(listInstance.state.order).toStrictEqual([newId.toString()]);
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder).toEqual([reactiveProxy]);
+            expect(listInstance.state.order).toEqual([newId.toString()]);
         });
     });
     describe("updateListObject", function () {
@@ -401,7 +413,7 @@ describe("use/listInstance.spec.js", function () {
         });
         it("succeeds", async function () {
             const listInstance = useListInstance({
-                props: { listArgs: { user: 1 }, retrieveArgs: { fields: fields } },
+                props: {},
             });
             let crudListResolve;
             const crudListPromise = new Promise((resolve) => {
@@ -418,10 +430,70 @@ describe("use/listInstance.spec.js", function () {
             passedPageCallback(crudListResolvedPage1);
             crudListResolve();
 
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+
             let updateObject = listInstance.state.objects["1"];
             updateObject.name = "updated";
             listInstance.updateListObject(updateObject);
             expect(listInstance.state.objects["1"]).toEqual(updateObject);
+            expect(listInstance.state.objectsInOrder[0].name).toBe("updated");
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder[0].name).toBe("updated");
+        });
+    });
+    describe("deleteListObject", function () {
+        it("errors", function () {
+            const listInstance = useListInstance({ props: {} });
+            expect(() => listInstance.deleteListObject(-50002000)).toThrowError(ListError);
+        });
+        it("succeeds", async function () {
+            const listInstance = useListInstance({
+                props: {},
+            });
+            let crudListResolve;
+            const crudListPromise = new Promise((resolve) => {
+                crudListResolve = resolve;
+            });
+            let passedPageCallback;
+            globalList.mockImplementation(({ pageCallback }) => {
+                passedPageCallback = pageCallback;
+                return crudListPromise;
+            });
+
+            listInstance.list();
+
+            passedPageCallback(crudListResolvedPage1);
+            crudListResolve();
+
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+
+            listInstance.deleteListObject(1);
+            expect(listInstance.state.objects["1"]).toBeUndefined();
+            expect(listInstance.state.objectsInOrder).toStrictEqual([
+                undefined,
+                crudListResolvedObjects1["2"],
+                crudListResolvedObjects1["3"],
+            ]);
+            // order updates immediately due to not being proxied through objectsInOrderRefs
+            expect(listInstance.state.order).toStrictEqual(["2", "3"]);
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder).toEqual([
+                crudListResolvedObjects1["2"],
+                crudListResolvedObjects1["3"],
+            ]);
+            expect(listInstance.state.order).toEqual(["2", "3"]);
         });
     });
     describe("getFakeId", function () {

package/tests/unit/use/listSort.spec.js

@@ -1,4 +1,4 @@
-import { doAwaitTimeout, doAwaitNot } from "../../../utils/index.js";
+import { doAwaitNot, doAwaitTimeout } from "../../../utils/index.js";
 import { reactive, ref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
@@ -13,8 +13,7 @@ describe("use/useListSort", () => {
         useListFilter,
         useListSort,
         useListSorts,
-        setListSortDefaultOptions,
-        AwaitNot;
+        setListSortDefaultOptions;
     const contactsResolved = [
         {
             id: 15,
@@ -65,20 +64,17 @@ describe("use/useListSort", () => {
         setListSortDefaultOptions({
             sortThrottleWait: 0,
         });
-        const importedUtils = await import("../../../utils");
-        AwaitNot = importedUtils.AwaitNot;
     });
 
     afterEach(() => vi.resetAllMocks());
 
     const waitForListSort = async (listSort) => {
-        const anr = new AwaitNot({
+        await doAwaitNot({
             obj: listSort.state,
             prop: "running",
             timeout: 2000,
+            couldAlreadyBeFalse: false,
         });
-        anr.start();
-        await anr.promise;
     };
 
     it("generates initial values from inputs", () => {
@@ -106,6 +102,10 @@ describe("use/useListSort", () => {
             for (const contact of contactsResolved) {
                 listInstance.addListObject(contact);
             }
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
             const listSort = useListSort({ parentState: listInstance.state, orderByRules });
             // sorts immediately
             expect(listSort.state.order).toEqual(testOrder1);

package/use/listCalculated.js

@@ -1,12 +1,13 @@
-import { keyDiff, loadingCombine, difference } from "../utils/index.js";
+import { difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listRelatedStateKeys,
-    listSubscriptionStateKeys,
-    listInstanceStateKeys,
-    listFilterStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
+    listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
@@ -145,7 +146,9 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning.value));
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(calculatedObjectsEffectScopes)) {

package/use/listFilter.js

@@ -1,15 +1,16 @@
 import { assignReactiveObject, difference, loadingCombine } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listSortStateKeys,
-    listFilterStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSubscriptionStateKeys,
+    listFilterStateKeys,
     listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
-import { effectScope, reactive, toRef, watch, unref, computed, nextTick } from "vue";
+import { computed, effectScope, nextTick, reactive, ref, toRef, unref, watch } from "vue";
 
 const parentStateKeys = difference(
     new Set([
@@ -71,9 +72,6 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
         previousExcludedFilter = null;
 
     const objectsWatch = () => {
-        if (parentState.running) {
-            return;
-        }
         state.objectsWatchRunning = true;
         const allowedOrExcludedFilterChanged =
             allowedFilter !== previousAllowedFilter || excludedFilter !== previousExcludedFilter;
@@ -155,8 +153,10 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
             state[key] = toRef(parentState, key);
         }
 
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() => {
-            return loadingCombine(parentState.running, state.objectsWatchRunning, state.resultsWatchRunning);
+            return loadingCombine(parentRunning.value, state.objectsWatchRunning, state.resultsWatchRunning);
         });
 
         watch(toRef(state, "inResults"), resultsWatch, { deep: true });

package/use/listInstance.js

@@ -100,6 +100,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         },
         set(target, prop, value) {
             target.set(prop, value); // map.set() returns the map, we don't need that
+            if (!state.running) {
+                state.running = true;
+            }
             return true;
         },
         ownKeys(target) {
@@ -135,6 +138,7 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         listArgs: toRef(props, "listArgs"),
         objects: _objectsProxy,
         loading: undefined,
+        running: false,
         errored: false,
         error: null,
         order: [],
@@ -218,6 +222,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             throw new ListError(`addListObject: list already has object for id: ${inspect(object.id)}`, "duplicate-id");
         }
         state.objects[object.id] = object;
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function updateListObject(object) {
@@ -231,6 +238,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             );
         }
         assignReactiveObject(state.objects[object.id], object);
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function deleteListObject(objectId) {
@@ -241,6 +251,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             );
         }
         delete state.objects[objectId];
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function clearList() {
@@ -265,6 +278,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
                     state.objectsInOrderRefs,
                     Object.keys(state.objects).map((id) => toRef(state.objects, id))
                 );
+                if (state.running) {
+                    state.running = false;
+                }
             },
             {
                 immediate: true,

package/use/listKeys.js

@@ -4,6 +4,7 @@ export const listInstanceStateKeys = [
     "listArgs",
     "objects",
     "loading",
+    "running",
     "errored",
     "error",
     "objectsInOrder",

package/use/listRelated.js

@@ -1,15 +1,16 @@
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import { getObjectRelatedByKey } from "../utils/relatedCalculatedHelpers.js";
 import { difference } from "../utils/set.js";
 import {
-    listSubscriptionStateKeys,
-    listInstanceStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
     listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
@@ -17,7 +18,7 @@ import identity from "lodash-es/identity.js";
 import isArray from "lodash-es/isArray.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import isUndefined from "lodash-es/isUndefined.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 
 const parentStateKeys = difference(
     new Set([
@@ -198,7 +199,9 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
         });
 
         state.relatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning.value));
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(relatedObjectsEffectScopes)) {

package/use/listSearch.js

@@ -1,18 +1,19 @@
-import { difference, loadingCombine, assignReactiveObject, keyDiff } from "../utils/index.js";
+import { assignReactiveObject, difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import { getObjectRelatedCalculatedByKey } from "../utils/relatedCalculatedHelpers.js";
 import {
-    listInstanceStateKeys,
-    listSubscriptionStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
     listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useSearch } from "./search.js";
 import get from "lodash-es/get.js";
 import isEqual from "lodash-es/isEqual.js";
-import { reactive, effectScope, toRef, computed, watch, unref, onScopeDispose } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 const parentStateKeys = difference(
@@ -304,8 +305,10 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
         textSearchIndex.state.search = toRef(state, "textSearchValue");
         textSearchIndex.events.addEventListener("newIndex", indexWasCleared);
         state.searched = toRef(() => textSearchIndex.state.searched);
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() => {
-            return loadingCombine(parentState.running, state.newSearchComputeds, textSearchIndex.state.running);
+            return loadingCombine(parentRunning.value, state.newSearchComputeds, textSearchIndex.state.running);
         });
         state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((ref) => unref(ref)));
 

package/use/listSort.js

@@ -1,12 +1,13 @@
-import { assignReactiveObject, keyDiff, loadingCombine, difference } from "../utils/index.js";
+import { assignReactiveObject, difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listSortStateKeys,
-    listFilterStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSubscriptionStateKeys,
+    listFilterStateKeys,
     listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
@@ -17,7 +18,7 @@ import isNull from "lodash-es/isNull.js";
 import isUndefined from "lodash-es/isUndefined.js";
 import throttle from "lodash-es/throttle.js";
 import zip from "lodash-es/zip.js";
-import { effectScope, reactive, toRef, unref, watch, computed } from "vue";
+import { computed, effectScope, reactive, ref, toRef, unref, watch } from "vue";
 
 const collator = new Intl.Collator(undefined, { numeric: true });
 
@@ -251,8 +252,10 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
         state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((e) => unref(e)));
         state.sortRunning = computed(() => loadingCombine(watchesRunning.state.running, state.outstandingEffects));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() =>
-            loadingCombine(watchesRunning.state.running, state.outstandingEffects, parentState.running)
+            loadingCombine(watchesRunning.state.running, state.outstandingEffects, parentRunning.value)
         );
     });
 

package/use/objectCalculated.js

@@ -1,3 +1,4 @@
+import { proxyRunning } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
 import { objectInstanceStateKeys } from "./objectInstance.js";
@@ -5,7 +6,7 @@ import { objectRelatedStateKeys } from "./objectRelated.js";
 import { objectSubscriptionStateKeys } from "./objectSubscription.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, watch } from "vue";
 
 export const objectCalculatedStateKeys = [
     "calculatedObject",
@@ -99,7 +100,9 @@ export function useObjectCalculated({ parentState, calculatedObjectRules }) {
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning));
 
         onScopeDispose(() => {
             for (const key in calculatedObjectEffectScopes) {

package/use/objectRelated.js

@@ -1,4 +1,4 @@
-import { loadingCombine } from "../utils/index.js";
+import { loadingCombine, proxyRunning } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { objectInstanceStateKeys } from "./objectInstance.js";
 import { objectSubscriptionStateKeys } from "./objectSubscription.js";
@@ -9,7 +9,7 @@ import isArray from "lodash-es/isArray.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import isEqual from "lodash-es/isEqual.js";
 import isUndefined from "lodash-es/isUndefined.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 
 export const objectRelatedStateKeys = [
     "relatedObject",
@@ -129,7 +129,9 @@ export function useObjectRelated({ parentState, relatedObjectRules }) {
         });
 
         state.relatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning));
 
         onScopeDispose(() => {
             for (const key in relatedObjectEffectScopes) {

package/utils/assignReactiveObject.js

@@ -309,7 +309,7 @@ function recursiveInner(target, source, exclude, addedKeys, sameKeys, path, fn)
     const keysForRecurse = [];
     const keysForReplace = [];
     for (const key of sameKeys) {
-        if (!exclude.includes(key)) {
+        if (!exclude?.includes(key)) {
             if (isObject(source[key]) && isObject(target[key])) {
                 keysForRecurse.push(key);
             } else if (target[key] !== source[key]) {

package/utils/index.js

@@ -8,6 +8,7 @@ export * from "./getFakeId.js";
 export * from "./keyDiff.js";
 export * from "./lifecycleDebug.js";
 export * from "./loadingCombine.js";
+export * from "./proxyRunning.js";
 export * from "./relatedCalculatedHelpers.js";
 export * from "./set.js";
 export * from "./transformWalk.js";

package/utils/proxyRunning.js

@@ -0,0 +1,26 @@
+import { nextTick, toRef, watch } from "vue";
+
+export function proxyRunning(parentState, parentStateProp, state, prop) {
+    // we want you to have been running false for two ticks before we stop you, but we want you to start running true immediately
+    //  the point of this is to reduce running flicker where the stack has running states awaiting other running states
+    let falseTickCount = 0;
+    const checkStillFalse = () => {
+        if (falseTickCount > 1) {
+            state[prop] = false;
+            falseTickCount = 0;
+        } else if (parentState[parentStateProp] === false) {
+            falseTickCount++;
+            nextTick(checkStillFalse);
+        } else {
+            falseTickCount = 0;
+        }
+    };
+    watch(toRef(parentState, parentStateProp), (running) => {
+        if (running && state[prop] !== running) {
+            state[prop] = running;
+        } else if (!running && state[prop] !== running) {
+            nextTick(checkStillFalse);
+        }
+    });
+    state[prop] = parentState[parentStateProp];
+}

package/utils/watches.js

@@ -5,8 +5,11 @@ export class ImmediateStopWatch {
     constructor() {}
 
     // watchFuncArgs are for immediate call only.
-    start(watchSources, watchFunc, watchFuncArgs = []) {
-        this.stopWatch = watch(watchSources, watchFunc);
+    start(watchSources, watchFunc, watchFuncArgs = [], watchOptions = {}) {
+        if (watchOptions.immediate) {
+            throw new Error("ImmediateStopWatch is always immediate.");
+        }
+        this.stopWatch = watch(watchSources, watchFunc, watchOptions);
         watchFunc(...watchFuncArgs);
     }