@arrai-innovations/reactive-helpers 1.0.0

package/use/objectSubscription.js

@@ -0,0 +1,188 @@
+import { identity } from "lodash";
+import { computed, effectScope, onScopeDispose, reactive, watch } from "vue";
+import { assignReactiveObject } from "../utils/assignReactiveObject";
+import { useObjectInstance } from "./objectInstance";
+
+export class ObjectSubscriptionError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "ObjectSubscriptionError";
+    }
+}
+
+const defaultCrud = reactive({
+    subscribe: undefined,
+});
+
+export function setObjectSubscriptionCrud({ subscribe }) {
+    defaultCrud.subscribe = subscribe;
+}
+
+export function useObjectSubscriptions(subscriptionArgs) {
+    const subscriptions = {};
+    for (const [key, value] of Object.entries(subscriptionArgs)) {
+        subscriptions[key] = useObjectSubscription(value);
+    }
+    return subscriptions;
+}
+
+export function useObjectSubscription({ objectInstance, crudArgs, id, retrieveArgs = {} }) {
+    if (!objectInstance) {
+        objectInstance = useObjectInstance({ crudArgs, retrieveArgs });
+    }
+    const state = reactive({
+        objectSubscriptionCrud: {
+            subscribe: undefined,
+        },
+        id,
+        retrieveArgs,
+        subscriptionLoading: undefined,
+        subscriptionErrored: false,
+        subscriptionError: null,
+        subscribed: false,
+        intendToSubscribe: false,
+        intendToRetrieve: false,
+    });
+    assignReactiveObject(state.objectSubscriptionCrud, defaultCrud);
+    let cancelSubscription;
+
+    function updateFromSubscription(data) {
+        assignReactiveObject(objectInstance.state.object, data);
+    }
+
+    function deleteFromSubscription() {
+        objectInstance.state.deleted = true;
+        assignReactiveObject(objectInstance.state.object, {});
+    }
+
+    async function publicSubscribe({ retrieve = true } = {}) {
+        if (!state.intendToSubscribe) {
+            state.intendToSubscribe = true;
+        }
+        if (retrieve) {
+            if (!state.intendToRetrieve) {
+                state.intendToRetrieve = true;
+            }
+        }
+        return subscribe();
+    }
+
+    async function subscribe() {
+        if (cancelSubscription || state.subscribed) {
+            throw new ObjectSubscriptionError("already subscribed.");
+        }
+        if (![state.id, state.retrieveArgs].every(identity)) {
+            // delayed until stuff is true;
+            return false;
+        }
+        state.subscriptionLoading = true;
+        state.subscriptionErrored = false;
+        state.subscriptionError = null;
+        let subscribePromise;
+        cancelSubscription = () => subscribePromise.cancel();
+        subscribePromise = state.objectSubscriptionCrud.subscribe({
+            crudArgs: objectInstance.state.objectInstanceCrud.args,
+            id,
+            retrieveArgs: state.retrieveArgs,
+            callback: (data, action) => {
+                if (action === "delete") {
+                    objectInstance.deleteFromSubscription();
+                } else {
+                    objectInstance.updateFromSubscription(data);
+                }
+            },
+        });
+        return subscribePromise
+            .then(() => {
+                state.subscribed = true;
+                return Promise.resolve(true);
+            })
+            .catch((error) => {
+                state.subscriptionErrored = true;
+                state.subscriptionError = error;
+                if (cancelSubscription) {
+                    cancelSubscription();
+                    cancelSubscription = null;
+                    state.subscribed = false;
+                }
+                return Promise.resolve(false);
+            })
+            .finally(() => {
+                state.subscriptionLoading = false;
+            });
+    }
+
+    async function publicUnsubscribe() {
+        if (state.intendToSubscribe) {
+            state.intendToSubscribe = false;
+        }
+        if (state.intendToRetrieve) {
+            state.intendToRetrieve = false;
+        }
+        return unsubscribe();
+    }
+
+    async function unsubscribe() {
+        if (cancelSubscription) {
+            state.subscribed = false;
+            let returnPromise = cancelSubscription();
+            cancelSubscription = null;
+            return returnPromise;
+        }
+        return false;
+    }
+
+    const es = effectScope();
+
+    es.run(() => {
+        state.loading = computed(() => objectInstance.state.loading || state.subscriptionLoading);
+        state.errored = computed(() => objectInstance.state.errored || state.subscriptionErrored);
+        state.error = computed(() => objectInstance.state.error || state.subscriptionError);
+
+        watch(
+            [() => state.intendToSubscribe, () => state.id, () => state.retrieveArgs],
+            async (newArgs, oldArgs) => {
+                const everyNew = newArgs.every((e) => e);
+                const everyOld = oldArgs.every((e) => e);
+                if (everyOld) {
+                    await unsubscribe();
+                }
+                if (everyNew) {
+                    if (!cancelSubscription && !state.subscribed) {
+                        await subscribe().catch(console.error);
+                    }
+                }
+            },
+            {
+                deep: true,
+            }
+        );
+
+        watch(
+            [() => state.intendToRetrieve, () => state.id, () => state.retrieveArgs],
+            async (newArgs) => {
+                const everyNew = newArgs.every((e) => e);
+                if (everyNew) {
+                    if (!objectInstance.state.loading) {
+                        await objectInstance.retrieve({ id: state.id, ...state.retrieveArgs }).catch(console.error);
+                    }
+                }
+            },
+            { deep: true }
+        );
+
+        onScopeDispose(async () => {
+            await unsubscribe();
+        });
+    });
+
+    return {
+        state,
+        objectInstance,
+        subscribe: publicSubscribe,
+        unsubscribe: publicUnsubscribe,
+        updateFromSubscription,
+        deleteFromSubscription,
+        effectScope: es,
+    };
+}

