Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

.github/workflows/build.yml

@@ -26,9 +26,8 @@ on:
         default: false
 
 env:
-  VOICEVOX_ENGINE_REPO_URL: "https://github.com/VOICEVOX/voicevox_engine"
-  VOICEVOX_ENGINE_VERSION: 0.20.0
-  VOICEVOX_RESOURCE_VERSION: 0.20.0
+  VOICEVOX_ENGINE_VERSION: 0.21.1
+  VOICEVOX_RESOURCE_VERSION: 0.21.1
   VOICEVOX_EDITOR_VERSION:
     |- # releaseタグ名か、workflow_dispatchでのバージョン名か、999.999.999-developが入る
     ${{ github.event.release.tag_name || github.event.inputs.version || '999.999.999-develop' }}

.storybook/preview.ts

@@ -53,6 +53,11 @@ const preview: Preview = {
           value: "#333",
         },
       ],
+      grid: {
+        cellSize: 8,
+        cellAmount: 4,
+        opacity: 0.1,
+      },
     },
   },
   decorators: [

.vscode/launch.template.json

@@ -6,11 +6,14 @@
     "configurations": [
         {
             "name": "Attach to Renderer Process",
-            // NOTE: background.tsで指定しているremote-debugging-port
-            "port": 9222,
+            "port": 9222, // NOTE: background.tsで指定しているremote-debugging-port
             "request": "attach",
             "type": "chrome",
-            "webRoot": "${workspaceFolder}",
+            "webRoot": "${workspaceFolder}/src",
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
+            ],
             "timeout": 20000, // 20 * 1000 ms程度あればビルド時間は間に合うはず
         },
         {
@@ -26,6 +29,23 @@
             ],
             "type": "node"
         },
+        {
+            // 直接Electronのみを起動し、バックグラウンドで"electron:serve"を実行する
+            // NOTE: ホットリロードできない代わりに、デバッグ起動が軽い
+            "name": "Launch Electron Main Process without hot reload",
+            "request": "launch",
+            "type": "node",
+            "runtimeExecutable": "npx",
+            "args": [
+                "electron",
+                ".",
+                "--no-sandbox"
+            ],
+            "preLaunchTask": "Electron Serve without Launch Electron",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
         {
             "name": "Attach by Process ID",
             // .bin viteを指定するとElectronのMain Processのデバッグが可能
@@ -35,13 +55,25 @@
                 "<node_internals>/**"
             ],
             "type": "node"
-        },
+        }
     ],
     "compounds": [
         {
             "name": "Launch Electron Main/Renderer",
-            "configurations": ["Attach to Renderer Process", "Launch Electron Main Process via NPM"],
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process via NPM"
+            ],
+            "stopAll": true
+        },
+        {
+            // ホットリロードできない代わりにデバッグ起動が軽いモード
+            "name": "Launch Electron Main/Renderer without hot reload",
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process without hot reload"
+            ],
             "stopAll": true
         }
     ]
-}
+}

.vscode/tasks.template.json

@@ -0,0 +1,28 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Electron Serve without Launch Electron",
+            // Electronを起動せずにバックグラウンドで"electron:serve"を実行する
+            // NOTE: デバッグ起動を軽くできる
+            "type": "npm",
+            "script": "electron:serve",
+            "options": {
+                "env": {
+                    "SKIP_LAUNCH_ELECTRON": "1"
+                }
+            },
+            "isBackground": true,
+            "problemMatcher": {
+                "pattern": {
+                    "regexp": ""
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "building for development\\.\\.\\.",
+                    "endsPattern": "main process build is complete\\."
+                }
+            }
+        }
+    ]
+}

README.md

@@ -319,7 +319,9 @@ npx openapi-generator-cli version-manager list
 
 npm scripts の `serve` や `electron:serve` などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。
 
-`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
+`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を、
+`.vscode/tasks.template.json` をコピーして `.vscode/tasks.json` を作成することで、
+開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
 
 ## ライセンス
 

