@arrai-innovations/reactive-helpers 1.1.0 → 1.1.2

package/package.json

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

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

@@ -296,7 +296,7 @@ describe("use/listFilter", () => {
                     name: "four",
                 },
             });
-            const args = {
+            const listFilterArgs = {
                 A: {
                     excludedValues: {
                         id: 1,
@@ -310,21 +310,16 @@ describe("use/listFilter", () => {
                     },
                 },
             };
-            const listInstanceModule = await import("../../../use/listInstance");
-            const listInstances = listInstanceModule.useListInstances({
-                A: {
-                    listInstanceA,
-                },
-                B: {
-                    listInstanceB,
-                },
-            });
-            const listFilters = useListFilters(args, listInstances);
+            const listInstances = {
+                A: listInstanceA,
+                B: listInstanceB,
+            };
+            const listFilters = useListFilters(listFilterArgs, listInstances);
 
             expect(listFilters.A.state.excludedValues).toEqual({ id: 1, name: "three" });
             expect(listFilters.B.state.allowedValues).toEqual({ id: 2, name: "four" });
-            expect(unrefAndToRawDeep(listFilters.A.parentState)).toEqual(unrefAndToRawDeep(listInstanceA.state));
-            expect(unrefAndToRawDeep(listFilters.B.parentState)).toEqual(unrefAndToRawDeep(listInstanceB.state));
+            expect(unrefAndToRawDeep(listFilters.A.parentState)).toEqual(unrefAndToRawDeep(listFilterA.parentState));
+            expect(unrefAndToRawDeep(listFilters.B.parentState)).toEqual(unrefAndToRawDeep(listFilterB.parentState));
             expect(unrefAndToRawDeep(listFilters.A.state)).toEqual(unrefAndToRawDeep(listFilterA.state));
             expect(unrefAndToRawDeep(listFilters.B.state)).toEqual(unrefAndToRawDeep(listFilterB.state));
         });

package/use/listInstance.js

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { cloneDeep, isEmpty } from "lodash";
 import { computed, effectScope, reactive, unref } from "vue";
 import { assignReactiveObject } from "../utils/assignReactiveObject";
 import inspect from "browser-util-inspect";
@@ -11,14 +11,14 @@ export class ListError extends Error {
     }
 }
 
-const defaultCrud = reactive({
+const defaultCrud = {
     args: {},
     list: undefined,
-});
+};
 
 export function setListInstanceCrud({ list, args = {} } = {}) {
     defaultCrud.list = list;
-    assignReactiveObject(defaultCrud.args, args);
+    Object.assign(defaultCrud.args, args);
 }
 
 export function useListInstances(listInstanceArgs) {
@@ -43,7 +43,7 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
         error: null,
         order: [],
     });
-    assignReactiveObject(state.listInstanceCrud, defaultCrud);
+    Object.assign(state.listInstanceCrud, cloneDeep(defaultCrud));
     if (crudArgs) {
         assignReactiveObject(state.listInstanceCrud.args, crudArgs);
     }

package/use/listRelated.js

@@ -1,4 +1,4 @@
-import { computed, effectScope, onScopeDispose, reactive, toRef, toRefs, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, toRef, toRefs, unref, watch } from "vue";
 import { get, isArray, isEmpty, isUndefined } from "lodash";
 import { keyDiff } from "../utils/keyDiff";
 
@@ -45,10 +45,12 @@ export function useListRelated({
             state.relatedObjectsObjects[addedKey] = {};
             combinedEffectScopes[addedKey] = effectScope();
             combinedEffectScopes[addedKey].run(() => {
-                state.objects[addedKey] = computed(() => ({
-                    ...toRefs(state.relatedObjectsObjects[addedKey]),
-                    ...toRefs(parentState.objects[addedKey]),
-                }));
+                state.objects[addedKey] = computed(() =>
+                    reactive({
+                        ...toRefs(state.relatedObjectsObjects[addedKey]),
+                        ...toRefs(parentState.objects[addedKey]),
+                    })
+                );
             });
         }
     }
@@ -84,7 +86,8 @@ export function useListRelated({
                 }
                 for (const addedRuleKey of addedRuleKeys) {
                     relatedObjectsObject[ropn][addedRuleKey] = computed(() => {
-                        const ruleObjects = state.relatedObjectsRules?.[addedRuleKey]?.objects;
+                        // deal with computed objects being passed.
+                        const ruleObjects = unref(state.relatedObjectsRules?.[addedRuleKey]?.objects);
                         const rulePkKey = state.relatedObjectsRules?.[addedRuleKey]?.pkKey || addedRuleKey;
                         if (!ruleObjects || !rulePkKey) {
                             return undefined;

package/use/listSubscription.js

@@ -11,9 +11,9 @@ export class ListSubscriptionError extends Error {
     }
 }
 
-const defaultCrud = reactive({
+const defaultCrud = {
     subscribe: undefined,
-});
+};
 
 export function setListSubscriptionCrud({ subscribe }) {
     defaultCrud.subscribe = subscribe;
@@ -36,7 +36,7 @@ export function useListSubscription({ listInstance, crudArgs, defaultListArgs, d
         listSubscriptionCrud: {},
         intendToSubscribe: false,
     });
-    assignReactiveObject(state.listSubscriptionCrud, defaultCrud);
+    assignReactiveObject(state.listSubscriptionCrud, cloneDeep(defaultCrud));
 
     async function subscribe({ listArgs, retrieveArgs } = {}) {
         if (!listArgs) {