Migrate: vue-cliからviteに移行

.env.production

@@ -8,5 +8,5 @@ DEFAULT_ENGINE_INFOS=`[
         "host": "http://127.0.0.1:50021"
     }
 ]`
-VUE_APP_GTM_CONTAINER_ID=GTM-DUMMY
+VITE_GTM_CONTAINER_ID=GTM-DUMMY
 VV_OUTPUT_LOG_UTF8=1

.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
 module.exports = {
   root: true,
   env: {
@@ -16,6 +17,7 @@ module.exports = {
     ecmaVersion: 2020,
     parser: "@typescript-eslint/parser",
   },
+  ignorePatterns: ["dist_electron/**/*", "dist/**/*", "node_modules/**/*"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
@@ -52,11 +54,12 @@ module.exports = {
   overrides: [
     {
       files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+        "./src/background.ts",
+        "./src/background/*.ts",
+        "./src/electron/*.ts",
       ],
-      env: {
-        mocha: true,
+      rules: {
+        "no-console": "off",
       },
     },
   ],

.github/workflows/build.yml

@@ -113,24 +113,6 @@ jobs:
 
           "${{ matrix.sed_name }}" -i 's/"version": "999.999.999"/"version": "${{ env.VOICEVOX_EDITOR_VERSION }}"/' package.json
 
-      # NOTE: The extraFiles of electron-builder uses VOICEVOX.app/Contents/ as the file copy destination.
-      #       However, since the executable file is located in VOICEVOX.app/Contents/MacOS/,
-      #       it is inappropriate to copy the extraFiles to the VOICEVOX.app/Contents/ directory.
-      #       Fix it so that it is copied to the VOICEVOX.app/Contents/MacOS/ directory.
-      #       cf. https://k-hyoda.hatenablog.com/entry/2021/10/23/000349#%E8%BF%BD%E5%8A%A0%E5%B1%95%E9%96%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%88%E3%81%AE%E8%A8%AD%E5%AE%9A
-      - name: Replace the extraFiles setting in vue.config.js for macOS
-        if: startsWith(matrix.os, 'macos-')
-        shell: bash
-        run: |
-          "${{ matrix.sed_name }}" -i 's/from: "build\/README.txt", to: "README.txt"/from: "build\/README.txt", to: "MacOS\/README.txt"/' vue.config.js
-          "${{ matrix.sed_name }}" -i 's/from: ".env.production", to: ".env"/from: ".env.production", to: "MacOS\/.env"/' vue.config.js
-
-          # In order to replace two lines with sed, we need to replace LF with \n and treat it as one line. Finally, undo it.
-          # cf. https://deep.tacoskingdom.com/blog/15
-          str_config="$(cat vue.config.js)"
-          echo "${str_config//$'\n'/\\n}" | "${{ matrix.sed_name }}" -e 's/from: VOICEVOX_ENGINE_DIR,\\n[ ]*to: ""/from: VOICEVOX_ENGINE_DIR, to: "MacOS\/"/' -e s/'\\n'/\\$'\n'/g > vue.config.js
-          cat vue.config.js
-
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -201,8 +183,8 @@ jobs:
         shell: bash
         run: |
           # GTM ID
-          gtm_id=$(jq -r '.VUE_APP_GTM_CONTAINER_ID' resource/editor/metas.json)
-          "${{ matrix.sed_name }}" -i 's/VUE_APP_GTM_CONTAINER_ID=.*/VUE_APP_GTM_CONTAINER_ID='"$gtm_id"'/' .env.production
+          gtm_id=$(jq -r '.gtm_container_id' resource/editor/metas.json)
+          "${{ matrix.sed_name }}" -i 's/VITE_GTM_CONTAINER_ID=.*/VITE_GTM_CONTAINER_ID='"$gtm_id"'/' .env.production
 
       - name: Generate public/licenses.json
         shell: bash
@@ -237,7 +219,7 @@ jobs:
 
           # https://github.com/electron-userland/electron-builder/issues/3179
           USE_HARD_LINKS: false
-        run: npm run electron:build_pnever -- --dir
+        run: npm run electron:pack
 
       - name: Reset Code Signing Envs
         if: startsWith(matrix.os, 'windows-') && github.event.inputs.code_signing == 'true'
@@ -403,7 +385,7 @@ jobs:
           rm "${{ matrix.app_asar_dir }}/app.asar"
 
           mv voicevox_engine/voicevox_engine/licenses.json engine_licenses.json
-          npm run license:merge -- -o "${{ matrix.app_asar_dir }}/app/licenses.json" -i engine_licenses.json -i "${{ matrix.app_asar_dir }}/app/licenses.json"
+          npm run license:merge -- -o "${{ matrix.app_asar_dir }}/app/dist/licenses.json" -i engine_licenses.json -i "${{ matrix.app_asar_dir }}/app/dist/licenses.json"
 
           # Repack asar
           asar pack "${{ matrix.app_asar_dir }}/app" "${{ matrix.app_asar_dir }}/app.asar"
@@ -675,14 +657,16 @@ jobs:
           NSIS_WEB_ARTIFACT_NAME: ${{ matrix.nsis_web_artifact_name }}
           LINUX_ARTIFACT_NAME: ${{ matrix.linux_artifact_name }}
           LINUX_EXECUTABLE_NAME: ${{ matrix.linux_executable_name }}
-        run: npm run electron:build_pnever -- --prepackaged "prepackage/"
+        run: |
+          PREPACKAGED="prepackage" npm run electron:build_packed
 
       - name: Build Electron (for macOS)
         if: endsWith(matrix.artifact_name, '-dmg') # macOS
         shell: bash
         env:
           MACOS_ARTIFACT_NAME: ${{ matrix.macos_artifact_name }}
-        run: npm run electron:build_pnever -- --prepackaged "prepackage/VOICEVOX.app"
+        run: |
+          PREPACKAGED="prepackage/VOICEVOX.app" npm run electron:build_packed
 
       - name: Reset Code Signing Envs
         if: endsWith(matrix.artifact_name, '-nsis-web') && github.event.inputs.code_signing == 'true'

.gitignore

@@ -24,7 +24,7 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-#Electron-builder output
+# Electron-builder output
 /dist_electron
 
 # data

build/afterAllArtifactBuild.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const afterWindowsNsisWebArtifactBuild = require("./afterNsisWebArtifactBuild").default;
+const afterWindowsNsisWebArtifactBuild =
+  require("./afterNsisWebArtifactBuild").default;
 
 // buildResult: electron-builder.BuildResult
 exports.default = async function (buildResult) {

build/generateLicenses.js

@@ -32,13 +32,7 @@ const customFormat = {
 const customFormatFile = tmp.fileSync();
 fs.writeFileSync(customFormatFile.name, JSON.stringify(customFormat));
 
-const disallowedLicenses = [
-  "GPL",
-  "GPL-2.0",
-  "GPL-3.0",
-  "AGPL",
-  "NGPL",
-];
+const disallowedLicenses = ["GPL", "GPL-2.0", "GPL-3.0", "AGPL", "NGPL"];
 
 // On Windows, npm's global packages can be called with the extension `.cmd` or `.ps1`.
 // On Linux (bash), they can be called without extensions.
@@ -63,14 +57,12 @@ const licenseJson = execFileSync(
 
 const checkerLicenses = JSON.parse(licenseJson);
 
-const licenses = Object.entries(checkerLicenses).map(
-  ([packageName, license]) => ({
-    name: license.name,
-    version: license.version,
-    license: license.licenses,
-    text: license.licenseText,
-  })
-);
+const licenses = Object.entries(checkerLicenses).map(([, license]) => ({
+  name: license.name,
+  version: license.version,
+  license: license.licenses,
+  text: license.licenseText,
+}));
 
 const outputPath = argv.output_path;
 fs.writeFileSync(outputPath, JSON.stringify(licenses));

build/mergeLicenses.js

@@ -7,31 +7,31 @@ const argv = yargs(hideBin(process.argv))
   .option("output_path", {
     alias: "o",
     demandOption: true,
-    type: "string"
+    type: "string",
   })
   .option("input_path", {
     alias: "i",
     demandOption: true,
-    type: "string"
+    type: "string",
   })
   .help()
   .parse();
 
 const fs = require("fs");
 
-const inputPathList = typeof argv.input_path === 'string' ?
-  [ argv.input_path ] : argv.input_path;
+const inputPathList =
+  typeof argv.input_path === "string" ? [argv.input_path] : argv.input_path;
 
 let mergedLicenses = [];
 
 for (const inputPath of inputPathList) {
   const licenseJson = fs.readFileSync(inputPath, {
-    encoding: 'utf-8'
+    encoding: "utf-8",
   });
 
   const licenses = JSON.parse(licenseJson);
   mergedLicenses = mergedLicenses.concat(licenses);
 }
 
-outputPath = argv.output_path;
+const outputPath = argv.output_path;
 fs.writeFileSync(outputPath, JSON.stringify(mergedLicenses));

build/splitNsisArchive.js

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const crypto = require('crypto');
+const crypto = require("crypto");
 const fs = require("fs");
 const path = require("path");
 
 const createIni = (sizes, hashes) => {
-  const ini = ['[files]', `n=${sizes.length}`];
+  const ini = ["[files]", `n=${sizes.length}`];
   hashes.forEach((v, i) => ini.push(`hash${i}=${v.toUpperCase()}`));
   sizes.forEach((v, i) => ini.push(`size${i}=${v}`));
   return ini.join("\r\n") + "\r\n";
@@ -66,8 +66,8 @@ exports.default = async function (target) {
 
       fileIndex += 1;
       sizes.push(chunk.length);
-      const hash = crypto.createHash('md5');
-      hashes.push(hash.update(chunk).digest('hex'));
+      const hash = crypto.createHash("md5");
+      hashes.push(hash.update(chunk).digest("hex"));
     });
   });
 

electron-builder.config.js

@@ -0,0 +1,145 @@
+const path = require("path");
+const fs = require("fs");
+
+const VOICEVOX_ENGINE_DIR =
+  process.env.VOICEVOX_ENGINE_DIR ?? "../voicevox_engine/run.dist/";
+
+// ${productName} Web Setup ${version}.${ext}
+const NSIS_WEB_ARTIFACT_NAME = process.env.NSIS_WEB_ARTIFACT_NAME;
+
+// ${productName}-${version}.${ext}
+const LINUX_ARTIFACT_NAME = process.env.LINUX_ARTIFACT_NAME;
+
+// ${packageName}
+const LINUX_EXECUTABLE_NAME = process.env.LINUX_EXECUTABLE_NAME;
+
+// ${productName}-${version}.${ext}
+const MACOS_ARTIFACT_NAME = process.env.MACOS_ARTIFACT_NAME;
+
+const isMac = process.platform === "darwin";
+
+/** @type {import("electron-builder").Configuration} */
+const builderOptions = {
+  beforeBuild: async () => {
+    if (fs.existsSync(path.resolve(__dirname, "dist_electron"))) {
+      fs.rmSync(path.resolve(__dirname, "dist_electron"), { recursive: true });
+    }
+  },
+  directories: {
+    output: "dist_electron",
+    buildResources: "build",
+  },
+  files: ["dist/**/*", "package.json"],
+  fileAssociations: [
+    {
+      ext: "vvproj",
+      name: "VOICEVOX Project file",
+      description: "VOICEVOX Project file",
+      role: "Editor",
+      icon: "icons/vvproj." + (isMac ? "icns" : "ico"),
+    },
+    {
+      ext: "vvpp",
+      name: "VOICEVOX Plugin package",
+      description: "VOICEVOX Plugin package",
+      role: "Editor",
+      icon: "icons/vvpp." + (isMac ? "icns" : "ico"),
+    },
+    {
+      ext: "vvppp",
+      name: "VOICEVOX Plugin package (part)",
+      description: "VOICEVOX Plugin package (part)",
+      role: "Editor",
+      icon: "icons/vvpp." + (isMac ? "icns" : "ico"),
+    },
+  ],
+  extraFiles:
+    // electron-builderのextraFilesは、ファイルのコピー先としてVOICEVOX.app/Contents/を使用する。
+    // しかし、実行ファイルはVOICEVOX.app/Contents/MacOS/にあるため、extraFilesをVOICEVOX.app/Contents/ディレクトリにコピーするのは正しくない。
+    // VOICEVOX.app/Contents/MacOS/ディレクトリにコピーされるように修正する。
+    // cf: https://k-hyoda.hatenablog.com/entry/2021/10/23/000349#%E8%BF%BD%E5%8A%A0%E5%B1%95%E9%96%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%88%E3%81%AE%E8%A8%AD%E5%AE%9A
+
+    isMac
+      ? [
+          { from: "build/README.txt", to: "MacOS/README.txt" },
+          {
+            from: ".env.production",
+            to: "MacOS/.env",
+          },
+          {
+            from: VOICEVOX_ENGINE_DIR,
+            to: "MacOS/",
+          },
+        ]
+      : [
+          { from: "build/README.txt", to: "README.txt" },
+          {
+            from: ".env.production",
+            to: ".env",
+          },
+          {
+            from: VOICEVOX_ENGINE_DIR,
+            to: "",
+          },
+        ],
+  // electron-builder installer
+  productName: "VOICEVOX",
+  appId: "jp.hiroshiba.voicevox",
+  copyright: "Hiroshiba Kazuyuki",
+  afterAllArtifactBuild: path.resolve(
+    __dirname,
+    "build",
+    "afterAllArtifactBuild.js"
+  ),
+  win: {
+    icon: "public/icon.png",
+    target: [
+      {
+        target: "nsis-web",
+        arch: ["x64"],
+      },
+    ],
+  },
+  nsisWeb: {
+    artifactName:
+      NSIS_WEB_ARTIFACT_NAME !== "" ? NSIS_WEB_ARTIFACT_NAME : undefined,
+    include: "build/installer.nsh",
+    oneClick: false,
+    allowToChangeInstallationDirectory: true,
+  },
+  publish: {
+    provider: "github",
+    repo: "voicevox",
+    vPrefixedTagName: false,
+  },
+  linux: {
+    artifactName: LINUX_ARTIFACT_NAME !== "" ? LINUX_ARTIFACT_NAME : undefined,
+    executableName:
+      LINUX_EXECUTABLE_NAME !== "" ? LINUX_EXECUTABLE_NAME : undefined,
+    icon: "public/icon.png",
+    category: "AudioVideo",
+    mimeTypes: ["application/x-voicevox"],
+    target: [
+      {
+        target: "AppImage",
+        arch: ["x64"],
+      },
+    ],
+  },
+  mac: {
+    artifactName: MACOS_ARTIFACT_NAME !== "" ? MACOS_ARTIFACT_NAME : undefined,
+    icon: "public/icon-mac.png",
+    category: "public.app-category.utilities",
+    target: [
+      {
+        target: "dmg",
+        arch: ["x64"],
+      },
+    ],
+  },
+  dmg: {
+    icon: "public/icon-dmg.icns",
+  },
+};
+
+module.exports = builderOptions;