magnetar/fe_calckey/frontend/client/src/pizzax.ts

// PIZZAX --- A lightweight store

import { onUnmounted, Ref, ref, watch } from "vue";
import { $i } from "./account";
import { api } from "./os";
import { stream } from "./stream";

type StateDef = Record<
    string,
    {
        where: "account" | "device" | "deviceAccount";
        default: any;
    }
>;

type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;

const connection = $i && stream.useChannel("main");

export class Storage<T extends StateDef> {
    public readonly key: string;
    public readonly keyForLocalStorage: string;

    public readonly def: T;

    // TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
    public readonly state: {
        [K in keyof T]: T[K]["default"];
    };
    public readonly reactiveState: {
        [K in keyof T]: Ref<T[K]["default"]>;
    };

    constructor(key: string, def: T) {
        this.key = key;
        this.keyForLocalStorage = `pizzax::${key}`;
        this.def = def;

        // TODO: indexedDBにする
        const deviceState = JSON.parse(
            localStorage.getItem(this.keyForLocalStorage) || "{}",
        );
        const deviceAccountState = $i
            ? JSON.parse(
                  localStorage.getItem(
                      `${this.keyForLocalStorage}::${$i.id}`,
                  ) || "{}",
              )
            : {};
        const registryCache = $i
            ? JSON.parse(
                  localStorage.getItem(
                      `${this.keyForLocalStorage}::cache::${$i.id}`,
                  ) || "{}",
              )
            : {};

        const state = {};
        const reactiveState = {};
        for (const [k, v] of Object.entries(def)) {
            if (
                v.where === "device" &&
                Object.prototype.hasOwnProperty.call(deviceState, k)
            ) {
                state[k] = deviceState[k];
            } else if (
                v.where === "account" &&
                $i &&
                Object.prototype.hasOwnProperty.call(registryCache, k)
            ) {
                state[k] = registryCache[k];
            } else if (
                v.where === "deviceAccount" &&
                Object.prototype.hasOwnProperty.call(deviceAccountState, k)
            ) {
                state[k] = deviceAccountState[k];
            } else {
                state[k] = v.default;
                if (_DEV_) console.log("Use default value", k, v.default);
            }
        }
        for (const [k, v] of Object.entries(state)) {
            reactiveState[k] = ref(v);
        }
        this.state = state as any;
        this.reactiveState = reactiveState as any;

        if ($i) {
            // なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
            window.setTimeout(() => {
                api("i/registry/get-all", { scope: ["client", this.key] }).then(
                    (kvs) => {
                        const cache = {};
                        for (const [k, v] of Object.entries(def)) {
                            if (v.where === "account") {
                                if (
                                    Object.prototype.hasOwnProperty.call(kvs, k)
                                ) {
                                    state[k] = kvs[k];
                                    reactiveState[k].value = kvs[k];
                                    cache[k] = kvs[k];
                                } else {
                                    state[k] = v.default;
                                    reactiveState[k].value = v.default;
                                }
                            }
                        }
                        localStorage.setItem(
                            `${this.keyForLocalStorage}::cache::${$i.id}`,
                            JSON.stringify(cache),
                        );
                    },
                );
            }, 1);
            // streamingのuser storage updateイベントを監視して更新
            connection?.on(
                "registryUpdated",
                ({
                    scope,
                    key,
                    value,
                }: {
                    scope: string[];
                    key: keyof T;
                    value: T[typeof key]["default"];
                }) => {
                    if (
                        scope.length !== 2 ||
                        scope[0] !== "client" ||
                        scope[1] !== this.key ||
                        this.state[key] === value
                    )
                        return;

                    this.state[key] = value;
                    this.reactiveState[key].value = value;

                    const cache = JSON.parse(
                        localStorage.getItem(
                            `${this.keyForLocalStorage}::cache::${$i.id}`,
                        ) || "{}",
                    );
                    if (cache[key] !== value) {
                        cache[key] = value;
                        localStorage.setItem(
                            `${this.keyForLocalStorage}::cache::${$i.id}`,
                            JSON.stringify(cache),
                        );
                    }
                },
            );
        }
    }

    public set<K extends keyof T>(key: K, value: T[K]["default"]): void {
        if (_DEV_) console.log("set", key, value);

        this.state[key] = value;
        this.reactiveState[key].value = value;

        switch (this.def[key].where) {
            case "device": {
                const deviceState = JSON.parse(
                    localStorage.getItem(this.keyForLocalStorage) || "{}",
                );
                deviceState[key] = value;
                localStorage.setItem(
                    this.keyForLocalStorage,
                    JSON.stringify(deviceState),
                );
                break;
            }
            case "deviceAccount": {
                if ($i == null) break;
                const deviceAccountState = JSON.parse(
                    localStorage.getItem(
                        `${this.keyForLocalStorage}::${$i.id}`,
                    ) || "{}",
                );
                deviceAccountState[key] = value;
                localStorage.setItem(
                    `${this.keyForLocalStorage}::${$i.id}`,
                    JSON.stringify(deviceAccountState),
                );
                break;
            }
            case "account": {
                if ($i == null) break;
                const cache = JSON.parse(
                    localStorage.getItem(
                        `${this.keyForLocalStorage}::cache::${$i.id}`,
                    ) || "{}",
                );
                cache[key] = value;
                localStorage.setItem(
                    `${this.keyForLocalStorage}::cache::${$i.id}`,
                    JSON.stringify(cache),
                );
                api("i/registry/set", {
                    scope: ["client", this.key],
                    key: key,
                    value: value,
                });
                break;
            }
        }
    }

    public push<K extends keyof T>(
        key: K,
        value: ArrayElement<T[K]["default"]>,
    ): void {
        const currentState = this.state[key];
        this.set(key, [...currentState, value]);
    }

    public reset(key: keyof T) {
        this.set(key, this.def[key].default);
    }

    /**
     * 特定のキーの、簡易的なgetter/setterを作ります
     * 主にvue場で設定コントロールのmodelとして使う用
     */
    public makeGetterSetter<K extends keyof T>(
        key: K,
        getter?: (v: T[K]) => unknown,
        setter?: (v: unknown) => T[K],
    ) {
        const valueRef = ref(this.state[key]);

        const stop = watch(this.reactiveState[key], (val) => {
            valueRef.value = val;
        });

        // NOTE: vueコンポーネント内で呼ばれない限りは、onUnmounted は無意味なのでメモリリークする
        onUnmounted(() => {
            stop();
        });

        // TODO: VueのcustomRef使うと良い感じになるかも
        return {
            get: () => {
                if (getter) {
                    return getter(valueRef.value);
                } else {
                    return valueRef.value;
                }
            },
            set: (value: unknown) => {
                const val = setter ? setter(value) : value;
                this.set(key, val);
                valueRef.value = val;
            },
        };
    }
}