@arrai-innovations/reactive-helpers 2.6.1 → 2.8.0

package/package.json

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

package/use/index.js

@@ -4,8 +4,10 @@ export * from "./listInstance.js";
 export * from "./listRelated.js";
 export * from "./listSort.js";
 export * from "./listSubscription.js";
+export * from "./object.js";
 export * from "./objectCalculated.js";
 export * from "./objectInstance.js";
+export * from "./objectRelated.js";
 export * from "./objectSubscription.js";
 export * from "./paginatedListInstance.js";
 export * from "./search.js";

package/use/listCalculated.js

@@ -93,6 +93,9 @@ export function useListCalculated({
                     });
                 }
             });
+            if (calculatedObjectsEffectScopes[objectKey]) {
+                calculatedObjectsEffectScopes[objectKey].stop();
+            }
             calculatedObjectsEffectScopes[objectKey] = calculatedObjectsEffectScope;
         }
         parentStateObjectsWatch();

package/use/object.js

@@ -0,0 +1,99 @@
+import { effectScope, 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 }) => {
+    const managed = shallowReactive({
+        objectInstance: null,
+        objectSubscription: null,
+        objectRelated: null,
+        objectCalculated: null,
+    });
+    const es = effectScope();
+
+    managed.objectInstance = useObjectInstance({
+        crudArgs: toRef(props, "crudArgs"),
+        id: toRef(props, "id"),
+        retrieveArgs: toRef(props, "retrieveArgs"),
+    });
+
+    const intentPropsWatch = () => {
+        es.run(() => {
+            let nextState = managed.objectInstance?.state;
+            // true or false, having a key is intent to use
+            const hasIntendToRetrieve = "intendToRetrieve" in props;
+            if (hasIntendToRetrieve && !managed.objectSubscription) {
+                managed.objectSubscription = useObjectSubscription({
+                    objectInstance: managed.objectInstance,
+                });
+                managed.objectSubscription.state.intendToRetrieve = toRef(props, "intendToRetrieve");
+            } else if (!hasIntendToRetrieve && managed.objectSubscription) {
+                managed.objectSubscription.effectScope.stop();
+                managed.objectSubscription = null;
+            }
+            const hasRelatedObjectRules = "relatedObjectRules" in props;
+            if (hasRelatedObjectRules && !managed.objectRelated) {
+                nextState = managed.objectSubscription?.state || nextState;
+                managed.objectRelated = useObjectRelated({
+                    parentState: nextState,
+                    relatedObjectRules: toRef(props, "relatedObjectRules"),
+                });
+            } else if (!hasRelatedObjectRules && managed.objectRelated) {
+                managed.objectRelated.effectScope.stop();
+                managed.objectRelated = null;
+            }
+            const hasCalculatedObjectRules = "calculatedObjectRules" in props;
+            if (hasCalculatedObjectRules && !managed.objectCalculated) {
+                nextState = managed.objectRelated?.state || nextState;
+                managed.objectCalculated = useObjectCalculated({
+                    parentState: nextState,
+                    calculatedObjectRules: toRef(props, "calculatedObjectRules"),
+                });
+            } else if (!hasCalculatedObjectRules && managed.objectCalculated) {
+                managed.objectCalculated.effectScope.stop();
+                managed.objectCalculated = null;
+            }
+        });
+    };
+
+    let exposedState;
+
+    es.run(() => {
+        watch(
+            [
+                toRef(props, "intendToRetrieve"),
+                toRef(props, "relatedObjectRules"),
+                toRef(props, "calculatedObjectRules"),
+            ],
+            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,
+        });
+        exposedState = new Proxy(proxyBase, {
+            // get values from the current state
+            get(target, key) {
+                return Reflect.get(getState(), key);
+            },
+        });
+    });
+
+    return {
+        managed: shallowReadonly(managed),
+        state: exposedState,
+        effectScope: es,
+    };
+};

package/use/objectCalculated.js

