@arrai-innovations/reactive-helpers 1.0.0

package/tests/unit/utils/unrefAndToRawDeep.spec.js

@@ -0,0 +1,170 @@
+import { reactive, ref, toRef, unref } from "vue";
+import { circular, unrefAndToRawDeep } from "../../../utils";
+
+describe("unrefAndToRawDeep", () => {
+    it("should unref refs", () => {
+        const obj = {
+            a: ref(1),
+            b: ref(true),
+            c: ref("foo"),
+            d: ref(null),
+        };
+        expect(unrefAndToRawDeep(obj)).toEqual({
+            a: 1,
+            b: true,
+            c: "foo",
+            d: null,
+        });
+    });
+    it("should toRaw reactive", () => {
+        const obj = {
+            state: reactive({
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            }),
+            parentState: reactive({
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            }),
+        };
+        expect(unrefAndToRawDeep(obj)).toEqual({
+            state: {
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            },
+            parentState: {
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            },
+        });
+    });
+    it("should handle arrays", () => {
+        const arr = [ref(1), ref(true), ref("foo"), ref(null)];
+        const arr2 = [
+            reactive({
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            }),
+            reactive({
+                a: 2,
+                b: false,
+                c: "bar",
+                d: NaN,
+            }),
+        ];
+        expect(unrefAndToRawDeep(arr)).toEqual([1, true, "foo", null]);
+        expect(unrefAndToRawDeep(arr2)).toEqual([
+            {
+                a: 1,
+                b: true,
+                c: "foo",
+                d: null,
+            },
+            {
+                a: 2,
+
+                b: false,
+                c: "bar",
+                d: NaN,
+            },
+        ]);
+    });
+    it("should toRaw reactive with circular ref", () => {
+        const state = reactive({
+            objects: {
+                1: {
+                    id: 1,
+                    name: "one",
+                    parent: 2,
+                    children: [],
+                    refProperty: ref(null),
+                },
+                2: {
+                    id: 2,
+                    name: "two",
+                    parent: null,
+                    children: [1],
+                    refProperty: ref(null),
+                },
+                3: {
+                    id: 3,
+                    name: "three",
+                    parent: null,
+                    children: [],
+                },
+            },
+        });
+        state.objects["1"].relatedObjects = reactive({
+            parent: toRef(state.objects, "2"),
+        });
+        state.objects["2"].relatedObjects = reactive({
+            children: [toRef(state.objects, "1")],
+        });
+        state.objects["1"].refProperty = toRef(state.objects["3"], "name");
+        state.objects["2"].refProperty = toRef(state.objects["3"], "name");
+        expect(state.objects["1"]).toBe(unref(state.objects["2"].relatedObjects.children[0]));
+        expect(state.objects["2"]).toBe(state.objects["1"].relatedObjects.parent);
+        expect(state.objects["1"].refProperty).toBe(state.objects["3"].name);
+        expect(state.objects["2"].refProperty).toBe(state.objects["3"].name);
+        expect(unrefAndToRawDeep(state)).toEqual({
+            objects: {
+                1: {
+                    id: 1,
+                    name: "one",
+                    parent: 2,
+                    children: [],
+                    refProperty: "three",
+                    relatedObjects: {
+                        parent: {
+                            id: 2,
+                            name: "two",
+                            parent: null,
+                            children: [1],
+                            refProperty: "three",
+                            relatedObjects: {
+                                children: [circular],
+                            },
+                        },
+                    },
+                },
+                2: {
+                    id: 2,
+                    name: "two",
+                    parent: null,
+                    children: [1],
+                    refProperty: "three",
+                    relatedObjects: {
+                        children: [
+                            {
+                                id: 1,
+                                name: "one",
+                                parent: 2,
+                                children: [],
+                                refProperty: "three",
+                                relatedObjects: {
+                                    parent: circular,
+                                },
+                            },
+                        ],
+                    },
+                },
+                3: {
+                    id: 3,
+                    name: "three",
+                    parent: null,
+                    children: [],
+                },
+            },
+        });
+    });
+});

