@arrai-innovations/reactive-helpers 11.0.0 → 11.0.1

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.1",
     "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/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/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",
@@ -54,14 +55,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 +73,7 @@ export const listSearchStateKeys = [
     "objects",
     "order",
     "objectsInOrder",
+    "objectsInOrderRefs",
     "textSearchRules",
     "textSearchValue",
     "searched",
@@ -84,6 +88,7 @@ export const listSortStateKeys = [
     "orderByRules",
     "order",
     "objectsInOrder",
+    "objectsInOrderRefs",
     "sortCriteria",
     "orderByDesc",
     "sortCriteriaWatchRunning",

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,