@arrai-innovations/reactive-helpers 11.0.1 → 11.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "11.0.1",
+    "version": "11.0.2",
     "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/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/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];
+};