@arrai-innovations/reactive-helpers 14.0.1 → 14.1.0

package/package.json

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

package/tests/unit/utils/assignReactiveObject.spec.js

@@ -2,6 +2,8 @@ import {
     addOrUpdateReactiveObject,
     assignReactiveObject,
     AssignReactiveObjectError,
+    assignReactiveObjectDeep,
+    assignReactiveArray,
 } from "../../../utils/assignReactiveObject.js";
 import { computed, EffectScope, effectScope, reactive, toRef, unref } from "vue";
 import { deepUnref } from "vue-deepunref";
@@ -164,6 +166,280 @@ describe("utils/assignReactiveObject", function () {
                 );
             });
         });
+        it("should update nested Sets within reactive objects", async () => {
+            const target = reactive({
+                setA: new Set([1, 2, 3]),
+                value: 10,
+            });
+            const source = reactive({
+                setA: new Set([3, 4, 5]),
+                value: 20,
+            });
+
+            const es = effectScope();
+            let computedSum;
+            es.run(() => {
+                computedSum = computed(() => {
+                    let sum = 0;
+                    for (const num of target.setA) {
+                        sum += num;
+                    }
+                    return sum + target.value;
+                });
+            });
+
+            try {
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(16);
+
+                assignReactiveObject(target, source);
+
+                expect(Array.from(target.setA)).toEqual([3, 4, 5]);
+                expect(target.value).toBe(20);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(32);
+
+                source.setA.add(6);
+                expect(target.setA.has(6)).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(38);
+
+                source.value = 25;
+                expect(target.value).toBe(25);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(43);
+            } finally {
+                es.stop();
+            }
+        });
+        it("should update nested Maps within reactive objects", () => {
+            const target = reactive({
+                mapA: new Map([
+                    ["x", 1],
+                    ["y", 2],
+                ]),
+                value: 5,
+            });
+            const source = reactive({
+                mapA: new Map([
+                    ["y", 3],
+                    ["z", 4],
+                ]),
+                value: 15,
+            });
+
+            const es = effectScope();
+            let computedSum;
+            es.run(() => {
+                computedSum = computed(() => {
+                    let sum = 0;
+                    for (const val of target.mapA.values()) {
+                        sum += val;
+                    }
+                    return sum + target.value;
+                });
+            });
+
+            try {
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(8);
+
+                assignReactiveObject(target, source);
+
+                expect(Array.from(target.mapA.entries())).toEqual([
+                    ["y", 3],
+                    ["z", 4],
+                ]);
+                expect(target.value).toBe(15);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(22);
+
+                source.mapA.set("w", 5);
+                expect(target.mapA.has("w")).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(27);
+
+                source.value = 20;
+                expect(target.value).toBe(20);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(32);
+            } finally {
+                es.stop();
+            }
+        });
+        it("should update Sets within arrays", () => {
+            const target = reactive([new Set([1, 2]), new Set([3, 4])]);
+            const source = reactive([new Set([2, 3]), new Set([4, 5])]);
+
+            const es = effectScope();
+            let computedSum;
+            es.run(() => {
+                computedSum = computed(() => {
+                    return target.reduce((sum, set) => {
+                        for (const num of set) {
+                            sum += num;
+                        }
+                        return sum;
+                    }, 0);
+                });
+            });
+
+            try {
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(10);
+
+                assignReactiveObject(target, source);
+
+                expect(target.length).toBe(2);
+                expect(Array.from(target[0])).toEqual([2, 3]);
+                expect(Array.from(target[1])).toEqual([4, 5]);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(14);
+
+                source[0].add(6);
+                expect(target[0].has(6)).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(20);
+
+                source[1].delete(4);
+                expect(target[1].has(4)).toBe(false);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(16);
+            } finally {
+                es.stop();
+            }
+        });
+        it("should update Maps within arrays", () => {
+            const target = reactive([
+                new Map([
+                    ["a", 1],
+                    ["b", 2],
+                ]),
+                new Map([["c", 3]]),
+            ]);
+            const source = reactive([
+                new Map([
+                    ["a", 2],
+                    ["d", 4],
+                ]),
+                new Map([
+                    ["c", 3],
+                    ["e", 5],
+                ]),
+            ]);
+
+            const es = effectScope();
+            let computedSum;
+            es.run(() => {
+                computedSum = computed(() => {
+                    return target.reduce((sum, map) => {
+                        for (const val of map.values()) {
+                            sum += val;
+                        }
+                        return sum;
+                    }, 0);
+                });
+            });
+
+            try {
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(6);
+
+                assignReactiveObject(target, source);
+
+                expect(target.length).toBe(2);
+                expect(Array.from(target[0].entries())).toEqual([
+                    ["a", 2],
+                    ["d", 4],
+                ]);
+                expect(Array.from(target[1].entries())).toEqual([
+                    ["c", 3],
+                    ["e", 5],
+                ]);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(14);
+
+                source[0].set("f", 6);
+                expect(target[0].has("f")).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(20);
+
+                source[1].delete("c");
+                expect(target[1].has("c")).toBe(false);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(17);
+            } finally {
+                es.stop();
+            }
+        });
+    });
+    describe("assignReactiveObjectDeep", () => {
+        it("should recursively assign nested Sets and Maps", () => {
+            const target = reactive({
+                level1: {
+                    set: new Set([1]),
+                    map: new Map([["a", 1]]),
+                    level2: {
+                        array: [new Set([2])],
+                        object: {
+                            map: new Map([["b", 2]]),
+                        },
+                    },
+                },
+            });
+
+            const source = reactive({
+                level1: {
+                    set: new Set([3]),
+                    map: new Map([["a", 3]]),
+                    level2: {
+                        array: [new Set([4])],
+                        object: {
+                            map: new Map([["b", 4]]),
+                        },
+                    },
+                },
+            });
+
+            const es = effectScope();
+            let computedSum;
+            es.run(() => {
+                computedSum = computed(() => {
+                    let sum = 0;
+                    for (const num of target.level1.set) sum += num;
+                    for (const val of target.level1.map.values()) sum += val;
+                    for (const num of target.level1.level2.array[0]) sum += num;
+                    for (const val of target.level1.level2.object.map.values()) sum += val;
+                    return sum;
+                });
+            });
+
+            try {
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(6);
+
+                assignReactiveObjectDeep(target, source);
+
+                expect(Array.from(target.level1.set)).toEqual([3]);
+                expect(Array.from(target.level1.map.entries())).toEqual([["a", 3]]);
+                expect(Array.from(target.level1.level2.array[0])).toEqual([4]);
+                expect(Array.from(target.level1.level2.object.map.entries())).toEqual([["b", 4]]);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(14);
+
+                source.level1.set.add(5);
+                expect(target.level1.set.has(5)).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(19);
+
+                source.level1.level2.object.map.set("c", 6);
+                expect(target.level1.level2.object.map.has("c")).toBe(true);
+                // @ts-ignore - computedSum.value won't be undefined, it is calculated immediately as required
+                expect(computedSum.value).toBe(25);
+            } finally {
+                es.stop();
+            }
+        });
     });
     it("should work as in the example for the readme", function () {
         const es = new EffectScope();
@@ -234,4 +510,84 @@ describe("utils/assignReactiveObject", function () {
             expect(target.a).toEqual({ b: 7, c: 8, d: 9 });
         });
     });
