@arrai-innovations/reactive-helpers 3.3.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "3.3.0",
+    "version": "4.1.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "directories": {
@@ -54,6 +54,7 @@
         "lodash": "^4.17.21",
         "pinst": "^3.0.0",
         "vue": "^3.2.33",
+        "vue-deepunref": "^1.0.1",
         "vue-router": "^4.0.15"
     }
 }

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

@@ -0,0 +1,76 @@
+import { nextTick } from "vue";
+import { deepUnref } from "vue-deepunref";
+
+describe("use/listCalculated", () => {
+    let useListInstance, useListCalculated;
+    beforeEach(async () => {
+        const listInstanceModule = await import("../../../use/listInstance");
+        useListInstance = listInstanceModule.useListInstance;
+        const listCalculatedModule = await import("../../../use/listCalculated");
+        useListCalculated = listCalculatedModule.useListCalculated;
+    });
+    it("should return a list of calculated items", async () => {
+        const mainListInstance = useListInstance({});
+        const calculatedListInstance = useListInstance({});
+        mainListInstance.addListObject({
+            id: "1",
+            name: "main",
+            calculated_items: ["2", "3"],
+            calculated_id: "4",
+        });
+        calculatedListInstance.addListObject({
+            id: "2",
+            name: "calculated1",
+        });
+        calculatedListInstance.addListObject({
+            id: "3",
+            name: "calculated2",
+        });
+        calculatedListInstance.addListObject({
+            id: "4",
+            name: "calculated3",
+        });
+        const listCalculated = useListCalculated({
+            parentState: mainListInstance.state,
+            calculatedObjectsRules: {
+                calculatedItems: (obj) => obj.calculated_items.map((x) => calculatedListInstance.state.objects[x]),
+                calculatedItem: (obj) => calculatedListInstance.state.objects[obj.calculated_id],
+            },
+            calculatedObjectsPropertyName: "myCalculatedObjects",
+        });
+        await nextTick();
+        // listCalculated.state.objects is doing proxy shenanigans
+        // in uses handler.has
+        expect("myCalculatedObjects" in listCalculated.state).toBe(true);
+        expect(!!listCalculated.state.myCalculatedObjects?.[1]).toBe(true);
+        expect("calculatedItems" in listCalculated.state.myCalculatedObjects[1]).toBe(true);
+        expect("calculatedItem" in listCalculated.state.myCalculatedObjects[1]).toBe(true);
+        // expect uses enumeration, which uses handler.ownKeys and handler.getOwnPropertyDescriptor
+        expect(deepUnref(listCalculated.state.objects)).toEqual({
+            1: {
+                id: "1",
+                name: "main",
+                calculated_id: "4",
+                calculated_items: ["2", "3"],
+            },
+        });
+        expect(deepUnref(listCalculated.state.myCalculatedObjects)).toEqual({
+            1: {
+                calculatedItems: [
+                    {
+                        id: "2",
+                        name: "calculated1",
+                    },
+                    {
+                        id: "3",
+                        name: "calculated2",
+                    },
+                ],
+                calculatedItem: {
+                    id: "4",
+                    name: "calculated3",
+                },
+            },
+        });
+    });
+});

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

@@ -1,7 +1,7 @@
 import { nextTick, reactive, ref } from "vue";
-import { doAwaitNot } from "../../../utils/watches";
+import { deepUnref } from "vue-deepunref";
 import { useListFilters, useListSort } from "../../../use";
-import { unrefAndToRawDeep } from "../../../utils";
+import { doAwaitNot } from "../../../utils/watches";
 
 describe("use/listFilter", () => {
     let useListInstance, useListFilter, setDefaultSearchOptions;
@@ -318,10 +318,10 @@ describe("use/listFilter", () => {
 
             expect(listFilters.A.state.excludedValues).toEqual({ id: 1, name: "three" });
             expect(listFilters.B.state.allowedValues).toEqual({ id: 2, name: "four" });
-            expect(unrefAndToRawDeep(listFilters.A.parentState)).toEqual(unrefAndToRawDeep(listFilterA.parentState));
-            expect(unrefAndToRawDeep(listFilters.B.parentState)).toEqual(unrefAndToRawDeep(listFilterB.parentState));
-            expect(unrefAndToRawDeep(listFilters.A.state)).toEqual(unrefAndToRawDeep(listFilterA.state));
-            expect(unrefAndToRawDeep(listFilters.B.state)).toEqual(unrefAndToRawDeep(listFilterB.state));
+            expect(deepUnref(listFilters.A.parentState)).toEqual(deepUnref(listFilterA.parentState));
+            expect(deepUnref(listFilters.B.parentState)).toEqual(deepUnref(listFilterB.parentState));
+            expect(deepUnref(listFilters.A.state)).toEqual(deepUnref(listFilterA.state));
+            expect(deepUnref(listFilters.B.state)).toEqual(deepUnref(listFilterB.state));
         });
     });
 });

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

@@ -1,5 +1,5 @@
 import { nextTick } from "vue";
