@arrai-innovations/reactive-helpers 3.0.0 → 3.2.0

package/package.json

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

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/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,7 +1,7 @@
 import inspect from "browser-util-inspect";
 import { cloneDeep, isEmpty, isObject } from "lodash";
 import { computed, effectScope, reactive, toRef } from "vue";
-import { useCancellableIntent } from "../utils/cancellableIntent";
+import { useCancellableIntent } from "./cancellableIntent";
 import { loadingCombine } from "../utils/loadingCombine";
 import { useListInstance } from "./listInstance";
 

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(() => {
@@ -66,48 +72,52 @@ export function useObjectCalculated({
         state.errored = toRef(parentState, "errored");
         state.deleted = toRef(parentState, "deleted");
 
-        watch(
-            [() => state.calculatedObjectRules && Object.keys(state.calculatedObjectRules)],
-            () => {
-                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);
-                        addedKeys.push(sameKey);
-                    }
-                }
-                for (const removedKey of removedKeys) {
-                    delete calculatedObjectOriginalFunctions[removedKey];
-                    delete state.calculatedObjectObjects[removedKey];
-                    if (calculatedObjectEffectScopes[removedKey]) {
-                        calculatedObjectEffectScopes[removedKey].stop();
-                        delete calculatedObjectEffectScopes[removedKey];
-                    }
+        watch([() => state.calculatedObjectRules && Object.keys(state.calculatedObjectRules)], () => {
+            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);
+                    addedKeys.push(sameKey);
                 }
-                for (const addedKey of addedKeys) {
-                    calculatedObjectOriginalFunctions[addedKey] = state.calculatedObjectRules[addedKey];
-                    calculatedObjectEffectScopes[addedKey] = effectScope();
-                    calculatedObjectEffectScopes[addedKey].run(() => {
-                        state.calculatedObjectObjects[addedKey] = computed(() =>
-                            calculatedObjectOriginalFunctions[addedKey](state.object)
-                        );
-                    });
+            }
+            for (const removedKey of removedKeys) {
+                delete calculatedObjectOriginalFunctions[removedKey];
+                delete state.calculatedObjectObjects[removedKey];
+                if (calculatedObjectEffectScopes[removedKey]) {
+                    calculatedObjectEffectScopes[removedKey].stop();
+                    delete calculatedObjectEffectScopes[removedKey];
                 }
-            },
-            {
-                immediate: true,
             }
-        );
+            for (const addedKey of addedKeys) {
+                calculatedObjectOriginalFunctions[addedKey] = state.calculatedObjectRules[addedKey];
+                calculatedObjectEffectScopes[addedKey] = effectScope();
+                calculatedObjectEffectScopes[addedKey].run(() => {
+                    state.calculatedObjectObjects[addedKey] = computed(() =>
+                        calculatedObjectOriginalFunctions[addedKey](state.object)
+                    );
+                });
+            }
+        });
+
+        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) {
@@ -121,6 +131,7 @@ export function useObjectCalculated({
     return {
         state,
         parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

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(() => {
@@ -66,53 +71,57 @@ export function useObjectRelated({
         state.errored = toRef(parentState, "errored");
         state.deleted = toRef(parentState, "deleted");
 
-        watch(
-            [() => state.relatedObjectRules && Object.keys(state.relatedObjectRules)],
-            () => {
-                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)
-                    ));
-                }
+        watch([() => state.relatedObjectRules && Object.keys(state.relatedObjectRules)], () => {
+            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]) {
-                        relatedObjectEffectScopes[removedRuleKey].stop();
-                        delete relatedObjectEffectScopes[removedRuleKey];
-                    }
+            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];
-                        });
+            }
+            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,
+                });
             }
-        );
+        });
+
+        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) {
@@ -120,9 +129,11 @@ export function useObjectRelated({
             }
         });
     });
+
     return {
         state,
         parentState,
+        watchesRunning,
         effectScope: es,
     };
 }

package/use/objectSubscription.js

