@arrai-innovations/reactive-helpers 3.2.1 → 4.0.0

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,11 +1,11 @@
-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";
 import { useObjectSubscription } from "./objectSubscription";
 
 // Manages a chain of useObject functions, based on existence of keys in props: intendToRetrieve, relatedObjectRules, calculatedObjectRules
-export const useObject = ({ props }) => {
+export const useObject = ({ props, functions }) => {
     const managed = shallowReactive({
         objectInstance: null,
         objectSubscription: null,
@@ -18,6 +18,7 @@ export const useObject = ({ props }) => {
         crudArgs: toRef(props, "crudArgs"),
         id: toRef(props, "id"),
         retrieveArgs: toRef(props, "retrieveArgs"),
+        functions,
     });
 
     const intentPropsWatch = () => {
@@ -59,7 +60,7 @@ export const useObject = ({ props }) => {
         });
     };
 
-    let exposedState;
+    const exposedState = reactive({});
 
     es.run(() => {
         watch(
@@ -71,30 +72,39 @@ export const useObject = ({ props }) => {
             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, key) {
-                return Reflect.get(getState(), key);
+
+        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/objectInstance.js

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, isFunction } from "lodash";
 import { effectScope, reactive } from "vue";
 import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/assignReactiveObject";
 
@@ -35,7 +35,7 @@ export function useObjectInstances(instanceArgs) {
     return instances;
 }
 
-export function useObjectInstance({ crudArgs, id, retrieveArgs }) {
+export function useObjectInstance({ crudArgs, id, retrieveArgs, functions = {} }) {
     const state = reactive({
         crud: {
             args: {},
@@ -58,6 +58,13 @@ export function useObjectInstance({ crudArgs, id, retrieveArgs }) {
     if (crudArgs) {
         addOrUpdateReactiveObject(state.crud.args, crudArgs);
     }
+    for (const [key, value] of Object.entries(functions)) {
+        if (isFunction(value) && key in state.crud) {
+            state[key] = value;
+        } else {
+            throw ObjectError(`Invalid function "${key}" for useObjectInstance: invalid key or not a function.`);
+        }
+    }
 
     // due to retrieve being called by `useCancelleableIntent`, if called manually then by the watch,
     //  it will run into the loading check. Instead, return the current retrieve promise if it exists.

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: [],
-                },
-            },
-        });
-    });
-});