public/updateInfos.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": "0.21.1",
+    "descriptions": ["キャラクター「Voidoll」を追加"],
+    "contributors": []
+  },
   {
     "version": "0.21.0",
     "descriptions": [

src/backend/browser/contract.ts

@@ -1,8 +1,7 @@
-import { type EngineInfo, envEngineInfoSchema } from "@/type/preload";
+import { loadEnvEngineInfos } from "@/domain/defaultEngine/envEngineInfo";
+import { type EngineInfo } from "@/type/preload";
 
-const baseEngineInfo = envEngineInfoSchema
-  .array()
-  .parse(JSON.parse(import.meta.env.VITE_DEFAULT_ENGINE_INFOS))[0];
+const baseEngineInfo = loadEnvEngineInfos()[0];
 
 export const defaultEngine: EngineInfo = (() => {
   const { protocol, hostname, port, pathname } = new URL(baseEngineInfo.host);

src/backend/common/ConfigManager.ts

@@ -3,7 +3,6 @@ import AsyncLock from "async-lock";
 import {
   AcceptTermsStatus,
   ConfigType,
-  EngineId,
   configSchema,
   DefaultStyleId,
   defaultHotkeySettings,
@@ -12,9 +11,9 @@ import {
   HotkeyCombination,
   VoiceId,
   PresetKey,
-  envEngineInfoSchema,
 } from "@/type/preload";
 import { ensureNotNullish } from "@/helpers/errorHelper";
+import { loadEnvEngineInfos } from "@/domain/defaultEngine/envEngineInfo";
 
 const lockKey = "save";
 
@@ -40,11 +39,7 @@ const migrations: [string, (store: Record<string, unknown>) => unknown][] = [
       if (import.meta.env.VITE_DEFAULT_ENGINE_INFOS == undefined) {
         throw new Error("VITE_DEFAULT_ENGINE_INFOS == undefined");
       }
-      const engineId = EngineId(
-        envEngineInfoSchema
-          .array()
-          .parse(JSON.parse(import.meta.env.VITE_DEFAULT_ENGINE_INFOS))[0].uuid,
-      );
+      const engineId = loadEnvEngineInfos()[0].uuid;
       if (engineId == undefined)
         throw new Error("VITE_DEFAULT_ENGINE_INFOS[0].uuid == undefined");
       const prevDefaultStyleIds = config.defaultStyleIds as DefaultStyleId[];

src/backend/electron/electronConfig.ts

@@ -1,7 +1,7 @@
 import { join } from "path";
 import fs from "fs";
 import { app } from "electron";
-import { moveFile } from "move-file";
+import { writeFileSafely } from "./fileHelper";
 import { BaseConfigManager, Metadata } from "@/backend/common/ConfigManager";
 import { ConfigType } from "@/type/preload";
 
@@ -23,16 +23,7 @@ export class ElectronConfigManager extends BaseConfigManager {
   }
 
   protected async save(config: ConfigType & Metadata) {
-    // ファイル書き込みに失敗したときに設定が消えないように、tempファイル書き込み後上書き移動する
-    const temp_path = `${this.configPath}.tmp`;
-    await fs.promises.writeFile(
-      temp_path,
-      JSON.stringify(config, undefined, 2),
-    );
-
-    await moveFile(temp_path, this.configPath, {
-      overwrite: true,
-    });
+    writeFileSafely(this.configPath, JSON.stringify(config, undefined, 2));
   }
 
   private get configPath(): string {

src/backend/electron/fileHelper.ts

@@ -0,0 +1,18 @@
+import fs from "fs";
+import { moveFileSync } from "move-file";
+
+/**
+ * 書き込みに失敗したときにファイルが消えないように、
+ * tmpファイル書き込み後、保存先ファイルに上書きする
+ */
+export function writeFileSafely(
+  path: string,
+  data: string | NodeJS.ArrayBufferView,
+) {
+  const tmpPath = `${path}.tmp`;
+  fs.writeFileSync(tmpPath, data);
+
+  moveFileSync(tmpPath, path, {
+    overwrite: true,
+  });
+}

src/backend/electron/ipc.ts

@@ -68,8 +68,8 @@ export const ipcMainSendProxy = new Proxy(
 const validateIpcSender = (event: IpcMainInvokeEvent) => {
   let isValid: boolean;
   const senderUrl = new URL(event.senderFrame.url);
-  if (process.env.VITE_DEV_SERVER_URL != undefined) {
-    const devServerUrl = new URL(process.env.VITE_DEV_SERVER_URL);
+  if (import.meta.env.VITE_DEV_SERVER_URL != undefined) {
+    const devServerUrl = new URL(import.meta.env.VITE_DEV_SERVER_URL);
     isValid = senderUrl.origin === devServerUrl.origin;
   } else {
     isValid = senderUrl.protocol === "app:";

src/backend/electron/main.ts

@@ -28,6 +28,7 @@ import { RuntimeInfoManager } from "./manager/RuntimeInfoManager";
 import { registerIpcMainHandle, ipcMainSendProxy, IpcMainHandle } from "./ipc";
 import { getConfigManager } from "./electronConfig";
 import { EngineAndVvppController } from "./engineAndVvppController";
+import { writeFileSafely } from "./fileHelper";
 import { failure, success } from "@/type/result";
 import { AssetTextFileNames } from "@/type/staticResources";
 import {
@@ -145,7 +146,7 @@ protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true, stream: true } },
 ]);
 
-const firstUrl = process.env.VITE_DEV_SERVER_URL ?? "app://./index.html";
+const firstUrl = import.meta.env.VITE_DEV_SERVER_URL ?? "app://./index.html";
 
 // engine
 const vvppEngineDir = path.join(app.getPath("userData"), "vvpp-engines");
@@ -280,7 +281,7 @@ async function createWindow() {
   }
 
   // ソフトウェア起動時はプロトコルを app にする
-  if (process.env.VITE_DEV_SERVER_URL == undefined) {
+  if (import.meta.env.VITE_DEV_SERVER_URL == undefined) {
     protocol.handle("app", (request) => {
       // 読み取り先のファイルがインストールディレクトリ内であることを確認する
       // ref: https://www.electronjs.org/ja/docs/latest/api/protocol#protocolhandlescheme-handler
@@ -744,7 +745,7 @@ registerIpcMainHandle<IpcMainHandle>({
 
   WRITE_FILE: (_, { filePath, buffer }) => {
     try {
-      fs.writeFileSync(
+      writeFileSafely(
         filePath,
         new DataView(buffer instanceof Uint8Array ? buffer.buffer : buffer),
       );

src/backend/electron/manager/RuntimeInfoManager.ts

@@ -3,12 +3,12 @@
  * ランタイム情報には起動しているエンジンのURLなどが含まれる。
  */
 
-import fs from "fs";
 import AsyncLock from "async-lock";
 import log from "electron-log/main";
 import type { AltPortInfos } from "@/store/type";
 import { EngineId, EngineInfo } from "@/type/preload";
 import { convertToUrlString } from "@/domain/url";
+import { writeFileSafely } from "@/backend/electron/fileHelper";
 
 /**
  * ランタイム情報書き出しに必要なEngineInfo
@@ -101,7 +101,7 @@ export class RuntimeInfoManager {
 
       // ファイル書き出し
       try {
-        await fs.promises.writeFile(
+        writeFileSafely(
           this.runtimeInfoPath,
           JSON.stringify(runtimeInfoFormatFor3rdParty), // FIXME: zod化する
         );

src/backend/electron/manager/engineInfoManager.ts

@@ -12,21 +12,17 @@ import {
   MinimumEngineManifestType,
   EngineId,
   minimumEngineManifestSchema,
-  envEngineInfoSchema,
 } from "@/type/preload";
 import { AltPortInfos } from "@/store/type";
 import { BaseConfigManager } from "@/backend/common/ConfigManager";
+import { loadEnvEngineInfos } from "@/domain/defaultEngine/envEngineInfo";
 
 /**
  * デフォルトエンジンの情報を取得する
  */
 function fetchDefaultEngineInfos(defaultEngineDir: string): EngineInfo[] {
   // TODO: envから直接ではなく、envに書いたengine_manifest.jsonから情報を得るようにする
-  const defaultEngineInfosEnv =
-    import.meta.env.VITE_DEFAULT_ENGINE_INFOS ?? "[]";
-
-  const envSchema = envEngineInfoSchema.array();
-  const engines = envSchema.parse(JSON.parse(defaultEngineInfosEnv));
+  const engines = loadEnvEngineInfos();
 
   return engines.map((engineInfo) => {
     const { protocol, hostname, port, pathname } = new URL(engineInfo.host);

src/components/Base/BaseCheckbox.stories.ts

@@ -1,23 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
+import { ref } from "vue";
 import BaseCheckbox from "./BaseCheckbox.vue";
 
 const meta: Meta<typeof BaseCheckbox> = {
   component: BaseCheckbox,
+  render: (args) => ({
+    components: { BaseCheckbox },
+    setup() {
+      const checked = ref(Boolean(args.checked));
+      return { args, checked };
+    },
+    template: `<BaseCheckbox v-bind="args" v-model:checked="checked"></BaseCheckbox>`,
+  }),
 };
 
 export default meta;
 type Story = StoryObj<typeof BaseCheckbox>;
 
-export const Default: Story = {
+export const Unchecked: Story = {
   args: {
-    label: "Default",
-    checked: false,
+    label: "Unchecked",
   },
 };
 
 export const Checked: Story = {
-  ...Default,
   args: {
     label: "Checked",
     checked: true,