[refactor] VueRouterの依存を失くす (#1875)

* VueRouterの依存を失くす

* /talkなどを削除

Author: Hiroshiba

README.md

@@ -73,7 +73,7 @@ npm run electron:serve
 npm run browser:serve
 ```
 
-また、main ブランチのビルド結果がこちらにデプロイされています <https://voicevox-browser-dev.netlify.app/#/talk>  
+また、main ブランチのビルド結果がこちらにデプロイされています <https://voicevox-browser-dev.netlify.app/>  
 今はローカル PC 上で音声合成エンジンを起動する必要があります。
 
 ## ビルド
@@ -114,7 +114,7 @@ Playwright を使用しているためテストパターンを生成すること
 **ブラウザ版を起動している状態で**以下のコマンドを実行してください。
 
 ```bash
-npx playwright codegen http://localhost:5173/#/talk  --viewport-size=800,600
+npx playwright codegen http://localhost:5173/  --viewport-size=800,600
 ```
 
 詳細は [Playwright ドキュメントの Test generator](https://playwright.dev/docs/codegen-intro) を参照してください。

docs/コードの歩き方.md

@@ -88,7 +88,6 @@ TODO
   - styles ディレクトリ ･･･ CSS や SCSS などのディレクトリ。
   - infrastructures ディレクトリ ･･･ UI 用のコードと UI 以外のコードを跨ぐときに一枚かませたいときのためのコードのディレクトリ。
   - openapi ディレクトリ ･･･ エンジンの API を叩くためのコードのディレクトリ。OpenAPI で自動生成される。
-  - router ディレクトリ ･･･ Vue Router 用のディレクトリ。
   - helpers ディレクトリ ･･･ 便利な関数を置くディレクトリ。
   - shared ディレクトリ ･･･ UI と Electron 両方から参照されるコードを置くディレクトリ。
 - public

package-lock.json

@@ -63,7 +63,6 @@
     "tree-kill": "1.2.2",
     "uuid": "9.0.0",
     "vue": "3.2.45",
-    "vue-router": "4.0.8",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "zod": "3.22.4"

package.json

@@ -470,7 +470,6 @@ async function loadUrl(obj: {
   projectFilePath?: string;
 }) {
   const fragment =
-    "#/talk" +
     `?isMultiEngineOffMode=${obj?.isMultiEngineOffMode ?? false}` +
     `&projectFilePath=${obj?.projectFilePath ?? ""}`;
   return win.loadURL(`${firstUrl}${fragment}`);

src/backend/electron/main.ts

@@ -1,34 +1,39 @@
 <template>
   <ErrorBoundary>
     <!-- TODO: メニューバーをEditorHomeから移動する -->
-    <RouterView v-slot="{ Component }">
-      <KeepAlive>
-        <Component
-          :is="Component"
-          :is-engines-ready="isEnginesReady"
-          :is-project-file-loaded="isProjectFileLoaded"
-        />
-      </KeepAlive>
-    </RouterView>
+    <KeepAlive>
+      <Component
+        :is="openedEditor == 'talk' ? TalkEditor : SingEditor"
+        v-if="openedEditor != undefined"
+        :key="openedEditor"
+        :is-engines-ready="isEnginesReady"
+        :is-project-file-loaded="isProjectFileLoaded"
+      />
+    </KeepAlive>
     <AllDialog :is-engines-ready="isEnginesReady" />
   </ErrorBoundary>
 </template>
 
 <script setup lang="ts">
 import { watch, onMounted, ref, computed, toRaw } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
-import { useRoute } from "vue-router";
+import TalkEditor from "@/components/Talk/TalkEditor.vue";
+import SingEditor from "@/components/Sing/SingEditor.vue";
 import { EngineId } from "@/type/preload";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import AllDialog from "@/components/Dialog/AllDialog.vue";
 
 const store = useStore();
-const route = useRoute();
 
-// TODO: プロジェクトファイルの読み込みもEditorHomeから移動する
-const projectFilePath = computed(() => route.query["projectFilePath"]);
+const openedEditor = computed(() => store.state.openedEditor);
+
+/**
+ * 読み込むプロジェクトファイルのパス。
+ * undefinedのときは何も読み込むべきものがない。
+ */
+const projectFilePath = ref<string | undefined>(undefined);
 
 // Google Tag Manager
 const gtm = useGtm();
@@ -49,20 +54,13 @@ watch(
   { immediate: true }
 );
 
-// エディタの切り替えを監視する
+// エディタの切り替えを監視してショートカットキーの設定を変更する
 watch(
-  () => route.path,
-  async (unknownPath) => {
-    let path: "talk" | "song";
-    if (["/talk", "/song"].includes(unknownPath)) {
-      path = unknownPath.slice(1) as "talk" | "song";
-    } else {
-      // 不明なパスの場合はトークエディタにする
-      path = "talk";
-      window.backend.logWarn(`unknown path: ${unknownPath}`);
+  () => store.state.openedEditor,
+  async (openedEditor) => {
+    if (openedEditor != undefined) {
+      hotkeyManager.onEditorChange(openedEditor);
     }
-
-    hotkeyManager.onEditorChange(path);
   }
 );
 
@@ -71,10 +69,22 @@ const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);
 const isProjectFileLoaded = ref<boolean | "waiting">("waiting");
 onMounted(async () => {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+
   await store.dispatch("INIT_VUEX");
 
-  const hotkeySettings = store.state.hotkeySettings;
+  // プロジェクトファイルのパスを取得
+  const _projectFilePath = urlParams.get("projectFilePath");
+  if (_projectFilePath != undefined && _projectFilePath !== "") {
+    projectFilePath.value = _projectFilePath;
+  }
+
+  // どちらのエディタを開くか設定
+  await store.dispatch("SET_OPENED_EDITOR", { editor: "talk" });
 
+  // ショートカットキーの設定を登録
+  const hotkeySettings = store.state.hotkeySettings;
   hotkeyManager.load(structuredClone(toRaw(hotkeySettings)));
 
   // エンジンの初期化開始
@@ -83,7 +93,7 @@ onMounted(async () => {
   await store.dispatch("GET_ENGINE_INFOS");
 
   // URLパラメータに従ってマルチエンジンをオフにする
-  const isMultiEngineOffMode = route.query["isMultiEngineOffMode"] === "true";
+  const isMultiEngineOffMode = urlParams.get("isMultiEngineOffMode") === "true";
   store.dispatch("SET_IS_MULTI_ENGINE_OFF_MODE", isMultiEngineOffMode);
 
   // マルチエンジンオフモードのときはデフォルトエンジンだけにする

src/components/App.vue

@@ -6,7 +6,7 @@
   <!-- FIXME: 画面サイズが小さくなると表示が崩れるのを直す -->
   <!-- NOTE: デザインしづらいからQBtnかdivの方が良い -->
   <QBtnToggle
-    :model-value="nowEditor"
+    :model-value="openedEditor"
     unelevated
     :disable="uiLocked"
     dense
@@ -15,31 +15,22 @@
       { label: 'トーク', value: 'talk' },
       { label: 'ソング', value: 'song' },
     ]"
-    @update:model-value="gotoLink"
+    @update:model-value="switchEditor"
   />
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useRouter } from "vue-router";
 import { useStore } from "@/store";
 import { EditorType } from "@/type/preload";
 
 const store = useStore();
-const router = useRouter();
 
+const openedEditor = computed(() => store.state.openedEditor);
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
-const nowEditor = computed<EditorType>(() => {
-  const path = router.currentRoute.value.path;
-  if (path === "/talk") return "talk";
-  if (path === "/song") return "song";
-  window.backend.logWarn(`unknown path: ${path}`);
-  return "talk";
-});
-
-const gotoLink = (editor: EditorType) => {
-  router.push("/" + editor);
+const switchEditor = async (editor: EditorType) => {
+  await store.dispatch("SET_OPENED_EDITOR", { editor });
 };
 </script>
 

src/components/Menu/MenuBar/TitleBarEditorSwitcher.vue

@@ -2,7 +2,6 @@ import { createApp } from "vue";
 import { createGtm } from "@gtm-support/vue-gtm";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
-import router from "./router";
 import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
 import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
@@ -19,11 +18,9 @@ window.dataLayer = [];
 
 createApp(App)
   .use(store, storeKey)
-  .use(router)
   .use(
     createGtm({
       id: import.meta.env.VITE_GTM_CONTAINER_ID ?? "GTM-DUMMY",
-      vueRouter: router,
       // NOTE: 最初はgtm.jsを読まず、プライバシーポリシーに同意後に読み込む
       enabled: false,
     })

src/main.ts

@@ -1506,6 +1506,7 @@ export type SettingStoreTypes = {
  */
 
 export type UiStoreState = {
+  openedEditor: EditorType | undefined; // undefinedのときはどのエディタを開くか定まっていない
   uiLockCount: number;
   dialogLockCount: number;
   reloadingLock: boolean;
@@ -1530,6 +1531,11 @@ export type UiStoreState = {
 };
 
 export type UiStoreTypes = {
+  SET_OPENED_EDITOR: {
+    mutation: { editor: EditorType };
+    action(palyoad: { editor: EditorType }): void;
+  };
+
   UI_LOCKED: {
     getter: boolean;
   };

src/router/index.ts

@@ -45,6 +45,7 @@ export function withProgress<T>(
 }
 
 export const uiStoreState: UiStoreState = {
+  openedEditor: undefined,
   uiLockCount: 0,
   dialogLockCount: 0,
   reloadingLock: false,
@@ -69,6 +70,15 @@ export const uiStoreState: UiStoreState = {
 };
 
 export const uiStore = createPartialStore<UiStoreTypes>({
+  SET_OPENED_EDITOR: {
+    mutation(state, { editor }) {
+      state.openedEditor = editor;
+    },
+    action({ commit }, { editor }) {
+      commit("SET_OPENED_EDITOR", { editor });
+    },
+  },
+
   UI_LOCKED: {
     getter(state) {
       return state.uiLockCount > 0;

src/store/type.ts

@@ -2,10 +2,10 @@ import { expect, Page } from "@playwright/test";
 import { getNewestQuasarDialog, getQuasarMenu } from "./locators";
 
 /**
- * /#/talkに移動
+ * 最初の画面に移動
  */
 export async function gotoHome({ page }: { page: Page }) {
-  const BASE_URL = "http://localhost:7357/#/talk";
+  const BASE_URL = "http://localhost:7357/";
   await page.setViewportSize({ width: 800, height: 600 });
   await page.goto(BASE_URL);
 }