package/use/index.js

@@ -0,0 +1,8 @@
+export * from "./listFilter.js";
+export * from "./listInstance.js";
+export * from "./listRelated.js";
+export * from "./listSort.js";
+export * from "./listSubscription.js";
+export * from "./objectInstance.js";
+export * from "./objectSubscription.js";
+export * from "./search.js";

package/use/listFilter.js

@@ -0,0 +1,157 @@
+import { useSearch } from "./search";
+import { keyDiff } from "../utils/keyDiff";
+import { get, identity, isEmpty } from "lodash";
+import { computed, effectScope, onScopeDispose, reactive, toRef, watch, watchEffect } from "vue";
+
+export function useListFilters(listFilterArgs, parentInstances) {
+    const filters = {};
+    for (const [key, value] of Object.entries(listFilterArgs)) {
+        filters[key] = useListFilter({ parentState: parentInstances[key].state || parentInstances[key], ...value });
+    }
+    return filters;
+}
+
+export function useListFilter({
+    parentState,
+    useTextSearch = false,
+    textSearchRules = [],
+    textSearchValue = "",
+    allowedValues = {},
+    excludedValues = {},
+    allowedFilter,
+    excludedFilter,
+}) {
+    const state = reactive({
+        objectIndexes: {},
+        objects: {},
+        textSearchRules,
+        textSearchValue,
+        allowedValues,
+        excludedValues,
+        allowedFilter,
+        excludedFilter,
+    });
+
+    const es = effectScope();
+
+    let textSearchIndex;
+
+    es.run(() => {
+        if (useTextSearch) {
+            textSearchIndex = useSearch();
+            textSearchIndex.state.search = toRef(state, "textSearchValue");
+            state.searched = toRef(textSearchIndex.state, "searched");
+            state.searching = toRef(textSearchIndex.state, "searching");
+        }
+
+        state.order = computed(() => {
+            if (!parentState.order) {
+                return parentState.order;
+            }
+            return parentState.order.filter((id) => state.objects[id]);
+        });
+        state.objectsInOrder = computed(() => {
+            if (!parentState.order) {
+                return [];
+            }
+            const order = state.order;
+            const objects = state.objects;
+            return order.map((key) => objects[key]).filter(identity);
+        });
+
+        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];
+                }
+            }
+        });
+
+        if (useTextSearch) {
+            const stopIndexWatch = {};
+
+            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]();
+                }
+            });
+        }
+    });
+    return {
+        state,
+        parentState,
+        textSearchIndex,
+        effectScope: es,
+    };
+}

package/use/listInstance.js

