@arrai-innovations/reactive-helpers 11.0.0 → 11.0.2

package/README.md

@@ -523,7 +523,7 @@ const managedList = useList({
     },
 });
 // the state expected of each are all available on the same state.
-console.log(managedList.state.value.objects);
+console.log(managedList.state.objects);
 // managed instances can also be accessed directly.
 console.log(managedList.managed);
 /*
@@ -685,7 +685,7 @@ const managedObject = useObject({
     },
 });
 // the state expected of each are all available on the same state.
-console.log(managedObject.state.value.objects);
+console.log(managedObject.state.objects);
 // managed instances can also be accessed directly.
 console.log(managedObject.managed);
 /*
@@ -727,7 +727,7 @@ const source2 = reactive({ b: 5 });
 
 const a = toRef(target, "a");
 const b = toRef(target, "b");
-const mySum = computed(() => (a.value || 0) + (b.value || 0));
+const mySum = computed(() => (unref(a) || 0) + (unref(b) || 0));
 
 console.log(mySum.value); // 1
 assignReactiveObject(target, source);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "11.0.0",
+    "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/listFilter.spec.js

@@ -154,10 +154,8 @@ describe("use/listFilter", () => {
                 obj: filter.state,
                 prop: "running",
             });
-            const unrefOrder = deepUnref(filter.state.order);
-            const unrefObjectsInOrder = deepUnref(filter.state.objectsInOrder);
-            expect(unrefOrder).toEqual(expectedOrder);
-            expect(unrefObjectsInOrder).toEqual(orderedObjects);
+            expect(filter.state.order).toEqual(expectedOrder);
+            expect(filter.state.objectsInOrder).toEqual(orderedObjects);
         });
     });
     describe("useListFilters accepts args and parentInstances", () => {
@@ -356,4 +354,148 @@ describe("use/listFilter", () => {
             });
         });
     });
+    it("you can use nested useListFilters", async () => {
+        const list = useListInstance({ props: {} });
+
+        function filter1AllowedFilter(object) {
+            return object.has_things && object.has_stuff;
+        }
+
+        function filter2AllowedFilter(object) {
+            return object.has_things && object.has_other_stuff;
+        }
+
+        const filter1 = useListFilter({
+            parentState: list.state,
+            allowedFilter: filter1AllowedFilter,
+        });
+        const filter2 = useListFilter({
+            parentState: filter1.state,
+            allowedFilter: filter2AllowedFilter,
+        });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({});
+        expect(filter1.state.order).toEqual([]);
+        expect(filter2.state.objects).toEqual({});
+        expect(filter2.state.order).toEqual([]);
+        list.addListObject({ id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter1.state.order).toEqual(["1"]);
+        expect(filter2.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["1"]);
+        list.addListObject({ id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false },
+        });
+        expect(filter1.state.order).toEqual(["1", "2"]);
+        expect(filter2.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["1"]);
+        list.addListObject({ id: 3, name: "three", has_things: true, has_stuff: false, has_other_stuff: true });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false },
+        });
+        expect(filter1.state.order).toEqual(["1", "2"]);
+        expect(filter2.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["1"]);
+        list.addListObject({ id: 4, name: "four", has_things: true, has_stuff: false, has_other_stuff: false });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false },
+        });
+        expect(filter1.state.order).toEqual(["1", "2"]);
+        expect(filter2.state.objects).toEqual({
+            1: { id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["1"]);
+        list.state.objects[1].has_stuff = false;
+        list.state.objects[2].has_other_stuff = true;
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter1.state.order).toEqual(["2"]);
+        expect(filter2.state.objects).toEqual({
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["2"]);
+        list.addListObject({ id: 5, name: "five", has_things: true, has_stuff: false, has_other_stuff: true });
+        list.addListObject({ id: 6, name: "six", has_things: true, has_stuff: true, has_other_stuff: false });
+        list.addListObject({ id: 7, name: "seven", has_things: false, has_stuff: true, has_other_stuff: true });
+        list.addListObject({ id: 8, name: "eight", has_things: true, has_stuff: true, has_other_stuff: true });
+        await doAwaitNot({
+            obj: filter1.state,
+            prop: "running",
+        });
+        await doAwaitNot({
+            obj: filter2.state,
+            prop: "running",
+        });
+        expect(filter1.state.objects).toEqual({
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: true },
+            6: { id: 6, name: "six", has_things: true, has_stuff: true, has_other_stuff: false },
+            8: { id: 8, name: "eight", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter1.state.order).toEqual(["2", "6", "8"]);
+        expect(filter2.state.objects).toEqual({
+            2: { id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: true },
+            8: { id: 8, name: "eight", has_things: true, has_stuff: true, has_other_stuff: true },
+        });
+        expect(filter2.state.order).toEqual(["2", "8"]);
+    });
 });

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

@@ -1,3 +1,4 @@
+import { doAwaitNot } from "../../../utils/index.js";
 import { expectErrorToBeNull } from "../expectHelpers.js";
 import flushPromises from "flush-promises";
 import keyBy from "lodash-es/keyBy.js";
@@ -308,6 +309,7 @@ describe("use/listInstance.spec.js", function () {
             expect(listInstance.state.errored).toBe(false);
             expect(listInstance.state.loading).toBe(false);
             expect({ ...listInstance.state.objects }).toEqual(crudListResolvedObjects2);
+            await nextTick();
             await flushPromises();
             expect(listInstance.state.order).toEqual(Object.keys(crudListResolvedObjects2));
             expect(listInstance.state.objectsInOrder).toEqual(Object.values(crudListResolvedObjects2));
@@ -429,7 +431,7 @@ describe("use/listInstance.spec.js", function () {
             expect(fakeId).toBeTruthy();
         });
     });
-    it("computes objectsInOrder and maintains state", () => {
+    it("computes objectsInOrder and maintains state", async () => {
         const crudListResolvedPage3 = [
             {
                 id: 3,
@@ -447,6 +449,7 @@ describe("use/listInstance.spec.js", function () {
                 name: "zxcv",
             },
         ];
+        const crudListResolvedObjects3 = keyBy(crudListResolvedPage3, "id");
         const addObject = {
             id: 4,
             __str__: "yuio",
@@ -467,12 +470,22 @@ describe("use/listInstance.spec.js", function () {
 
         passedPageCallback(crudListResolvedPage3);
         crudListResolve();
+        await doAwaitNot({
+            obj: listInstance.state,
+            prop: "loading",
+        });
+        expect(listInstance.state.objects).toEqual(crudListResolvedObjects3);
+        expect(listInstance.state.order).toEqual(crudListResolvedPage3.map((e) => e.id.toString()));
         expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
         listInstance.addListObject(addObject);
         crudListResolvedPage3.push(addObject);
+        await nextTick();
+        expect(listInstance.state.order).toEqual(crudListResolvedPage3.map((e) => e.id.toString()));
         expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
         listInstance.deleteListObject(8);
         crudListResolvedPage3.splice(1, 1);
+        await nextTick();
+        expect(listInstance.state.order).toEqual(crudListResolvedPage3.map((e) => e.id.toString()));
         expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
     });
 });

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

@@ -107,13 +107,16 @@ describe("use/useListSort", () => {
             const listSort = useListSort({ parentState: listInstance.state, orderByRules });
             // sorts immediately
             expect(listSort.state.order).toEqual(testOrder1);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder1.map((id) => listInstance.state.objects[id]));
             await waitForListSort(listSort);
             listInstance.addListObject(addObject);
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder2);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder2.map((id) => listInstance.state.objects[id]));
             listInstance.deleteListObject(12);
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder3);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder3.map((id) => listInstance.state.objects[id]));
         });
     });
     describe("sortWatch sifts various criteria", () => {
@@ -132,18 +135,22 @@ describe("use/useListSort", () => {
             listSort.state.orderByRules.pop();
             listSort.state.orderByRules.push({ key: "lexical_name", desc: false, localeCompare: true });
             expect(listSort.state.order).toEqual(testOrder1);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder1.map((id) => listInstance.state.objects[id]));
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder2);
             listSort.state.orderByRules.pop();
             listSort.state.orderByRules.push({ key: "organization", desc: true, localeCompare: true });
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder3);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder3.map((id) => listInstance.state.objects[id]));
             listSort.state.orderByRules.pop();
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder4);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder4.map((id) => listInstance.state.objects[id]));
             listSort.state.orderByRules.push({ key: "organization", desc: false, localeCompare: false });
             await waitForListSort(listSort);
             expect(listSort.state.order).toEqual(testOrder2);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder2.map((id) => listInstance.state.objects[id]));
         });
     });
     it("useListSorts & useListInstances", async function () {
@@ -269,13 +276,16 @@ describe("use/useListSort", () => {
         }
         await waitForListSort(listSort);
         expect(listSort.state.order).toEqual(["4", "3", "2", "1"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([4, 3, 2, 1]);
         orderByRules[0].key = "relatedItemName.name";
         await waitForListSort(listSort);
         expect(listSort.state.order).toEqual(["1", "2", "3", "4"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 2, 3, 4]);
         orderByRules[0].key = "relatedItemName.sameValue";
         orderByRules[1] = { key: "calculatedItem.calculatedItemName", desc: false, localeCompare: false };
         await waitForListSort(listSort);
         expect(listSort.state.order).toEqual(["4", "3", "2", "1"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([4, 3, 2, 1]);
     });
     describe("useListSort/sortThrottleWait", () => {
         it("respects throttle time prior to triggering", async () => {
@@ -301,25 +311,32 @@ describe("use/useListSort", () => {
 
             const listSort = useListSort({ parentState: listInstance.state, orderByRules, sortThrottleWait });
             expect(listSort.state.order).toEqual(testOrder1);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder1.map((id) => listInstance.state.objects[id]));
 
             // wait for the original throttle to finish
             await doAwaitTimeout(250);
 
             expect(listSort.state.order).toEqual(testOrder2);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder2.map((id) => listInstance.state.objects[id]));
             listInstance.addListObject(addObject);
             expect(listSort.state.order).toEqual(testOrder2);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder2.map((id) => listInstance.state.objects[id]));
             // trigger the leading edge of the throttle
             await doAwaitTimeout(10);
             expect(listSort.state.order).toEqual(testOrder3);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder3.map((id) => listInstance.state.objects[id]));
             // trigger again before the 200ms throttle
             listInstance.deleteListObject(12);
             expect(listSort.state.order).toEqual(testOrder3);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder3.map((id) => listInstance.state.objects[id]));
             // this should trigger before the 200ms throttle
             await doAwaitTimeout(100);
             expect(listSort.state.order).toEqual(testOrder3);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder3.map((id) => listInstance.state.objects[id]));
             // this should trigger after the 200ms throttle
             await doAwaitTimeout(200);
             expect(listSort.state.order).toEqual(testOrder4);
+            expect(listSort.state.objectsInOrder).toEqual(testOrder4.map((id) => listInstance.state.objects[id]));
         });
     });
 });

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

@@ -4,6 +4,7 @@ import {
     AssignReactiveObjectError,
 } from "../../../utils/assignReactiveObject.js";
 import { computed, EffectScope, effectScope, reactive, toRef, unref } from "vue";
+import { deepUnref } from "vue-deepunref";
 
 describe("utils/assignReactiveObject", function () {
     describe("assignReactiveObject", function () {
@@ -183,4 +184,46 @@ describe("utils/assignReactiveObject", function () {
         });
         es.stop();
     });
+    describe("should propagate changes when used to chain multiple levels of reactivity", function () {
+        it("array", function () {
+            // assign reactive object will make lists of refs for each layer, causing refs to refs to refs
+            // this isn't great but consumers should use other methods to avoid this
+            const target = reactive({
+                a: [1, 2, 3],
+            });
+            const source = reactive({
+                a: [4, 5, 6],
+            });
+            const source2 = reactive({
+                a: [7, 8, 9],
+            });
+            expect(source.a).toEqual([4, 5, 6]);
+            assignReactiveObject(target.a, source.a);
+            expect(source.a).toEqual([4, 5, 6]);
+            expect(deepUnref(target.a)).toEqual([4, 5, 6]);
+            assignReactiveObject(source.a, source2.a);
+            expect(source2.a).toEqual([7, 8, 9]);
+            expect(deepUnref(source.a)).toEqual([7, 8, 9]);
+            expect(deepUnref(deepUnref(target.a))).toEqual([7, 8, 9]);
+        });
+        it("object", function () {
+            const target = reactive({
+                a: { b: 1, c: 2, d: 3 },
+            });
+            const source = reactive({
+                a: { b: 4, c: 5, d: 6 },
+            });
+            const source2 = reactive({
+                a: { b: 7, c: 8, d: 9 },
+            });
+            expect(source.a).toEqual({ b: 4, c: 5, d: 6 });
+            assignReactiveObject(target.a, source.a);
+            expect(target.a).toEqual({ b: 4, c: 5, d: 6 });
+            expect(source.a).toEqual({ b: 4, c: 5, d: 6 });
+            assignReactiveObject(source.a, source2.a);
+            expect(source2.a).toEqual({ b: 7, c: 8, d: 9 });
+            expect(source.a).toEqual({ b: 7, c: 8, d: 9 });
+            expect(target.a).toEqual({ b: 7, c: 8, d: 9 });
+        });
+    });
 });

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/listFilter.js

@@ -11,8 +11,6 @@ import {
 } from "./listKeys.js";
 import { effectScope, reactive, toRef, watch, unref, computed, nextTick } from "vue";
 
-3;
-
 const parentStateKeys = difference(
     new Set([
         ...listInstanceStateKeys,
@@ -37,6 +35,9 @@ const inResults = (state, object, relatedObject, calculatedObject) => {
     const unrefObject = unref(object);
     const unrefRelatedObject = unref(relatedObject);
     const unrefCalculatedObject = unref(calculatedObject);
+    if (!unrefObject) {
+        return false;
+    }
     return !(
         (state.allowedFilter && !state.allowedFilter(unrefObject, unrefRelatedObject, unrefCalculatedObject)) ||
         (state.excludedFilter && state.excludedFilter(unrefObject, unrefRelatedObject, unrefCalculatedObject))
@@ -45,13 +46,14 @@ const inResults = (state, object, relatedObject, calculatedObject) => {
 
 export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
     const state = reactive({
+        allowedFilter,
+        excludedFilter,
         inResults: {},
         objects: {},
         objectsInOrder: [],
-        order: [],
-        allowedFilter,
-        excludedFilter,
+        objectsInOrderRefs: [],
         objectsWatchRunning: undefined,
+        order: [],
         resultsWatchRunning: undefined,
         running: undefined,
     });
@@ -104,11 +106,7 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
     };
 
     const resultsWatch = async () => {
-        if (parentState.running) {
-            return;
-        }
         state.resultsWatchRunning = true;
-        await nextTick();
         if (state.allowedFilter || state.excludedFilter) {
             assignReactiveObject(
                 state.objects,
@@ -119,21 +117,37 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
                 )
             );
         }
-
-        nextTick().then(() => {
-            state.resultsWatchRunning = false;
-        });
+        await nextTick();
+        // the watches don't necessarily run in the order we expect, or at all
+        orderWatch();
+        await nextTick();
+        state.resultsWatchRunning = false;
     };
 
     const orderWatch = () => {
-        let desiredOrder = parentState.order.filter((id) => !!state.objects[id]),
-            desiredObjectsInOrder = desiredOrder.map((id) => toRef(state.objects, id));
+        let desiredOrder = parentState.order.filter((id) => !!state.objects[id]);
         if (!state.allowedFilter && !state.excludedFilter) {
             desiredOrder = parentState.order;
-            desiredObjectsInOrder = parentState.objectsInOrder;
         }
-        assignReactiveObject(state.objectsInOrder, desiredObjectsInOrder);
-        assignReactiveObject(state.order, desiredOrder);
+        // order is primitives, references to the parent state order doesn't make sense
+        const entries = Object.entries(desiredOrder);
+        entries.reverse();
+        if (entries.length !== state.order.length) {
+            state.order.length = entries.length;
+            state.objectsInOrderRefs.length = entries.length;
+        }
+        for (const [index, id] of entries) {
+            if (state.order[index] !== id) {
+                state.order[index] = id;
+            }
+            if (unref(toRef(state.objectsInOrderRefs, index)) !== unref(toRef(state.objects, id))) {
+                state.objectsInOrderRefs[index] = toRef(state.objects, id);
+            }
+        }
+        assignReactiveObject(
+            state.objectsInOrderRefs,
+            desiredOrder.map((id) => toRef(state.objects, id))
+        );
     };
 
     es.run(() => {
@@ -148,11 +162,17 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
         watch(toRef(state, "inResults"), resultsWatch, { deep: true });
 
         watch(toRef(parentState, "order"), orderWatch, { deep: true, immediate: true });
+        state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((e) => unref(e)));
 
         watch(
-            [() => Object.keys(parentState.objects), toRef(state, "allowedFilter"), toRef(state, "excludedFilter")],
+            [
+                toRef(parentState, "objects"),
+                toRef(state, "allowedFilter"),
+                toRef(state, "excludedFilter"),
+                toRef(parentState, "running"),
+            ],
             objectsWatch,
-            { immediate: true }
+            { immediate: true, deep: true }
         );
     });
     return {

package/use/listInstance.js

@@ -2,7 +2,7 @@ import { getListCrud } from "../config/listCrud.js";
 import { assignReactiveObject } from "../utils/assignReactiveObject.js";
 import { getFakeId } from "../utils/getFakeId.js";
 import inspect from "browser-util-inspect";
-import { computed, effectScope, reactive, toRef } from "vue";
+import { effectScope, reactive, toRef, watch, computed, unref } from "vue";
 
 export class ListError extends Error {
     constructor(message, code) {
@@ -32,6 +32,7 @@ export class ListError extends Error {
  * @param {Object.<string, ListInstanceOptions>} listInstanceArgs - each desired list instance options, keyed by an instance name.
  * @returns {Object.<string, ListInstance>} - each list instance, keyed by the instance name.
  */