-import { unrefAndToRawDeep } from "../../../utils/unrefAndToRawDeep";
+import { deepUnref } from "vue-deepunref";
 
 describe("use/listRelated", () => {
     let useListInstance, useListRelated;
@@ -47,31 +47,34 @@ describe("use/listRelated", () => {
         await nextTick();
         // listRelated.state.objects is doing proxy shenanigans
         // in uses handler.has
-        expect("myRelatedObjects" in listRelated.state.objects[1]).toBe(true);
-        expect("relatedItems" in listRelated.state.objects[1].myRelatedObjects).toBe(true);
-        expect("relatedItem" in listRelated.state.objects[1].myRelatedObjects).toBe(true);
+        expect("myRelatedObjects" in listRelated.state).toBe(true);
+        expect(!!listRelated.state.myRelatedObjects?.[1]).toBe(true);
+        expect("relatedItems" in listRelated.state.myRelatedObjects[1]).toBe(true);
+        expect("relatedItem" in listRelated.state.myRelatedObjects[1]).toBe(true);
         // expect uses enumeration, which uses handler.ownKeys and handler.getOwnPropertyDescriptor
-        expect(unrefAndToRawDeep(listRelated.state.objects)).toEqual({
+        expect(deepUnref(listRelated.state.objects)).toEqual({
             1: {
                 id: "1",
                 name: "main",
                 related_id: "4",
                 related_items: ["2", "3"],
-                myRelatedObjects: {
-                    relatedItems: [
-                        {
-                            id: "2",
-                            name: "related1",
-                        },
-                        {
-                            id: "3",
-                            name: "related2",
-                        },
-                    ],
-                    relatedItem: {
-                        id: "4",
-                        name: "related3",
+            },
+        });
+        expect(deepUnref(listRelated.state.myRelatedObjects)).toEqual({
+            1: {
+                relatedItems: [
+                    {
+                        id: "2",
+                        name: "related1",
                     },
+                    {
+                        id: "3",
+                        name: "related2",
+                    },
+                ],
+                relatedItem: {
+                    id: "4",
+                    name: "related3",
                 },
             },
         });

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

@@ -1,5 +1,6 @@
 import { nextTick } from "vue";
-import { doAwaitTimeout, unrefAndToRawDeep } from "../../../utils";
+import { deepUnref } from "vue-deepunref";
+import { doAwaitTimeout } from "../../../utils";
 
 describe("use/useListSort", () => {
     let listInstance,
@@ -178,10 +179,10 @@ describe("use/useListSort", () => {
             },
             listInstances
         );
-        expect(unrefAndToRawDeep(listSorts.A.parentState)).toEqual(unrefAndToRawDeep(listInstanceA.state));
-        expect(unrefAndToRawDeep(listSorts.B.parentState)).toEqual(unrefAndToRawDeep(listInstanceB.state));
-        expect(unrefAndToRawDeep(listSorts.A.state)).toEqual(unrefAndToRawDeep(listSortA.state));
-        expect(unrefAndToRawDeep(listSorts.B.state)).toEqual(unrefAndToRawDeep(listSortB.state));
+        expect(deepUnref(listSorts.A.parentState)).toEqual(deepUnref(listInstanceA.state));
+        expect(deepUnref(listSorts.B.parentState)).toEqual(deepUnref(listInstanceB.state));
+        expect(deepUnref(listSorts.A.state)).toEqual(deepUnref(listSortA.state));
+        expect(deepUnref(listSorts.B.state)).toEqual(deepUnref(listSortB.state));
     });
     describe("useListSort/sortThrottleWait", () => {
         it("respects throttle time prior to triggering", async () => {

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

@@ -1,7 +1,7 @@
-import { nextTick, reactive } from "vue";
-import { inspect } from "util";
-import { doAwaitTimeout } from "../../../utils";
 import flushPromises from "flush-promises";
+import { inspect } from "util";
+import { nextTick, reactive } from "vue";
+import { doAwaitNot, doAwaitTimeout } from "../../../utils";
 import { CancellableResolvable } from "../crudPromise";
 import { poll } from "../poll";
 
@@ -512,8 +512,12 @@ describe("use/listSubscription.spec.js", function () {
             listArgs.user = 2;
             retrieveArgs.fields = ["name"];
             await nextTick();
-            await flushPromises();
-            await doAwaitTimeout(1500);
+            await crudSubscribeResolvable[1].resolve();
+            await crudListResolvable[1].resolve();
+            await doAwaitNot({
+                obj: listSubscription.listIntent.state,
+                prop: "resolving",
+            });
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(crudSubscribe).toHaveBeenCalledWith({

package/use/cancellableIntent.js

@@ -1,9 +1,10 @@
-import { effectScope, isReactive, isRef, onScopeDispose, reactive, unref, watch } from "vue";
-import { cloneDeep, isEqual } from "lodash";
+import { identity, isEqual } from "lodash";
+import { effectScope, nextTick, onScopeDispose, reactive, readonly, watch } from "vue";
+import { deepUnref } from "vue-deepunref";
 
 /*
  * Calls your awaitable function with the arguments you pass in, when the watch arguments change and are all truthy.
- * Watch arguments can be an array or an object.
+ * Watch arguments should be a reactive object.
  * If the promise is not resolved before the watch arguments change again, the previous promise is cancelled.
  */
 export function useCancellableIntent({ awaitableWithCancel, watchArguments = {}, clearActiveOnResolved = true }) {
@@ -15,11 +16,12 @@ export function useCancellableIntent({ awaitableWithCancel, watchArguments = {},
     }
     const state = reactive({
         active: undefined,
+        resolving: undefined,
         errored: false,
         error: null,
         clearActiveOnResolved,
     });
-    let previousWatchArguments = null,
+    let previousWatchValues = null,
         cancelFunction = null;
 
     const es = effectScope();
@@ -32,6 +34,7 @@ export function useCancellableIntent({ awaitableWithCancel, watchArguments = {},
     async function cancel() {
         if (cancelFunction) {
             state.active = false;
+            state.resolving = false;
             const cancelPromise = cancelFunction().catch(console.error);
             cancelFunction = null;
             return cancelPromise;
@@ -39,54 +42,58 @@ export function useCancellableIntent({ awaitableWithCancel, watchArguments = {},
         return false;
     }
 
-    es.run(() => {
-        watch(
-            isReactive(watchArguments) || isRef(watchArguments) ? watchArguments : Object.values(watchArguments),
-            () => {
-                let newArguments = cloneDeep(watchArguments.map((arg) => unref(arg)));
-                if (isEqual(unref(watchArguments), previousWatchArguments)) {
-                    return;
-                }
-                previousWatchArguments = newArguments;
-                cancel().catch(console.error);
-                if (Object.values(previousWatchArguments).every((v) => unref(v))) {
-                    state.errored = false;
-                    state.error = null;
-                    let awaitablePromise = awaitableWithCancel();
-                    state.active = true;
-                    if (awaitablePromise.cancel) {
-                        cancelFunction = async () => {
-                            state.active = false;
-                            cancelFunction = null;
-                            return awaitablePromise.cancel();
-                        };
-                    }
-                    awaitablePromise
-                        .then(() => {
-                            if (state.clearActiveOnResolved) {
-                                cancelFunction = null;
-                                state.active = false;
-                            }
-                        })
-                        .catch(async (err) => {
-                            await cancel();
-                            console.error(err);
-                            state.errored = true;
-                            state.error = err;
-                            throw err;
-                        });
-                }
-            },
-            {
-                deep: true,
-                immediate: true,
+    const watchFn = () => {
+        let newWatchValues = deepUnref(Object.values(watchArguments));
+        if (isEqual(newWatchValues, previousWatchValues)) {
+            return;
+        }
+        previousWatchValues = newWatchValues;
+        cancel().catch(console.error);
+        if (Object.values(previousWatchValues).every(identity)) {
+            state.errored = false;
+            state.error = null;
+            let awaitablePromise = awaitableWithCancel();
+            state.active = true;
+            state.resolving = true;
+            if (awaitablePromise.cancel) {
+                cancelFunction = async () => {
+                    state.active = false;
+                    state.resolving = false;
+                    cancelFunction = null;
+                    return awaitablePromise.cancel();
+                };
             }
-        );
+            awaitablePromise
+                .then(() => {
+                    state.resolving = false;
+                    if (state.clearActiveOnResolved) {
+                        cancelFunction = null;
+                        state.active = false;
+                    }
+                })
+                .catch(async (err) => {
+                    await cancel();
+                    console.error(err);
+                    state.errored = true;
+                    state.error = err;
+                    throw err;
+                });
+        }
+    };
+
+    es.run(() => {
+        watch(() => Object.values(watchArguments), watchFn, {
+            // this can't be immediate because subscribe wants to look at our state, which won't exist yet.
+            deep: true,
+        });
+
+        nextTick().then(watchFn);
 
         onScopeDispose(cancel);
     });
     return {
         state,
+        watchArguments: readonly(watchArguments),
         stop,
         cancel,
     };

package/use/list.js

@@ -1,11 +1,12 @@
-import { effectScope, shallowReactive, shallowReadonly, toRef, watch } from "vue";
+import { effectScope, reactive, shallowReactive, shallowReadonly, toRef, watch } from "vue";
 import { useListCalculated } from "./listCalculated";
 import { useListInstance } from "./listInstance";
 import { useListRelated } from "./listRelated";
 import { useListSubscription } from "./listSubscription";
+import { usePagedListInstance } from "./paginatedListInstance";
 
 // the big brother of useObject, managing a chain of useList* instances.
-export const useList = ({ props, functions }) => {
+export const useList = ({ props, functions, paged = false }) => {
     const managed = shallowReactive({
         listInstance: null,
         listSubscription: null,
@@ -14,7 +15,7 @@ export const useList = ({ props, functions }) => {
     });
     const es = effectScope();
 
-    managed.listInstance = useListInstance({
+    managed.listInstance = (paged ? usePagedListInstance : useListInstance)({
         crudArgs: toRef(props, "crudArgs"),
         functions,
         retrieveArgs: toRef(props, "retrieveArgs"),
@@ -60,7 +61,7 @@ export const useList = ({ props, functions }) => {
         });
     };
 
-    let exposedState;
+    const exposedState = reactive({});
 
     es.run(() => {
         watch(
@@ -73,31 +74,40 @@ export const useList = ({ props, functions }) => {
             intentPropsWatch,
             { immediate: true }
         );
-        const getState = () =>
-            managed.listCalculated?.state ||
-            managed.listRelated?.state ||
-            managed.listSubscription?.state ||
-            managed.listInstance?.state;
-        // used as proxy to have the properties and not be settable, so we only have to override get
-        const proxyBase = shallowReadonly({
-            loading: null,
-            error: null,
-            errored: null,
-            objects: null,
-            order: null,
-            objectsInOrder: null,
-            running: null,
-        });
-        exposedState = new Proxy(proxyBase, {
-            get: (target, prop) => {
-                return Reflect.get(getState(), prop);
+        const propertiesToRelay = [
+            "loading",
+            "error",
+            "errored",
+            "objects",
+            "order",
+            "objectsInOrder",
+            "running",
+            "relatedObjects",
+            "calculatedObjects",
+        ];
+        watch(
+            () =>
+                managed.listCalculated?.state ||
+                managed.listRelated?.state ||
+                managed.listSubscription?.state ||
+                managed.listInstance?.state,
+            (newState, oldState) => {
+                if (newState !== oldState && newState) {
+                    propertiesToRelay.forEach((x) => {
+                        exposedState[x] = toRef(newState, x);
+                    });
+                }
             },
-        });
+            {
+                immediate: true,
+            }
+        );
     });
 
     return {
+        // we manage the keys on both of these, so hands off the root.
         managed: shallowReadonly(managed),
-        state: exposedState,
+        state: shallowReadonly(exposedState),
         effectScope: es,
     };
 };

package/use/listCalculated.js

@@ -19,11 +19,11 @@ export function useListCalculated({
     parentState,
     calculatedObjectsRules,
     calculatedObjectsPropertyName = "calculatedObjects", // NOT REACTIVE
+    passThroughPropertyNames = ["relatedObjects"], // NOT REACTIVE
 }) {
     const state = reactive({
         calculatedObjectsRules,
         calculatedObjectsObjects: {},
-        objects: {},
         parentStateObjectsWatchRunning: false,
         calculatedObjectsWatchRunning: false,
     });
@@ -39,7 +39,6 @@ export function useListCalculated({
         );
         for (const removedKey of removedKeys) {
             delete state.calculatedObjectsObjects[removedKey];
-            delete state.objects[removedKey];
             if (calculatedObjectsEffectScopes[removedKey]) {
                 calculatedObjectsEffectScopes[removedKey].stop();
                 delete calculatedObjectsEffectScopes[removedKey];
@@ -47,63 +46,46 @@ export function useListCalculated({
         }
         for (const addedKey of addedKeys) {
             state.calculatedObjectsObjects[addedKey] = {};
-            state.objects[addedKey] = new Proxy(parentState.objects[addedKey], {
-                get(target, prop, receiver) {
-                    if (prop === copn) {
-                        return state.calculatedObjectsObjects[addedKey];
-                    }
-                    return Reflect.get(target, prop, receiver);
-                },
-                ownKeys(target) {
-                    return Reflect.ownKeys(target).concat(copn);
-                },
-            });
         }
         state.parentStateObjectsWatchRunning = false;
     }
 
     function calculatedObjectsWatch() {
-        if (state.calculatedObjectsRules === false) {
-            return;
-        }
-        const calculatedObjectsRulesIsEmpty = isEmpty(state.calculatedObjectsRules);
+        const calculatedObjectsRulesIsEmpty = !state.calculatedObjectsRules || isEmpty(state.calculatedObjectsRules);
         for (const objectKey of Object.keys(state.calculatedObjectsObjects)) {
-            const calculatedObjectsEffectScope = effectScope();
-            calculatedObjectsEffectScope.run(() => {
-                const calculatedObjectsObject = state.calculatedObjectsObjects[objectKey];
-                const originalObject = parentState.objects[objectKey];
-                if (!calculatedObjectsObject[copn]) {
-                    calculatedObjectsObject[copn] = {};
-                }
-                let removedRuleKeys, addedRuleKeys;
-                if (!calculatedObjectsRulesIsEmpty) {
-                    ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
-                        Object.keys(state.calculatedObjectsRules),
-                        Object.keys(calculatedObjectsObject[copn])
-                    ));
-                } else {
-                    if (isEmpty(calculatedObjectsObject[copn])) {
-                        return;
-                    }
-                    removedRuleKeys = Object.keys(calculatedObjectsObject[copn]);
-                    addedRuleKeys = [];
-                }
-                for (const removedRuleKey of removedRuleKeys) {
-                    delete calculatedObjectsObject[copn][removedRuleKey];
+            if (!calculatedObjectsEffectScopes[objectKey]) {
+                calculatedObjectsEffectScopes[objectKey] = effectScope();
+            }
+            const originalObject = parentState.objects[objectKey];
+            if (!state.calculatedObjectsObjects[objectKey]) {
+                state.calculatedObjectsObjects[objectKey] = {};
+            }
+            const calculatedObjectsObject = state.calculatedObjectsObjects[objectKey];
+            let removedRuleKeys, addedRuleKeys;
+            if (!calculatedObjectsRulesIsEmpty) {
+                ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
+                    Object.keys(state.calculatedObjectsRules),
+                    Object.keys(calculatedObjectsObject)
+                ));
+            } else {
+                if (isEmpty(calculatedObjectsObject)) {
+                    return;
                 }
+                removedRuleKeys = Object.keys(calculatedObjectsObject);
+                addedRuleKeys = [];
+            }
+            for (const removedRuleKey of removedRuleKeys) {
+                delete calculatedObjectsObject[removedRuleKey];
+            }
+            calculatedObjectsEffectScopes[objectKey].run(() => {
                 for (const addedRuleKey of addedRuleKeys) {
-                    calculatedObjectsObject[copn][addedRuleKey] = computed(() => {
+                    calculatedObjectsObject[addedRuleKey] = computed(() => {
                         return state.calculatedObjectsRules?.[addedRuleKey]?.(originalObject);
                     });
                 }
             });
-            if (calculatedObjectsEffectScopes[objectKey]) {
-                calculatedObjectsEffectScopes[objectKey].stop();
-            }
-            calculatedObjectsEffectScopes[objectKey] = calculatedObjectsEffectScope;
         }
         state.calculatedObjectsWatchRunning = false;
-        parentStateObjectsWatch();
     }
 
     let watchesRunning = null;
@@ -118,7 +100,12 @@ export function useListCalculated({
         state.retrieveArgs = toRef(parentState, "retrieveArgs");
         state.listArgs = toRef(parentState, "listArgs");
         state.order = toRef(parentState, "order");
-        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
+        state.objects = toRef(parentState, "objects");
+        state.objectsInOrder = toRef(parentState, "objectsInOrder");
+        state[copn] = toRef(state, "calculatedObjectsObjects");
+        for (let key in passThroughPropertyNames) {
+            state[key] = toRef(parentState, key);
+        }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
@@ -134,7 +121,11 @@ export function useListCalculated({
         );
 
         watchesRunning = useWatchesRunning({
-            triggerRefs: [computed(() => (!isEmpty(state.calculatedObjectsRules) ? parentState.loading : false))],
+            triggerRefs: [
+                computed(() =>
+                    state.calculatedObjectsRules && !isEmpty(state.calculatedObjectsRules) ? parentState.loading : false
+                ),
+            ],
             watchSentinelRefs: [
                 toRef(state, "parentStateObjectsWatchRunning"),
                 toRef(state, "calculatedObjectsWatchRunning"),

package/use/listRelated.js

@@ -16,11 +16,11 @@ export function useListRelated({
     parentState,
     relatedObjectsRules,
     relatedObjectsPropertyName = "relatedObjects", // NOT REACTIVE
+    passThroughPropertyNames = ["calculatedObjects"], // NOT REACTIVE
 }) {
     const state = reactive({
         relatedObjectsRules: relatedObjectsRules,
         relatedObjectsObjects: {},
-        objects: {},
         parentStateObjectsWatchRunning: false,
         relatedObjectsWatchRunning: false,
     });
@@ -36,7 +36,6 @@ export function useListRelated({
         );
         for (const removedKey of removedKeys) {
             delete state.relatedObjectsObjects[removedKey];
-            delete state.objects[removedKey];
             if (relatedObjectsEffectScopes[removedKey]) {
                 relatedObjectsEffectScopes[removedKey].stop();
                 delete relatedObjectsEffectScopes[removedKey];
@@ -44,69 +43,35 @@ export function useListRelated({
         }
         for (const addedKey of addedKeys) {
             state.relatedObjectsObjects[addedKey] = {};
-            state.objects[addedKey] = new Proxy(parentState.objects[addedKey], {
-                get(target, prop, receiver) {
-                    if (prop === ropn) {
-                        return state.relatedObjectsObjects[addedKey];
-                    }
-                    return Reflect.get(target, prop, receiver);
-                },
-                ownKeys(target) {
-                    return Reflect.ownKeys(target).concat(ropn);
-                },
-                has(target, prop) {
-                    if (prop === ropn) {
-                        return true;
-                    }
-                    return Reflect.has(target, prop);
-                },
-                getOwnPropertyDescriptor(target, p) {
-                    if (p === ropn) {
-                        return {
-                            configurable: true,
-                            enumerable: true,
-                            value: state.relatedObjectsObjects[addedKey],
-                            writable: true,
-                        };
-                    }
-                    return Reflect.getOwnPropertyDescriptor(target, p);
-                },
-                defineProperty() {
-                    return false;
-                },
-            });
         }
+        state.parentStateObjectsWatchRunning = false;
     }
 
     function relatedObjectsWatch() {
-        if (state.relatedObjectsRules === false) {
-            return;
-        }
-        const relatedObjectsRulesIsEmpty = isEmpty(state.relatedObjectsRules);
+        const relatedObjectsRulesIsEmpty = !state.relatedObjectsRules || isEmpty(state.relatedObjectsRules);
         for (const objectKey of Object.keys(state.relatedObjectsObjects)) {
-            if (relatedObjectsEffectScopes[objectKey]) {
-                relatedObjectsEffectScopes[objectKey].stop();
-            }
-            const relatedObjectsEffectScope = effectScope();
-            relatedObjectsEffectScope.run(() => {
-                const relatedObjectsObject = state.relatedObjectsObjects[objectKey];
-                const originalObject = parentState.objects[objectKey];
-                let removedRuleKeys, addedRuleKeys;
-                if (!relatedObjectsRulesIsEmpty) {
-                    ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
-                        Object.keys(state.relatedObjectsRules),
-                        Object.keys(relatedObjectsObject)
-                    ));
-                } else {
-                    if (isEmpty(relatedObjectsObject)) {
-                        return;
-                    }
-                    removedRuleKeys = Object.keys(relatedObjectsObject);
-                    addedRuleKeys = [];
-                }
-                for (const removedRuleKey of removedRuleKeys) {
-                    delete relatedObjectsObject[removedRuleKey];
+            const relatedObjectsObject = state.relatedObjectsObjects[objectKey];
+            const originalObject = parentState.objects[objectKey];
+            let removedRuleKeys, addedRuleKeys;
+            if (!relatedObjectsRulesIsEmpty) {
+                ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
+                    Object.keys(state.relatedObjectsRules),
+                    Object.keys(relatedObjectsObject)
+                ));
+            } else {
+                if (isEmpty(relatedObjectsObject)) {
+                    return;
                 }
+                removedRuleKeys = Object.keys(relatedObjectsObject);
+                addedRuleKeys = [];
+            }
+            for (const removedRuleKey of removedRuleKeys) {
+                delete relatedObjectsObject[removedRuleKey];
+            }
+            if (!relatedObjectsEffectScopes[objectKey]) {
+                relatedObjectsEffectScopes[objectKey] = effectScope();
+            }
+            relatedObjectsEffectScopes[objectKey].run(() => {
                 for (const addedRuleKey of addedRuleKeys) {
                     relatedObjectsObject[addedRuleKey] = computed(() => {
                         // deal with computed objects being passed.
@@ -126,9 +91,8 @@ export function useListRelated({
                     });
                 }
             });
-            relatedObjectsEffectScopes[objectKey] = relatedObjectsEffectScope;
         }
-        parentStateObjectsWatch();
+        state.relatedObjectsWatchRunning = false;
     }
 
     let watchesRunning = null;
@@ -143,7 +107,12 @@ export function useListRelated({
         state.retrieveArgs = toRef(parentState, "retrieveArgs");
         state.listArgs = toRef(parentState, "listArgs");
         state.order = toRef(parentState, "order");
-        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
+        state.objects = toRef(parentState, "objects");
+        state.objectsInOrder = toRef(parentState, "objectsInOrder");
+        state[ropn] = toRef(state, "relatedObjectsObjects");
+        for (let key in passThroughPropertyNames) {
+            state[key] = toRef(parentState, key);
+        }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
@@ -156,7 +125,11 @@ export function useListRelated({
         );
 
         watchesRunning = useWatchesRunning({
-            triggerRefs: [computed(() => (!isEmpty(state.relatedObjectsRules) ? parentState.loading : false))],
+            triggerRefs: [
+                computed(() =>
+                    state.relatedObjectsRules && !isEmpty(state.relatedObjectsRules) ? parentState.loading : false
+                ),
+            ],
             watchSentinelRefs: [
                 toRef(state, "parentStateObjectsWatchRunning"),
                 toRef(state, "relatedObjectsWatchRunning"),

package/use/listSubscription.js

@@ -167,11 +167,11 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
                 catchPromise.cancel = subscribePromise.cancel;
                 return catchPromise;
             },
-            watchArguments: [
-                toRef(state, "intendToSubscribe"),
-                toRef(listInstance.state, "listArgs"),
-                toRef(state, "retrieveArgs"),
-            ],
+            watchArguments: reactive({
+                intendToSubscribe: toRef(state, "intendToSubscribe"),
+                listArgs: toRef(listInstance.state, "listArgs"),
+                retrieveArgs: toRef(listInstance.state, "retrieveArgs"),
+            }),
             clearActiveOnResolved: false,
         });
 
@@ -182,12 +182,11 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
                 listInstance.clearList();
                 return listInstance.list();
             },
-            watchArguments: [
-                toRef(state, "intendToList"),
-                toRef(listInstance.state, "listArgs"),
-                toRef(state, "retrieveArgs"),
-            ],
-            nameOnLog: "listIntent",
+            watchArguments: reactive({
+                intendToList: toRef(state, "intendToList"),
+                listArgs: toRef(listInstance.state, "listArgs"),
+                retrieveArgs: toRef(listInstance.state, "retrieveArgs"),
+            }),
         });
     });
 

package/use/object.js

@@ -1,4 +1,4 @@
-import { effectScope, shallowReactive, shallowReadonly, toRef, watch } from "vue";
+import { effectScope, reactive, shallowReactive, shallowReadonly, toRef, watch } from "vue";
 import { useObjectCalculated } from "./objectCalculated";
 import { useObjectInstance } from "./objectInstance";
 import { useObjectRelated } from "./objectRelated";
@@ -60,7 +60,7 @@ export const useObject = ({ props, functions }) => {
         });
     };
 
-    let exposedState;
+    const exposedState = reactive({});
 
     es.run(() => {
         watch(
@@ -72,30 +72,39 @@ export const useObject = ({ props, functions }) => {
             intentPropsWatch,
             { immediate: true }
         );
-        const getState = () =>
-            managed.objectCalculated?.state ||
-            managed.objectRelated?.state ||
-            managed.objectSubscription?.state ||
-            managed.objectInstance.state;
-        // used as proxy to have the properties and not be settable, so we only have to override get
-        const proxyBase = shallowReadonly({
-            loading: null,
-            error: null,
-            errored: null,
-            object: null,
-            running: null,
-        });
-        exposedState = new Proxy(proxyBase, {
-            // get values from the current state
-            get(target, prop) {
-                return Reflect.get(getState(), prop);
+
+        const propertiesToRelay = [
+            "loading",
+            "error",
+            "errored",
+            "object",
+            "running",
+            "relatedObject",
+            "calculatedObject",
+        ];
+        watch(
+            () =>
+                managed.objectCalculated?.state ||
+                managed.objectRelated?.state ||
+                managed.objectSubscription?.state ||
+                managed.objectInstance.state,
+            (newState, oldState) => {
+                if (newState !== oldState && newState) {
+                    propertiesToRelay.forEach((x) => {
+                        exposedState[x] = toRef(newState, x);
+                    });
+                }
             },
-        });
+            {
+                immediate: true,
+            }
+        );
     });
 
     return {
+        // we manage the keys on both of these, so hands off the root.
         managed: shallowReadonly(managed),
-        state: exposedState,
+        state: shallowReadonly(exposedState),
         effectScope: es,
     };
 };

package/use/objectCalculated.js

@@ -17,11 +17,11 @@ export function useObjectCalculated({
     parentState,
     calculatedObjectRules,
     calculatedObjectPropertyName = "calculatedObject", // NOT REACTIVE
+    passThroughPropertyNames = ["relatedObject"], // NOT REACTIVE
 }) {
     const state = reactive({
         calculatedObjectRules,
         calculatedObjectObjects: {},
-        object: {},
         parentStateObjectWatchRunning: false,
         calculatedObjectWatchRunning: false,
     });
@@ -36,41 +36,15 @@ export function useObjectCalculated({
     const es = effectScope();
 
     es.run(() => {
-        state.object = new Proxy(parentState.object, {
-            get(target, key, receiver) {
-                if (key === copn) {
-                    return state.calculatedObjectObjects;
-                }
-                return Reflect.get(target, key, receiver);
-            },
-            ownKeys(target) {
-                return Reflect.ownKeys(target).concat(copn);
-            },
-            has(target, key) {
-                if (key === copn) {
-                    return true;
-                }
-                return Reflect.has(target, key);
-            },
-            getOwnPropertyDescriptor(target, key) {
-                if (key === copn) {
-                    return {
-                        configurable: true,
-                        enumerable: true,
-                        value: state.calculatedObjectObjects,
-                        writable: true,
-                    };
-                }
-                return Reflect.getOwnPropertyDescriptor(target, key);
-            },
-            defineProperty() {
-                return false;
-            },
-        });
         state.loading = toRef(parentState, "loading");
         state.error = toRef(parentState, "error");
         state.errored = toRef(parentState, "errored");
         state.deleted = toRef(parentState, "deleted");
+        state.object = toRef(parentState, "object");
+        state[copn] = toRef(state, "calculatedObjectObjects");
+        for (let key in passThroughPropertyNames) {
+            state[key] = toRef(parentState, key);
+        }
 
         watch([() => state.calculatedObjectRules && Object.keys(state.calculatedObjectRules)], () => {
             let addedKeys = [],

package/use/objectRelated.js

@@ -17,11 +17,11 @@ export function useObjectRelated({
     parentState,
     relatedObjectRules,
     relatedObjectPropertyName = "relatedObject", // NOT REACTIVE
+    passThroughPropertyNames = ["calculatedObject"], // NOT REACTIVE
 }) {
     const state = reactive({
         relatedObjectRules,
         relatedObjectObjects: {},
-        object: {},
         parentStateObjectWatchRunning: false,
         relatedObjectWatchRunning: false,
     });
@@ -35,41 +35,15 @@ export function useObjectRelated({
     const es = effectScope();
 
     es.run(() => {
-        state.object = new Proxy(parentState.object, {
-            get(target, key, receiver) {
-                if (key === ropn) {
-                    return state.relatedObjectObjects;
-                }
-                return Reflect.get(target, key, receiver);
-            },
-            ownKeys(target) {
-                return Reflect.ownKeys(target).concat(ropn);
-            },
-            has(target, key) {
-                if (key === ropn) {
-                    return true;
-                }
-                return Reflect.has(target, key);
-            },
-            getOwnPropertyDescriptor(target, key) {
-                if (key === ropn) {
-                    return {
-                        configurable: true,
-                        enumerable: true,
-                        value: state.relatedObjectObjects,
-                        writable: true,
-                    };
-                }
-                return Reflect.getOwnPropertyDescriptor(target, key);
-            },
-            defineProperty() {
-                return false;
-            },
-        });
         state.loading = toRef(parentState, "loading");
         state.error = toRef(parentState, "error");
         state.errored = toRef(parentState, "errored");
         state.deleted = toRef(parentState, "deleted");
+        state.object = toRef(parentState, "object");
+        state[ropn] = toRef(state, "relatedObjectObjects");
+        for (let key in passThroughPropertyNames) {
+            state[key] = toRef(parentState, key);
+        }
 
         watch([() => state.relatedObjectRules && Object.keys(state.relatedObjectRules)], () => {
             let addedRuleKeys = [],

package/use/objectSubscription.js

@@ -155,22 +155,21 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
 
         subscribeIntent = useCancellableIntent({
             awaitableWithCancel: subscribe,
-            watchArguments: [
-                toRef(state, "intendToSubscribe"),
-                toRef(objectInstance.state, "id"),
-                toRef(state, "retrieveArgs"),
-            ],
+            watchArguments: reactive({
+                intendToSubscribe: toRef(state, "intendToSubscribe"),
+                listArgs: toRef(objectInstance.state, "id"),
+                retrieveArgs: toRef(objectInstance.state, "retrieveArgs"),
+            }),
             clearActiveOnResolved: false,
         });
 
         retrieveIntent = useCancellableIntent({
             awaitableWithCancel: objectInstance.retrieve,
-            watchArguments: [
-                toRef(state, "intendToRetrieve"),
-                toRef(objectInstance.state, "id"),
-                toRef(state, "retrieveArgs"),
-            ],
-            nameForLog: "retrieveIntent",
+            watchArguments: reactive({
+                intendToSubscribe: toRef(state, "intendToRetrieve"),
+                listArgs: toRef(objectInstance.state, "id"),
+                retrieveArgs: toRef(objectInstance.state, "retrieveArgs"),
+            }),
         });
     });
 

package/utils/index.js

@@ -4,5 +4,4 @@ export * from "./getFakeId";
 export * from "./keyDiff";
 export * from "./loadingCombine";
 export * from "./set";
-export * from "./unrefAndToRawDeep";
 export * from "./watches";

package/utils/watches.js

@@ -42,6 +42,8 @@ export class AwaitTimeout {
         });
         this.timeout = timeout;
         this.timeoutId = null;
+        // prebuild the exception for a more useful stack.
+        this.cancelledError = new AwaitTimeoutError("Cancelled", "timeout_cancelled");
     }
 
     start() {
@@ -65,7 +67,7 @@ export class AwaitTimeout {
         if (this.timeoutId) {
             clearTimeout(this.timeoutId);
             delete this.timeoutId;
-            this.reject(new AwaitTimeoutError("Cancelled", "timeout_cancelled"));
+            this.reject(this.cancelledError);
         }
         if (this.resolve) {
             delete this.resolve;
@@ -94,13 +96,15 @@ export class AwaitNot {
         this.prop = prop;
         this.trueISW = new ImmediateStopWatch();
         this.falseISW = new ImmediateStopWatch();
+        // prebuild the exception for a more useful stack.
+        this.timeoutError = new AwaitNotError("Timeout", "timeout");
     }
 
     start() {
         this.timeout.promise
             .then(() => {
                 this.stop();
-                this.reject(new AwaitNotError("Timeout", "timeout"));
+                this.reject(this.timeoutError);
             })
             .catch((err) => {
                 this.stop();

package/tests/unit/utils/unrefAndToRawDeep.spec.js

@@ -1,170 +0,0 @@
-import { reactive, ref, toRef, unref } from "vue";
-import { circular, unrefAndToRawDeep } from "../../../utils";
-
-describe("unrefAndToRawDeep", () => {
-    it("should unref refs", () => {
-        const obj = {
-            a: ref(1),
-            b: ref(true),
-            c: ref("foo"),
-            d: ref(null),
-        };
-        expect(unrefAndToRawDeep(obj)).toEqual({
-            a: 1,
-            b: true,
-            c: "foo",
-            d: null,
-        });
-    });
-    it("should toRaw reactive", () => {
-        const obj = {
-            state: reactive({
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            }),
-            parentState: reactive({
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            }),
-        };
-        expect(unrefAndToRawDeep(obj)).toEqual({
-            state: {
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            },
-            parentState: {
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            },
-        });
-    });
-    it("should handle arrays", () => {
-        const arr = [ref(1), ref(true), ref("foo"), ref(null)];
-        const arr2 = [
-            reactive({
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            }),
-            reactive({
-                a: 2,
-                b: false,
-                c: "bar",
-                d: NaN,
-            }),
-        ];
-        expect(unrefAndToRawDeep(arr)).toEqual([1, true, "foo", null]);
-        expect(unrefAndToRawDeep(arr2)).toEqual([
-            {
-                a: 1,
-                b: true,
-                c: "foo",
-                d: null,
-            },
-            {
-                a: 2,
-
-                b: false,
-                c: "bar",
-                d: NaN,
-            },
-        ]);
-    });
-    it("should toRaw reactive with circular ref", () => {
-        const state = reactive({
-            objects: {
-                1: {
-                    id: 1,
-                    name: "one",
-                    parent: 2,
-                    children: [],
-                    refProperty: ref(null),
-                },
-                2: {
-                    id: 2,
-                    name: "two",
-                    parent: null,
-                    children: [1],
-                    refProperty: ref(null),
-                },
-                3: {
-                    id: 3,
-                    name: "three",
-                    parent: null,
-                    children: [],
-                },
-            },
-        });
-        state.objects["1"].relatedObjects = reactive({
-            parent: toRef(state.objects, "2"),
-        });
-        state.objects["2"].relatedObjects = reactive({
-            children: [toRef(state.objects, "1")],
-        });
-        state.objects["1"].refProperty = toRef(state.objects["3"], "name");
-        state.objects["2"].refProperty = toRef(state.objects["3"], "name");
-        expect(state.objects["1"]).toBe(unref(state.objects["2"].relatedObjects.children[0]));
-        expect(state.objects["2"]).toBe(state.objects["1"].relatedObjects.parent);
-        expect(state.objects["1"].refProperty).toBe(state.objects["3"].name);
-        expect(state.objects["2"].refProperty).toBe(state.objects["3"].name);
-        expect(unrefAndToRawDeep(state)).toEqual({
-            objects: {
-                1: {
-                    id: 1,
-                    name: "one",
-                    parent: 2,
-                    children: [],
-                    refProperty: "three",
-                    relatedObjects: {
-                        parent: {
-                            id: 2,
-                            name: "two",
-                            parent: null,
-                            children: [1],
-                            refProperty: "three",
-                            relatedObjects: {
-                                children: [circular],
-                            },
-                        },
-                    },
-                },
-                2: {
-                    id: 2,
-                    name: "two",
-                    parent: null,
-                    children: [1],
-                    refProperty: "three",
-                    relatedObjects: {
-                        children: [
-                            {
-                                id: 1,
-                                name: "one",
-                                parent: 2,
-                                children: [],
-                                refProperty: "three",
-                                relatedObjects: {
-                                    parent: circular,
-                                },
-                            },
-                        ],
-                    },
-                },
-                3: {
-                    id: 3,
-                    name: "three",
-                    parent: null,
-                    children: [],
-                },
-            },
-        });
-    });
-});

package/utils/unrefAndToRawDeep.js

@@ -1,49 +0,0 @@
-import { isProxy, isRef, toRaw, unref } from "vue";
-import { isArray, isUndefined } from "lodash";
-import { isObjectLike } from "lodash/lang";
-
-export const circular = Symbol("circular");
-
-export function unrefAndToRawDeep(obj) {
-    if (isUndefined(obj)) {
-        return obj;
-    }
-    const seen = new Set();
-    const returnValue = isArray(obj) ? [] : {};
-    const queue = [];
-    for (const [key, value] of Object.entries(obj)) {
-        queue.push([returnValue, key, value]);
-    }
-    while (queue.length) {
-        const [writePosition, key, value] = queue.shift();
-        if (seen.has(value)) {
-            // if (seen.some((item) => item === value)) {
-            writePosition[key] = circular;
-            continue;
-        }
-        let raw = value;
-        if (isRef(raw)) {
-            const refValue = unref(raw);
-            // primitive values are not added to the seen set
-            if (isObjectLike(refValue)) {
-                seen.add(raw);
-            }
-            raw = unref(raw);
-        }
-        if (isProxy(raw)) {
-            // this doesn't seem to do anything for the current test case.
-            // seen.add(raw);
-            raw = toRaw(raw);
-        }
-        if (!isObjectLike(raw)) {
-            // primitive values don't need to add to the queue
-            writePosition[key] = raw;
-            continue;
-        }
-        writePosition[key] = isArray(raw) ? [] : {};
-        for (const [nextKey, nextValue] of Object.entries(raw)) {
-            queue.push([writePosition[key], nextKey, nextValue]);
-        }
-    }
-    return returnValue;
-}