Change: ブラウザ版のConfigをBaseConfigManagerベースに

.github/workflows/test.yml

@@ -39,6 +39,7 @@ jobs:
   e2e-test:
     runs-on: ${{ matrix.os }}
     strategy:
+      fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
         include:
@@ -78,9 +79,10 @@ jobs:
           chmod +x ${{ steps.download-engine.outputs.run_path }}
 
           # .env
+          sed -i -e 's|"074fc39e-678b-4c13-8916-ffca8d505d1d"|"208cf94d-43d2-4cf5-abc0-9783cac36d29"|' .env.test
+          sed -i -e 's|"../voicevox_engine/run.exe"|"${{ steps.download-engine.outputs.run_path }}"|' .env.test
+          sed -i -e 's|"executionArgs": \[\],|"executionArgs": ["--port=50021"],|' .env.test
           cp .env.test .env
-          sed -i -e 's|"../voicevox_engine/run.exe"|"${{ steps.download-engine.outputs.run_path }}"|' .env
-          sed -i -e 's|"executionArgs": \[\],|"executionArgs": ["--port=50021"],|' .env
 
       - name: Run npm run test:browser-e2e
         run: |

playwright.config.ts

@@ -48,7 +48,7 @@ if (isElectron) {
 const config: PlaywrightTestConfig = {
   testDir: "./tests/e2e",
   /* Maximum time one test can run for. */
-  timeout: 120 * 1000,
+  timeout: 60 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.

src/background/electronConfig.ts

@@ -5,22 +5,22 @@ import { BaseConfigManager, Metadata } from "@/shared/ConfigManager";
 import { ConfigType } from "@/type/preload";
 
 export class ElectronConfigManager extends BaseConfigManager {
-  getAppVersion() {
+  protected getAppVersion() {
     return app.getVersion();
   }
 
-  public async exists() {
+  protected async exists() {
     return await fs.promises
       .stat(this.configPath)
       .then(() => true)
       .catch(() => false);
   }
 
-  public async load(): Promise<Record<string, unknown> & Metadata> {
+  protected async load(): Promise<Record<string, unknown> & Metadata> {
     return JSON.parse(await fs.promises.readFile(this.configPath, "utf-8"));
   }
 
-  public async save(config: ConfigType) {
+  protected async save(config: ConfigType & Metadata) {
     await fs.promises.writeFile(
       this.configPath,
       JSON.stringify(config, undefined, 2)

src/background/engineManager.ts

@@ -7,7 +7,6 @@ import shlex from "shlex";
 import { app, dialog } from "electron"; // FIXME: ここでelectronをimportするのは良くない
 
 import log from "electron-log/main";
-import { z } from "zod";
 import {
   findAltPort,
   getPidFromPort,
@@ -21,8 +20,8 @@ import {
   EngineDirValidationResult,
   MinimumEngineManifest,
   EngineId,
-  engineIdSchema,
   minimumEngineManifestSchema,
+  envEngineInfoSchema,
 } from "@/type/preload";
 import { AltPortInfos } from "@/store/type";
 import { BaseConfigManager } from "@/shared/ConfigManager";
@@ -40,17 +39,7 @@ function createDefaultEngineInfos(defaultEngineDir: string): EngineInfo[] {
   const defaultEngineInfosEnv =
     import.meta.env.VITE_DEFAULT_ENGINE_INFOS ?? "[]";
 
-  const envSchema = z
-    .object({
-      uuid: engineIdSchema,
-      host: z.string(),
-      name: z.string(),
-      executionEnabled: z.boolean(),
-      executionFilePath: z.string(),
-      executionArgs: z.array(z.string()),
-      path: z.string().optional(),
-    })
-    .array();
+  const envSchema = envEngineInfoSchema.array();
   const engines = envSchema.parse(JSON.parse(defaultEngineInfosEnv));
 
   return engines.map((engineInfo) => {

src/browser/contract.ts

@@ -1,14 +1,11 @@
-import { EngineInfo, EngineId } from "@/type/preload";
+import { EngineInfo, envEngineInfoSchema } from "@/type/preload";
+
+const baseEngineInfo = envEngineInfoSchema
+  .array()
+  .parse(JSON.parse(import.meta.env.VITE_DEFAULT_ENGINE_INFOS))[0];
 
 export const defaultEngine: EngineInfo = {
-  uuid: EngineId("074fc39e-678b-4c13-8916-ffca8d505d1d"),
-  host: "http://127.0.0.1:50021",
-  name: "VOICEVOX Engine",
-  path: undefined,
-  executionEnabled: false,
-  executionFilePath: "",
-  executionArgs: [],
+  ...baseEngineInfo,
   type: "default",
 };
-
 export const directoryHandleStoreKey = "directoryHandle";

src/browser/fileImpl.ts

@@ -56,7 +56,7 @@ const showWritableDirectoryPicker = async (): Promise<
 export const showOpenDirectoryDialogImpl: typeof window[typeof SandboxKey]["showOpenDirectoryDialog"] =
   async () => {
     const _directoryHandler = await showWritableDirectoryPicker();
-    if (_directoryHandler === undefined) {
+    if (_directoryHandler == undefined) {
       return undefined;
     }
 
@@ -83,15 +83,15 @@ const getDirectoryHandleFromDirectoryPath = async (
 ): Promise<FileSystemDirectoryHandle> => {
   const maybeHandle = directoryHandleMap.get(maybeDirectoryPathKey);
 
-  if (maybeHandle !== undefined) {
+  if (maybeHandle != undefined) {
     return maybeHandle;
   } else {
     // NOTE: fixedDirectoryの場合こっちに落ちる場合がある
     const maybeFixedDirectory = await fetchStoredDirectoryHandle(
       maybeDirectoryPathKey
     );
 
-    if (maybeFixedDirectory === undefined) {
+    if (maybeFixedDirectory == undefined) {
       throw new Error(
         `フォルダへのアクセス許可がありません。アクセスしようとしたフォルダ名: ${maybeDirectoryPathKey}`
       );

src/browser/sandbox.ts

@@ -4,7 +4,7 @@ import {
   showOpenDirectoryDialogImpl,
   writeFileImpl,
 } from "./fileImpl";
-import { getSettingEntry, setSettingEntry } from "./storeImpl";
+import { withConfigManager } from "./storeImpl";
 
 import { IpcSOData } from "@/type/ipc";
 import {
@@ -285,11 +285,16 @@ export const api: Sandbox = {
     // NOTE: 何もしなくて良さそう
     return Promise.resolve();
   },
-  getSetting(key) {
-    return getSettingEntry(key);
+  async getSetting(key) {
+    return await withConfigManager(async (configManager) => {
+      return configManager.get(key);
+    });
   },
-  setSetting(key, newValue) {
-    return setSettingEntry(key, newValue).then(() => getSettingEntry(key));
+  async setSetting(key, newValue) {
+    await withConfigManager(async (configManager) => {
+      configManager.set(key, newValue);
+    });
+    return newValue;
   },
   async setEngineSetting(engineId: EngineId, engineSetting: EngineSetting) {
     const engineSettings = (await this.getSetting(

src/browser/storeImpl.ts

@@ -1,19 +1,41 @@
+import AsyncLock from "async-lock";
 import { defaultEngine, directoryHandleStoreKey } from "./contract";
 
-import {
-  configSchema,
-  ConfigType,
-  EngineId,
-  engineSettingSchema,
-} from "@/type/preload";
+import { BaseConfigManager, Metadata } from "@/shared/ConfigManager";
+import { ConfigType, EngineId, engineSettingSchema } from "@/type/preload";
 
 const dbName = `${import.meta.env.VITE_APP_NAME}-web`;
-const settingStoreKey = "electronStore";
-// FIXME: DBのschemaを変更したら、dbVersionを上げる
-// TODO: 気づけるようにしたい
-const dbVersion = 1;
+const settingStoreKey = "config";
+const dbVersion = 1; // 固定値。configのmigrationには使用していない。
 // NOTE: settingを複数持つことはないと仮定して、keyを固定してしまう
-export const entryKey = "value";
+const entryKey = "value";
+
+let configManager: BrowserConfigManager | undefined;
+
+const configManagerLock = new AsyncLock();
+const defaultEngineId = EngineId(defaultEngine.uuid);
+
+export async function withConfigManager<T>(
+  callback: (configManager: BrowserConfigManager) => Promise<T>
+): Promise<T> {
+  return await configManagerLock.acquire("configManager", async () => {
+    if (!configManager) {
+      configManager = new BrowserConfigManager();
+      await configManager.initialize();
+    }
+    return await callback(configManager);
+  });
+}
+
+const waitRequest = (request: IDBRequest) =>
+  new Promise<void>((resolve, reject) => {
+    request.onsuccess = () => {
+      resolve();
+    };
+    request.onerror = () => {
+      reject(request.error);
+    };
+  });
 
 export const openDB = () =>
   new Promise<IDBDatabase>((resolve, reject) => {
@@ -29,20 +51,15 @@ export const openDB = () =>
       if (ev.oldVersion === 0) {
         // Initialize
         const db = request.result;
-        const baseSchema = configSchema.parse({});
 
-        const defaultVoicevoxEngineId = EngineId(defaultEngine.uuid);
-        baseSchema.engineSettings = {
-          [defaultVoicevoxEngineId]: engineSettingSchema.parse({}),
-        };
-        db.createObjectStore(settingStoreKey).add(baseSchema, entryKey);
+        db.createObjectStore(settingStoreKey);
 
         // NOTE: fixedExportDirectoryを使用してファイルの書き出しをする際、
         // audio.tsの現在の実装では、ディレクトリを選択するモーダルを表示しないようになっている
         // ディレクトリへの書き出し権限の要求は、モーダルの表示かディレクトリを指定したファイルの書き出しの時のみで、
         // directoryHandleがないと権限の要求が出来ないため、directoryHandleを永続化しておく
         db.createObjectStore(directoryHandleStoreKey);
-      } else if (ev.newVersion !== null && ev.newVersion > ev.oldVersion) {
+      } else if (ev.newVersion != null && ev.newVersion > ev.oldVersion) {
         // TODO: migrate
         /* eslint-disable no-console */ // logger みたいなパッケージに切り出して、それに依存する形でもいいかも
         console.error(
@@ -53,49 +70,52 @@ export const openDB = () =>
     };
   });
 
-export const setSettingEntry = async <Key extends keyof ConfigType>(
-  key: Key,
-  newValue: ConfigType[Key]
-) => {
-  const db = await openDB();
-
-  // TODO: Schemaに合っているか保存時にvalidationしたい
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(settingStoreKey, "readwrite");
-    const store = transaction.objectStore(settingStoreKey);
-    const getRequest = store.get(entryKey);
-    getRequest.onsuccess = () => {
-      const baseSchema = configSchema.parse(getRequest.result);
-      baseSchema[key] = newValue;
-      const validatedSchema = configSchema.parse(baseSchema);
-      const putRequest = store.put(validatedSchema, entryKey);
-      putRequest.onsuccess = () => {
-        resolve(putRequest.result);
-      };
-      putRequest.onerror = () => {
-        reject(putRequest.error);
-      };
-    };
-    getRequest.onerror = () => {
-      reject(getRequest.error);
-    };
-  });
-};
+class BrowserConfigManager extends BaseConfigManager {
+  protected getAppVersion() {
+    return import.meta.env.VITE_APP_VERSION;
+  }
+  protected async exists() {
+    const db = await openDB();
 
-export const getSettingEntry = async <Key extends keyof ConfigType>(
-  key: Key
-): Promise<ConfigType[Key]> => {
-  const db = await openDB();
+    try {
+      const transaction = db.transaction(settingStoreKey, "readonly");
+      const store = transaction.objectStore(settingStoreKey);
+      const request = store.get(entryKey);
+      await waitRequest(request);
+      const result = request.result;
+      return result != undefined;
+    } catch (e) {
+      return false;
+    }
+  }
+  protected async load(): Promise<Record<string, unknown> & Metadata> {
+    const db = await openDB();
 
-  return new Promise((resolve, reject) => {
     const transaction = db.transaction(settingStoreKey, "readonly");
     const store = transaction.objectStore(settingStoreKey);
     const request = store.get(entryKey);
-    request.onsuccess = () => {
-      resolve(request.result[key]);
-    };
-    request.onerror = () => {
-      reject(request.error);
-    };
-  });
-};
+    await waitRequest(request);
+    const result = request.result;
+    if (result == undefined) {
+      throw new Error("設定ファイルが見つかりません");
+    }
+    return JSON.parse(result);
+  }
+
+  protected async save(data: ConfigType & Metadata) {
+    const db = await openDB();
+
+    const transaction = db.transaction(settingStoreKey, "readwrite");
+    const store = transaction.objectStore(settingStoreKey);
+    const request = store.put(JSON.stringify(data), entryKey);
+    await waitRequest(request);
+  }
+
+  protected async getDefaultConfig() {
+    const baseConfig = await super.getDefaultConfig();
+    baseConfig.engineSettings[defaultEngineId] ??= engineSettingSchema.parse(
+      {}
+    );
+    return baseConfig;
+  }
+}

src/components/SettingDialog.vue

@@ -1087,21 +1087,25 @@ const changeShowAddAudioItemButton = async (
 const canSetAudioOutputDevice = computed(() => {
   return !!HTMLAudioElement.prototype.setSinkId;
 });
-const currentAudioOutputDeviceComputed = computed<{
-  key: string;
-  label: string;
-} | null>({
+const currentAudioOutputDeviceComputed = computed<
+  | {
+      key: string;
+      label: string;
+    }
+  | undefined
+>({
   get: () => {
     // 再生デバイスが見つからなかったらデフォルト値に戻す
+    // FIXME: watchなどにしてgetter内で操作しないようにする
     const device = availableAudioOutputDevices.value?.find(
       (device) => device.key === store.state.savingSetting.audioOutputDevice
     );
     if (device) {
       return device;
-    } else {
+    } else if (store.state.savingSetting.audioOutputDevice !== "default") {
       handleSavingSettingChange("audioOutputDevice", "default");
-      return null;
     }
+    return undefined;
   },
   set: (device) => {
     if (device) {