@arrai-innovations/reactive-helpers 11.0.1 → 11.0.3

package/package.json

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

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

@@ -191,5 +191,69 @@ describe("use/listRelated", () => {
                 },
             },
         });
+        intermediateListInstance.state.objects[2].name = "intermediate1a";
+        intermediateListInstance.state.objects[2].related_id = "6";
+        intermediateListInstance.state.objects[2].related_ids = ["7", "8"];
+        intermediateListInstance.state.objects[3].name = "intermediate2a";
+        intermediateListInstance.state.objects[3].related_id = "4";
+        intermediateListInstance.state.objects[3].related_ids = ["5", "9"];
+        relatedListInstance.state.objects[4].name = "related1a";
+        relatedListInstance.state.objects[5].name = "related2a";
+        relatedListInstance.state.objects[6].name = "related3a";
+        relatedListInstance.state.objects[7].name = "related4a";
+        relatedListInstance.addListObject({
+            id: "8",
+            name: "related5",
+        });
+        relatedListInstance.addListObject({
+            id: "9",
+            name: "related6",
+        });
+        expect(deepUnref(listRelated.state.relatedObjects)).toEqual({
+            1: {
+                intermediateItems: [
+                    {
+                        id: "2",
+                        name: "intermediate1a",
+                        related_ids: ["7", "8"],
+                        related_id: "6",
+                    },
+                    {
+                        id: "3",
+                        name: "intermediate2a",
+                        related_ids: ["5", "9"],
+                        related_id: "4",
+                    },
+                ],
+                intermediateItem: {
+                    id: "2",
+                    name: "intermediate1a",
+                    related_ids: ["7", "8"],
+                    related_id: "6",
+                },
+                relatedItems: [
+                    {
+                        id: "7",
+                        name: "related4a",
+                    },
+                    {
+                        id: "8",
+                        name: "related5",
+                    },
+                    {
+                        id: "5",
+                        name: "related2a",
+                    },
+                    {
+                        id: "9",
+                        name: "related6",
+                    },
+                ],
+                relatedItem: {
+                    id: "6",
+                    name: "related3a",
+                },
+            },
+        });
     });
 });

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

