@arrai-innovations/reactive-helpers 2.5.2 → 2.6.0

package/package.json

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

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

@@ -1,8 +1,8 @@
-import { expectErrorToBeNull } from "../expectHelpers";
-import { isReactive, nextTick, reactive } from "vue";
-import { keyBy } from "lodash";
 import flushPromises from "flush-promises";
+import { keyBy } from "lodash";
 import { inspect } from "util";
+import { isReactive, nextTick, reactive } from "vue";
+import { expectErrorToBeNull } from "../expectHelpers";
 
 afterAll(() => {
     jest.restoreAllMocks();
@@ -98,7 +98,7 @@ describe("use/listInstance.spec.js", function () {
             expectErrorToBeNull(listInstance.state.error);
             expect(listInstance.state.errored).toBe(false);
             expect(listInstance.state.loading).toBe(true);
-            expect({ ...listInstance.state.object }).toEqual({});
+            expect({ ...listInstance.state.objects }).toEqual({});
 
             await nextTick();
 
@@ -196,7 +196,7 @@ describe("use/listInstance.spec.js", function () {
             expectErrorToBeNull(listInstance.state.error);
             expect(listInstance.state.errored).toBe(false);
             expect(listInstance.state.loading).toBe(true);
-            expect({ ...listInstance.state.object }).toEqual({});
+            expect({ ...listInstance.state.objects }).toEqual({});
 
             await nextTick();
 
@@ -250,7 +250,7 @@ describe("use/listInstance.spec.js", function () {
             expectErrorToBeNull(listInstance.state.error);
             expect(listInstance.state.errored).toBe(false);
             expect(listInstance.state.loading).toBe(true);
-            expect({ ...listInstance.state.object }).toEqual({});
+            expect({ ...listInstance.state.objects }).toEqual({});
 
             await nextTick();
 
@@ -285,6 +285,58 @@ describe("use/listInstance.spec.js", function () {
             });
             expect(globalList).toHaveBeenCalledTimes(1);
         });
+        it("clearList should empty the list", async function () {
+            const listArgs = reactive({
+                user: 1,
+            });
+            const retrieveArgs = reactive({
+                fields,
+            });
+            const listInstance = useListInstance({
+                listArgs,
+                retrieveArgs,
+            });
+            let crudListResolve;
+            const crudListPromise = new Promise((resolve) => {
+                crudListResolve = resolve;
+            });
+            let passedPageCallback;
+            globalList.mockImplementation(({ pageCallback }) => {
+                passedPageCallback = pageCallback;
+                return crudListPromise;
+            });
+            const liListResolve = listInstance.list();
+            passedPageCallback(crudListResolvedPage1);
+            passedPageCallback(crudListResolvedPage2);
+            crudListResolve();
+            await flushPromises();
+
+            await expect(liListResolve).resolves.toBe(true);
+
+            expectErrorToBeNull(listInstance.state.error);
+            expect(listInstance.state.errored).toBe(false);
+            expect(listInstance.state.loading).toBe(false);
+            expect({ ...listInstance.state.objects }).toEqual(crudListResolvedObjects);
+            await flushPromises();
+            expect(listInstance.state.order).toEqual(Object.keys(crudListResolvedObjects));
+            expect(listInstance.state.objectsInOrder).toEqual(Object.values(crudListResolvedObjects));
+            expect(globalList).toHaveBeenCalledWith({
+                crudArgs: { stream: "test_stream" },
+                listArgs: { user: 1 },
+                retrieveArgs: { fields: fields },
+                pageCallback: passedPageCallback,
+            });
+            expect(globalList).toHaveBeenCalledTimes(1);
+
+            listInstance.clearList();
+            expectErrorToBeNull(listInstance.state.error);
+            expect(listInstance.state.errored).toBe(false);
+            expect(listInstance.state.loading).toBe(false);
+            expect({ ...listInstance.state.objects }).toEqual({});
+            await flushPromises();
+            expect(listInstance.state.order).toEqual([]);
+            expect(listInstance.state.objectsInOrder).toEqual([]);
+        });
     });
     it("useListInstances", async function () {
         const listInstanceA = useListInstance({

package/use/listInstance.js

@@ -1,8 +1,8 @@
+import inspect from "browser-util-inspect";
 import { cloneDeep } from "lodash";
 import { computed, effectScope, reactive } from "vue";
 import { assignReactiveObject } from "../utils/assignReactiveObject";
 import { getFakeId } from "../utils/getFakeId";
-import inspect from "browser-util-inspect";
 
 export class ListError extends Error {
     constructor(message, code) {
@@ -31,6 +31,40 @@ export function useListInstances(listInstanceArgs) {
 }
 
 export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} }) {
+    // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
+    const _objectsMap = new Map();
+    // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
+    const _objectsProxy = new Proxy(_objectsMap, {
+        get(target, prop) {
+            return target.get(prop); // map's get not Reflect.get
+        },
+        has(target, prop) {
+            return target.has(prop); // map's has not Reflect.has
+        },
+        set(target, prop, value) {
+            target.set(prop, value); // map.set() returns the map, we don't need that
+            return true;
+        },
+        ownKeys(target) {
+            return [...target.keys()]; // map.keys() returns an iterator, we need an array
+        },
+        deleteProperty(target, p) {
+            target.delete(p); // map.delete() returns false if the key didn't exist
+            return true; // objects return true regardless of whether the property existed
+        },
+        getOwnPropertyDescriptor(target, p) {
+            const value = target.get(p);
+            return value
+                ? {
+                      configurable: true,
+                      enumerable: true,
+                      value,
+                      writable: true,
+                  }
+                : Reflect.getOwnPropertyDescriptor(target, p); // we can't report target properties as non-existent re: proxy invariants
+        },
+    });
+    // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
     const state = reactive({
         crud: {
             args: {},
@@ -38,11 +72,10 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
         },
         retrieveArgs,
         listArgs,
-        objects: {},
+        objects: _objectsProxy,
         loading: undefined,
         errored: false,
         error: null,
-        order: [],
     });
     // prevent linking of all instances to the same default .args object
     Object.assign(state.crud, cloneDeep(defaultCrud));
@@ -110,10 +143,7 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
         if (object.id in state.objects) {
             throw new ListError(`addListObject: list already has object for id: ${inspect(object.id)}`, "duplicate-id");
         }
-        state.objects[object.id] = {};
-        // objects keys are always strings.
-        state.order.push(`${object.id}`);
-        assignReactiveObject(state.objects[object.id], object);
+        state.objects[object.id] = object;
     }
 
     function updateListObject(object) {
@@ -136,16 +166,12 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
                 "missing-object"
             );
         }
-        // objects keys are always strings.
-        state.order.splice(state.order.indexOf(`${objectId}`), 1);
         delete state.objects[objectId];
     }
 
     function clearList() {
-        state.order.splice(0);
-        for (const item in state.objects) {
-            delete state.objects[item];
-        }
+        assignReactiveObject(state.objects, {});
+        clearError();
     }
 
     function ourGetFakeId() {
@@ -160,7 +186,8 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
     const es = effectScope();
 
     es.run(() => {
-        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
+        state.objectsInOrder = computed(() => Object.values(state.objects));
+        state.order = computed(() => Object.keys(state.objects));
     });
 
     const returnedObject = {

package/use/listSort.js

@@ -105,17 +105,12 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortWatch() {
         if (!state.orderByRules || !state.orderByRules.length) {
-            const serverOrderObjectsInOrder = parentState.order.map((e) => parentState.objects[e]).filter(identity);
-            assignReactiveObject(
-                state.order,
-                serverOrderObjectsInOrder.map((e) => String(e.id))
-            );
-            assignReactiveObject(state.objectsInOrder, serverOrderObjectsInOrder);
+            assignReactiveObject(state.order, Object.keys(parentState.objects));
+            assignReactiveObject(state.objectsInOrder, Object.values(parentState.objects));
             return;
         }
 
         let idList = Object.keys(parentState.objects);
-
         idList.sort((xKey, yKey) => {
             const xCriteria = state.sortCriteria[xKey];
             const yCriteria = state.sortCriteria[yKey];
@@ -166,7 +161,8 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
             immediate: true,
         });
 
-        watch([toRef(state, "orderByDesc"), () => state.sortCriteria, () => parentState.order], throttledSortWatch, {
+        // watching parentState.order triggers some out of order `computed`s, now that listInstance.order is a computed.
+        watch([toRef(state, "orderByDesc"), () => state.sortCriteria], throttledSortWatch, {
             deep: true,
         });
         onScopeDispose(() => {

package/utils/getFakeId.js

@@ -1,17 +1,17 @@
-import { isArray, isSet } from "lodash";
+import { isArray, isSet, isMap } from "lodash";
 
-export function getFakeId(arraySetOrObject, key = "id") {
+export function getFakeId(arraySetMapOrObject, key = "id") {
     // sets are assumed to be of ids
     // arrays are assumed to be objects with an property matching the passed key
     // objects are assumed to have keys that are ids
     let fakeId;
     let test;
-    if (isSet(arraySetOrObject)) {
-        test = () => arraySetOrObject.has(fakeId);
-    } else if (isArray(arraySetOrObject)) {
-        test = () => arraySetOrObject.some((item) => item[key] === fakeId);
+    if (isSet(arraySetMapOrObject) || isMap(arraySetMapOrObject)) {
+        test = () => arraySetMapOrObject.has(fakeId);
+    } else if (isArray(arraySetMapOrObject)) {
+        test = () => arraySetMapOrObject.some((item) => item[key] === fakeId);
     } else {
-        test = () => fakeId in arraySetOrObject;
+        test = () => fakeId in arraySetMapOrObject;
     }
     do {
         fakeId = Math.floor(Math.random() * Number.MIN_SAFE_INTEGER);