Merge branch 'main' into arrange-stories-file

.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 から実行し、デバッグを可能にするタスクが有効になります。
 
 ## ライセンス
 

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,11 +3,11 @@
  * ランタイム情報には起動しているエンジンの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 { writeFileSafely } from "@/backend/electron/fileHelper";
 
 /**
  * ランタイム情報書き出しに必要なEngineInfo
@@ -99,7 +99,7 @@ export class RuntimeInfoManager {
 
       // ファイル書き出し
       try {
-        await fs.promises.writeFile(
+        writeFileSafely(
           this.runtimeInfoPath,
           JSON.stringify(runtimeInfoFormatFor3rdParty), // FIXME: zod化する
         );

src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue

@@ -39,7 +39,7 @@ const modelValueComputed = computed({
 });
 
 const handler = (acceptRetrieveTelemetry: boolean) => {
-  void store.dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
+  void store.actions.SET_ACCEPT_RETRIEVE_TELEMETRY({
     acceptRetrieveTelemetry: acceptRetrieveTelemetry ? "Accepted" : "Refused",
   });
 
@@ -48,6 +48,6 @@ const handler = (acceptRetrieveTelemetry: boolean) => {
 
 const privacyPolicy = ref("");
 onMounted(async () => {
-  privacyPolicy.value = await store.dispatch("GET_PRIVACY_POLICY_TEXT");
+  privacyPolicy.value = await store.actions.GET_PRIVACY_POLICY_TEXT();
 });
 </script>

src/components/Dialog/AcceptDialog/AcceptTermsDialog.vue

@@ -35,11 +35,11 @@ const modelValueComputed = computed({
 });
 
 const handler = (acceptTerms: boolean) => {
-  void store.dispatch("SET_ACCEPT_TERMS", {
+  void store.actions.SET_ACCEPT_TERMS({
     acceptTerms: acceptTerms ? "Accepted" : "Rejected",
   });
   if (acceptTerms) {
-    void store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
+    void store.actions.CHECK_EDITED_AND_NOT_SAVE({
       closeOrReload: "close",
     });
   }
@@ -49,6 +49,6 @@ const handler = (acceptTerms: boolean) => {
 
 const terms = ref("");
 onMounted(async () => {
-  terms.value = await store.dispatch("GET_POLICY_TEXT");
+  terms.value = await store.actions.GET_POLICY_TEXT();
 });
 </script>

src/components/Dialog/AllDialog.vue

@@ -52,20 +52,20 @@ const store = useStore();
 // ライセンス表示
 const isHelpDialogOpenComputed = computed({
   get: () => store.state.isHelpDialogOpen,
-  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isHelpDialogOpen: val }),
+  set: (val) => store.actions.SET_DIALOG_OPEN({ isHelpDialogOpen: val }),
 });
 
 // 設定
 const isSettingDialogOpenComputed = computed({
   get: () => store.state.isSettingDialogOpen,
-  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isSettingDialogOpen: val }),
+  set: (val) => store.actions.SET_DIALOG_OPEN({ isSettingDialogOpen: val }),
 });
 
 // ショートカットキー設定
 const isHotkeySettingDialogOpenComputed = computed({
   get: () => store.state.isHotkeySettingDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isHotkeySettingDialogOpen: val,
     }),
 });
@@ -74,7 +74,7 @@ const isHotkeySettingDialogOpenComputed = computed({
 const isToolbarSettingDialogOpenComputed = computed({
   get: () => store.state.isToolbarSettingDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isToolbarSettingDialogOpen: val,
     }),
 });
@@ -83,7 +83,7 @@ const isToolbarSettingDialogOpenComputed = computed({
 const isAcceptTermsDialogOpenComputed = computed({
   get: () => store.state.isAcceptTermsDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isAcceptTermsDialogOpen: val,
     }),
 });
@@ -97,7 +97,7 @@ const isCharacterOrderDialogOpenComputed = computed({
     !store.state.isAcceptTermsDialogOpen &&
     store.state.isCharacterOrderDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isCharacterOrderDialogOpen: val,
     }),
 });
@@ -115,7 +115,7 @@ const isDefaultStyleSelectDialogOpenComputed = computed({
     !store.state.isCharacterOrderDialogOpen &&
     store.state.isDefaultStyleSelectDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isDefaultStyleSelectDialogOpen: val,
     }),
 });
@@ -124,7 +124,7 @@ const isDefaultStyleSelectDialogOpenComputed = computed({
 const isEngineManageDialogOpenComputed = computed({
   get: () => store.state.isEngineManageDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isEngineManageDialogOpen: val,
     }),
 });
@@ -133,7 +133,7 @@ const isEngineManageDialogOpenComputed = computed({
 const isDictionaryManageDialogOpenComputed = computed({
   get: () => store.state.isDictionaryManageDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isDictionaryManageDialogOpen: val,
     }),
 });
@@ -145,7 +145,7 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     !store.state.isDefaultStyleSelectDialogOpen &&
     store.state.isAcceptRetrieveTelemetryDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isAcceptRetrieveTelemetryDialogOpen: val,
     }),
 });
@@ -165,7 +165,7 @@ const canOpenNotificationDialog = computed(() => {
 const isExportSongAudioDialogOpen = computed({
   get: () => store.state.isExportSongAudioDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isExportSongAudioDialogOpen: val,
     }),
 });
@@ -174,7 +174,7 @@ const isExportSongAudioDialogOpen = computed({
 const isImportSongProjectDialogOpenComputed = computed({
   get: () => store.state.isImportSongProjectDialogOpen,
   set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
+    store.actions.SET_DIALOG_OPEN({
       isImportSongProjectDialogOpen: val,
     }),
 });

src/components/Dialog/CharacterOrderDialog.vue

@@ -164,7 +164,7 @@ watch(
   async (newValue, oldValue) => {
     if (!oldValue && newValue) {
       // 新しいキャラクター
-      newCharacters.value = await store.dispatch("GET_NEW_CHARACTERS");
+      newCharacters.value = await store.actions.GET_NEW_CHARACTERS();
 
       // サンプルの順番、新しいキャラクターは上に
       sampleCharacterOrder.value = [
@@ -256,8 +256,7 @@ const togglePlayOrStop = (
 const characterOrderDragging = ref(false);
 
 const closeDialog = () => {
-  void store.dispatch(
-    "SET_USER_CHARACTER_ORDER",
+  void store.actions.SET_USER_CHARACTER_ORDER(
     characterOrder.value.map((info) => info.metas.speakerUuid),
   );
   stop();

src/components/Dialog/DefaultStyleListDialog.vue

@@ -191,8 +191,7 @@ watch([() => props.modelValue], async ([newValue]) => {
 const isHoverableItem = ref(true);
 
 const closeDialog = () => {
-  void store.dispatch(
-    "SET_DEFAULT_STYLE_IDS",
+  void store.actions.SET_DEFAULT_STYLE_IDS(
     Object.entries(selectedStyleIndexes.value).map(
       ([speakerUuidStr, styleIndex]) => {
         const speakerUuid = SpeakerId(speakerUuidStr);