+    describe("assignReactiveArray", () => {
+        it("should assign values from source to target array", () => {
+            const target = reactive([1, 2, 3]);
+            const source = reactive([4, 5, 6]);
+
+            const didAnything = assignReactiveArray(target, source);
+            expect(didAnything).toBe(true);
+
+            // Unref the elements for comparison
+            const unrefTarget = target.map(unref);
+            expect(unrefTarget).toEqual([4, 5, 6]);
+        });
+
+        it("should handle source array longer than target", () => {
+            const target = reactive([1, 2]);
+            const source = reactive([3, 4, 5]);
+
+            assignReactiveArray(target, source);
+
+            const unrefTarget = target.map(unref);
+            expect(unrefTarget).toEqual([3, 4, 5]);
+        });
+
+        it("should handle source array shorter than target", () => {
+            const target = reactive([1, 2, 3]);
+            const source = reactive([4]);
+
+            assignReactiveArray(target, source);
+
+            const unrefTarget = target.map(unref);
+            expect(unrefTarget).toEqual([4]);
+        });
+
+        it("should not create reactive links between array elements", () => {
+            const target = reactive([{ val: 1 }, { val: 2 }]);
+            const source = reactive([{ val: 3 }, { val: 4 }]);
+
+            assignReactiveArray(target, source);
+
+            const unrefTarget = target.map(unref);
+            expect(unrefTarget).toEqual([{ val: 3 }, { val: 4 }]);
+
+            // Modify source
+            source[0].val = 5;
+
+            // Since the elements are refs to source, target should reflect changes
+            expect(unref(target[0]).val).toBe(5);
+        });
+
+        it("should reverse the target array if it matches the reversed source", () => {
+            const target = reactive([1, 2, 3]);
+            const source = reactive([3, 2, 1]);
+
+            const didAnything = assignReactiveArray(target, source);
+            expect(didAnything).toBe(true);
+
+            const unrefTarget = target.map(unref);
+            expect(unrefTarget).toEqual([3, 2, 1]);
+        });
+
+        it("should handle nested arrays and objects", () => {
+            const target = reactive([[1], [2], [3]]);
+            const source = reactive([[4], [5], [6]]);
+
+            assignReactiveArray(target, source);
+
+            const unrefTarget = target.map(unref).map((item) => (Array.isArray(item) ? item.map(unref) : item));
+            expect(unrefTarget).toEqual([[4], [5], [6]]);
+        });
+
+        it("should handle nested arrays and objects with different lengths", () => {
+            const target = reactive([[1], [2], [3]]);
+            const source = reactive([[4], [5]]);
+
+            assignReactiveArray(target, source);
+
+            const unrefTarget = target.map(unref).map((item) => (Array.isArray(item) ? item.map(unref) : item));
+            expect(unrefTarget).toEqual([[4], [5]]);
+        });
+    });
 });

