@arrai-innovations/reactive-helpers 10.4.2 → 11.0.0

package/use/cancellableIntent.js

@@ -42,9 +42,14 @@ export function useCancellableIntent({
 
     async function cancel() {
         if (cancelFunction) {
-            const cancelPromise = cancelFunction().catch(console.error);
-            cancelFunction = null;
-            return cancelPromise;
+            return cancelFunction()
+                .catch(console.error)
+                .finally(() => {
+                    if (!state.clearActiveOnResolved) {
+                        cancelFunction = null;
+                        state.activeCount--;
+                    }
+                });
         }
         return false;
     }

package/use/index.js

@@ -2,9 +2,11 @@ export * from "./cancellableIntent.js";
 export * from "./combineClasses.js";
 export * from "./list.js";
 export * from "./listCalculated.js";
+export * from "./listKeys.js";
 export * from "./listFilter.js";
 export * from "./listInstance.js";
 export * from "./listRelated.js";
+export * from "./listSearch.js";
 export * from "./listSort.js";
 export * from "./listSubscription.js";
 export * from "./object.js";

package/use/list.js

@@ -1,9 +1,19 @@
-import { useListCalculated, listCalculatedFunctions } from "./listCalculated.js";
-import { useListFilter, listFilterFunctions } from "./listFilter.js";
-import { useListInstance, listInstanceFunctions } from "./listInstance.js";
-import { useListRelated, listRelatedFunctions } from "./listRelated.js";
-import { useListSort, listSortFunctions } from "./listSort.js";
-import { useListSubscription, listSubscriptionFunctions } from "./listSubscription.js";
+import { useListCalculated } from "./listCalculated.js";
+import { useListFilter } from "./listFilter.js";
+import { useListInstance } from "./listInstance.js";
+import {
+    listSortFunctions,
+    listFilterFunctions,
+    listRelatedFunctions,
+    listCalculatedFunctions,
+    listSubscriptionFunctions,
+    listInstanceFunctions,
+    listSearchFunctions,
+} from "./listKeys.js";
+import { useListRelated } from "./listRelated.js";
+import { useListSearch } from "./listSearch.js";
+import { useListSort } from "./listSort.js";
+import { useListSubscription } from "./listSubscription.js";
 import { usePagedListInstance } from "./paginatedListInstance.js";
 import { effectScope, reactive, shallowReactive, shallowReadonly, toRef } from "vue";
 
@@ -16,12 +26,23 @@ export const useLists = (listArgs) => {
 };
 
 // the big brother of useObject, managing a chain of useList* instances.
-export const useList = ({ props, functions = {}, paged = false, keepOldPages = false, useTextSearch = false }) => {
+export const useList = ({
+    props,
+    functions = {},
+    paged = false,
+    keepOldPages = false,
+    searchThrottle = 500,
+    sortThrottleWait,
+    searchShowAllWhenEmpty,
+}) => {
     const managed = shallowReactive({
         listInstance: null,
         listSubscription: null,
         listRelated: null,
         listCalculated: null,
+        listFilter: null,
+        listSearch: null,
+        listSort: null,
     });
 
     if (!("listArgs" in props)) {
@@ -58,19 +79,24 @@ export const useList = ({ props, functions = {}, paged = false, keepOldPages = f
 
         managed.listFilter = useListFilter({
             parentState: managed.listCalculated.state,
-            useTextSearch,
-            textSearchRules: toRef(props, "textSearchRules"),
-            textSearchValue: toRef(props, "textSearchValue"),
-            allowedValues: toRef(props, "allowedValues"),
-            excludedValues: toRef(props, "excludedValues"),
             allowedFilter: toRef(props, "allowedFilter"),
             excludedFilter: toRef(props, "excludedFilter"),
         });
 
-        managed.listSort = useListSort({
+        managed.listSearch = useListSearch({
             parentState: managed.listFilter.state,
+            props: reactive({
+                textSearchRules: toRef(props, "textSearchRules"),
+                textSearchValue: toRef(props, "textSearchValue"),
+            }),
+            throttle: searchThrottle,
+            showAllWhenEmpty: searchShowAllWhenEmpty,
+        });
+
+        managed.listSort = useListSort({
+            parentState: managed.listSearch.state,
             orderByRules: toRef(props, "orderByRules"),
-            sortThrottleWait: functions.sortThrottleWait,
+            sortThrottleWait,
         });
     });
 
@@ -94,6 +120,7 @@ export const useList = ({ props, functions = {}, paged = false, keepOldPages = f
         [managed.listRelated, listRelatedFunctions],
         [managed.listCalculated, listCalculatedFunctions],
         [managed.listFilter, listFilterFunctions],
+        [managed.listSearch, listSearchFunctions],
         [managed.listSort, listSortFunctions],
     ]) {
         for (const fnName of fnNames) {

package/use/listCalculated.js

@@ -1,19 +1,28 @@
-import { keyDiff, loadingCombine } from "../utils/index.js";
-import { listInstanceStateKeys } from "./listInstance.js";
-import { listRelatedStateKeys } from "./listRelated.js";
-import { listSubscriptionStateKeys } from "./listSubscription.js";
+import { keyDiff, loadingCombine, difference } from "../utils/index.js";
+import {
+    listRelatedStateKeys,
+    listSubscriptionStateKeys,
+    listInstanceStateKeys,
+    listFilterStateKeys,
+    listCalculatedStateKeys,
+    listSortStateKeys,
+    listSearchStateKeys,
+} from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 
-export const listCalculatedStateKeys = [
-    "calculatedObjects",
-    "calculatedObjectsParentStateObjectsWatchRunning",
-    "calculatedObjectsRules",
-    "calculatedObjectsWatchRunning",
-];
-
-export const listCalculatedFunctions = [];
+const parentStateKeys = difference(
+    new Set([
+        ...listInstanceStateKeys,
+        ...listSubscriptionStateKeys,
+        ...listRelatedStateKeys,
+        ...listFilterStateKeys,
+        ...listSortStateKeys,
+        ...listSearchStateKeys,
+    ]),
+    new Set(listCalculatedStateKeys)
+);
 
 export function useListCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -104,13 +113,7 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
     const es = effectScope();
 
     es.run(() => {
-        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) {
+        for (const key of parentStateKeys) {
             state[key] = toRef(parentState, key);
         }
 

package/use/listFilter.js

@@ -1,29 +1,29 @@
+import { assignReactiveObject, difference, loadingCombine } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
-import { listCalculatedStateKeys } from "./listCalculated.js";
-import { listInstanceStateKeys } from "./listInstance.js";
-import { listRelatedStateKeys } from "./listRelated.js";
-import { listSubscriptionStateKeys } from "./listSubscription.js";
-import { useSearch } from "./search.js";
-import get from "lodash-es/get.js";
-import identity from "lodash-es/identity.js";
-import isEmpty from "lodash-es/isEmpty.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, watch, watchEffect } from "vue";
-
-export const listFilterStateKeys = [
-    "objectIndexes",
-    // override but not ours
-    // "objects",
-    "textSearchRules",
-    "textSearchValue",
-    "allowedValues",
-    "excludedValues",
-    "allowedFilter",
-    "excludedFilter",
-    "searched",
-    "searching",
-];
-
-export const listFilterFunctions = [];
+import {
+    listSortStateKeys,
+    listFilterStateKeys,
+    listRelatedStateKeys,
+    listCalculatedStateKeys,
+    listSubscriptionStateKeys,
+    listInstanceStateKeys,
+    listSearchStateKeys,
+} from "./listKeys.js";
+import { effectScope, reactive, toRef, watch, unref, computed, nextTick } from "vue";
+
+3;
+
+const parentStateKeys = difference(
+    new Set([
+        ...listInstanceStateKeys,
+        ...listSubscriptionStateKeys,
+        ...listRelatedStateKeys,
+        ...listCalculatedStateKeys,
+        ...listSortStateKeys,
+        ...listSearchStateKeys,
+    ]),
+    new Set(listFilterStateKeys)
+);
 
 export function useListFilters(listFilterArgs, parentInstances) {
     const filters = {};
@@ -33,157 +33,131 @@ export function useListFilters(listFilterArgs, parentInstances) {
     return filters;
 }
 
-export function useListFilter({
-    parentState,
-    useTextSearch = false,
-    textSearchRules = [],
-    textSearchValue = "",
-    allowedValues = {},
-    excludedValues = {},
-    allowedFilter,
-    excludedFilter,
-    customIndexOptions = {},
-    customSearchOptions = {},
-}) {
+const inResults = (state, object, relatedObject, calculatedObject) => {
+    const unrefObject = unref(object);
+    const unrefRelatedObject = unref(relatedObject);
+    const unrefCalculatedObject = unref(calculatedObject);
+    return !(
+        (state.allowedFilter && !state.allowedFilter(unrefObject, unrefRelatedObject, unrefCalculatedObject)) ||
+        (state.excludedFilter && state.excludedFilter(unrefObject, unrefRelatedObject, unrefCalculatedObject))
+    );
+};
+
+export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
     const state = reactive({
-        objectIndexes: {},
+        inResults: {},
         objects: {},
-        textSearchRules,
-        textSearchValue,
-        allowedValues,
-        excludedValues,
+        objectsInOrder: [],
+        order: [],
         allowedFilter,
         excludedFilter,
-        searched: undefined,
-        searching: undefined,
+        objectsWatchRunning: undefined,
+        resultsWatchRunning: undefined,
+        running: undefined,
     });
 
     const es = effectScope();
 
-    let textSearchIndex;
+    const makeComputed = (key) => {
+        const object = toRef(parentState.objects, key);
+        const relatedObject = toRef(parentState.relatedObjects, key);
+        const calculatedObject = toRef(parentState.calculatedObjects, key);
+        return computed(() => inResults(state, object, relatedObject, calculatedObject));
+    };
 
-    es.run(() => {
-        for (const key of listInstanceStateKeys) {
-            if (key === "objects") {
-                continue;
+    let previousAllowedFilter = null,
+        previousExcludedFilter = null;
+
+    const objectsWatch = () => {
+        if (parentState.running) {
+            return;
+        }
+        state.objectsWatchRunning = true;
+        const allowedOrExcludedFilterChanged =
+            allowedFilter !== previousAllowedFilter || excludedFilter !== previousExcludedFilter;
+        if (!state.allowedFilter && !state.excludedFilter) {
+            assignReactiveObject(state.inResults, {});
+            assignReactiveObject(state.objects, parentState.objects);
+        } else if (allowedOrExcludedFilterChanged) {
+            // recreate all the computeds
+            assignReactiveObject(state.inResults, {});
+            for (const key of Object.keys(parentState.objects)) {
+                state.inResults[key] = makeComputed(key);
+            }
+        } else {
+            // we just need to make sure all the computeds exist that should exist
+            const { addedKeys, removedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.inResults), {
+                sameKeys: false,
+            });
+            for (const addedKey of addedKeys) {
+                state.inResults[addedKey] = makeComputed(addedKey);
+            }
+            for (const removedKey of removedKeys) {
+                delete state.inResults[removedKey];
             }
-            state[key] = toRef(parentState, key);
         }
-        for (const key of listSubscriptionStateKeys) {
-            state[key] = toRef(parentState, key);
+        previousAllowedFilter = allowedFilter;
+        previousExcludedFilter = excludedFilter;
+        nextTick().then(() => {
+            state.objectsWatchRunning = false;
+        });
+    };
+
+    const resultsWatch = async () => {
+        if (parentState.running) {
+            return;
         }
-        for (const key of listRelatedStateKeys) {
-            state[key] = toRef(parentState, key);
+        state.resultsWatchRunning = true;
+        await nextTick();
+        if (state.allowedFilter || state.excludedFilter) {
+            assignReactiveObject(
+                state.objects,
+                Object.fromEntries(
+                    Object.entries(state.inResults)
+                        .filter(([, value]) => !!value)
+                        .map(([id]) => [id, toRef(parentState.objects, id)])
+                )
+            );
         }
-        for (const key of listCalculatedStateKeys) {
-            state[key] = toRef(parentState, key);
+
+        nextTick().then(() => {
+            state.resultsWatchRunning = false;
+        });
+    };
+
+    const orderWatch = () => {
+        let desiredOrder = parentState.order.filter((id) => !!state.objects[id]),
+            desiredObjectsInOrder = desiredOrder.map((id) => toRef(state.objects, id));
+        if (!state.allowedFilter && !state.excludedFilter) {
+            desiredOrder = parentState.order;
+            desiredObjectsInOrder = parentState.objectsInOrder;
         }
-        if (useTextSearch) {
-            textSearchIndex = useSearch(customIndexOptions, customSearchOptions);
-            textSearchIndex.state.search = toRef(state, "textSearchValue");
-            state.searched = toRef(textSearchIndex.state, "searched");
-            state.searching = toRef(textSearchIndex.state, "searching");
+        assignReactiveObject(state.objectsInOrder, desiredObjectsInOrder);
+        assignReactiveObject(state.order, desiredOrder);
+    };
+
+    es.run(() => {
+        for (const key of parentStateKeys) {
+            state[key] = toRef(parentState, key);
         }
 
-        // todo: computed is not the solution here for deep reactions
-        state.objectsInOrder = computed(() => parentState.order.map((id) => state.objects[id]).filter(identity));
-        state.order = computed(() => state.objectsInOrder.map((object) => `${object.id}`));
-
-        // todo: this huge watchEffect is fairly gross, but also doesn't watch deep similarly to computed
-        watchEffect(() => {
-            const allowedValuesEmpty = !state.allowedValues || isEmpty(state.allowedValues);
-            const excludedValuesEmpty = !state.excludedValues || isEmpty(state.excludedValues);
-            const resultsEmpty = useTextSearch
-                ? !textSearchIndex.state.results || isEmpty(textSearchIndex.state.results)
-                : undefined;
-            const searched = useTextSearch ? textSearchIndex.state.searched : undefined;
-
-            const inResults = (object) => {
-                if (!allowedValuesEmpty && !state.allowedValues[object.id]) {
-                    return false;
-                }
-                if (!excludedValuesEmpty && state.excludedValues[object.id]) {
-                    return false;
-                }
-                if (state.allowedFilter && !state.allowedFilter(object)) {
-                    return false;
-                }
-                if (state.excludedFilter && state.excludedFilter(object)) {
-                    return false;
-                }
-                if (!useTextSearch) {
-                    return true;
-                }
-                if (!searched && resultsEmpty) {
-                    return true;
-                }
-                return !!textSearchIndex.state.results[object.id];
-            };
-            const { removedKeys, sameKeys, addedKeys } = keyDiff(
-                Object.keys(parentState.objects),
-                Object.keys(state.objects)
-            );
-            for (const removedKey of removedKeys) {
-                delete state.objects[removedKey];
-            }
-            for (const addedKey of addedKeys) {
-                if (inResults(parentState.objects[addedKey])) {
-                    state.objects[addedKey] = toRef(parentState.objects, addedKey);
-                }
-            }
-            for (const sameKey of sameKeys) {
-                if (inResults(parentState.objects[sameKey])) {
-                    if (state.objects[sameKey] !== parentState.objects[sameKey]) {
-                        state.objects[sameKey] = toRef(parentState.objects, sameKey);
-                    }
-                } else {
-                    delete state.objects[sameKey];
-                }
-            }
+        state.running = computed(() => {
+            return loadingCombine(parentState.running, state.objectsWatchRunning, state.resultsWatchRunning);
         });
 
-        if (useTextSearch) {
-            const stopIndexWatch = {};
-
-            // todo: this huge watchEffect is fairly gross, but also doesn't watch deep similarly to computed
-            watchEffect(() => {
-                const { removedKeys, addedKeys } = keyDiff(
-                    Object.keys(parentState.objects),
-                    Object.keys(state.objectIndexes)
-                );
-                for (const removedKey of removedKeys) {
-                    delete state.objectIndexes[removedKey];
-                    textSearchIndex.removeIndex(removedKey);
-                    if (stopIndexWatch[removedKey]) {
-                        stopIndexWatch[removedKey]();
-                        delete stopIndexWatch[removedKey];
-                    }
-                }
-                for (const addedKey of addedKeys) {
-                    state.objectIndexes[addedKey] = true;
-                    textSearchIndex.addIndex(
-                        addedKey,
-                        state.textSearchRules.map((o) => get(parentState.objects[addedKey], o)).join(" ")
-                    );
-                    stopIndexWatch[addedKey] = watch(
-                        [toRef(state, "textSearchRules"), toRef(parentState.objects, "addedKey")],
-                        (textSearchRules, object) => {
-                            textSearchIndex.updateIndex(addedKey, textSearchRules.map((o) => get(object, o)).join(" "));
-                        }
-                    );
-                }
-            });
-            onScopeDispose(() => {
-                for (const key in stopIndexWatch) {
-                    stopIndexWatch[key]();
-                }
-            });
-        }
+        watch(toRef(state, "inResults"), resultsWatch, { deep: true });
+
+        watch(toRef(parentState, "order"), orderWatch, { deep: true, immediate: true });
+
+        watch(
+            [() => Object.keys(parentState.objects), toRef(state, "allowedFilter"), toRef(state, "excludedFilter")],
+            objectsWatch,
+            { immediate: true }
+        );
     });
     return {
         state,
         parentState,
-        textSearchIndex,
         effectScope: es,
     };
 }

package/use/listInstance.js

@@ -12,34 +12,6 @@ export class ListError extends Error {
     }
 }
 
-export const listInstanceStateKeys = [
-    "crud",
-    "retrieveArgs",
-    "listArgs",
-    "objects",
-    "loading",
-    "errored",
-    "error",
-    "objectsInOrder",
-    "order",
-    // when paged
-    "totalRecords",
-    "totalPages",
-    "perPage",
-];
-
-export const listInstanceFunctions = [
-    "list",
-    "addListObject",
-    "updateListObject",
-    "deleteListObject",
-    "clearList",
-    "clearError",
-    "getFakeId",
-    "defaultPageCallback",
-    "pageCallback",
-];
-
 /**
  * The configuration options used to create a list instance.
  * @typedef {object} ListInstanceOptions

package/use/listKeys.js

@@ -0,0 +1,94 @@
+export const listInstanceStateKeys = [
+    "crud",
+    "retrieveArgs",
+    "listArgs",
+    "objects",
+    "loading",
+    "errored",
+    "error",
+    "objectsInOrder",
+    "order",
+    // when paged
+    "totalRecords",
+    "totalPages",
+    "perPage",
+];
+export const listInstanceFunctions = [
+    "list",
+    "addListObject",
+    "updateListObject",
+    "deleteListObject",
+    "clearList",
+    "clearError",
+    "getFakeId",
+    "defaultPageCallback",
+    "pageCallback",
+];
+
+export const listSubscriptionStateKeys = [
+    "subscriptionLoading",
+    "subscriptionErrored",
+    "subscriptionError",
+    "intendToList",
+    "intendToSubscribe",
+    "subscribed",
+];
+export const listSubscriptionFunctions = ["subscribe", "unsubscribe", "clearError"];
+
+export const listRelatedStateKeys = [
+    "relatedObjects",
+    "relatedObjectsRules",
+    "relatedObjectsWatchRunning",
+    "relatedObjectsParentStateObjectsWatchRunning",
+    "running",
+];
+export const listRelatedFunctions = [];
+
+export const listCalculatedStateKeys = [
+    "calculatedObjects",
+    "calculatedObjectsParentStateObjectsWatchRunning",
+    "calculatedObjectsRules",
+    "calculatedObjectsWatchRunning",
+    "running",
+];
+export const listCalculatedFunctions = [];
+
+export const listFilterStateKeys = [
+    "objects",
+    "order",
+    "objectsInOrder",
+    "allowedFilter",
+    "excludedFilter",
+    "running",
+    "objectsWatchRunning",
+    "resultsWatchRunning",
+];
+export const listFilterFunctions = [];
+
+export const listSearchStateKeys = [
+    "objectIndexes",
+    "objects",
+    "order",
+    "objectsInOrder",
+    "textSearchRules",
+    "textSearchValue",
+    "searched",
+    "updateSearchIndexesRunning",
+    "customDocumentOptions",
+    "customSearchOptions",
+    "running",
+    "newSearchComputeds",
+];
+export const listSearchFunctions = [];
+export const listSortStateKeys = [
+    "orderByRules",
+    "order",
+    "objectsInOrder",
+    "sortCriteria",
+    "orderByDesc",
+    "sortCriteriaWatchRunning",
+    "sortWatchRunning",
+    "outstandingEffects",
+    "running",
+];
+export const listSortFunctions = [];

package/use/listRelated.js

@@ -1,7 +1,15 @@
+import { difference } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
-import { listInstanceStateKeys } from "./listInstance.js";
-import { listSubscriptionStateKeys } from "./listSubscription.js";
+import {
+    listSubscriptionStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
+    listCalculatedStateKeys,
+    listSortStateKeys,
+    listFilterStateKeys,
+    listSearchStateKeys,
+} from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
 import identity from "lodash-es/identity.js";
@@ -11,14 +19,17 @@ import isEqual from "lodash-es/isEqual.js";
 import isUndefined from "lodash-es/isUndefined.js";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
-export const listRelatedStateKeys = [
-    "relatedObjects",
-    "relatedObjectsRules",
-    "relatedObjectsWatchRunning",
-    "relatedObjectsParentStateObjectsWatchRunning",
-];
-
-export const listRelatedFunctions = [];
+const parentStateKeys = difference(
+    new Set([
+        ...listInstanceStateKeys,
+        ...listSubscriptionStateKeys,
+        ...listCalculatedStateKeys,
+        ...listFilterStateKeys,
+        ...listSortStateKeys,
+        ...listSearchStateKeys,
+    ]),
+    new Set(listRelatedStateKeys)
+);
 
 export function useListRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
@@ -151,10 +162,7 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
     const es = effectScope();
 
     es.run(() => {
-        for (const key of listInstanceStateKeys) {
-            state[key] = toRef(parentState, key);
-        }
-        for (const key of listSubscriptionStateKeys) {
+        for (const key of parentStateKeys) {
             state[key] = toRef(parentState, key);
         }