@arrai-innovations/reactive-helpers 6.0.0 → 7.0.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "6.0.0",
+    "version": "7.0.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "directories": {
@@ -30,9 +30,9 @@
         "@commitlint/cli": "^16.2.4",
         "@trivago/prettier-plugin-sort-imports": "^4.1.1",
         "@types/jest": "^27.5.0",
-        "@vue/compiler-sfc": "^3.2.33",
+        "@vue/compiler-sfc": "^3.3.4",
         "@vue/eslint-config-prettier": "^7.0.0",
-        "@vue/test-utils": "^2.0.0-rc.21",
+        "@vue/test-utils": "^2.3.2",
         "@vue/vue3-jest": "^27.0.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^27.5.1",
@@ -54,6 +54,6 @@
     },
     "peerDependencies": {
         "lodash-es": "^4.17.21",
-        "vue": "^3.2.47"
+        "vue": "^3.3.4"
     }
 }

package/use/cancellableIntent.js

@@ -1,8 +1,11 @@
+import { useDebugMessage } from "../utils";
 import identity from "lodash-es/identity";
 import isEqual from "lodash-es/isEqual";
 import { effectScope, nextTick, onScopeDispose, reactive, readonly, watch } from "vue";
 import { deepUnref } from "vue-deepunref";
 