package/use/search.js

@@ -0,0 +1,104 @@
+import FlexSearch from "flexsearch";
+import { fromPairs, throttle } from "lodash";
+import { effectScope, reactive, toRef, watch } from "vue";
+import { assignReactiveObject } from "../utils/assignReactiveObject";
+
+const indexOptions = {
+    tokenize: "forward",
+};
+
+const searchOptions = {
+    throttle: 500,
+    limit: 1000,
+};
+
+export function setDefaultIndexOptions(newDefaultIndexOptions = {}) {
+    Object.assign(indexOptions, newDefaultIndexOptions);
+}
+
+export function setDefaultSearchOptions(newDefaultSearchOptions = {}) {
+    Object.assign(searchOptions, newDefaultSearchOptions);
+}
+
+export function useSearch(
+    customIndexOptions = {}, // custom index options are not reactive.
+    customSearchOptions = {} // custom search options are reactive.
+) {
+    let searchIndex = new FlexSearch.Index({
+        ...indexOptions,
+        ...customIndexOptions,
+    });
+    const mySearchOptions = {
+        ...searchOptions,
+        ...customSearchOptions,
+    };
+    const state = reactive({
+        search: "",
+        results: {},
+        searched: false,
+        searching: false,
+    });
+    const addIndex = (id, indexValue) => {
+        // numeric ids consume less memory in flexsearch.
+        const numericId = +id;
+        const numericIfPossible = isNaN(numericId) ? id : numericId;
+        searchIndex.add(numericIfPossible, indexValue);
+        throttledDoSearch();
+    };
+    const updateIndex = (id, indexValue) => {
+        // numeric ids consume less memory in flexsearch.
+        const numericId = +id;
+        const numericIfPossible = isNaN(numericId) ? id : numericId;
+        searchIndex.update(numericIfPossible, indexValue);
+        throttledDoSearch();
+    };
+    const removeIndex = (id) => {
+        // numeric ids consume less memory in flexsearch.
+        const numericId = +id;
+        const numericIfPossible = isNaN(numericId) ? id : numericId;
+        searchIndex.remove(numericIfPossible);
+        throttledDoSearch();
+    };
+    const clearIndex = () => {
+        searchIndex = new FlexSearch.Index(indexOptions);
+        assignReactiveObject(state.results, {});
+        state.searched = false;
+    };
+
+    async function doSearch() {
+        if (!state.search) {
+            assignReactiveObject(state.results, {});
+            state.searched = false;
+            return;
+        }
+        state.searching = true;
+        const results = await searchIndex.searchAsync(state.search, {
+            limit: mySearchOptions.limit,
+        });
+        state.searched = true;
+        assignReactiveObject(state.results, fromPairs(results.map((e) => [e, true])) || {});
+        state.searching = false;
+    }
+
+    const throttledDoSearch = throttle(doSearch, mySearchOptions.throttle);
+
+    const es = effectScope();
+
+    es.run(() => {
+        watch(
+            toRef(state, "search"),
+            function () {
+                if (!indexOptions.minlength || state.search.length >= indexOptions.minlength) {
+                    throttledDoSearch();
+                } else {
+                    assignReactiveObject(state.results, {});
+                    state.searched = false;
+                }
+            },
+            {
+                immediate: true,
+            }
+        );
+    });
+    return { state, addIndex, updateIndex, removeIndex, clearIndex, effectScope: es };
+}

package/utils/assignReactiveObject.js

