@arrai-innovations/reactive-helpers 2.1.1 → 2.2.0

package/package.json

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

package/use/index.js

@@ -1,3 +1,4 @@
+export * from "./listCalculated.js";
 export * from "./listFilter.js";
 export * from "./listInstance.js";
 export * from "./listRelated.js";

package/use/listCalculated.js

@@ -0,0 +1,128 @@
+import { isEmpty } from "lodash";
+import { computed, effectScope, onScopeDispose, reactive, toRef, toRefs, watch } from "vue";
+import { keyDiff } from "../utils";
+
+// the simpler sibling of useListRelated
+// rules are just keys to functions that will be called with the object
+// and the result will be added as a computed property
+export function useListCalculated({
+    parentState,
+    calculatedObjectsRules,
+    calculatedObjectsPropertyName = "calculatedObjects", // NOT REACTIVE
+}) {
+    const state = reactive({
+        calculatedObjectsRules,
+        calculatedObjectsObjects: {},
+        objects: {},
+    });
+    const calculatedObjectsEffectScopes = {};
+    const combinedEffectScopes = {};
+
+    // don't change calculatedObjectsPropertyName on us or it will break
+    const copn = calculatedObjectsPropertyName + "";
+
+    function parentStateObjectsWatch() {
+        const { addedKeys, removedKeys } = keyDiff(
+            Object.keys(parentState.objects),
+            Object.keys(state.calculatedObjectsObjects)
+        );
+        for (const removedKey of removedKeys) {
+            delete state.calculatedObjectsObjects[removedKey];
+            delete state.objects[removedKey];
+            if (calculatedObjectsEffectScopes[removedKey]) {
+                calculatedObjectsEffectScopes[removedKey].stop();
+                delete calculatedObjectsEffectScopes[removedKey];
+            }
+            if (combinedEffectScopes[removedKey]) {
+                combinedEffectScopes[removedKey].stop();
+                delete combinedEffectScopes[removedKey];
+            }
+        }
+        for (const addedKey of addedKeys) {
+            state.calculatedObjectsObjects[addedKey] = {};
+            combinedEffectScopes[addedKey] = effectScope();
+            combinedEffectScopes[addedKey].run(() => {
+                state.objects[addedKey] = computed(() =>
+                    reactive({
+                        ...toRefs(state.calculatedObjectsObjects[addedKey]),
+                        ...toRefs(parentState.objects[addedKey]),
+                    })
+                );
+            });
+        }
+    }
+
+    function calculatedObjectsWatch() {
+        if (state.calculatedObjectsRules === false) {
+            return;
+        }
+        const calculatedObjectsRulesIsEmpty = isEmpty(state.calculatedObjectsRules);
+        for (const objectKey of Object.keys(state.calculatedObjectsObjects)) {
+            const calculatedObjectsEffectScope = effectScope();
+            calculatedObjectsEffectScope.run(() => {
+                const calculatedObjectsObject = state.calculatedObjectsObjects[objectKey];
+                const originalObject = parentState.objects[objectKey];
+                if (!calculatedObjectsObject[copn]) {
+                    calculatedObjectsObject[copn] = {};
+                }
+                let removedRuleKeys, addedRuleKeys;
+                if (!calculatedObjectsRulesIsEmpty) {
+                    ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
+                        Object.keys(state.calculatedObjectsRules),
+                        Object.keys(calculatedObjectsObject[copn])
+                    ));
+                } else {
+                    if (isEmpty(calculatedObjectsObject[copn])) {
+                        return;
+                    }
+                    removedRuleKeys = Object.keys(calculatedObjectsObject[copn]);
+                    addedRuleKeys = [];
+                }
+                for (const removedRuleKey of removedRuleKeys) {
+                    delete calculatedObjectsObject[copn][removedRuleKey];
+                }
+                for (const addedRuleKey of addedRuleKeys) {
+                    calculatedObjectsObject[copn][addedRuleKey] = computed(() => {
+                        return state.calculatedObjectsRules?.[addedRuleKey]?.(originalObject);
+                    });
+                }
+            });
+            calculatedObjectsEffectScopes[objectKey] = calculatedObjectsEffectScope;
+        }
+        parentStateObjectsWatch();
+    }
+
+    const es = effectScope();
+
+    es.run(() => {
+        state.order = toRef(parentState, "order");
+        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
+
+        watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
+        watch(
+            [
+                () => Object.keys(state.calculatedObjectsObjects),
+                () =>
+                    state.calculatedObjectsRules
+                        ? Object.keys(state.calculatedObjectsRules)
+                        : state.calculatedObjectsRules,
+            ],
+            calculatedObjectsWatch,
+            { immediate: true }
+        );
+
+        onScopeDispose(() => {
+            for (const objectKey of Object.keys(calculatedObjectsEffectScopes)) {
+                calculatedObjectsEffectScopes[objectKey].stop();
+            }
+            for (const objectKey of Object.keys(combinedEffectScopes)) {
+                combinedEffectScopes[objectKey].stop();
+            }
+        });
+    });
+
+    return {
+        state,
+        effectScope: es,
+    };
+}

package/use/listInstance.js

@@ -152,6 +152,11 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
         return getFakeId(state.objects);
     }
 
+    function clearError() {
+        state.errored = false;
+        state.error = null;
+    }
+
     const es = effectScope();
 
     es.run(() => {
@@ -165,10 +170,11 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {} })
         updateListObject,
         deleteListObject,
         clearList,
-        effectScope: es,
+        clearError,
         getFakeId: ourGetFakeId,
         defaultPageCallback,
         pageCallback: defaultPageCallback,
+        effectScope: es,
     };
     return returnedObject;
 }

package/use/listSubscription.js

@@ -138,6 +138,12 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
         }
     }
 
+    function clearErrors() {
+        state.subscriptionErrored = false;
+        state.subscriptionError = null;
+        listInstance.clearErrors();
+    }
+
     const es = effectScope();
 
     es.run(() => {
@@ -191,6 +197,7 @@ export function useListSubscription({ listInstance, crudArgs, listArgs, retrieve
         subscribeIntent,
         subscribe: publicSubscribe,
         unsubscribe: publicUnsubscribe,
+        clearErrors,
         effectScope: es,
     };
 }

package/use/objectInstance.js

@@ -209,6 +209,11 @@ export function useObjectInstance({ crudArgs, id, retrieveArgs }) {
             });
     }
 
+    function clearError() {
+        state.errored = false;
+        state.error = null;
+    }
+
     const es = effectScope();
 
     // we could have effects? let's keep the interface to keep our options open to add without major changes.
@@ -221,6 +226,7 @@ export function useObjectInstance({ crudArgs, id, retrieveArgs }) {
         update,
         patch,
         delete: deleteFn,
+        clearError,
         effectScope: es,
     };
 }

package/use/objectSubscription.js

@@ -147,6 +147,12 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
         return didUnsubscribe;
     }
 
+    function clearError() {
+        state.subscriptionErrored = false;
+        state.subscriptionError = null;
+        objectInstance.clearError();
+    }
+
     const es = effectScope();
 
     es.run(() => {
@@ -179,6 +185,7 @@ export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveAr
         unsubscribe: publicUnsubscribe,
         updateFromSubscription,
         deleteFromSubscription,
+        clearError,
         effectScope: es,
     };
 }