@arrai-innovations/reactive-helpers 1.0.0

package/use/listSort.js

@@ -0,0 +1,190 @@
+import { effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { cloneDeep, get, identity, isEmpty, isNull, isUndefined, partial, throttle, zip } from "lodash";
+import { assignReactiveObject, keyDiff } from "../utils";
+
+const collator = new Intl.Collator(undefined, { numeric: true });
+
+const defaultSortThrottleWait = Symbol("defaultSortThrottleWait");
+
+const defaultOptions = {
+    sortThrottleWait: 100,
+};
+
+export function setListSortDefaultOptions({ sortThrottleWait }) {
+    defaultOptions.sortThrottleWait = sortThrottleWait;
+}
+
+export function useListSorts(args, parentInstances) {
+    const sorts = {};
+    for (const [key, value] of Object.entries(args)) {
+        sorts[key] = useListSort({ parentState: parentInstances[key].state || parentInstances[key], ...value });
+    }
+    return sorts;
+}
+
+export function useListSort({ parentState, orderByRules, sortThrottleWait = defaultSortThrottleWait }) {
+    if (sortThrottleWait === defaultSortThrottleWait) {
+        sortThrottleWait = defaultOptions.sortThrottleWait;
+    }
+    const state = reactive({
+        orderByRules,
+        order: [],
+        objectsInOrder: [],
+        sortCriteria: {},
+        sortCriteriaWatches: {},
+        orderByDesc: [],
+    });
+    const es = effectScope();
+
+    function removeSortCriteria(removedKey) {
+        const stopWatches = state.sortCriteriaWatches[removedKey] || [];
+        let stopWatch = stopWatches.pop();
+        while (stopWatch) {
+            stopWatch();
+            stopWatch = stopWatches.pop();
+        }
+        delete state.sortCriteriaWatches[removedKey];
+        delete state.sortCriteria[removedKey];
+    }
+
+    function addSortCriteria(object, key) {
+        const oldStopWatches = state.sortCriteriaWatches[key] || [];
+        let stopWatch = oldStopWatches.pop();
+        while (stopWatch) {
+            stopWatch();
+            stopWatch = oldStopWatches.pop();
+        }
+        const stopWatches = [];
+        if (!state.sortCriteria[key]) {
+            state.sortCriteria[key] = [];
+        }
+        stopWatches.push(
+            watch(
+                [object, state.orderByRules],
+                () => {
+                    const newSearchCriteria = [];
+                    for (const orderByObj of state.orderByRules.filter(identity)) {
+                        const obo = unref(orderByObj);
+                        const getter = obo.keyFn ? obo.keyFn : partial(get, partial.placeholder, obo.key);
+                        newSearchCriteria.push(getter(object));
+                    }
+                    assignReactiveObject(state.sortCriteria[key], newSearchCriteria);
+                },
+                {
+                    deep: true,
+                    immediate: true,
+                }
+            )
+        );
+        state.sortCriteriaWatches[key] = stopWatches;
+    }
+
+    function sortCriteriaWatch() {
+        if (!state.orderByRules || !state.orderByRules.filter(identity).length) {
+            if (!isEmpty(state.sortCriteria)) {
+                for (const removedKey of Object.keys(state.sortCriteria)) {
+                    removeSortCriteria(removedKey);
+                }
+            }
+            return;
+        }
+        const { removedKeys, addedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.sortCriteria));
+        for (const removedKey of removedKeys) {
+            removeSortCriteria(removedKey);
+        }
+
+        for (const addedKey of addedKeys) {
+            const object = parentState.objects[addedKey];
+            addSortCriteria(object, addedKey);
+        }
+        assignReactiveObject(
+            state.orderByDesc,
+            state.orderByRules.filter(identity).map((e) => e.desc || false)
+        );
+    }
+
+    function sortWatch() {
+        if (!state.orderByRules || !state.orderByRules.length) {
+            const serverOrderObjectsInOrder = parentState.addedOrder
+                .map((e) => parentState.objects[e])
+                .filter(identity);
+            assignReactiveObject(
+                state.order,
+                serverOrderObjectsInOrder.map((e) => String(e.id))
+            );
+            assignReactiveObject(state.objectsInOrder, serverOrderObjectsInOrder);
+            return;
+        }
+
+        let idList = Object.keys(parentState.objects);
+
+        idList.sort((xKey, yKey) => {
+            const xCriteria = state.sortCriteria[xKey];
+            const yCriteria = state.sortCriteria[yKey];
+            for (let [x, y, orderByObj] of zip(xCriteria, yCriteria, state.orderByRules)) {
+                if (!orderByObj) {
+                    continue;
+                }
+                if (orderByObj.desc) {
+                    [x, y] = [y, x];
+                }
+                const isUndefinedX = isUndefined(x) || isNull(x);
+                const isUndefinedY = isUndefined(y) || isNull(y);
+                if (isUndefinedX && isUndefinedY) {
+                    continue;
+                } else if (isUndefinedX) {
+                    return -1;
+                } else if (isUndefinedY) {
+                    return 1;
+                }
+                if (orderByObj.localeCompare) {
+                    const strComp = collator.compare(x, y);
+                    if (strComp) {
+                        return strComp;
+                    }
+                } else {
+                    if (x < y) {
+                        return -1;
+                    }
+                    if (x > y) {
+                        return 1;
+                    }
+                }
+            }
+            return 0;
+        });
+        assignReactiveObject(state.order, idList);
+        assignReactiveObject(state.objectsInOrder, idList.map((e) => parentState.objects[e]).filter(identity));
+    }
+
+    const throttledSortWatch = throttle(sortWatch, sortThrottleWait);
+
+    es.run(() => {
+        state.objects = toRef(parentState, "objects");
+        // we do not need two immediate watches to the same function.
+        watch(() => Object.keys(parentState.objects), sortCriteriaWatch);
+        watch(() => cloneDeep(state.orderByRules), sortCriteriaWatch, {
+            deep: true,
+            immediate: true,
+        });
+
+        watch(
+            [toRef(state, "orderByDesc"), () => state.sortCriteria, () => parentState.addedOrder],
+            throttledSortWatch,
+            {
+                deep: true,
+            }
+        );
+        onScopeDispose(() => {
+            Object.keys(state.sortCriteriaWatches).forEach((key) => {
+                removeSortCriteria(key);
+            });
+        });
+    });
+
+    return {
+        state,
+        parentState,
+        effectScope: es,
+    };
+}