+const watchFnDebugMessage = useDebugMessage(["cancellableIntent", "watch"]);
+
 /*
  * Calls your awaitable function with the arguments you pass in, when the watch arguments change and are all truthy.
  * Watch arguments should be a reactive object.
@@ -44,6 +47,7 @@ export function useCancellableIntent({ awaitableWithCancel, watchArguments = {},
     }
 
     const watchFn = () => {
+        watchFnDebugMessage("watchFn called");
         let newWatchValues = deepUnref(Object.values(watchArguments));
         if (isEqual(newWatchValues, previousWatchValues)) {
             return;

package/use/listCalculated.js

@@ -1,4 +1,4 @@
-import { keyDiff, loadingCombine } from "../utils";
+import { keyDiff, loadingCombine, useDebugMessage } from "../utils";
 import { listInstanceStateKeys } from "./listInstance";
 import { listRelatedStateKeys } from "./listRelated";
 import { listSubscriptionStateKeys } from "./listSubscription";
@@ -6,6 +6,9 @@ import { useWatchesRunning } from "./watchesRunning";
 import isEmpty from "lodash-es/isEmpty";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
 
+const computedDebugMessage = useDebugMessage(["listCalculated", "computed"]);
+const watchDebugMessage = useDebugMessage(["listCalculated", "watch"]);
+
 export const listCalculatedStateKeys = [
     "calculatedObjects",
     "calculatedObjectsParentStateObjectsWatchRunning",
@@ -35,6 +38,7 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
     const calculatedObjectsEffectScopes = {};
 
     function parentStateObjectsWatch() {
+        watchDebugMessage("parentStateObjectsWatch called");
         const { addedKeys, removedKeys } = keyDiff(
             Object.keys(parentState.objects),
             Object.keys(state.calculatedObjects)
@@ -53,6 +57,7 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
     }
 
     function calculatedObjectsWatch() {
+        watchDebugMessage("calculatedObjectsWatch called");
         const calculatedObjectsRulesIsEmpty = !state.calculatedObjectsRules || isEmpty(state.calculatedObjectsRules);
         for (const objectKey of Object.keys(state.calculatedObjects)) {
             if (!calculatedObjectsEffectScopes[objectKey]) {
@@ -120,9 +125,12 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
 
         watchesRunning = useWatchesRunning({
             triggerRefs: [
-                computed(() =>
-                    state.calculatedObjectsRules && !isEmpty(state.calculatedObjectsRules) ? parentState.loading : false
-                ),
+                computed(() => {
+                    computedDebugMessage("listCalculated trigger");
+                    return state.calculatedObjectsRules && !isEmpty(state.calculatedObjectsRules)
+                        ? parentState.loading
+                        : false;
+                }),
             ],
             watchSentinelRefs: [
                 toRef(state, "calculatedObjectsParentStateObjectsWatchRunning"),
@@ -130,7 +138,10 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
             ],
         });
 
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        state.running = computed(() => {
+            computedDebugMessage("listCalculated running");
+            return loadingCombine(watchesRunning.state.running, parentState.running);
+        });
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(calculatedObjectsEffectScopes)) {

package/use/listRelated.js

@@ -1,4 +1,4 @@
-import { keyDiff, loadingCombine } from "../utils";
+import { keyDiff, loadingCombine, useDebugMessage } from "../utils";
 import { listInstanceStateKeys } from "./listInstance";
 import { listSubscriptionStateKeys } from "./listSubscription";
 import { useWatchesRunning } from "./watchesRunning";
@@ -8,6 +8,9 @@ import isEmpty from "lodash-es/isEmpty";
 import isUndefined from "lodash-es/isUndefined";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
+const computedDebugMessage = useDebugMessage(["listRelated", "computed"]);
+const watchDebugMessage = useDebugMessage(["listRelated", "watch"]);
+
 export const listRelatedStateKeys = [
     "relatedObjects",
     "relatedObjectsRules",
@@ -34,6 +37,7 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
     const relatedObjectsEffectScopes = {};
 
     function parentStateObjectsWatch() {
+        watchDebugMessage("parentStateObjectsWatch called");
         const { addedKeys, removedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.relatedObjects));
         for (const removedKey of removedKeys) {
             delete state.relatedObjects[removedKey];
@@ -49,6 +53,7 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
     }
 
     function relatedObjectsWatch() {
+        watchDebugMessage("relatedObjectsWatch called");
         const relatedObjectsRulesIsEmpty = !state.relatedObjectsRules || isEmpty(state.relatedObjectsRules);
         for (const objectKey of Object.keys(state.relatedObjects)) {
             const relatedObjectsObject = state.relatedObjects[objectKey];
@@ -120,9 +125,12 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
 
         watchesRunning = useWatchesRunning({
             triggerRefs: [
-                computed(() =>
-                    state.relatedObjectsRules && !isEmpty(state.relatedObjectsRules) ? parentState.loading : false
-                ),
+                computed(() => {
+                    computedDebugMessage("listRelated triggerRefs");
+                    return state.relatedObjectsRules && !isEmpty(state.relatedObjectsRules)
+                        ? parentState.loading
+                        : false;
+                }),
             ],
             watchSentinelRefs: [
                 toRef(state, "relatedObjectsParentStateObjectsWatchRunning"),
@@ -130,7 +138,10 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
             ],
         });
 
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        state.running = computed(() => {
+            computedDebugMessage("listRelated running");
+            return loadingCombine(watchesRunning.state.running, parentState.running);
+        });
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(relatedObjectsEffectScopes)) {

package/use/objectCalculated.js

@@ -1,8 +1,11 @@
-import { keyDiff, loadingCombine } from "../utils";
+import { keyDiff, loadingCombine, useDebugMessage } from "../utils";
 import { useWatchesRunning } from "./watchesRunning";
 import isEmpty from "lodash-es/isEmpty";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
 
+const computedDebugMessage = useDebugMessage(["objectCalculated", "computed"]);
+const watchDebugMessage = useDebugMessage(["objectCalculated", "watch"]);
+
 export function useObjectCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useObjectCalculated({
@@ -65,6 +68,7 @@ export function useObjectCalculated({
         }
 
         watch([() => state.calculatedObjectRules && Object.keys(state.calculatedObjectRules)], () => {
+            watchDebugMessage("calculatedObjectRules watch called");
             let addedKeys = [],
                 removedKeys = [],
                 sameKeys = [];
@@ -102,7 +106,12 @@ export function useObjectCalculated({
         });
 
         watchesRunning = useWatchesRunning({
-            triggerRefs: [computed(() => (!isEmpty(state.calculatedObjectRules) ? parentState.loading : false))],
+            triggerRefs: [
+                computed(() => {
+                    computedDebugMessage("watchesRunningTriggerRefs computed");
+                    return !isEmpty(state.calculatedObjectRules) ? parentState.loading : false;
+                }),
+            ],
             watchSentinelRefs: [
                 toRef(state, "parentStateObjectWatchRunning"),
                 toRef(state, "calculatedObjectWatchRunning"),
@@ -110,7 +119,10 @@ export function useObjectCalculated({
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.relatedRunning));
+        state.running = computed(() => {
+            computedDebugMessage("running computed");
+            return loadingCombine(watchesRunning.state.running, parentState.relatedRunning);
+        });
 
         onScopeDispose(() => {
             for (const key in calculatedObjectEffectScopes) {

package/use/objectRelated.js

@@ -1,4 +1,4 @@
-import { keyDiff } from "../utils";
+import { keyDiff, useDebugMessage } from "../utils";
 import { useWatchesRunning } from "./watchesRunning";
 import get from "lodash-es/get";
 import isArray from "lodash-es/isArray";
@@ -6,6 +6,9 @@ import isEmpty from "lodash-es/isEmpty";
 import isUndefined from "lodash-es/isUndefined";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
+const computedDebugMessage = useDebugMessage(["objectRelated", "computed"]);
+const watchDebugMessage = useDebugMessage(["objectRelated", "watch"]);
+
 export function useObjectRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useObjectRelated({
@@ -61,6 +64,7 @@ export function useObjectRelated({
         }
 
         watch([() => state.relatedObjectRules && Object.keys(state.relatedObjectRules)], () => {
+            watchDebugMessage("relatedObjectRules changed");
             let addedRuleKeys = [],
                 removedRuleKeys = [];
             if (!state.relatedObjectRules) {
@@ -83,6 +87,7 @@ export function useObjectRelated({
                 relatedObjectEffectScopes[addedRuleKey] = effectScope();
                 relatedObjectEffectScopes[addedRuleKey].run(() => {
                     state.relatedObjectObjects[addedRuleKey] = computed(() => {
+                        computedDebugMessage("relatedObjectObjects computed");
                         // deal with computed objects being passed.
                         const ruleObjects = unref(state.relatedObjectRules?.[addedRuleKey]?.objects);
                         const rulePkKey = state.relatedObjectRules?.[addedRuleKey]?.pkKey || addedRuleKey;
@@ -103,7 +108,12 @@ export function useObjectRelated({
         });
 
         watchesRunning = useWatchesRunning({
-            triggerRefs: [computed(() => (!isEmpty(state.relatedObjectRules) ? parentState.loading : false))],
+            triggerRefs: [
+                computed(() => {
+                    watchDebugMessage("parentStateObjectWatchRunning");
+                    return !isEmpty(state.relatedObjectRules) ? parentState.loading : false;
+                }),
+            ],
             watchSentinelRefs: [
                 toRef(state, "parentStateObjectWatchRunning"),
                 toRef(state, "relatedObjectWatchRunning"),

package/use/watchesRunning.js

@@ -1,6 +1,9 @@
-import { loadingCombine } from "../utils";
+import { loadingCombine, useDebugMessage } from "../utils";
 import { computed, effectScope, reactive, unref, watch } from "vue";
 
+const computedDebugMessage = useDebugMessage(["watchesRunning", "computed"]);
+const watchDebugMessage = useDebugMessage(["watchesRunning", "watch"]);
+
 export function useWatchesRunning({ triggerRefs, watchSentinelRefs }) {
     const state = reactive({});
 
@@ -10,6 +13,7 @@ export function useWatchesRunning({ triggerRefs, watchSentinelRefs }) {
         watch(
             triggerRefs,
             (values) => {
+                watchDebugMessage("useWatchesRunning triggerRefs");
                 if (values.every((value) => unref(value))) {
                     watchSentinelRefs.forEach((ref) => {
                         ref.value = true;
@@ -21,7 +25,11 @@ export function useWatchesRunning({ triggerRefs, watchSentinelRefs }) {
                 deep: true,
             }
         );
-        state.running = computed(() => loadingCombine(watchSentinelRefs.map((ref) => ref.value)));
+        state.running = computed(() => {
+            const values = watchSentinelRefs.map((ref) => ref.value);
+            computedDebugMessage("useWatchesRunning running");
+            return loadingCombine(values);
+        });
     });
 
     return {

package/utils/debugMessage.js

@@ -0,0 +1,54 @@
+import inspect from "browser-util-inspect";
+import { unref } from "vue";
+
+window.RH_DEBUG = false;
+window.RH_DEBUG_ENABLED_CATEGORIES = {};
+window.RH_DEBUG_DISABLED_CATEGORIES = {};
+
+const log = console.log;
+const messageHolder = [];
+
+/**
+ * @param {String} categoriesString
+ * @param {(string|Function)[]} messages
+ */
+const doLog = (categoriesString, messages) => {
+    if (messages.length > 0) {
+        for (const message of messages) {
+            messageHolder.push(inspect(unref(typeof message === "function" ? message() : message)));
+        }
+        log(categoriesString, ...messageHolder);
+        messageHolder.length = 0;
+    }
+};
+
+/**
+ *
+ * @param {string[]} categories
+ * @returns {function(...((string|Function)[]|string|Function)): void}
+ */
+export function useDebugMessage(categories) {
+    const categoriesSet = new Set(categories);
+    const categoriesString = categoriesSet.size > 0 ? `[${Array.from(categoriesSet).join(", ")}]` : "";
+    return (...messages) => {
+        if (!window.RH_DEBUG) {
+            return;
+        }
+        if (categoriesSet.size > 0) {
+            for (const category of categoriesSet) {
+                if (window.RH_DEBUG_DISABLED_CATEGORIES[category]) {
+                    return;
+                }
+            }
+            for (const category of categoriesSet) {
+                if (window.RH_DEBUG_ENABLED_CATEGORIES[category]) {
+                    doLog(categoriesString, messages);
+                    return;
+                }
+            }
+        }
+        if (categoriesSet.size === 0 || Object.keys(window.RH_DEBUG_ENABLED_CATEGORIES).length === 0) {
+            doLog(categoriesString, messages);
+        }
+    };
+}