@@ -0,0 +1,144 @@
+import { isEmpty, keyBy } from "lodash";
+import { effectScope, reactive, unref } from "vue";
+import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/assignReactiveObject";
+import inspect from "browser-util-inspect";
+
+export class ListError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.name = "ListError";
+        this.code = code;
+    }
+}
+
+const defaultCrud = reactive({
+    args: {},
+    list: undefined,
+});
+
+export function setListInstanceCrud({ list, args = {} } = {}) {
+    defaultCrud.list = list;
+    assignReactiveObject(defaultCrud.args, args);
+}
+
+export function useListInstances(listInstanceArgs) {
+    const instances = {};
+    for (const [key, value] of Object.entries(listInstanceArgs)) {
+        instances[key] = useListInstance(value);
+    }
+    return instances;
+}
+
+export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetrieveArgs = {} }) {
+    const state = reactive({
+        listInstanceCrud: {
+            args: {},
+            list: undefined,
+        },
+        defaultRetrieveArgs,
+        defaultListArgs,
+        objects: {},
+        loading: undefined,
+        errored: false,
+        error: null,
+        addedOrder: [],
+    });
+    assignReactiveObject(state.listInstanceCrud, defaultCrud);
+    if (crudArgs) {
+        assignReactiveObject(state.listInstanceCrud.args, crudArgs);
+    }
+
+    async function list({ listArgs, retrieveArgs } = {}) {
+        if (state.loading) {
+            throw new ListError("already loading.");
+        }
+        if (isEmpty(retrieveArgs) && !isEmpty(unref(state.defaultRetrieveArgs))) {
+            retrieveArgs = unref(state.defaultRetrieveArgs);
+        }
+        if (isEmpty(listArgs) && !isEmpty(unref(state.defaultListArgs))) {
+            listArgs = unref(state.defaultListArgs);
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.listInstanceCrud
+            .list({
+                crudArgs: state.listInstanceCrud.args,
+                retrieveArgs,
+                listArgs,
+                pageCallback: (newObjects) => {
+                    addOrUpdateReactiveObject(state.objects, keyBy(newObjects, "id"));
+                },
+            })
+            .then(() => {
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    function addListObject(object) {
+        if (!object.id) {
+            throw new ListError(`addListObject: object missing id.\n${inspect(object)}`, "missing-id");
+        }
+        if (object.id in state.objects) {
+            throw new ListError(`addListObject: list already has object for id: ${inspect(object.id)}`, "duplicate-id");
+        }
+        state.objects[object.id] = {};
+        state.addedOrder.push(object.id);
+        assignReactiveObject(state.objects[object.id], object);
+    }
+
+    function updateListObject(object) {
+        if (!object.id) {
+            throw new ListError(`updateListObject: object missing id.\n${inspect(object)}`, "missing-id");
+        }
+        if (!(object.id in state.objects)) {
+            throw new ListError(
+                `updateListObject: list missing object for update by id: ${inspect(object.id)}`,
+                "missing-object"
+            );
+        }
+        assignReactiveObject(state.objects[object.id], object);
+    }
+
+    function deleteListObject(objectId) {
+        if (!(objectId in state.objects)) {
+            throw new ListError(
+                `deleteListObject: list missing object for removal by id: ${inspect(objectId)}`,
+                "missing-object"
+            );
+        }
+        state.addedOrder.splice(state.addedOrder.indexOf(objectId), 1);
+        delete state.objects[objectId];
+    }
+
+    function getFakeId() {
+        let fakeId;
+        do {
+            fakeId = Math.floor(Math.random() * Number.MIN_SAFE_INTEGER);
+        } while (fakeId in state.objects);
+        return fakeId;
+    }
+
+    const es = effectScope();
+
+    // we could have effects? let's keep the interface to keep our options open to add without major changes.
+    es.run(() => {});
+
+    return {
+        state,
+        list,
+        addListObject,
+        updateListObject,
+        deleteListObject,
+        effectScope: es,
+        getFakeId,
+    };
+}

package/use/listRelated.js

@@ -0,0 +1,135 @@
+import { computed, effectScope, onScopeDispose, reactive, toRefs, watch } from "vue";
+import { get, isArray, isEmpty, isUndefined } from "lodash";
+import { keyDiff } from "../utils/keyDiff";
+
+export function useListRelateds(instances, args) {
+    for (const [key, value] of Object.entries(args)) {
+        useListRelated({ listInstance: instances[key], ...value });
+    }
+}
+
+export function useListRelated({
+    parentState,
+    relatedObjectsRules,
+    relatedObjectsPropertyName = "relatedObjects", // NOT REACTIVE
+}) {
+    const state = reactive({
+        relatedObjectsRules: relatedObjectsRules,
+        relatedObjectsObjects: {},
+        objects: {},
+    });
+    const relatedObjectsEffectScopes = {};
+    const combinedEffectScopes = {};
+
+    // 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)
+        );
+        for (const removedKey of removedKeys) {
+            delete state.relatedObjectsObjects[removedKey];
+            delete state.objects[removedKey];
+            if (relatedObjectsEffectScopes[removedKey]) {
+                relatedObjectsEffectScopes[removedKey].stop();
+                delete relatedObjectsEffectScopes[removedKey];
+            }
+            if (combinedEffectScopes[removedKey]) {
+                combinedEffectScopes[removedKey].stop();
+                delete combinedEffectScopes[removedKey];
+            }
+        }
+        for (const addedKey of addedKeys) {
+            state.relatedObjectsObjects[addedKey] = {};
+            combinedEffectScopes[addedKey] = effectScope();
+            combinedEffectScopes[addedKey].run(() => {
+                state.objects[addedKey] = computed(() => ({
+                    ...toRefs(state.relatedObjectsObjects[addedKey]),
+                    ...toRefs(parentState.objects[addedKey]),
+                }));
+            });
+        }
+    }
+
+    function relatedObjectsWatch() {
+        if (state.relatedObjectsRules === false) {
+            return;
+        }
+        const relatedObjectsRulesIsEmpty = isEmpty(state.relatedObjectsRules);
+        for (const objectKey of Object.keys(state.relatedObjectsObjects)) {
+            const relatedObjectsEffectScope = effectScope();
+            relatedObjectsEffectScope.run(() => {
+                const relatedObjectsObject = state.relatedObjectsObjects[objectKey];
+                const originalObject = parentState.objects[objectKey];
+                if (!relatedObjectsObject[ropn]) {
+                    relatedObjectsObject[ropn] = {};
+                }
+                let removedRuleKeys, addedRuleKeys;
+                if (!relatedObjectsRulesIsEmpty) {
+                    ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
+                        Object.keys(state.relatedObjectsRules),
+                        Object.keys(relatedObjectsObject[ropn])
+                    ));
+                } else {
+                    if (isEmpty(relatedObjectsObject[ropn])) {
+                        return;
+                    }
+                    removedRuleKeys = Object.keys(relatedObjectsObject[ropn]);
+                    addedRuleKeys = [];
+                }
+                for (const removedRuleKey of removedRuleKeys) {
+                    delete relatedObjectsObject[ropn][removedRuleKey];
+                }
+                for (const addedRuleKey of addedRuleKeys) {
+                    relatedObjectsObject[ropn][addedRuleKey] = computed(() => {
+                        const ruleObjects = state.relatedObjectsRules?.[addedRuleKey]?.objects;
+                        const rulePkKey = state.relatedObjectsRules?.[addedRuleKey]?.pkKey || addedRuleKey;
+                        if (!ruleObjects || !rulePkKey) {
+                            return undefined;
+                        }
+                        const value = get(originalObject, rulePkKey);
+                        if (isUndefined(value)) {
+                            return undefined;
+                        }
+                        if (isArray(value)) {
+                            return value.map((e) => ruleObjects[e]);
+                        }
+                        return ruleObjects[value];
+                    });
+                }
+            });
+            relatedObjectsEffectScopes[objectKey] = relatedObjectsEffectScope;
+        }
+        parentStateObjectsWatch();
+    }
+
+    const es = effectScope();
+
+    es.run(() => {
+        watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
+        watch(
+            [
+                () => Object.keys(state.relatedObjectsObjects),
+                () => (state.relatedObjectsRules ? Object.keys(state.relatedObjectsRules) : state.relatedObjectsRules),
+            ],
+            relatedObjectsWatch,
+            { immediate: true }
+        );
+
+        onScopeDispose(() => {
+            for (const objectKey of Object.keys(relatedObjectsEffectScopes)) {
+                relatedObjectsEffectScopes[objectKey].stop();
+            }
+            for (const objectKey of Object.keys(combinedEffectScopes)) {
+                combinedEffectScopes[objectKey].stop();
+            }
+        });
+    });
+    return {
+        state,
+        parentState,
+        effectScope: es,
+    };
+}