@@ -18,7 +18,7 @@ export function useObjectCalculated({
 }) {
     const state = reactive({
         calculatedObjectRules,
-        calculatedObjectObject: {},
+        calculatedObjectObjects: {},
         object: {},
     });
     const calculatedObjectEffectScopes = {};
@@ -33,7 +33,7 @@ export function useObjectCalculated({
         state.object = new Proxy(parentState.object, {
             get(target, key, receiver) {
                 if (key === copn) {
-                    return state.calculatedObjectObject;
+                    return state.calculatedObjectObjects;
                 }
                 return Reflect.get(target, key, receiver);
             },
@@ -51,7 +51,7 @@ export function useObjectCalculated({
                     return {
                         configurable: true,
                         enumerable: true,
-                        value: state.calculatedObjectObject,
+                        value: state.calculatedObjectObjects,
                         writable: true,
                     };
                 }
@@ -73,9 +73,15 @@ export function useObjectCalculated({
                     Object.keys(state.calculatedObjectRules),
                     Object.keys(calculatedObjectOriginalFunctions)
                 );
+                for (const sameKey of sameKeys) {
+                    if (calculatedObjectOriginalFunctions[sameKey] !== state.calculatedObjectRules[sameKey]) {
+                        removedKeys.push(sameKey);
+                        addedKeys.push(sameKey);
+                    }
+                }
                 for (const removedKey of removedKeys) {
                     delete calculatedObjectOriginalFunctions[removedKey];
-                    delete state.calculatedObjectObject[removedKey];
+                    delete state.calculatedObjectObjects[removedKey];
                     if (calculatedObjectEffectScopes[removedKey]) {
                         calculatedObjectEffectScopes[removedKey].stop();
                         delete calculatedObjectEffectScopes[removedKey];
@@ -85,21 +91,11 @@ export function useObjectCalculated({
                     calculatedObjectOriginalFunctions[addedKey] = state.calculatedObjectRules[addedKey];
                     calculatedObjectEffectScopes[addedKey] = effectScope();
                     calculatedObjectEffectScopes[addedKey].run(() => {
-                        state.calculatedObjectObject[addedKey] = computed(() =>
+                        state.calculatedObjectObjects[addedKey] = computed(() =>
                             calculatedObjectOriginalFunctions[addedKey](state.object)
                         );
                     });
                 }
-                for (const sameKey of sameKeys) {
-                    calculatedObjectOriginalFunctions[sameKey] = state.calculatedObjectRules[sameKey];
-                    calculatedObjectEffectScopes[sameKey].stop();
-                    calculatedObjectEffectScopes[sameKey] = effectScope();
-                    calculatedObjectEffectScopes[sameKey].run(() => {
-                        state.calculatedObjectObject[sameKey] = computed(() =>
-                            calculatedObjectOriginalFunctions[sameKey](state.object)
-                        );
-                    });
-                }
             },
             {
                 immediate: true,

package/use/objectInstance.js

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { effectScope, reactive } from "vue";
+import { effectScope, reactive, unref } from "vue";
 import { assignReactiveObject } from "../utils/assignReactiveObject";
 
 export class ObjectError extends Error {
@@ -56,7 +56,9 @@ export function useObjectInstance({ crudArgs, id, retrieveArgs }) {
     // prevent linking of all instances to the same default .args object
     Object.assign(state.crud, cloneDeep(defaultCrud));
     if (crudArgs) {
-        assignReactiveObject(state.crud.args, crudArgs);
+        // generally you won't have a ref to an object, but indirectly, you could have a ref to a reactive.
+        // either way, we want a reactive or plain object. computed isn't going to work for this.
+        assignReactiveObject(state.crud.args, unref(crudArgs));
     }
 
     // due to retrieve being called by `useCancelleableIntent`, if called manually then by the watch,

package/use/objectRelated.js

@@ -0,0 +1,121 @@
+import { get, isArray, isUndefined } from "lodash";
+import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { keyDiff } from "../utils";
+
+export function useObjectRelateds(instances, args) {
+    for (const [key, value] of Object.entries(args)) {
+        useObjectRelated({
+            parentState: instances[key].state,
+            ...value,
+        });
+    }
+}
+
+// the single object version of useListRelated
+export function useObjectRelated({
+    parentState,
+    relatedObjectRules,
+    relatedObjectPropertyName = "relatedObject", // NOT REACTIVE
+}) {
+    const state = reactive({
+        relatedObjectRules,
+        relatedObjectObjects: {},
+        object: {},
+    });
+    const relatedObjectEffectScopes = {};
+
+    // don't change relatedObjectPropertyName on us or it will break
+    const ropn = relatedObjectPropertyName + "";
+
+    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");
+
+        watch(
+            [() => Object.keys(state.relatedObjectRules)],
+            () => {
+                const { addedKeys: addedRuleKeys, removedKeys: removedRuleKeys } = keyDiff(
+                    Object.keys(state.relatedObjectRules),
+                    Object.keys(state.relatedObjectObjects)
+                );
+                for (const removedRuleKey of removedRuleKeys) {
+                    delete state.relatedObjectObjects[removedRuleKey];
+                    if (relatedObjectEffectScopes[removedRuleKey]) {
+                        relatedObjectEffectScopes[removedRuleKey].stop();
+                        delete relatedObjectEffectScopes[removedRuleKey];
+                    }
+                }
+                for (const addedRuleKey of addedRuleKeys) {
+                    relatedObjectEffectScopes[addedRuleKey] = effectScope();
+                    relatedObjectEffectScopes[addedRuleKey].run(() => {
+                        state.relatedObjectObjects[addedRuleKey] = computed(() => {
+                            // deal with computed objects being passed.
+                            const ruleObjects = unref(state.relatedObjectRules?.[addedRuleKey]?.objects);
+                            const rulePkKey = state.relatedObjectRules?.[addedRuleKey]?.pkKey || addedRuleKey;
+                            if (!ruleObjects || !rulePkKey) {
+                                return undefined;
+                            }
+                            const value = get(parentState.object, rulePkKey);
+                            if (isUndefined(value)) {
+                                return undefined;
+                            }
+                            if (isArray(value)) {
+                                return value.map((e) => ruleObjects[e]);
+                            }
+                            return ruleObjects[value];
+                        });
+                    });
+                }
+            },
+            {
+                immediate: true,
+            }
+        );
+
+        onScopeDispose(() => {
+            for (const key in relatedObjectEffectScopes) {
+                relatedObjectEffectScopes[key].stop();
+            }
+        });
+    });
+    return {
+        state,
+        parentState,
+        effectScope: es,
+    };
+}

package/use/objectSubscription.js

@@ -1,9 +1,9 @@
 import { cloneDeep } from "lodash";
 import { computed, effectScope, reactive, toRef } from "vue";
 import { assignReactiveObject } from "../utils/assignReactiveObject";
-import { useObjectInstance } from "./objectInstance";
 import { useCancellableIntent } from "../utils/cancellableIntent";
 import { loadingCombine } from "../utils/loadingCombine";
+import { useObjectInstance } from "./objectInstance";
 
 export class ObjectSubscriptionError extends Error {
     constructor(message) {
@@ -30,7 +30,7 @@ export function useObjectSubscriptions(subscriptionArgs) {
     return subscriptions;
 }
 
-export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveArgs = {} }) {
+export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveArgs }) {
     if (retrieveArgs && objectInstance) {
         throw new ObjectSubscriptionError(
             "Cannot use retrieveArgs and objectInstance together, set retrieveArgs on objectInstance instead"
@@ -44,7 +44,6 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
             args: {},
             subscribe: undefined,
         },
-        id,
         subscriptionLoading: undefined,
         subscriptionErrored: false,
         subscriptionError: null,
@@ -95,7 +94,7 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
         let subscribePromise;
         subscribePromise = state.crud.subscribe({
             crudArgs: state.crud.args,
-            id,
+            id: objectInstance.state.id,
             retrieveArgs: state.retrieveArgs,
             callback: (data, action) => {
                 if (action === "delete") {
@@ -166,13 +165,22 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
 
         subscribeIntent = useCancellableIntent({
             awaitableWithCancel: subscribe,
-            watchArguments: [toRef(state, "intendToSubscribe"), toRef(state, "id"), toRef(state, "retrieveArgs")],
+            watchArguments: [
+                toRef(state, "intendToSubscribe"),
+                toRef(objectInstance.state, "id"),
+                toRef(state, "retrieveArgs"),
+            ],
             clearActiveOnResolved: false,
         });
 
         retrieveIntent = useCancellableIntent({
             awaitableWithCancel: objectInstance.retrieve,
-            watchArguments: [toRef(state, "intendToRetrieve"), toRef(state, "id"), toRef(state, "retrieveArgs")],
+            watchArguments: [
+                toRef(state, "intendToRetrieve"),
+                toRef(objectInstance.state, "id"),
+                toRef(state, "retrieveArgs"),
+            ],
+            nameForLog: "retrieveIntent",
         });
     });