Add: 動かないきれいなコードかけた

GunmaRamens · Dec 12, 2023 · 475bcbd · 475bcbd
1 parent 265158c
commit 475bcbd
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 87 deletions.
diff --git a/lib/class/Storage/browser.ts b/lib/class/Storage/browser.ts
@@ -1,15 +1,12 @@
 import * as TypedStorage from "webext-storage";
 
 import StorageTool from "./storage";
-import { StorageIds } from "./type";
 
 export default class BrowserStorageTool<T> implements StorageTool<T> {
-    id: StorageIds;
     #item: TypedStorage.StorageItem<T>;
 
-    constructor(id: StorageIds) {
-        this.id = id;
-        this.#item = new TypedStorage.StorageItem<T>(id, { area: "local" });
+    constructor(storage: TypedStorage.StorageItem<T>) {
+        this.#item = storage;
     }
     async toggle(key: keyof T): Promise<void> {
         const data = await this.#item.get();
@@ -22,12 +19,25 @@ export default class BrowserStorageTool<T> implements StorageTool<T> {
     }
 
     async get(value: keyof T) {
-        return (await this.getAll())[value];
+        const data = await this.getAll();
+        console.log(data);
+        return data[value];
     }
 
     async set(value: Partial<T>) {
         const data = await this.#item.get();
+        const newdata = { ...data, ...value };
+        console.log(`newdata: ${newdata}`);
+        await this.#item.set(newdata);
+    }
+
+    static fromId<T>(id: string, options: TypedStorage.StorageItemOptions<T & Record<string, never>> = { area: "sync" }) {
+        const storage = new TypedStorage.StorageItem<T>(id, options);
+
+        console.log(id);
+        const bstorage = new BrowserStorageTool(storage);
+        bstorage.set({});
 
-        await this.#item.set({ ...data, value });
+        return bstorage;
     }
 }
diff --git a/lib/class/Storage/common.ts b/lib/class/Storage/common.ts
@@ -1,34 +1,13 @@
 import { WebsiteIds } from "@/data/websites";
 
-import BrowserStorage from "./browser";
+import BrowserStorageTool from "./browser";
 
-export interface UnivCommonConfig {
+export type UnivCommonConfig = {
     rainbow?: boolean;
     dark?: boolean;
-}
+};
 
 export type CommonConfig = Record<WebsiteIds, UnivCommonConfig>;
-
-export const CommonStorage = new (class {
-    #storage: BrowserStorage<CommonConfig>;
-    constructor() {
-        this.#storage = new BrowserStorage("common");
-    }
-
-    async get(id: WebsiteIds, key: keyof UnivCommonConfig) {
-        const isRainbowEnabled = (await this.#storage.get(id))[key];
-        return isRainbowEnabled;
-    }
-
-    async set(id: WebsiteIds, value: Partial<UnivCommonConfig>) {
-        const data = await this.#storage.getAll();
-
-        await this.#storage.set({ ...data, [id]: { ...data[id], ...value } });
-    }
-
-    async toggle(id: WebsiteIds, key: keyof UnivCommonConfig) {
-        const data = await this.#storage.get(id);
-        const newdata = !data[key];
-        await this.#storage.set({ [id]: newdata });
-    }
-})();
+export const CommonStorage = BrowserStorageTool.fromId<CommonConfig>("common", {
+    area: "sync",
+});
diff --git a/lib/class/Storage/other.ts b/lib/class/Storage/other.ts
@@ -8,4 +8,7 @@ export interface OtherConfig {
     "auto-2fa"?: boolean;
 }
 
-export const OtherStorage = new BrowserStorage<OtherConfig>("other");
+export const OtherStorage = BrowserStorage.fromId<OtherConfig>("other", {
+    area: "sync",
+    defaultValue: {},
+});
diff --git a/lib/class/Storage/storage.ts b/lib/class/Storage/storage.ts
@@ -1,10 +1,57 @@
-import { StorageIds } from "./type";
-
 export default interface StorageTool<T> {
-    id: StorageIds;
-
     get(value: keyof T): Promise<T[keyof T]>;
     set(value: Partial<T>): Promise<void>;
     toggle(key: keyof T): Promise<void>;
     getAll(): Promise<T>;
 }
+
+export class ObjectStorage<T> implements StorageTool<T> {
+    #data: T;
+
+    constructor(data: T) {
+        this.#data = data;
+    }
+
+    async get(value: keyof T) {
+        return this.#data[value];
+    }
+    async set(value: Partial<T>) {
+        this.#data = { ...this.#data, ...value };
+    }
+    async toggle(key: keyof T): Promise<void> {
+        const data = this.#data;
+        const newdata = !data[key];
+        this.#data = { ...data, [key]: newdata };
+    }
+    async getAll(): Promise<T> {
+        return this.#data;
+    }
+}
+
+type ValueOf<T> = T[keyof T];
+type ChildKeys<T> = keyof ValueOf<T>;
+export class RecursiveStorageTool<T> implements StorageTool<ValueOf<T>> {
+    #parent: StorageTool<T>;
+    #key: keyof T;
+
+    constructor(parent: StorageTool<T>, key: keyof T) {
+        this.#parent = parent;
+        this.#key = key;
+    }
+    async get(value: keyof ValueOf<T>): Promise<ValueOf<T>[ChildKeys<T>]> {
+        const data = await this.#parent.get(this.#key);
+        return data[value];
+    }
+    async getAll(): Promise<ValueOf<T>> {
+        return await this.#parent.get(this.#key);
+    }
+    async set(value: Partial<ValueOf<T>>): Promise<void> {
+        const data = await this.#parent.getAll();
+        await this.#parent.set({ ...data, value });
+    }
+    async toggle(key: ChildKeys<T>): Promise<void> {
+        const data = await this.#parent.getAll();
+        const dataValue = !data[this.#key][key];
+        await this.#parent.set({ ...data, [this.#key]: { ...data[this.#key], [key]: dataValue } });
+    }
+}
diff --git a/lib/class/Storage/test.ts b/lib/class/Storage/test.ts
diff --git a/lib/class/UnivWebsite/index.ts b/lib/class/UnivWebsite/index.ts
@@ -9,7 +9,7 @@ import { DarkApplicator, HiddenApplicator, RainbowApplicator } from "../ClassApp
 import BrowserStorage from "../Storage/browser";
 import { CommonStorage } from "../Storage/common";
 import { OtherStorage } from "../Storage/other";
-import StorageTool from "../Storage/storage";
+import StorageTool, { RecursiveStorageTool } from "../Storage/storage";
 
 // UnivWebSiteはゲーミング化するウェブサイトを定義したクラス
 // 型変数とoptionsプロパティによって任意の情報を追加できる
@@ -37,27 +37,38 @@ export class UnivWebsite<T = unknown, U = unknown> {
         this.id = id;
         this.options = {} as T;
         this.#funcs = [];
-        this.storage = new BrowserStorage(id);
+
+        this.storage = BrowserStorage.fromId(id);
 
         this.rainbow = new RainbowApplicator();
         this.dark = new DarkApplicator();
         this.hidden = new HiddenApplicator();
     }
 
     async initilizeWebsiteDb() {
-        await CommonStorage.set(this.id, {
+        /*
+        await CommonStorage.set({
+            [this.id]: {
+                rainbow: false,
+                dark: false,
+            },
+        });
+        */
+
+        this.getCommonStorage().set({
             rainbow: false,
             dark: false,
         });
+        console.log(await CommonStorage.getAll());
     }
 
     async isRainbowEnabled() {
-        const isRainbowEnabled = await CommonStorage.get(this.id, "rainbow");
+        const isRainbowEnabled = (await CommonStorage.get(this.id)).rainbow;
         return isTrue(isRainbowEnabled);
     }
 
     async isDarkEnabled() {
-        const isDarkEnabled = await CommonStorage.get(this.id, "dark");
+        const isDarkEnabled = (await CommonStorage.get(this.id)).dark;
         return isTrue(isDarkEnabled);
     }
 
@@ -66,41 +77,44 @@ export class UnivWebsite<T = unknown, U = unknown> {
         return isTrue(isHiddenEnabled);
     }
 
+    getCommonStorage() {
+        return new RecursiveStorageTool(CommonStorage, "moodle");
+    }
+
     load() {
         window.addEventListener("load", async () => {
             const isRainbowEnabled = await this.isRainbowEnabled();
             if (isRainbowEnabled) {
                 // CSSのためにHTML要素にデータ属性を追加
                 document.documentElement.dataset.gaming_gundai = "true";
-                CommonStorage.set(this.id, { rainbow: true });
+                CommonStorage.set({ [this.id]: { rainbow: true } });
                 this.rainbow.enable();
             } else {
                 // CSSのためにHTML要素にデータ属性を追加
                 document.documentElement.dataset.gaming_gundai = "false";
-                CommonStorage.set(this.id, { rainbow: false });
+                CommonStorage.set({ [this.id]: { rainbow: false } });
                 this.rainbow.disable();
             }
 
             const isDarkEnabled = await this.isDarkEnabled();
             if (isDarkEnabled) {
                 document.documentElement.dataset.gaming_gundai_dark = "true";
-                CommonStorage.set(this.id, { dark: true });
+                CommonStorage.set({ [this.id]: { dark: true } });
                 this.dark.enable();
             } else {
                 document.documentElement.dataset.gaming_gundai_dark = "false";
-                CommonStorage.set(this.id, { dark: false });
+                CommonStorage.set({ [this.id]: { dark: false } });
                 this.dark.disable();
             }
 
             const isHiddenEnabled = await this.isHiddenEnabled();
-            const otherStorage = new BrowserStorage("other");
             if (isHiddenEnabled) {
                 document.documentElement.dataset.gaming_gundai_hidden = "true";
-                otherStorage.set({ "enabled-hidden": true });
+                OtherStorage.set({ "enabled-hidden": true });
                 this.hidden.enable();
             } else {
                 document.documentElement.dataset.gaming_gundai_hidden = "false";
-                otherStorage.set({ "enabled-hidden": false });
+                OtherStorage.set({ "enabled-hidden": false });
                 this.hidden.disable();
             }
 

diff --git a/lib/components/SwitchItem.tsx b/lib/components/SwitchItem.tsx
@@ -2,11 +2,22 @@
 
 import { ComponentColor } from "react-daisyui/dist/types";
 
-import { CommonStorage, UnivCommonConfig } from "@/class/Storage/common";
+import { StorageTool } from "@/class";
+import { UnivCommonConfig } from "@/class/Storage/common";
+import { WebsiteConfig } from "@/data/websites";
 
 import { ToggleWithStorage } from "./ToggleWithStorage";
-import { Category } from "./type";
 
-export function SwitchItem({ category, color, readonly }: { category: Category; color?: ComponentColor; readonly?: boolean }) {
-    return <ToggleWithStorage<UnivCommonConfig> storage={CommonStorage} dataKey={category} color={color} readonly={readonly} />;
+interface SwitchItemProps {
+    config: WebsiteConfig;
+    category: keyof UnivCommonConfig;
+    color?: ComponentColor;
+    readonly?: boolean;
+}
+export function SwitchItem({ category, config, color, readonly }: SwitchItemProps) {
+    const site = config.class;
+    if (!site) return null;
+    const commonStorage: StorageTool<UnivCommonConfig> = site.getCommonStorage();
+
+    return <ToggleWithStorage<UnivCommonConfig> storage={commonStorage} dataKey={category} color={color} readonly={readonly} />;
 }
diff --git a/lib/components/ToggleWithStorage.tsx b/lib/components/ToggleWithStorage.tsx
@@ -10,7 +10,7 @@ import IsTrue from "@/utils/isTrue";
 import { sendMsgToAllTab } from "@/utils/sendMsgToAllTab";
 
 export type BooleanKeyOf<T> = {
-    [K in keyof T]: T[K] extends boolean ? K : never;
+    [K in keyof T]: T[K] extends boolean ? K : T[K] extends boolean | undefined ? K : never;
 }[keyof T];
 
 interface ToggleProps<T> {

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "analyze-chrome": "pnpm run build-chrome:dev && source-map-explorer ./dist/**.js",
         "analyze-firefox": "pnpm run build-firefox:dev && source-map-explorer ./dist/**.js",
         "fmt": "prettier --write '**/*.{js,json,md,html,sh}'",
+        "dev": "pnpm run watch-chrome",
         "lint": "prettier --check . && eslint . ",
         "lint:fix": "pnpm fmt && eslint . --fix"
     },

diff --git a/src/background/common/quickswitch.ts b/src/background/common/quickswitch.ts
@@ -1,6 +1,5 @@
 import browser from "webextension-polyfill";
 
-import { CommonStorage } from "@/class/Storage/common";
 import { OtherStorage } from "@/class/Storage/other";
 import { WebsitesList } from "@/data/websites";
 import * as PopupUtils from "@/utils/popupControl";
@@ -24,11 +23,11 @@ const toggleAll = () => {
         (async () => {
             if (website.configable.dark) {
                 // Toggle dark mode
-                await CommonStorage.toggle(website.class.id, "dark");
+                await website.class.getCommonStorage().toggle("dark");
             }
             if (website.configable.rainbow) {
                 // Toggle rainbow mode
-                await CommonStorage.toggle(website.class.id, "rainbow");
+                await website.class.getCommonStorage().toggle("rainbow");
             }
         })();
     }