+
 /* eslint-enable jsdoc/check-types */
 export function useListInstances(listInstanceArgs) {
     const instances = {};
@@ -119,6 +120,10 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
                   }
                 : Reflect.getOwnPropertyDescriptor(target, p); // we can't report target properties as non-existent re: proxy invariants
         },
+        // things introspect us thing we are a map, we need to pretend to be a object
+        getPrototypeOf() {
+            return Object.prototype;
+        },
     });
     // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
     const state = reactive({
@@ -132,6 +137,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         loading: undefined,
         errored: false,
         error: null,
+        order: [],
+        objectsInOrder: [],
+        objectsInOrderRefs: [],
     });
     const es = effectScope();
 
@@ -249,8 +257,23 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         state.error = null;
     }
 
-    state.objectsInOrder = computed(() => Object.values(state.objects));
-    state.order = computed(() => Object.keys(state.objects));
+    es.run(() => {
+        watch(
+            toRef(state, "objects"),
+            () => {
+                assignReactiveObject(
+                    state.objectsInOrderRefs,
+                    Object.keys(state.objects).map((id) => toRef(state.objects, id))
+                );
+            },
+            {
+                immediate: true,
+                deep: true,
+            }
+        );
+        state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((ref) => unref(ref)));
+        state.order = computed(() => Object.keys(state.objects));
+    });
 
     const returnedObject = {
         state,

package/use/listKeys.js

@@ -7,6 +7,7 @@ export const listInstanceStateKeys = [
     "errored",
     "error",
     "objectsInOrder",
+    "objectsInOrderRefs",
     "order",
     // when paged
     "totalRecords",
@@ -41,6 +42,8 @@ export const listRelatedStateKeys = [
     "relatedObjectsWatchRunning",
     "relatedObjectsParentStateObjectsWatchRunning",
     "running",
+    "objAndKeyForIdAndRule",
+    "fkForIdAndRule",
 ];
 export const listRelatedFunctions = [];
 
@@ -54,14 +57,16 @@ export const listCalculatedStateKeys = [
 export const listCalculatedFunctions = [];
 
 export const listFilterStateKeys = [
-    "objects",
-    "order",
-    "objectsInOrder",
     "allowedFilter",
     "excludedFilter",
-    "running",
+    "inResults",
+    "objects",
+    "objectsInOrder",
+    "objectsInOrderRefs",
     "objectsWatchRunning",
+    "order",
     "resultsWatchRunning",
+    "running",
 ];
 export const listFilterFunctions = [];
 
@@ -70,6 +75,7 @@ export const listSearchStateKeys = [
     "objects",
     "order",
     "objectsInOrder",
+    "objectsInOrderRefs",
     "textSearchRules",
     "textSearchValue",
     "searched",
@@ -84,6 +90,7 @@ export const listSortStateKeys = [
     "orderByRules",
     "order",
     "objectsInOrder",
+    "objectsInOrderRefs",
     "sortCriteria",
     "orderByDesc",
     "sortCriteriaWatchRunning",

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/listSearch.js

@@ -81,6 +81,7 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
     const state = reactive({
         objects: {},
         objectsInOrder: [],
+        objectsInOrderRefs: [],
         order: [],
         textSearchRules: toRef(props, "textSearchRules"),
         textSearchValue: toRef(props, "textSearchValue"),
@@ -270,14 +271,11 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
     };
 
     const updateOrder = () => {
+        state.order = parentState.order.filter((id) => !!state.objects[id]);
         assignReactiveObject(
-            state.objectsInOrder,
+            state.objectsInOrderRefs,
             parentState.order.filter((id) => !!state.objects[id]).map((id) => toRef(state.objects, id))
         );
-        assignReactiveObject(
-            state.order,
-            parentState.order.filter((id) => !!state.objects[id])
-        );
     };
 
     let firstIndexWasCleared = false;
@@ -309,6 +307,7 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
         state.running = computed(() => {
             return loadingCombine(parentState.running, state.newSearchComputeds, textSearchIndex.state.running);
         });
+        state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((ref) => unref(ref)));
 
         watch([() => Object.keys(parentState.objects), toRef(state.textSearchRules)], makeComputeds, {
             immediate: true,

package/use/listSort.js

@@ -9,7 +9,6 @@ import {
     listSearchStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
-import cloneDeep from "lodash-es/cloneDeep.js";
 import get from "lodash-es/get.js";
 import identity from "lodash-es/identity.js";
 import isEmpty from "lodash-es/isEmpty.js";
@@ -19,6 +18,7 @@ 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 });
 
@@ -62,6 +62,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
     const state = reactive({
         orderByRules,
         order: [],
+        objectsInOrderRefs: [],
         objectsInOrder: [],
         sortCriteria: {},
         orderByDesc: [],
@@ -137,8 +138,8 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
                         removeSortCriteria(removedKey);
                     }
                 }
-                assignReactiveObject(state.order, cloneDeep(parentState.order));
-                assignReactiveObject(state.objectsInOrder, cloneDeep(parentState.objectsInOrder));
+                assignReactiveObject(state.order, deepUnref(parentState.order));
+                assignReactiveObject(state.objectsInOrder, deepUnref(parentState.objectsInOrder));
                 return;
             }
             const { removedKeys, addedKeys } = keyDiff(
@@ -169,8 +170,12 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
     function sortWatch() {
         try {
             if (!state.orderByRules || !state.orderByRules.length) {
-                assignReactiveObject(state.order, cloneDeep(parentState.order));
-                assignReactiveObject(state.objectsInOrder, cloneDeep(parentState.objectsInOrder));
+                state.order = [...parentState.order];
+                assignReactiveObject(
+                    state.objectsInOrderRefs,
+                    state.order.map((e) => toRef(parentState.objects, e))
+                );
+                3;
                 return;
             }
 
@@ -210,8 +215,11 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
                 }
                 return 0;
             });
-            assignReactiveObject(state.order, idList);
-            assignReactiveObject(state.objectsInOrder, idList.map((e) => parentState.objects[e]).filter(identity));
+            state.order = idList;
+            assignReactiveObject(
+                state.objectsInOrderRefs,
+                idList.map((e) => toRef(parentState.objects, e))
+            );
         } finally {
             state.sortWatchRunning = false;
             state.outstandingEffects = false;
@@ -243,6 +251,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
             watchSentinelRefs: [toRef(state, "sortCriteriaWatchRunning"), toRef(state, "sortWatchRunning")],
         });
 
+        state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((e) => unref(e)));
         state.sortRunning = computed(() => loadingCombine(watchesRunning.state.running, state.outstandingEffects));
         state.running = computed(() =>
             loadingCombine(watchesRunning.state.running, state.outstandingEffects, parentState.running)

package/use/watchesRunning.js

@@ -22,7 +22,7 @@ export function useWatchesRunning({ triggerRefs, watchSentinelRefs }) {
             }
         );
         state.running = computed(() => {
-            const values = watchSentinelRefs.map((ref) => ref.value);
+            const values = watchSentinelRefs.map((ref) => unref(ref));
             return loadingCombine(values);
         });
     });

package/utils/assignReactiveObject.js

@@ -221,7 +221,7 @@ export function trimReactiveObject(target, source, exclude, removedKeys = null)
 }
 
 function checkIfReversed(target, source) {
-    if (target.length !== source.length) {
+    if (target.length !== source.length || target.length === 0) {
         return false;
     }
     let t = target.length - 1,

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];
+};