package/use/listSubscription.js

@@ -0,0 +1,143 @@
+import { effectScope, onScopeDispose, reactive } from "vue";
+import { useListInstance } from "./listInstance";
+import { cloneDeep, isEmpty, isObject } from "lodash";
+import { assignReactiveObject } from "../utils/assignReactiveObject";
+import inspect from "browser-util-inspect";
+
+export class ListSubscriptionError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "ListSubscriptionError";
+    }
+}
+
+const defaultCrud = reactive({
+    subscribe: undefined,
+});
+
+export function setListSubscriptionCrud({ subscribe }) {
+    defaultCrud.subscribe = subscribe;
+}
+
+export function useListSubscriptions(args, listInstances = {}) {
+    const subscriptions = {};
+    for (const [key, value] of Object.entries(args)) {
+        subscriptions[key] = useListSubscription({ listInstance: listInstances[key], ...value });
+    }
+    return subscriptions;
+}
+
+export function useListSubscription({ listInstance, crudArgs, defaultListArgs, defaultRetrieveArgs }) {
+    if (!listInstance) {
+        listInstance = useListInstance({ crudArgs, defaultListArgs, defaultRetrieveArgs });
+    }
+    let cancelSubscription = null;
+    const state = reactive({
+        listSubscriptionCrud: {},
+        intendToSubscribe: false,
+    });
+    assignReactiveObject(state.listSubscriptionCrud, defaultCrud);
+
+    async function subscribe({ listArgs, retrieveArgs } = {}) {
+        if (!listArgs) {
+            listArgs = cloneDeep(listInstance.state.defaultListArgs);
+        }
+        if (!retrieveArgs) {
+            retrieveArgs = cloneDeep(listInstance.state.defaultRetrieveArgs);
+        }
+        if (!cancelSubscription) {
+            cancelSubscription = await state.listSubscriptionCrud.subscribe({
+                crudArgs: listInstance.state.listInstanceCrud.args,
+                listArgs,
+                retrieveArgs,
+                subscriptionEventCallback,
+            });
+            state.subscribed = true;
+            return true;
+        }
+        return false;
+    }
+
+    function subscriptionEventCallback(data, action) {
+        if (!data || (isObject(data) && isEmpty(data))) {
+            throw new ListSubscriptionError(`got update with no data (${inspect(data)}), action: ${action}`);
+        } else if (action === "delete") {
+            deleteFromSubscription(data);
+        } else if (action === "create") {
+            addFromSubscription(data);
+        } else if (action === "update") {
+            updateFromSubscription(data);
+        } else {
+            throw new ListSubscriptionError(`got update for unknown action: ${action}\n${inspect(data)}`);
+        }
+    }
+
+    async function unsubscribe() {
+        if (cancelSubscription) {
+            const returnValue = await cancelSubscription();
+            state.subscribed = false;
+            cancelSubscription = null;
+            return returnValue;
+        }
+        return false;
+    }
+
+    function addFromSubscription(data) {
+        if (!data.id) {
+            throw new ListSubscriptionError(`addFromSubscription: data missing id.\n${inspect(data)}`);
+        }
+        try {
+            listInstance.addListObject(data);
+        } catch (err) {
+            if (err.name === "ListError" && err.code === "duplicate-id") {
+                throw new ListSubscriptionError(`addFromSubscription: add for existing id in objects (${data.id}).`);
+            }
+            throw err;
+        }
+    }
+
+    function updateFromSubscription(data) {
+        if (!data.id) {
+            throw new ListSubscriptionError(`updateFromSubscription: data missing id.\n${inspect(data)}`);
+        }
+        try {
+            listInstance.updateListObject(data);
+        } catch (err) {
+            if (err.name === "ListError" && err.code === "missing-object") {
+                throw new ListSubscriptionError(
+                    `updateFromSubscription: update for id not in objects (${inspect(data.id)}).`
+                );
+            }
+            throw err;
+        }
+    }
+
+    function deleteFromSubscription(id) {
+        try {
+            listInstance.deleteListObject(id);
+        } catch (err) {
+            if (err.name === "ListError" && err.code === "missing-object") {
+                throw new ListSubscriptionError(
+                    `deleteFromSubscription: delete for id not in objects (${inspect(id)}).`
+                );
+            }
+            throw err;
+        }
+    }
+
+    const es = effectScope();
+
+    es.run(() => {
+        onScopeDispose(async () => {
+            await unsubscribe();
+        });
+    });
+
+    return {
+        state,
+        listInstance,
+        subscribe,
+        unsubscribe,
+        effectScope: es,
+    };
+}