@@ -1,5 +1,5 @@
-import { doAwaitTimeout } from "../../../utils/index.js";
-import { reactive } from "vue";
+import { doAwaitTimeout, doAwaitNot } from "../../../utils/index.js";
+import { reactive, ref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/useListSort", () => {
@@ -10,6 +10,7 @@ describe("use/useListSort", () => {
         useListInstances,
         useListRelated,
         useListCalculated,
+        useListFilter,
         useListSort,
         useListSorts,
         setListSortDefaultOptions,
@@ -46,6 +47,7 @@ describe("use/useListSort", () => {
         useListInstances = imported.useListInstances;
         useListRelated = imported.useListRelated;
         useListCalculated = imported.useListCalculated;
+        useListFilter = imported.useListFilter;
         orderByRules = [
             { key: "organization", desc: true, localeCompare: false },
             { key: "lexical_name", desc: false, localeCompare: true },
@@ -339,4 +341,56 @@ describe("use/useListSort", () => {
             expect(listSort.state.objectsInOrder).toEqual(testOrder4.map((id) => listInstance.state.objects[id]));
         });
     });
+    it("pass through correctly when parentState changes their order", async () => {
+        const listInstance = useListInstance({
+            props: reactive({}),
+        });
+        const allowedFilter = ref((obj) => obj.name !== "two");
+        const listFilter = useListFilter({
+            parentState: listInstance.state,
+            allowedFilter,
+        });
+        const orderByRules = ref([]);
+        const listSort = useListSort({
+            parentState: listFilter.state,
+            orderByRules,
+        });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listFilter.state.order).toEqual([]);
+        expect(listFilter.state.objectsInOrder.map((obj) => obj.id)).toEqual([]);
+        expect(listSort.state.order).toEqual([]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([]);
+        listInstance.addListObject({ id: 1, name: "one" });
+        listInstance.addListObject({ id: 2, name: "two" });
+        listInstance.addListObject({ id: 3, name: "three" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listFilter.state.order).toEqual(["1", "3"]);
+        expect(listFilter.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+        expect(listSort.state.order).toEqual(["1", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+        listInstance.updateListObject({ id: 2, name: "twotwo" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["1", "2", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 2, 3]);
+        listInstance.updateListObject({ id: 2, name: "two" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["1", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+    });
 });

package/use/listCalculated.js

@@ -66,9 +66,6 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
     function calculatedObjectsWatch() {
         const calculatedObjectsRulesIsEmpty = !state.calculatedObjectsRules || isEmpty(state.calculatedObjectsRules);
         for (const objectKey of Object.keys(state.calculatedObjects)) {
-            if (!calculatedObjectsEffectScopes[objectKey]) {
-                calculatedObjectsEffectScopes[objectKey] = effectScope();
-            }
             const originalObject = toRef(parentState.objects, objectKey);
             const relatedObject = parentState.relatedObjects
                 ? toRef(parentState.relatedObjects, objectKey)
@@ -91,8 +88,13 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
                 addedRuleKeys = [];
             }
             for (const removedRuleKey of removedRuleKeys) {
+                // this is an unofficial api
+                calculatedObjectsObject[removedRuleKey].effect.stop();
                 delete calculatedObjectsObject[removedRuleKey];
             }
+            if (!calculatedObjectsEffectScopes[objectKey]) {
+                calculatedObjectsEffectScopes[objectKey] = effectScope();
+            }
             calculatedObjectsEffectScopes[objectKey].run(() => {
                 for (const addedRuleKey of addedRuleKeys) {
                     calculatedObjectsObject[addedRuleKey] = computed(() =>

package/use/listKeys.js

@@ -42,6 +42,8 @@ export const listRelatedStateKeys = [
     "relatedObjectsWatchRunning",
     "relatedObjectsParentStateObjectsWatchRunning",
     "running",
+    "objAndKeyForIdAndRule",
+    "fkForIdAndRule",
 ];
 export const listRelatedFunctions = [];
 

package/use/listRelated.js

@@ -1,6 +1,7 @@
-import { difference } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
+import { getObjectRelatedByKey } from "../utils/relatedCalculatedHelpers.js";
+import { difference } from "../utils/set.js";
 import {
     listSubscriptionStateKeys,
     listInstanceStateKeys,
@@ -15,7 +16,6 @@ import get from "lodash-es/get.js";
 import identity from "lodash-es/identity.js";
 import isArray from "lodash-es/isArray.js";
 import isEmpty from "lodash-es/isEmpty.js";
-import isEqual from "lodash-es/isEqual.js";
 import isUndefined from "lodash-es/isUndefined.js";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
@@ -43,23 +43,47 @@ export function useListRelateds(instances, args) {
 export function useListRelated({ parentState, relatedObjectsRules }) {
     const state = reactive({
         relatedObjectsRules: relatedObjectsRules,
-        relatedObjects: {},
+        relatedObjects: {
+            // id: {
+            //     rule: list of objects or single object,
+            // },
+        },
+        objAndKeyForIdAndRule: {
+            // id: {
+            //     rule: {
+            //         obj: object,
+            //         key: string,
+            //     },
+            // },
+        },
+        fkForIdAndRule: {
+            // id: {
+            //     rule: list of ids or single id,
+            // },
+        },
         relatedObjectsParentStateObjectsWatchRunning: false,
         relatedObjectsWatchRunning: false,
     });
     const relatedObjectsEffectScopes = {};
 
     function parentStateObjectsWatch() {
-        const { addedKeys, removedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.relatedObjects));
-        for (const removedKey of removedKeys) {
-            delete state.relatedObjects[removedKey];
-            if (relatedObjectsEffectScopes[removedKey]) {
-                relatedObjectsEffectScopes[removedKey].stop();
-                delete relatedObjectsEffectScopes[removedKey];
+        const { addedKeys: addedIds, removedKeys: removedIds } = keyDiff(
+            Object.keys(parentState.objects),
+            Object.keys(state.relatedObjects)
+        );
+        for (const removedId of removedIds) {
+            delete state.relatedObjects[removedId];
+            delete state.objAndKeyForIdAndRule[removedId];
+            delete state.fkForIdAndRule[removedId];
+            if (relatedObjectsEffectScopes[removedId]) {
+                relatedObjectsEffectScopes[removedId].stop();
+                delete relatedObjectsEffectScopes[removedId];
             }
         }
-        for (const addedKey of addedKeys) {
-            state.relatedObjects[addedKey] = {};
+        for (const addedId of addedIds) {
+            state.relatedObjects[addedId] = {};
+            state.objAndKeyForIdAndRule[addedId] = {};
+            state.fkForIdAndRule[addedId] = {};
         }
         state.relatedObjectsParentStateObjectsWatchRunning = false;
     }
@@ -67,66 +91,58 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
     function relatedObjectsWatch() {
         const relatedObjectsRulesIsEmpty = !state.relatedObjectsRules || isEmpty(state.relatedObjectsRules);
         for (const objectKey of Object.keys(state.relatedObjects)) {
-            const relatedObjectsObject = state.relatedObjects[objectKey];
             const originalObjectRef = toRef(parentState.objects, objectKey);
             const relatedObjectRef = toRef(state.relatedObjects, objectKey);
             let removedRuleKeys, addedRuleKeys;
             if (!relatedObjectsRulesIsEmpty) {
                 ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
                     Object.keys(state.relatedObjectsRules),
-                    Object.keys(relatedObjectsObject)
+                    Object.keys(state.relatedObjects[objectKey])
                 ));
             } else {
-                if (isEmpty(relatedObjectsObject)) {
+                if (isEmpty(state.relatedObjects[objectKey])) {
                     return;
                 }
-                removedRuleKeys = Object.keys(relatedObjectsObject);
-                addedRuleKeys = [];
+                removedRuleKeys = new Set(Object.keys(state.relatedObjects[objectKey]));
+                addedRuleKeys = new Set();
             }
             for (const removedRuleKey of removedRuleKeys) {
-                delete relatedObjectsObject[removedRuleKey];
-            }
-            if (!relatedObjectsEffectScopes[objectKey]) {
-                relatedObjectsEffectScopes[objectKey] = effectScope();
+                state.relatedObjects[objectKey][removedRuleKey]?.effect?.stop();
+                delete state.relatedObjects[objectKey][removedRuleKey];
+                state.objAndKeyForIdAndRule[objectKey][removedRuleKey]?.effect?.stop();
+                delete state.objAndKeyForIdAndRule[objectKey][removedRuleKey];
+                state.fkForIdAndRule[objectKey][removedRuleKey]?.effect?.stop();
+                delete state.fkForIdAndRule[objectKey][removedRuleKey];
             }
-            relatedObjectsEffectScopes[objectKey].run(() => {
-                for (const addedRuleKey of addedRuleKeys) {
-                    relatedObjectsObject[addedRuleKey] = undefined;
-                    const relatedObjectsObjectWatchFn = () => {
-                        // deal with computed objects being passed.
-                        const ruleObjects = unref(state.relatedObjectsRules?.[addedRuleKey]?.objects);
-                        const rulePkKey = state.relatedObjectsRules?.[addedRuleKey]?.pkKey || addedRuleKey;
-                        const ruleOrder = unref(state.relatedObjectsRules?.[addedRuleKey]?.order);
-                        if (!ruleObjects || !rulePkKey) {
-                            if (!isUndefined(relatedObjectsObject[addedRuleKey])) {
-                                relatedObjectsObject[addedRuleKey] = undefined;
-                            }
-                            return;
-                        }
-                        let value;
-                        if (rulePkKey.startsWith("relatedItem.")) {
-                            value = get(unref(relatedObjectRef), rulePkKey.slice(12));
-                            if (isUndefined(value)) {
+            if (addedRuleKeys.size) {
+                if (!relatedObjectsEffectScopes[objectKey]) {
+                    relatedObjectsEffectScopes[objectKey] = effectScope();
+                }
+                relatedObjectsEffectScopes[objectKey].run(() => {
+                    for (const addedRuleKey of addedRuleKeys) {
+                        const rules = toRef(state.relatedObjectsRules, addedRuleKey);
+                        state.objAndKeyForIdAndRule[objectKey][addedRuleKey] = computed(() => {
+                            const rulePkKey = unref(rules).pkKey || addedRuleKey;
+                            const object = unref(originalObjectRef);
+                            const relatedObject = unref(relatedObjectRef);
+                            return getObjectRelatedByKey(object, relatedObject, rulePkKey);
+                        });
+
+                        state.fkForIdAndRule[objectKey][addedRuleKey] = computed(() => {
+                            const ruleOrder = unref(rules).order;
+                            const relatedObject = unref(relatedObjectRef);
+                            const [objectForGet, key] = unref(state.objAndKeyForIdAndRule[objectKey][addedRuleKey]);
+                            let value = get(objectForGet, key);
+                            if (objectForGet === relatedObject && isUndefined(value)) {
                                 // is the first level an array?
-                                const firstLevelKey = rulePkKey.slice(12).split(".")[0];
-                                const firstLevelItem = get(unref(relatedObjectRef), firstLevelKey);
+                                const firstLevelKey = key.split(".")[0];
+                                const firstLevelItem = get(relatedObject, firstLevelKey);
                                 if (isArray(firstLevelItem)) {
-                                    const restOfKey = rulePkKey.slice(12 + firstLevelKey.length + 1);
+                                    const restOfKey = key.slice(firstLevelKey.length + 1);
                                     value = firstLevelItem.map((e) => get(e, restOfKey)).flat();
                                 }
                             }
-                        } else {
-                            value = get(unref(originalObjectRef), rulePkKey);
-                        }
-                        if (isUndefined(value)) {
-                            if (!isUndefined(relatedObjectsObject[addedRuleKey])) {
-                                relatedObjectsObject[addedRuleKey] = undefined;
-                            }
-                            return;
-                        }
-                        if (isArray(value)) {
-                            // the related list could be sorted differently than the original list.
-                            if (ruleOrder?.length) {
+                            if (isArray(value) && ruleOrder?.length) {
                                 value = value.filter(identity);
                                 const indexById = Object.fromEntries(ruleOrder.map((e, i) => [e, i]));
                                 value.sort((a, b) => {
@@ -135,24 +151,20 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
                                     return aIndex - bIndex;
                                 });
                             }
-                            value = value.map((e) => ruleObjects[e]).filter(identity);
-                        } else {
-                            value = ruleObjects[value];
-                        }
-                        if (!isEqual(value, relatedObjectsObject[addedRuleKey])) {
-                            relatedObjectsObject[addedRuleKey] = value;
-                        }
-                    };
-                    watch(
-                        [toRef(state.relatedObjectsRules, addedRuleKey), originalObjectRef, relatedObjectRef],
-                        relatedObjectsObjectWatchFn,
-                        {
-                            deep: true,
-                            immediate: true,
-                        }
-                    );
-                }
-            });
+                            return value;
+                        });
+
+                        state.relatedObjects[objectKey][addedRuleKey] = computed(() => {
+                            const value = unref(state.fkForIdAndRule[objectKey][addedRuleKey]);
+                            const objects = unref(rules).objects;
+                            if (isArray(value)) {
+                                return value.map((e) => objects[e]).filter(identity);
+                            }
+                            return objects[value];
+                        });
+                    }
+                });
+            }
         }
         state.relatedObjectsWatchRunning = false;
     }
@@ -168,10 +180,7 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
-            [
-                () => Object.keys(state.relatedObjects),
-                () => (state.relatedObjectsRules ? Object.keys(state.relatedObjectsRules) : state.relatedObjectsRules),
-            ],
+            [() => Object.keys(state.relatedObjects), () => Object.keys(state.relatedObjectsRules || {})],
             relatedObjectsWatch,
             { immediate: true }
         );

package/use/listSort.js

@@ -18,7 +18,6 @@ import isUndefined from "lodash-es/isUndefined.js";
 import throttle from "lodash-es/throttle.js";
 import zip from "lodash-es/zip.js";
 import { effectScope, reactive, toRef, unref, watch, computed } from "vue";
-import { deepUnref } from "vue-deepunref";
 
 const collator = new Intl.Collator(undefined, { numeric: true });
 
@@ -132,14 +131,17 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortCriteriaWatch() {
         try {
-            if (!state.orderByRules || !state.orderByRules.filter(identity).length) {
+            if (!state.orderByRules?.length || !state.orderByRules.filter(identity).length) {
                 if (!isEmpty(state.sortCriteria)) {
                     for (const removedKey of Object.keys(state.sortCriteria)) {
                         removeSortCriteria(removedKey);
                     }
                 }
-                assignReactiveObject(state.order, deepUnref(parentState.order));
-                assignReactiveObject(state.objectsInOrder, deepUnref(parentState.objectsInOrder));
+                state.order = [...parentState.order];
+                assignReactiveObject(
+                    state.objectsInOrderRefs,
+                    state.order.map((e) => toRef(parentState.objects, e))
+                );
                 return;
             }
             const { removedKeys, addedKeys } = keyDiff(
@@ -152,9 +154,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
             es.run(() => {
                 for (const addedKey of addedKeys) {
-                    const object = toRef(() => parentState.objects[addedKey]);
-                    const relatedObj = toRef(() => parentState.relatedObjects?.[addedKey]);
-                    const calculatedObj = toRef(() => parentState.calculatedObjects?.[addedKey]);
+                    const object = toRef(parentState.objects, addedKey);
+                    const relatedObj = toRef(parentState.relatedObjects, addedKey);
+                    const calculatedObj = toRef(parentState.calculatedObjects, addedKey);
                     addSortCriteria(object, relatedObj, calculatedObj, addedKey);
                 }
             });
@@ -169,17 +171,15 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortWatch() {
         try {
-            if (!state.orderByRules || !state.orderByRules.length) {
+            if (!state.orderByRules?.length) {
                 state.order = [...parentState.order];
                 assignReactiveObject(
                     state.objectsInOrderRefs,
                     state.order.map((e) => toRef(parentState.objects, e))
                 );
-                3;
                 return;
             }
-
-            let idList = Object.keys(parentState.objects);
+            let idList = [...parentState.order];
             idList.sort((xKey, yKey) => {
                 const xCriteria = state.sortCriteria[xKey];
                 const yCriteria = state.sortCriteria[yKey];
@@ -238,9 +238,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
         watch([toRef(state, "orderByDesc"), toRef(state, "sortCriteria")], throttledSortWatch, {
             deep: true,
         });
-        // we do not need two immediate watches to the same function.
-        watch(() => Object.keys(parentState.objects), sortCriteriaWatch);
-        watch(toRef(state, "orderByRules"), sortCriteriaWatch, {
+        watch([toRef(state, "orderByRules"), toRef(parentState, "order")], sortCriteriaWatch, {
             deep: true,
             immediate: true,
         });

package/utils/relatedCalculatedHelpers.js

@@ -15,3 +15,12 @@ export const getObjectRelatedCalculatedByKey = (obj, relatedObj, calculatedObj,
     }
     return [getObj, getKey];
 };
+
+export const getObjectRelatedByKey = (obj, relatedObj, key) => {
+    let getObj = obj,
+        getKey = key.replace(relatedItemRegex, () => {
+            getObj = relatedObj;
+            return "";
+        });
+    return [getObj, getKey];
+};