package/utils/index.js

@@ -1,8 +1,10 @@
 export * from "./assignReactiveObject";
+export * from "./debugMessage";
 export * from "./debugWatch";
 export * from "./flattenPaths";
 export * from "./getFakeId";
 export * from "./keyDiff";
+export * from "./lifecycleDebug";
 export * from "./loadingCombine";
 export * from "./set";
 export * from "./watches";

package/utils/lifecycleDebug.js

@@ -0,0 +1,52 @@
+import { useDebugMessage } from "./debugMessage";
+import {
+    onActivated,
+    onBeforeMount,
+    onBeforeUnmount,
+    onBeforeUpdate,
+    onDeactivated,
+    onErrorCaptured,
+    onMounted,
+    onRenderTracked,
+    onRenderTriggered,
+    onServerPrefetch,
+    onUnmounted,
+    onUpdated,
+} from "vue";
+
+/**
+ * @param {string[]} categories
+ */
+export function useLifecycleDebug(categories, includes = [], excludes = []) {
+    const lifeCycleFns = {
+        onActivated,
+        onBeforeMount,
+        onBeforeUnmount,
+        onBeforeUpdate,
+        onDeactivated,
+        onErrorCaptured,
+        onMounted,
+        onRenderTracked,
+        onRenderTriggered,
+        onServerPrefetch,
+        onUnmounted,
+        onUpdated,
+    };
+    const hasIncludes = includes && includes.length > 0;
+    const hasExcludes = excludes && excludes.length > 0;
+    for (const key in lifeCycleFns) {
+        if (hasIncludes && !includes.includes(key)) {
+            continue;
+        }
+        if (hasExcludes && excludes.includes(key)) {
+            continue;
+        }
+        const myCategories = new Set(categories);
+        myCategories.add(key);
+        const eventString = `${key} called`;
+        const debugMessage = useDebugMessage(myCategories);
+        lifeCycleFns[key](() => {
+            debugMessage(eventString);
+        });
+    }
+}