@arrai-innovations/reactive-helpers 5.0.1 → 6.1.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": "5.0.1",
+    "version": "6.1.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "directories": {

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/list.js

@@ -3,116 +3,49 @@ import { useListInstance } from "./listInstance";
 import { useListRelated } from "./listRelated";
 import { useListSubscription } from "./listSubscription";
 import { usePagedListInstance } from "./paginatedListInstance";
-import { effectScope, reactive, shallowReactive, shallowReadonly, toRef, watch } from "vue";
+import { reactive, shallowReactive, shallowReadonly, toRef } from "vue";
+
+export const useLists = (listArgs) => {
+    const lists = {};
+    for (const [key, value] of Object.entries(listArgs)) {
+        lists[key] = useList(value);
+    }
+    return lists;
+};
 
 // the big brother of useObject, managing a chain of useList* instances.
-export const useList = ({ props, functions, paged = false, keepOldPages = false, passThroughPropertyNames = [] }) => {
+export const useList = ({ props, functions, paged = false, keepOldPages = false }) => {
     const managed = shallowReactive({
         listInstance: null,
         listSubscription: null,
         listRelated: null,
         listCalculated: null,
     });
-    const es = effectScope();
 
     managed.listInstance = (paged ? usePagedListInstance : useListInstance)({
-        crudArgs: toRef(props, "crudArgs"),
+        props,
         functions,
-        retrieveArgs: toRef(props, "retrieveArgs"),
-        listArgs: toRef(props, "listArgs"),
         keepOldPages,
     });
 
-    const intentPropsWatch = () => {
-        es.run(() => {
-            let nextState = managed.listInstance?.state;
-            // true or false, having a key is intent to use
-            const hasIntendToList = "intendToList" in props;
-            if (hasIntendToList && !managed.listSubscription) {
-                managed.listSubscription = useListSubscription({
-                    listInstance: managed.listInstance,
-                });
-                managed.listSubscription.state.intendToList = toRef(props, "intendToList");
-            } else if (!hasIntendToList && managed.listSubscription) {
-                managed.listSubscription.effectScope.stop();
-                managed.listSubscription = null;
-            }
-            const hasRelatedObjectRules = "relatedObjectsRules" in props;
-            if (hasRelatedObjectRules && !managed.listRelated) {
-                nextState = managed.listSubscription?.state || nextState;
-                managed.listRelated = useListRelated({
-                    parentState: nextState,
-                    relatedObjectsRules: toRef(props, "relatedObjectsRules"),
-                });
-            } else if (!hasRelatedObjectRules && managed.listRelated) {
-                managed.listRelated.effectScope.stop();
-                managed.listRelated = null;
-            }
-            const hasCalculatedObjectRules = "calculatedObjectsRules" in props;
-            if (hasCalculatedObjectRules && !managed.listCalculated) {
-                nextState = managed.listRelated?.state || nextState;
-                managed.listCalculated = useListCalculated({
-                    parentState: nextState,
-                    calculatedObjectsRules: toRef(props, "calculatedObjectsRules"),
-                });
-            } else if (!hasCalculatedObjectRules && managed.listCalculated) {
-                managed.listCalculated.effectScope.stop();
-                managed.listCalculated = null;
-            }
-        });
-    };
+    managed.listSubscription = useListSubscription({
+        listInstance: managed.listInstance,
+    });
+    managed.listSubscription.state.intendToList = toRef(props, "intendToList");
 
-    const exposedState = reactive({});
+    managed.listRelated = useListRelated({
+        parentState: managed.listSubscription.state,
+        relatedObjectsRules: toRef(props, "relatedObjectsRules"),
+    });
 
-    es.run(() => {
-        watch(
-            [
-                //
-                toRef(props, "intendToList"),
-                toRef(props, "relatedObjectsRules"),
-                toRef(props, "calculatedObjectsRules"),
-            ],
-            intentPropsWatch,
-            { immediate: true }
-        );
-        const propertiesToRelay = [
-            "loading",
-            "error",
-            "errored",
-            "objects",
-            "order",
-            "objectsInOrder",
-            "running",
-            "relatedObjects",
-            "calculatedObjects",
-            "totalRecords",
-            "totalPages",
-            "perPage",
-            ...passThroughPropertyNames,
-        ];
-        watch(
-            () =>
-                managed.listCalculated?.state ||
-                managed.listRelated?.state ||
-                managed.listSubscription?.state ||
-                managed.listInstance?.state,
-            (newState, oldState) => {
-                if (newState !== oldState && newState) {
-                    propertiesToRelay.forEach((x) => {
-                        exposedState[x] = toRef(newState, x);
-                    });
-                }
-            },
-            {
-                immediate: true,
-            }
-        );
+    managed.listCalculated = useListCalculated({
+        parentState: managed.listRelated.state,
+        calculatedObjectsRules: toRef(props, "calculatedObjectsRules"),
     });
 
-    return {
+    return reactive({
         // we manage the keys on both of these, so hands off the root.
         managed: shallowReadonly(managed),
-        state: shallowReadonly(exposedState),
-        effectScope: es,
-    };
+        state: managed.listCalculated.state,
+    });
 };

package/use/listCalculated.js

@@ -1,8 +1,21 @@
-import { keyDiff, loadingCombine } from "../utils";
+import { keyDiff, loadingCombine, useDebugMessage } from "../utils";
+import { listInstanceStateKeys } from "./listInstance";
+import { listRelatedStateKeys } from "./listRelated";
+import { listSubscriptionStateKeys } from "./listSubscription";
 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",
+    "calculatedObjectsRules",
+    "calculatedObjectsWatchRunning",
+];
+
 export function useListCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useListCalculated({
@@ -15,52 +28,46 @@ export function useListCalculateds(instances, args) {
 // 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
-    passThroughPropertyNames = ["relatedObjects", "totalRecords", "totalPages", "perPage"], // NOT REACTIVE
-}) {
+export function useListCalculated({ parentState, calculatedObjectsRules }) {
     const state = reactive({
         calculatedObjectsRules,
-        calculatedObjectsObjects: {},
-        parentStateObjectsWatchRunning: false,
+        calculatedObjects: {},
+        calculatedObjectsParentStateObjectsWatchRunning: false,
         calculatedObjectsWatchRunning: false,
     });
     const calculatedObjectsEffectScopes = {};
 
-    // don't change calculatedObjectsPropertyName on us or it will break
-    const copn = calculatedObjectsPropertyName + "";
-
     function parentStateObjectsWatch() {
+        watchDebugMessage("parentStateObjectsWatch called");
         const { addedKeys, removedKeys } = keyDiff(
             Object.keys(parentState.objects),
-            Object.keys(state.calculatedObjectsObjects)
+            Object.keys(state.calculatedObjects)
         );
         for (const removedKey of removedKeys) {
-            delete state.calculatedObjectsObjects[removedKey];
+            delete state.calculatedObjects[removedKey];
             if (calculatedObjectsEffectScopes[removedKey]) {
                 calculatedObjectsEffectScopes[removedKey].stop();
                 delete calculatedObjectsEffectScopes[removedKey];
             }
         }
         for (const addedKey of addedKeys) {
-            state.calculatedObjectsObjects[addedKey] = {};
+            state.calculatedObjects[addedKey] = {};
         }
-        state.parentStateObjectsWatchRunning = false;
+        state.calculatedObjectsParentStateObjectsWatchRunning = false;
     }
 
     function calculatedObjectsWatch() {
+        watchDebugMessage("calculatedObjectsWatch called");
         const calculatedObjectsRulesIsEmpty = !state.calculatedObjectsRules || isEmpty(state.calculatedObjectsRules);
-        for (const objectKey of Object.keys(state.calculatedObjectsObjects)) {
+        for (const objectKey of Object.keys(state.calculatedObjects)) {
             if (!calculatedObjectsEffectScopes[objectKey]) {
                 calculatedObjectsEffectScopes[objectKey] = effectScope();
             }
             const originalObject = parentState.objects[objectKey];
-            if (!state.calculatedObjectsObjects[objectKey]) {
-                state.calculatedObjectsObjects[objectKey] = {};
+            if (!state.calculatedObjects[objectKey]) {
+                state.calculatedObjects[objectKey] = {};
             }
-            const calculatedObjectsObject = state.calculatedObjectsObjects[objectKey];
+            const calculatedObjectsObject = state.calculatedObjects[objectKey];
             let removedRuleKeys, addedRuleKeys;
             if (!calculatedObjectsRulesIsEmpty) {
                 ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
@@ -93,24 +100,20 @@ export function useListCalculated({
     const es = effectScope();
 
     es.run(() => {
-        state.loading = toRef(parentState, "loading");
-        state.errored = toRef(parentState, "errored");
-        state.error = toRef(parentState, "error");
-
-        state.retrieveArgs = toRef(parentState, "retrieveArgs");
-        state.listArgs = toRef(parentState, "listArgs");
-        state.order = toRef(parentState, "order");
-        state.objects = toRef(parentState, "objects");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        state[copn] = toRef(state, "calculatedObjectsObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listSubscriptionStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listRelatedStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
             [
-                () => Object.keys(state.calculatedObjectsObjects),
+                () => Object.keys(state.calculatedObjects),
                 () =>
                     state.calculatedObjectsRules
                         ? Object.keys(state.calculatedObjectsRules)
@@ -122,17 +125,23 @@ export function useListCalculated({
 
         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, "parentStateObjectsWatchRunning"),
+                toRef(state, "calculatedObjectsParentStateObjectsWatchRunning"),
                 toRef(state, "calculatedObjectsWatchRunning"),
             ],
         });
 
-        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/listInstance.js

@@ -3,7 +3,7 @@ import { getFakeId } from "../utils/getFakeId";
 import inspect from "browser-util-inspect";
 import cloneDeep from "lodash-es/cloneDeep";
 import isFunction from "lodash-es/isFunction";
-import { computed, effectScope, reactive } from "vue";
+import { computed, effectScope, reactive, toRef, watchEffect } from "vue";
 
 export class ListError extends Error {
     constructor(message, code) {
@@ -18,6 +18,22 @@ const defaultCrud = {
     list: undefined,
 };
 
+export const listInstanceStateKeys = [
+    "crud",
+    "retrieveArgs",
+    "listArgs",
+    "objects",
+    "loading",
+    "errored",
+    "error",
+    "objectsInOrder",
+    "order",
+    // when paged
+    "totalRecords",
+    "totalPages",
+    "perPage",
+];
+
 export function setListInstanceCrud({ list, args = {} } = {}) {
     defaultCrud.list = list;
     Object.assign(defaultCrud.args, args);
@@ -31,7 +47,10 @@ export function useListInstances(listInstanceArgs) {
     return instances;
 }
 
-export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, functions = {} }) {
+export function useListInstance({ props, functions = {} }) {
+    if (!props) {
+        throw new ListError(`useListInstance requires props`);
+    }
     // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
     const _objectsMap = new Map(); // maps are ordered, if you don't clear lists, you need to insert pages in order.
     // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
@@ -71,25 +90,28 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, fu
             args: {},
             list: undefined,
         },
-        retrieveArgs,
-        listArgs,
+        retrieveArgs: toRef(props, "retrieveArgs"),
+        listArgs: toRef(props, "listArgs"),
         objects: _objectsProxy,
         loading: undefined,
         errored: false,
         error: null,
     });
-    // prevent linking of all instances to the same default .args object
-    Object.assign(state.crud, cloneDeep(defaultCrud));
-    if (crudArgs) {
-        addOrUpdateReactiveObject(state.crud.args, crudArgs);
-    }
-    for (const [key, value] of Object.entries(functions)) {
-        if (isFunction(value) && key in state.crud) {
-            state.crud[key] = value;
-        } else {
-            throw ListError(`Invalid function "${key}" for useListInstance: invalid key or not a function.`);
+    const es = effectScope();
+    watchEffect(() => {
+        // prevent linking of all instances to the same default .args object
+        Object.assign(state.crud, cloneDeep(defaultCrud));
+        if (props.crudArgs) {
+            addOrUpdateReactiveObject(state.crud.args, props.crudArgs);
         }
-    }
+        for (const [key, value] of Object.entries(functions)) {
+            if (isFunction(value) && key in state.crud) {
+                state.crud[key] = value;
+            } else {
+                throw ListError(`Invalid function "${key}" for useListInstance: invalid key or not a function.`);
+            }
+        }
+    });
 
     const defaultPageCallback = (newObjects) => {
         newObjects.forEach((newObject) => {
@@ -191,12 +213,8 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, fu
         state.error = null;
     }
 
-    const es = effectScope();
-
-    es.run(() => {
-        state.objectsInOrder = computed(() => Object.values(state.objects));
-        state.order = computed(() => Object.keys(state.objects));
-    });
+    state.objectsInOrder = computed(() => Object.values(state.objects));
+    state.order = computed(() => Object.keys(state.objects));
 
     const returnedObject = {
         state,

package/use/listRelated.js

@@ -1,4 +1,6 @@
-import { keyDiff, loadingCombine } from "../utils";
+import { keyDiff, loadingCombine, useDebugMessage } from "../utils";
+import { listInstanceStateKeys } from "./listInstance";
+import { listSubscriptionStateKeys } from "./listSubscription";
 import { useWatchesRunning } from "./watchesRunning";
 import get from "lodash-es/get";
 import isArray from "lodash-es/isArray";
@@ -6,6 +8,16 @@ 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",
+    "relatedObjectsWatchRunning",
+    "relatedObjectsParentStateObjectsWatchRunning",
+];
+
 export function useListRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useListRelated({
@@ -15,45 +27,36 @@ export function useListRelateds(instances, args) {
     }
 }
 
-export function useListRelated({
-    parentState,
-    relatedObjectsRules,
-    relatedObjectsPropertyName = "relatedObjects", // NOT REACTIVE
-    passThroughPropertyNames = ["calculatedObjects", "totalRecords", "totalPages", "perPage"], // NOT REACTIVE
-}) {
+export function useListRelated({ parentState, relatedObjectsRules }) {
     const state = reactive({
         relatedObjectsRules: relatedObjectsRules,
-        relatedObjectsObjects: {},
-        parentStateObjectsWatchRunning: false,
+        relatedObjects: {},
+        relatedObjectsParentStateObjectsWatchRunning: false,
         relatedObjectsWatchRunning: false,
     });
     const relatedObjectsEffectScopes = {};
 
-    // don't change relatedObjectsPropertyName on us or it will break
-    const ropn = relatedObjectsPropertyName + "";
-
     function parentStateObjectsWatch() {
-        const { addedKeys, removedKeys } = keyDiff(
-            Object.keys(parentState.objects),
-            Object.keys(state.relatedObjectsObjects)
-        );
+        watchDebugMessage("parentStateObjectsWatch called");
+        const { addedKeys, removedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.relatedObjects));
         for (const removedKey of removedKeys) {
-            delete state.relatedObjectsObjects[removedKey];
+            delete state.relatedObjects[removedKey];
             if (relatedObjectsEffectScopes[removedKey]) {
                 relatedObjectsEffectScopes[removedKey].stop();
                 delete relatedObjectsEffectScopes[removedKey];
             }
         }
         for (const addedKey of addedKeys) {
-            state.relatedObjectsObjects[addedKey] = {};
+            state.relatedObjects[addedKey] = {};
         }
-        state.parentStateObjectsWatchRunning = false;
+        state.relatedObjectsParentStateObjectsWatchRunning = false;
     }
 
     function relatedObjectsWatch() {
+        watchDebugMessage("relatedObjectsWatch called");
         const relatedObjectsRulesIsEmpty = !state.relatedObjectsRules || isEmpty(state.relatedObjectsRules);
-        for (const objectKey of Object.keys(state.relatedObjectsObjects)) {
-            const relatedObjectsObject = state.relatedObjectsObjects[objectKey];
+        for (const objectKey of Object.keys(state.relatedObjects)) {
+            const relatedObjectsObject = state.relatedObjects[objectKey];
             const originalObject = parentState.objects[objectKey];
             let removedRuleKeys, addedRuleKeys;
             if (!relatedObjectsRulesIsEmpty) {
@@ -103,24 +106,17 @@ export function useListRelated({
     const es = effectScope();
 
     es.run(() => {
-        state.loading = toRef(parentState, "loading");
-        state.errored = toRef(parentState, "errored");
-        state.error = toRef(parentState, "error");
-
-        state.retrieveArgs = toRef(parentState, "retrieveArgs");
-        state.listArgs = toRef(parentState, "listArgs");
-        state.order = toRef(parentState, "order");
-        state.objects = toRef(parentState, "objects");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        state[ropn] = toRef(state, "relatedObjectsObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listSubscriptionStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
             [
-                () => Object.keys(state.relatedObjectsObjects),
+                () => Object.keys(state.relatedObjects),
                 () => (state.relatedObjectsRules ? Object.keys(state.relatedObjectsRules) : state.relatedObjectsRules),
             ],
             relatedObjectsWatch,
@@ -129,17 +125,23 @@ export function useListRelated({
 
         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, "parentStateObjectsWatchRunning"),
+                toRef(state, "relatedObjectsParentStateObjectsWatchRunning"),
                 toRef(state, "relatedObjectsWatchRunning"),
             ],
         });
 
-        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/listSubscription.js

@@ -1,6 +1,6 @@
 import { loadingCombine } from "../utils/loadingCombine";
 import { useCancellableIntent } from "./cancellableIntent";
-import { useListInstance } from "./listInstance";
+import { listInstanceStateKeys, useListInstance } from "./listInstance";
 import inspect from "browser-util-inspect";
 import cloneDeep from "lodash-es/cloneDeep";
 import isEmpty from "lodash-es/isEmpty";
@@ -18,6 +18,15 @@ const defaultCrud = {
     subscribe: undefined,
 };
 
+export const listSubscriptionStateKeys = [
+    "subscriptionLoading",
+    "subscriptionErrored",
+    "subscriptionError",
+    "intendToList",
+    "intendToSubscribe",
+    "subscribed",
+];
+
 export function setListSubscriptionCrud({ subscribe }) {
     defaultCrud.subscribe = subscribe;
 }
@@ -30,15 +39,17 @@ export function useListSubscriptions(args, listInstances = {}) {
     return subscriptions;
 }
 
-export function useListSubscription({
-    listInstance,
-    crudArgs,
-    listArgs,
-    retrieveArgs,
-    passThroughPropertyNames = ["totalRecords", "totalPages", "perPage"],
-}) {
+export function useListSubscription({ listInstance, props, functions }) {
+    if (!listInstance && !props) {
+        throw new ListSubscriptionError("useListSubscription should be passed listInstance or props and crudArgs.");
+    }
+    if (listInstance && props) {
+        throw new ListSubscriptionError(
+            "useListSubscription should be passed listInstance or props and crudArgs, not both."
+        );
+    }
     if (!listInstance) {
-        listInstance = useListInstance({ crudArgs, listArgs, retrieveArgs });
+        listInstance = useListInstance({ props, functions });
     }
     if (!listInstance.state.crud.subscribe) {
         listInstance.state.crud.subscribe = defaultCrud.subscribe;
@@ -152,12 +163,7 @@ export function useListSubscription({
         state.errored = computed(() => parentState.errored || state.subscriptionErrored);
         state.error = computed(() => parentState.error || state.subscriptionError);
 
-        state.retrieveArgs = computed(() => parentState.retrieveArgs);
-        state.listArgs = computed(() => parentState.listArgs);
-        state.objects = toRef(parentState, "objects");
-        state.order = toRef(parentState, "order");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys.filter((key) => !["loading", "errored", "error"].includes(key))) {
             state[key] = toRef(parentState, key);
         }
 

package/use/object.js

@@ -2,11 +2,11 @@ import { useObjectCalculated } from "./objectCalculated";
 import { useObjectInstance } from "./objectInstance";
 import { useObjectRelated } from "./objectRelated";
 import { useObjectSubscription } from "./objectSubscription";
-import { reactive, shallowReactive, shallowReadonly, toRef } from "vue";
+import { reactive, shallowReadonly, toRef } from "vue";
 
 // Manages a chain of useObject* functions
 export const useObject = ({ props, functions }) => {
-    const managed = shallowReactive({
+    const managed = reactive({
         objectInstance: null,
         objectSubscription: null,
         objectRelated: null,
@@ -32,8 +32,8 @@ export const useObject = ({ props, functions }) => {
         parentState: managed.objectRelated.state,
         calculatedObjectRules: toRef(props, "calculatedObjectRules"),
     });
-    return shallowReactive({
+    return reactive({
         managed: shallowReadonly(managed),
-        state: reactive(managed.objectCalculated.state),
+        state: managed.objectCalculated.state,
     });
 };

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) {
@@ -121,10 +133,10 @@ export function useObjectCalculated({
             }
         });
     });
-    return {
+    return reactive({
         state,
         parentState,
         watchesRunning,
         effectScope: es,
-    };
+    });
 }

package/use/objectInstance.js

@@ -1,7 +1,7 @@
 import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils";
 import cloneDeep from "lodash-es/cloneDeep";
 import isFunction from "lodash-es/isFunction";
-import { reactive, shallowReactive, toRef } from "vue";
+import { reactive, toRef } from "vue";
 
 export class ObjectError extends Error {
     constructor(message) {
@@ -222,7 +222,7 @@ export function useObjectInstance({ props, functions = {} }) {
         state.error = null;
     }
 
-    return shallowReactive({
+    return reactive({
         state,
         retrieve,
         create,

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"),
@@ -119,10 +129,10 @@ export function useObjectRelated({
         });
     });
 
-    return {
+    return reactive({
         state,
         parentState,
         watchesRunning,
         effectScope: es,
-    };
+    });
 }

package/use/objectSubscription.js

@@ -1,7 +1,7 @@
 import { assignReactiveObject, loadingCombine } from "../utils";
 import { useCancellableIntent } from "./cancellableIntent";
 import { useObjectInstance } from "./objectInstance";
-import { computed, effectScope, reactive, shallowReactive, toRef } from "vue";
+import { computed, effectScope, reactive, toRef } from "vue";
 
 export class ObjectSubscriptionError extends Error {
     constructor(message) {
@@ -191,7 +191,7 @@ export function useObjectSubscription({
         });
     });
 
-    return shallowReactive({
+    return reactive({
         state,
         objectInstance,
         subscribeIntent,

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);
+        });
+    }
+}