package/utils/assignReactiveObject.js

@@ -2,9 +2,10 @@ import { keyDiff } from "./keyDiff.js";
 import inspect from "browser-util-inspect";
 import isArray from "lodash-es/isArray.js";
 import isObject from "lodash-es/isObject.js";
-import isObjectLike from "lodash-es/isObjectLike.js";
 import { isReactive, isRef, toRef, unref } from "vue";
 import isSet from "lodash-es/isSet.js";
+import isMap from "lodash-es/isMap.js";
+import isPlainObject from "lodash-es/isPlainObject.js";
 
 /**
  * Reactive object assignment utilities.
@@ -100,16 +101,20 @@ function reactiveReplaceKeys(target, source, keys, exclude) {
     let didAnything = false;
     for (const key of keys) {
         if (!exclude?.includes(key)) {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (isSet(sourceValue) || isMap(sourceValue)) {
+                if (targetValue === sourceValue) {
+                    continue;
+                }
+                target[key] = sourceValue;
+                didAnything = true;
+            }
             if (targetIsReactive && sourceIsReactive) {
                 const targetPropRaw = unref(toRef(target, key));
-                // if they are object like  we can see if the values are the same
-                if (isObjectLike(targetPropRaw)) {
-                    const sourcePropRaw = unref(toRef(source, key));
-                    if (isObjectLike(sourcePropRaw)) {
-                        if (targetPropRaw === sourcePropRaw) {
-                            continue;
-                        }
-                    }
+                const sourcePropRaw = unref(toRef(source, key));
+                if (targetPropRaw === sourcePropRaw) {
+                    continue;
                 }
                 target[key] = toRef(source, key);
                 didAnything = true;
@@ -348,28 +353,37 @@ export function assignReactiveObject(target, source, exclude) {
  * @returns {boolean} True if any keys were added, updated, or removed, false otherwise.
  */
 function recursiveInner(target, source, exclude, addedKeys, sameKeys, path, fn) {
+    let didAnything = false;
     const wasAdded = addReactiveObject(target, source, exclude, addedKeys);
-    const keysForRecurse = [];
-    const keysForReplace = [];
+    didAnything = didAnything || wasAdded;
     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);
+            const sourceValue = source[key];
+            const targetValue = target[key];
+
+            if (isSet(sourceValue) || isMap(sourceValue)) {
+                if (targetValue !== sourceValue) {
+                    target[key] = sourceValue;
+                    didAnything = true;
+                }
+            } else if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
+                const nextLevelExclude = exclude
+                    ?.filter((excludeKey) => !excludeKey.startsWith(path))
+                    .map((excludeKey) => excludeKey.replace(path, ""));
+                const nextPath = `${path}.${key}`;
+                const didRecurse = fn(targetValue, sourceValue, nextLevelExclude, nextPath);
+                didAnything = didAnything || didRecurse;
+            } else if (isArray(sourceValue) && isArray(targetValue)) {
+                const didAssignArray = assignReactiveArray(targetValue, sourceValue);
+                didAnything = didAnything || didAssignArray;
+            } else if (targetValue !== sourceValue) {
+                // Assign other types directly
+                target[key] = sourceValue;
+                didAnything = true;
             }
         }
     }
-    const wasReplaced = 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}`;
-        fn(target[key], source[key], nextLevelExclude, nextPath);
-    }
-    return wasAdded || wasReplaced;
+    return didAnything;
 }
 
 /**