@arrai-innovations/reactive-helpers 2.8.0 → 3.1.0

package/package.json

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

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

@@ -601,7 +601,7 @@ describe("use/objectSubscription.js", function () {
                 },
             });
             objectSubscription.objectInstance.state.crud.retrieve = customCrudRetrieve;
-            objectSubscription.state.crud.subscribe = customCrudSubscribe;
+            objectSubscription.objectInstance.state.crud.subscribe = customCrudSubscribe;
 
             const subscribePromise = objectSubscription.subscribe();
             crudRetrieveResolve(crudRetrieveResolved);

package/use/index.js

@@ -1,3 +1,4 @@
+export * from "./cancellableIntent.js";
 export * from "./listCalculated.js";
 export * from "./listFilter.js";
 export * from "./listInstance.js";
@@ -11,3 +12,4 @@ export * from "./objectRelated.js";
 export * from "./objectSubscription.js";
 export * from "./paginatedListInstance.js";
 export * from "./search.js";
+export * from "./watchesRunning.js";

package/use/listCalculated.js

@@ -1,6 +1,7 @@
 import { isEmpty } from "lodash";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
-import { keyDiff } from "../utils";
+import { keyDiff, loadingCombine } from "../utils";
+import { useWatchesRunning } from "./watchesRunning";
 
 export function useListCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -23,6 +24,8 @@ export function useListCalculated({
         calculatedObjectsRules,
         calculatedObjectsObjects: {},
         objects: {},
+        parentStateObjectsWatchRunning: false,
+        calculatedObjectsWatchRunning: false,
     });
     const calculatedObjectsEffectScopes = {};
 
@@ -56,6 +59,7 @@ export function useListCalculated({
                 },
             });
         }
+        state.parentStateObjectsWatchRunning = false;
     }
 
     function calculatedObjectsWatch() {
@@ -98,9 +102,12 @@ export function useListCalculated({
             }
             calculatedObjectsEffectScopes[objectKey] = calculatedObjectsEffectScope;
         }
+        state.calculatedObjectsWatchRunning = false;
         parentStateObjectsWatch();
     }
 