@@ -0,0 +1,62 @@
+import { keyDiff } from "./keyDiff.js";
+import { union } from "./set.js";
+import { isReactive, toRef } from "vue";
+import { isArray, isObject } from "lodash";
+import { inspect } from "util";
+
+export class AssignReactiveObjectError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "AssignReactiveObjectError";
+    }
+}
+
+function isArrayOrObject(key, value) {
+    if (!(isArray(value) || isObject(value))) {
+        throw new AssignReactiveObjectError(`${key} must be an object or an array, not ${inspect(value)}`);
+    }
+}
+
+export function addOrUpdateReactiveObject(target, source, exclude = [], addedKeys = null, sameKeys = null) {
+    isArrayOrObject("target", target);
+    isArrayOrObject("source", source);
+    if (!addedKeys && !sameKeys) {
+        ({ addedKeys, sameKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []));
+    }
+    const targetIsReactive = isReactive(target);
+    const sourceIsReactive = isReactive(source);
+    for (const key of union(addedKeys, sameKeys)) {
+        if (!exclude.includes(key)) {
+            if (targetIsReactive && sourceIsReactive) {
+                target[key] = toRef(source, key);
+            } else if (target[key] !== source[key]) {
+                target[key] = source[key];
+            }
+        }
+    }
+}
+
+export function assignReactiveObject(target, source, exclude = []) {
+    if (target === source) {
+        return;
+    }
+    isArrayOrObject("target", target);
+    isArrayOrObject("source", source);
+    const targetIsArray = isArray(target);
+    const { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
+    if (targetIsArray) {
+        // Remove indices in reverse (descending) order to keep them stable
+        for (const removedKey of [...removedKeys].map((key) => parseInt(key, 10)).sort((a, b) => b - a)) {
+            if (!exclude.includes(removedKey)) {
+                target.splice(removedKey, 1);
+            }
+        }
+    } else {
+        for (const removedKey of removedKeys) {
+            if (!exclude.includes(removedKey)) {
+                delete target[removedKey];
+            }
+        }
+    }
+    addOrUpdateReactiveObject(target, source, exclude, addedKeys, sameKeys);
+}

package/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./assignReactiveObject";
+export * from "./keyDiff";
+export * from "./set";
+export * from "./unrefAndToRawDeep";
+export * from "./watches";

package/utils/keyDiff.js

@@ -0,0 +1,10 @@
+import { difference, intersection } from "./set.js";
+
+export function keyDiff(newKeys, oldKeys) {
+    const newKeysSet = new Set(newKeys);
+    const oldKeysSet = new Set(oldKeys);
+    const sameKeys = intersection(newKeysSet, oldKeysSet);
+    const removedKeys = difference(oldKeysSet, newKeysSet);
+    const addedKeys = difference(newKeysSet, oldKeysSet);
+    return { sameKeys, removedKeys, addedKeys };
+}

package/utils/set.js

@@ -0,0 +1,48 @@
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#implementing_basic_set_operations
+
+export const isSuperset = (set, subset) => {
+    for (const elem of subset) {
+        if (!set.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+};
+
+export const union = (setA, setB) => {
+    const _union = new Set(setA);
+    for (let elem of setB) {
+        _union.add(elem);
+    }
+    return _union;
+};
+
+export const intersection = (setA, setB) => {
+    const _intersection = new Set();
+    for (const elem of setB) {
+        if (setA.has(elem)) {
+            _intersection.add(elem);
+        }
+    }
+    return _intersection;
+};
+
+export const symmetricDifference = (setA, setB) => {
+    const _difference = new Set(setA);
+    for (const elem of setB) {
+        if (_difference.has(elem)) {
+            _difference.delete(elem);
+        } else {
+            _difference.add(elem);
+        }
+    }
+    return _difference;
+};
+
+export const difference = (setA, setB) => {
+    const _difference = new Set(setA);
+    for (const elem of setB) {
+        _difference.delete(elem);
+    }
+    return _difference;
+};

package/utils/unrefAndToRawDeep.js

@@ -0,0 +1,49 @@
+import { isProxy, isRef, toRaw, unref } from "vue";
+import { isArray, isUndefined } from "lodash";
+import { isObjectLike } from "lodash/lang";
+
+export const circular = Symbol("circular");
+
+export function unrefAndToRawDeep(obj) {
+    if (isUndefined(obj)) {
+        return obj;
+    }
+    const seen = new Set();
+    const returnValue = isArray(obj) ? [] : {};
+    const queue = [];
+    for (const [key, value] of Object.entries(obj)) {
+        queue.push([returnValue, key, value]);
+    }
+    while (queue.length) {
+        const [writePosition, key, value] = queue.shift();
+        if (seen.has(value)) {
+            // if (seen.some((item) => item === value)) {
+            writePosition[key] = circular;
+            continue;
+        }
+        let raw = value;
+        if (isRef(raw)) {
+            const refValue = unref(raw);
+            // primitive values are not added to the seen set
+            if (isObjectLike(refValue)) {
+                seen.add(raw);
+            }
+            raw = unref(raw);
+        }
+        if (isProxy(raw)) {
+            // this doesn't seem to do anything for the current test case.
+            // seen.add(raw);
+            raw = toRaw(raw);
+        }
+        if (!isObjectLike(raw)) {
+            // primitive values don't need to add to the queue
+            writePosition[key] = raw;
+            continue;
+        }
+        writePosition[key] = isArray(raw) ? [] : {};
+        for (const [nextKey, nextValue] of Object.entries(raw)) {
+            queue.push([writePosition[key], nextKey, nextValue]);
+        }
+    }
+    return returnValue;
+}

package/utils/watches.js

@@ -0,0 +1,170 @@
+import { watch } from "vue";
+
+// If you want an immediate watch, but you can't use immediate because you want to stop the watch in the function.
+export class ImmediateStopWatch {
+    constructor() {}
+
+    // watchFuncArgs are for immediate call only.
+    start(watchSources, watchFunc, watchFuncArgs = []) {
+        this.stopWatch = watch(watchSources, watchFunc);
+        watchFunc(...watchFuncArgs);
+    }
+
+    stop() {
+        if (this.stopWatch) {
+            this.stopWatch();
+            delete this.stopWatch;
+        }
+    }
+}
+
+export class AwaitTimeoutError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.name = "AwaitTimeoutError";
+        this.code = code;
+    }
+}
+
+export class AwaitNotError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.name = "AwaitNotError";
+        this.code = code;
+    }
+}
+
+export class AwaitTimeout {
+    constructor({ timeout = 1000 }) {
+        this.promise = new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+        });
+        this.timeout = timeout;
+        this.timeoutId = null;
+    }
+
+    start() {
+        if (this.timeout) {
+            this.timeoutId = setTimeout(this.doTimeout.bind(this), this.timeout);
+        } else {
+            this.doTimeout();
+        }
+    }
+
+    doTimeout() {
+        delete this.timeoutId;
+        if (this.resolve) {
+            this.resolve();
+            delete this.resolve;
+        }
+        this.stop();
+    }
+
+    stop() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            delete this.timeoutId;
+            this.reject(new AwaitTimeoutError("Cancelled", "timeout_cancelled"));
+        }
+        if (this.resolve) {
+            delete this.resolve;
+        }
+        if (this.reject) {
+            delete this.reject;
+        }
+    }
+}
+
+export function doAwaitTimeout(timeout) {
+    const newAwaitTimeout = new AwaitTimeout({ timeout });
+    newAwaitTimeout.start();
+    return newAwaitTimeout.promise;
+}
+
+export class AwaitNot {
+    constructor({ obj, prop, couldAlreadyBeFalse = false, timeout = 1000 }) {
+        this.timeout = new AwaitTimeout({ timeout });
+        this.promise = new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+        });
+        this.couldAlreadyBeFalse = couldAlreadyBeFalse;
+        this.obj = obj;
+        this.prop = prop;
+        this.trueISW = new ImmediateStopWatch();
+        this.falseISW = new ImmediateStopWatch();
+    }
+
+    start() {
+        this.timeout.promise
+            .then(() => {
+                this.stop();
+                this.reject(new AwaitNotError("Timeout", "timeout"));
+            })
+            .catch((err) => {
+                this.stop();
+                if (!(err instanceof AwaitTimeoutError)) {
+                    this.reject(err);
+                }
+            });
+        this.timeout.start();
+        if (this.obj[this.prop] === false && this.couldAlreadyBeFalse) {
+            this.waitForTrue();
+        } else {
+            this.waitForFalse();
+        }
+    }
+
+    waitForTrue() {
+        this.trueISW.start(
+            () => this.obj[this.prop],
+            (newValue) => {
+                if (newValue === true) {
+                    this.stopTrue();
+                    this.waitForFalse();
+                }
+            },
+            [this.obj[this.prop]]
+        );
+    }
+
+    stopTrue() {
+        if (this.trueISW) {
+            this.trueISW.stop();
+            delete this.trueISW;
+        }
+    }
+
+    waitForFalse() {
+        this.falseISW.start(
+            () => this.obj[this.prop],
+            (newValue) => {
+                if (newValue === false) {
+                    this.stop();
+                    this.resolve();
+                }
+            },
+            [this.obj[this.prop]]
+        );
+    }
+
+    stopFalse() {
+        if (this.falseISW) {
+            this.falseISW.stop();
+            delete this.falseISW;
+        }
+    }
+
+    stop() {
+        this.timeout.stop();
+        this.stopTrue();
+        this.stopFalse();
+    }
+}
+
+export function doAwaitNot({ obj, prop, couldAlreadyBeFalse = true, timeout = 1000 }) {
+    const awaitNot = new AwaitNot({ obj, prop, couldAlreadyBeFalse, timeout });
+    awaitNot.start();
+    return awaitNot.promise;
+}