package/use/objectInstance.js

@@ -0,0 +1,222 @@
+import { isEmpty } from "lodash";
+import { effectScope, reactive, unref } from "vue";
+import { assignReactiveObject } from "../utils/assignReactiveObject";
+
+export class ObjectError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "ObjectError";
+    }
+}
+
+const defaultCrud = reactive({
+    args: {},
+    retrieve: undefined,
+    create: undefined,
+    update: undefined,
+    patch: undefined,
+    delete: undefined,
+});
+
+export function setObjectInstanceCrud({ retrieve, create, update, patch, delete: deleteFn, args = {} }) {
+    defaultCrud.retrieve = retrieve;
+    defaultCrud.create = create;
+    defaultCrud.update = update;
+    defaultCrud.patch = patch;
+    defaultCrud.delete = deleteFn;
+    assignReactiveObject(defaultCrud.args, args);
+}
+
+export function useObjectInstances(instanceArgs) {
+    const instances = {};
+    for (const [key, value] of Object.entries(instanceArgs)) {
+        instances[key] = useObjectInstance(value);
+    }
+    return instances;
+}
+
+export function useObjectInstance({ crudArgs, retrieveArgs }) {
+    const state = reactive({
+        objectInstanceCrud: {
+            args: {},
+            retrieve: undefined,
+            create: undefined,
+            update: undefined,
+            patch: undefined,
+            delete: undefined,
+        },
+        object: {},
+        defaultRetrieveArgs: retrieveArgs,
+        loading: undefined,
+        errored: false,
+        error: null,
+        deleted: false,
+    });
+    assignReactiveObject(state.objectInstanceCrud, defaultCrud);
+    if (crudArgs) {
+        assignReactiveObject(state.objectInstanceCrud.args, crudArgs);
+    }
+
+    async function retrieve({ id, ...retrieveArgs }) {
+        if (state.loading) {
+            throw new ObjectError("already loading.");
+        }
+        if (isEmpty(retrieveArgs) && !isEmpty(unref(state.defaultRetrieveArgs))) {
+            retrieveArgs = unref(state.defaultRetrieveArgs);
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.objectInstanceCrud
+            .retrieve({
+                crudArgs: state.objectInstanceCrud.args,
+                id,
+                retrieveArgs,
+            })
+            .then((object) => {
+                assignReactiveObject(state.object, object);
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    async function create({ object, ...retrieveArgs }) {
+        if (state.loading) {
+            throw new ObjectError("already loading.");
+        }
+        if (isEmpty(retrieveArgs) && !isEmpty(unref(state.defaultRetrieveArgs))) {
+            retrieveArgs = unref(state.defaultRetrieveArgs);
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.objectInstanceCrud
+            .create({
+                crudArgs: state.objectInstanceCrud.args,
+                object,
+                retrieveArgs,
+            })
+            .then((object) => {
+                assignReactiveObject(state.object, object);
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    async function update({ object, ...retrieveArgs }) {
+        if (state.loading) {
+            throw new ObjectError("already loading.");
+        }
+        if (isEmpty(retrieveArgs) && !isEmpty(unref(state.defaultRetrieveArgs))) {
+            retrieveArgs = unref(state.defaultRetrieveArgs);
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.objectInstanceCrud
+            .update({
+                crudArgs: state.objectInstanceCrud.args,
+                object,
+                retrieveArgs,
+            })
+            .then((object) => {
+                assignReactiveObject(state.object, object);
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    async function patch({ id, partialObject, ...retrieveArgs }) {
+        if (state.loading) {
+            throw new ObjectError("already loading.");
+        }
+        if (isEmpty(retrieveArgs) && !isEmpty(unref(state.defaultRetrieveArgs))) {
+            retrieveArgs = unref(state.defaultRetrieveArgs);
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.objectInstanceCrud
+            .patch({
+                crudArgs: state.objectInstanceCrud.args,
+                id,
+                partialObject,
+                retrieveArgs,
+            })
+            .then((object) => {
+                assignReactiveObject(state.object, object);
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    async function deleteFn(id) {
+        if (state.loading) {
+            throw new ObjectError("already loading.");
+        }
+        state.loading = true;
+        state.errored = false;
+        state.error = null;
+        return state.objectInstanceCrud
+            .delete({
+                crudArgs: state.objectInstanceCrud.args,
+                id,
+            })
+            .then(() => {
+                state.deleted = true;
+                assignReactiveObject(state.object, {});
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.errored = true;
+                state.error = error;
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.loading = false;
+            });
+    }
+
+    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,
+        retrieve,
+        create,
+        update,
+        patch,
+        delete: deleteFn,
+        effectScope: es,
+    };
+}