+    let watchesRunning = null;
+
     const es = effectScope();
 
     es.run(() => {
@@ -126,6 +133,16 @@ export function useListCalculated({
             { immediate: true }
         );
 
+        watchesRunning = useWatchesRunning({
+            triggerRefs: [computed(() => (!isEmpty(state.calculatedObjectsRules) ? parentState.loading : false))],
+            watchSentinelRefs: [
+                toRef(state, "parentStateObjectsWatchRunning"),
+                toRef(state, "calculatedObjectsWatchRunning"),
+            ],
+        });
+
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+
         onScopeDispose(() => {
             for (const objectKey of Object.keys(calculatedObjectsEffectScopes)) {
                 calculatedObjectsEffectScopes[objectKey].stop();
@@ -135,6 +152,8 @@ export function useListCalculated({
 
     return {
         state,
+        parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

package/use/listInstance.js

@@ -1,7 +1,7 @@
 import inspect from "browser-util-inspect";
 import { cloneDeep } from "lodash";
 import { computed, effectScope, reactive } from "vue";
-import { assignReactiveObject } from "../utils/assignReactiveObject";
+import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/assignReactiveObject";
 import { getFakeId } from "../utils/getFakeId";
 
 export class ListError extends Error {
@@ -80,7 +80,7 @@ export function useListInstance({ crudArgs, listArgs = {}, 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);
+        addOrUpdateReactiveObject(state.crud.args, crudArgs);
     }
 
     const defaultPageCallback = (newObjects) => {

package/use/listRelated.js

@@ -1,6 +1,7 @@
 import { get, isArray, isEmpty, isUndefined } from "lodash";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
-import { keyDiff } from "../utils/keyDiff";
+import { keyDiff, loadingCombine } from "../utils";
+import { useWatchesRunning } from "./watchesRunning";
 
 export function useListRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -20,6 +21,8 @@ export function useListRelated({
         relatedObjectsRules: relatedObjectsRules,
         relatedObjectsObjects: {},
         objects: {},
+        parentStateObjectsWatchRunning: false,
+        relatedObjectsWatchRunning: false,
     });
     const relatedObjectsEffectScopes = {};
 
@@ -128,6 +131,8 @@ export function useListRelated({
         parentStateObjectsWatch();
     }
 
+    let watchesRunning = null;
+
     const es = effectScope();
 
     es.run(() => {
@@ -150,6 +155,16 @@ export function useListRelated({
             { immediate: true }
         );
 
+        watchesRunning = useWatchesRunning({
+            triggerRefs: [computed(() => (!isEmpty(state.relatedObjectsRules) ? parentState.loading : false))],
+            watchSentinelRefs: [
+                toRef(state, "parentStateObjectsWatchRunning"),
+                toRef(state, "relatedObjectsWatchRunning"),
+            ],
+        });
+
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+
         onScopeDispose(() => {
             for (const objectKey of Object.keys(relatedObjectsEffectScopes)) {
                 relatedObjectsEffectScopes[objectKey].stop();
@@ -159,6 +174,7 @@ export function useListRelated({
     return {
         state,
         parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

package/use/listSubscription.js

@@ -1,10 +1,9 @@
-import { computed, effectScope, reactive, toRef } from "vue";
-import { useListInstance } from "./listInstance";
-import { cloneDeep, isEmpty, isObject } from "lodash";
-import { assignReactiveObject } from "../utils/assignReactiveObject";
 import inspect from "browser-util-inspect";
-import { useCancellableIntent } from "../utils/cancellableIntent";
+import { cloneDeep, isEmpty, isObject } from "lodash";
+import { computed, effectScope, reactive, toRef } from "vue";
+import { useCancellableIntent } from "./cancellableIntent";
 import { loadingCombine } from "../utils/loadingCombine";
+import { useListInstance } from "./listInstance";
 
 export class ListSubscriptionError extends Error {
     constructor(message) {
@@ -14,13 +13,11 @@ export class ListSubscriptionError extends Error {
 }
 
 const defaultCrud = {
-    args: {},
     subscribe: undefined,
 };
 
-export function setListSubscriptionCrud({ subscribe, args = {} }) {
+export function setListSubscriptionCrud({ subscribe }) {
     defaultCrud.subscribe = subscribe;
-    Object.assign(defaultCrud.args, args);
 }
 
 export function useListSubscriptions(args, listInstances = {}) {
@@ -35,23 +32,18 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
     if (!listInstance) {
         listInstance = useListInstance({ crudArgs, listArgs, retrieveArgs });
     }
+    if (!listInstance.state.crud.subscribe) {
+        listInstance.state.crud.subscribe = defaultCrud.subscribe;
+    }
+
     let subscribeIntent, listIntent;
     const state = reactive({
-        crud: {
-            args: {},
-            subscribe: undefined,
-        },
         subscriptionLoading: undefined,
         subscriptionErrored: false,
         subscriptionError: null,
         intendToList: false,
         intendToSubscribe: false,
     });
-    // prevent linking of all instances to the same default .args object
-    Object.assign(state.crud, cloneDeep(defaultCrud));
-    if (crudArgs) {
-        assignReactiveObject(state.crud.args, crudArgs);
-    }
 
     function publicSubscribe({ list = true } = {}) {
         let didSubscribe = false;
@@ -160,8 +152,8 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
         subscribeIntent = useCancellableIntent({
             awaitableWithCancel: () => {
                 // this function cannot be async, or the resulting promise will lose its .cancel() method
-                const subscribePromise = state.crud.subscribe({
-                    crudArgs: cloneDeep(state.crud.args),
+                const subscribePromise = listInstance.state.crud.subscribe({
+                    crudArgs: cloneDeep(listInstance.state.crud.args),
                     listArgs: cloneDeep(listInstance.state.listArgs),
                     retrieveArgs: cloneDeep(listInstance.state.retrieveArgs),
                     subscriptionEventCallback,
@@ -175,7 +167,11 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
                 catchPromise.cancel = subscribePromise.cancel;
                 return catchPromise;
             },
-            watchArguments: [toRef(state, "intendToSubscribe"), toRef(state, "listArgs"), toRef(state, "retrieveArgs")],
+            watchArguments: [
+                toRef(state, "intendToSubscribe"),
+                toRef(listInstance.state, "listArgs"),
+                toRef(state, "retrieveArgs"),
+            ],
             clearActiveOnResolved: false,
         });
 
@@ -186,7 +182,12 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
                 listInstance.clearList();
                 return listInstance.list();
             },
-            watchArguments: [toRef(state, "intendToList"), toRef(state, "listArgs"), toRef(state, "retrieveArgs")],
+            watchArguments: [
+                toRef(state, "intendToList"),
+                toRef(listInstance.state, "listArgs"),
+                toRef(state, "retrieveArgs"),
+            ],
+            nameOnLog: "listIntent",
         });
     });
 

package/use/object.js

@@ -82,6 +82,7 @@ export const useObject = ({ props }) => {
             error: null,
             errored: null,
             object: null,
+            running: null,
         });
         exposedState = new Proxy(proxyBase, {
             // get values from the current state

package/use/objectCalculated.js

@@ -1,5 +1,7 @@
+import { isEmpty } from "lodash";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
-import { keyDiff } from "../utils";
+import { keyDiff, loadingCombine } from "../utils";
+import { useWatchesRunning } from "./watchesRunning";
 
 export function useObjectCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -20,6 +22,8 @@ export function useObjectCalculated({
         calculatedObjectRules,
         calculatedObjectObjects: {},
         object: {},
+        parentStateObjectWatchRunning: false,
+        calculatedObjectWatchRunning: false,
     });
     const calculatedObjectEffectScopes = {};
     const calculatedObjectOriginalFunctions = {};
@@ -27,6 +31,8 @@ export function useObjectCalculated({
     // don't change calculatedObjectPropertyName on us or it will break
     const copn = calculatedObjectPropertyName + "";
 
+    let watchesRunning = null;
+
     const es = effectScope();
 
     es.run(() => {
@@ -67,12 +73,19 @@ export function useObjectCalculated({
         state.deleted = toRef(parentState, "deleted");
 
         watch(
-            [() => Object.keys(state.calculatedObjectRules)],
+            [() => state.calculatedObjectRules && Object.keys(state.calculatedObjectRules)],
             () => {
-                const { addedKeys, removedKeys, sameKeys } = keyDiff(
-                    Object.keys(state.calculatedObjectRules),
-                    Object.keys(calculatedObjectOriginalFunctions)
-                );
+                let addedKeys = [],
+                    removedKeys = [],
+                    sameKeys = [];
+                if (!state.calculatedObjectRules) {
+                    removedKeys = Object.keys(calculatedObjectOriginalFunctions);
+                } else {
+                    ({ addedKeys, removedKeys, sameKeys } = keyDiff(
+                        Object.keys(state.calculatedObjectRules),
+                        Object.keys(calculatedObjectOriginalFunctions)
+                    ));
+                }
                 for (const sameKey of sameKeys) {
                     if (calculatedObjectOriginalFunctions[sameKey] !== state.calculatedObjectRules[sameKey]) {
                         removedKeys.push(sameKey);
@@ -102,6 +115,16 @@ export function useObjectCalculated({
             }
         );
 
+        watchesRunning = useWatchesRunning({
+            triggerRefs: [computed(() => (!isEmpty(state.calculatedObjectRules) ? parentState.loading : false))],
+            watchSentinelRefs: [
+                toRef(state, "parentStateObjectWatchRunning"),
+                toRef(state, "calculatedObjectWatchRunning"),
+            ],
+        });
+
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+
         onScopeDispose(() => {
             for (const key in calculatedObjectEffectScopes) {
                 calculatedObjectEffectScopes[key].stop();
@@ -114,6 +137,7 @@ export function useObjectCalculated({
     return {
         state,
         parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

package/use/objectInstance.js

@@ -1,6 +1,6 @@
 import { cloneDeep } from "lodash";
-import { effectScope, reactive, unref } from "vue";
-import { assignReactiveObject } from "../utils/assignReactiveObject";
+import { effectScope, reactive } from "vue";
+import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/assignReactiveObject";
 
 export class ObjectError extends Error {
     constructor(message) {
@@ -56,9 +56,7 @@ 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) {
-        // 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));
+        addOrUpdateReactiveObject(state.crud.args, crudArgs);
     }
 
     // due to retrieve being called by `useCancelleableIntent`, if called manually then by the watch,

package/use/objectRelated.js

@@ -1,6 +1,7 @@
-import { get, isArray, isUndefined } from "lodash";
+import { get, isArray, isEmpty, isUndefined } from "lodash";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
-import { keyDiff } from "../utils";
+import { keyDiff, loadingCombine } from "../utils";
+import { useWatchesRunning } from "./watchesRunning";
 
 export function useObjectRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -21,12 +22,16 @@ export function useObjectRelated({
         relatedObjectRules,
         relatedObjectObjects: {},
         object: {},
+        parentStateObjectWatchRunning: false,
+        relatedObjectWatchRunning: false,
     });
     const relatedObjectEffectScopes = {};
 
     // don't change relatedObjectPropertyName on us or it will break
     const ropn = relatedObjectPropertyName + "";
 
+    let watchesRunning = null;
+
     const es = effectScope();
 
     es.run(() => {
@@ -67,12 +72,19 @@ export function useObjectRelated({
         state.deleted = toRef(parentState, "deleted");
 
         watch(
-            [() => Object.keys(state.relatedObjectRules)],
+            [() => state.relatedObjectRules && Object.keys(state.relatedObjectRules)],
             () => {
-                const { addedKeys: addedRuleKeys, removedKeys: removedRuleKeys } = keyDiff(
-                    Object.keys(state.relatedObjectRules),
-                    Object.keys(state.relatedObjectObjects)
-                );
+                let addedRuleKeys = [],
+                    removedRuleKeys = [];
+                if (!state.relatedObjectRules) {
+                    removedRuleKeys = Object.keys(state.relatedObjectObjects);
+                } else {
+                    ({ 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]) {
@@ -107,15 +119,27 @@ export function useObjectRelated({
             }
         );
 
+        watchesRunning = useWatchesRunning({
+            triggerRefs: [computed(() => (!isEmpty(state.relatedObjectRules) ? parentState.loading : false))],
+            watchSentinelRefs: [
+                toRef(state, "parentStateObjectWatchRunning"),
+                toRef(state, "relatedObjectWatchRunning"),
+            ],
+        });
+
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+
         onScopeDispose(() => {
             for (const key in relatedObjectEffectScopes) {
                 relatedObjectEffectScopes[key].stop();
             }
         });
     });
+
     return {
         state,
         parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

package/use/objectSubscription.js

@@ -1,8 +1,6 @@
-import { cloneDeep } from "lodash";
 import { computed, effectScope, reactive, toRef } from "vue";
-import { assignReactiveObject } from "../utils/assignReactiveObject";
-import { useCancellableIntent } from "../utils/cancellableIntent";
-import { loadingCombine } from "../utils/loadingCombine";
+import { assignReactiveObject, loadingCombine } from "../utils";
+import { useCancellableIntent } from "./cancellableIntent";
 import { useObjectInstance } from "./objectInstance";
 
 export class ObjectSubscriptionError extends Error {
@@ -13,13 +11,11 @@ export class ObjectSubscriptionError extends Error {
 }
 
 const defaultCrud = {
-    args: {},
     subscribe: undefined,
 };
 
-export function setObjectSubscriptionCrud({ subscribe, args = {} }) {
+export function setObjectSubscriptionCrud({ subscribe }) {
     defaultCrud.subscribe = subscribe;
-    Object.assign(defaultCrud.args, args);
 }
 
 export function useObjectSubscriptions(subscriptionArgs) {
@@ -39,11 +35,10 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
     if (!objectInstance) {
         objectInstance = useObjectInstance({ crudArgs, id, retrieveArgs });
     }
+    if (!objectInstance.state.crud.subscribe) {
+        objectInstance.state.crud.subscribe = defaultCrud.subscribe;
+    }
     const state = reactive({
-        crud: {
-            args: {},
-            subscribe: undefined,
-        },
         subscriptionLoading: undefined,
         subscriptionErrored: false,
         subscriptionError: null,
@@ -51,11 +46,6 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
         intendToSubscribe: false,
         intendToRetrieve: false,
     });
-    // prevent linking of all instances to the same default .args object
-    Object.assign(state.crud, cloneDeep(defaultCrud));
-    if (crudArgs) {
-        assignReactiveObject(state.crud.args, crudArgs);
-    }
 
     let subscribeIntent, retrieveIntent;
 
@@ -92,8 +82,8 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
         state.subscriptionErrored = false;
         state.subscriptionError = null;
         let subscribePromise;
-        subscribePromise = state.crud.subscribe({
-            crudArgs: state.crud.args,
+        subscribePromise = objectInstance.state.crud.subscribe({
+            crudArgs: objectInstance.state.crud.args,
             id: objectInstance.state.id,
             retrieveArgs: state.retrieveArgs,
             callback: (data, action) => {

package/use/watchesRunning.js

@@ -0,0 +1,31 @@
+import { computed, effectScope, reactive, unref, watch } from "vue";
+import { loadingCombine } from "../utils";
+
+export function useWatchesRunning({ triggerRefs, watchSentinelRefs }) {
+    const state = reactive({});
+
+    const es = effectScope();
+
+    es.run(() => {
+        watch(
+            triggerRefs,
+            (values) => {
+                if (values.every((value) => unref(value))) {
+                    watchSentinelRefs.forEach((ref) => {
+                        ref.value = true;
+                    });
+                }
+            },
+            {
+                immediate: true,
+                deep: true,
+            }
+        );
+        state.running = computed(() => loadingCombine(watchSentinelRefs.map((ref) => ref.value)));
+    });
+
+    return {
+        state,
+        effectScope: es,
+    };
+}

package/utils/assignReactiveObject.js

@@ -1,8 +1,8 @@
+import inspect from "browser-util-inspect";
+import { isArray, isObject } from "lodash";
+import { isReactive, isRef, toRef, unref } from "vue";
 import { keyDiff } from "./keyDiff.js";
 import { union } from "./set.js";
-import { isReactive, toRef } from "vue";
-import { isArray, isObject } from "lodash";
-import inspect from "browser-util-inspect";
 
 export class AssignReactiveObjectError extends Error {
     constructor(message) {
@@ -20,6 +20,16 @@ function isArrayOrObject(key, value) {
 export function addOrUpdateReactiveObject(target, source, exclude = [], addedKeys = null, sameKeys = null) {
     isArrayOrObject("target", target);
     isArrayOrObject("source", source);
+    if (isRef(target)) {
+        const unrefedTarget = unref(target);
+        isArrayOrObject("unrefedTarget", unrefedTarget);
+        target = unrefedTarget;
+    }
+    if (isRef(source)) {
+        const unrefedSource = unref(source);
+        isArrayOrObject("unrefedSource", unrefedSource);
+        source = unrefedSource;
+    }
     if (!addedKeys && !sameKeys) {
         ({ addedKeys, sameKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
     }
@@ -42,6 +52,16 @@ export function assignReactiveObject(target, source, exclude = []) {
     }
     isArrayOrObject("target", target);
     isArrayOrObject("source", source);
+    if (isRef(target)) {
+        const unrefedTarget = unref(target);
+        isArrayOrObject("unrefedTarget", unrefedTarget);
+        target = unrefedTarget;
+    }
+    if (isRef(source)) {
+        const unrefedSource = unref(source);
+        isArrayOrObject("unrefedSource", unrefedSource);
+        source = unrefedSource;
+    }
     const targetIsArray = isArray(target);
     const { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
     if (targetIsArray) {

package/utils/index.js

@@ -1,5 +1,4 @@
 export * from "./assignReactiveObject";
-export * from "./cancellableIntent";
 export * from "./flattenPaths";
 export * from "./getFakeId";
 export * from "./keyDiff";