@@ -1,7 +1,6 @@
 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 {

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

@@ -2,7 +2,6 @@ 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";
 
 export class AssignReactiveObjectError extends Error {
     constructor(message) {
@@ -17,7 +16,7 @@ function isArrayOrObject(key, value) {
     }
 }
 
-export function addOrUpdateReactiveObject(target, source, exclude = [], addedKeys = null, sameKeys = null) {
+function validateTargetAndSource(target, source) {
     isArrayOrObject("target", target);
     isArrayOrObject("source", source);
     if (isRef(target)) {
@@ -30,12 +29,13 @@ export function addOrUpdateReactiveObject(target, source, exclude = [], addedKey
         isArrayOrObject("unrefedSource", unrefedSource);
         source = unrefedSource;
     }
-    if (!addedKeys && !sameKeys) {
-        ({ addedKeys, sameKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
-    }
+    return { target, source };
+}
+
+function reactiveReplaceKeys(target, source, keys, exclude) {
     const targetIsReactive = isReactive(target);
     const sourceIsReactive = isReactive(source);
-    for (const key of union(addedKeys, sameKeys)) {
+    for (const key of keys) {
         if (!exclude.includes(key)) {
             if (targetIsReactive && sourceIsReactive) {
                 target[key] = toRef(source, key);
@@ -46,24 +46,50 @@ export function addOrUpdateReactiveObject(target, source, exclude = [], addedKey
     }
 }
 
-export function assignReactiveObject(target, source, exclude = []) {
-    if (target === source) {
-        return;
+export function addReactiveObject(target, source, exclude = [], addedKeys = null) {
+    if (!addedKeys) {
+        if (target === source) {
+            return;
+        }
+        ({ target, source } = validateTargetAndSource(target, source));
+        ({ addedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
     }
-    isArrayOrObject("target", target);
-    isArrayOrObject("source", source);
-    if (isRef(target)) {
-        const unrefedTarget = unref(target);
-        isArrayOrObject("unrefedTarget", unrefedTarget);
-        target = unrefedTarget;
+    reactiveReplaceKeys(target, source, addedKeys, exclude);
+}
+
+export function updateReactiveObject(target, source, exclude = [], sameKeys = null) {
+    if (!sameKeys) {
+        if (target === source) {
+            return;
+        }
+        ({ target, source } = validateTargetAndSource(target, source));
+        ({ sameKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
     }
-    if (isRef(source)) {
-        const unrefedSource = unref(source);
-        isArrayOrObject("unrefedSource", unrefedSource);
-        source = unrefedSource;
+    reactiveReplaceKeys(target, source, sameKeys, exclude);
+}
+
+export function addOrUpdateReactiveObject(target, source, exclude = [], addedKeys = null, sameKeys = null) {
+    if (!addedKeys && !sameKeys) {
+        if (target === source) {
+            return;
+        }
+        ({ target, source } = validateTargetAndSource(target, source));
+        ({ addedKeys, sameKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
+    }
+    addReactiveObject(target, source, exclude, addedKeys);
+    updateReactiveObject(target, source, exclude, sameKeys);
+}
+
+// there isn't much reactive about this I guess...
+export function trimReactiveObject(target, source, exclude = [], removedKeys = null) {
+    if (!removedKeys) {
+        if (target === source) {
+            return;
+        }
+        ({ target, source } = validateTargetAndSource(target, source));
+        ({ removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
     }
     const targetIsArray = isArray(target);
-    const { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
     if (targetIsArray) {
         // Remove indices in reverse (descending) order to keep them stable
         for (const removedKey of [...removedKeys].map((key) => parseInt(key, 10)).sort((a, b) => b - a)) {
@@ -78,5 +104,54 @@ export function assignReactiveObject(target, source, exclude = []) {
             }
         }
     }
+}
+
+export function assignReactiveObject(target, source, exclude = []) {
+    if (target === source) {
+        return;
+    }
+    ({ target, source } = validateTargetAndSource(target, source));
+    const { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
+    trimReactiveObject(target, removedKeys, exclude);
     addOrUpdateReactiveObject(target, source, exclude, addedKeys, sameKeys);
 }
+
+function assignReactiveObjectRecursive(target, source, exclude = [], path = "") {
+    let addedKeys, sameKeys, removedKeys;
+    try {
+        ({ addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
+    } catch (error) {
+        debugger;
+    }
+    trimReactiveObject(target, removedKeys, exclude);
+    addReactiveObject(target, source, exclude, addedKeys);
+    const keysForRecurse = [];
+    const keysForReplace = [];
+    for (const key of sameKeys) {
+        if (!exclude.includes(key)) {
+            if (isObject(source[key]) && isObject(target[key])) {
+                keysForRecurse.push(key);
+            } else if (target[key] !== source[key]) {
+                keysForReplace.push(key);
+            }
+        }
+    }
+    reactiveReplaceKeys(target, source, keysForReplace, exclude);
+    for (const key of keysForRecurse) {
+        // scope exclude for this next level, remove keys that don't start with the current path, trim keys that do to remove the current path
+        const nextLevelExclude = exclude
+            .filter((excludeKey) => !excludeKey.startsWith(path))
+            .map((excludeKey) => excludeKey.replace(path, ""));
+        const nextPath = isArray(source[key]) ? `${path}[${key}]` : `${path}.${key}`;
+        assignReactiveObjectRecursive(target[key], source[key], nextLevelExclude, nextPath);
+    }
+}
+
+export function assignReactiveObjectDeep(target, source, exclude = []) {
+    // exclude keys will need to be lodash get strings
+    if (target === source) {
+        return;
+    }
+    ({ target, source } = validateTargetAndSource(target, source));
+    assignReactiveObjectRecursive(target, source, exclude);
+}

package/utils/index.js

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