Update: 依存関係を更新する

.node-version

@@ -1 +1 @@
-20.12.2
+22.11.0

.storybook/main.ts

@@ -7,7 +7,6 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
     "@storybook/addon-themes",
     "@storybook/experimental-addon-test",
   ],

package.json

@@ -5,8 +5,8 @@
   "private": true,
   "main": "./dist/main.js",
   "engines": {
-    "node": ">=20.12.2 <21",
-    "npm": ">=10.5.0 <11"
+    "node": ">=22.11.0 <23",
+    "npm": ">=10.9.0 <11"
   },
   "volta": {
     "node": "20.12.2",
@@ -53,14 +53,14 @@
     "encoding-japanese": "1.0.30",
     "fast-array-diff": "1.1.0",
     "fast-base64": "0.1.8",
-    "glob": "8.0.3",
+    "glob": "11.0.0",
     "hotkeys-js": "3.13.6",
     "immer": "9.0.21",
     "markdown-it": "13.0.2",
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "pixi.js": "7.4.0",
-    "quasar": "2.17.0",
+    "quasar": "2.17.2",
     "radix-vue": "1.9.6",
     "rfdc": "1.4.1",
     "semver": "7.5.4",
@@ -77,19 +77,18 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.5.0",
-    "@openapitools/openapi-generator-cli": "2.13.4",
+    "@openapitools/openapi-generator-cli": "2.15.3",
     "@playwright/test": "1.48.0",
-    "@quasar/vite-plugin": "1.7.0",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-themes": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/experimental-addon-test": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@storybook/types": "8.3.5",
-    "@storybook/vue3": "8.3.5",
-    "@storybook/vue3-vite": "8.3.5",
+    "@quasar/vite-plugin": "1.8.1",
+    "@storybook/addon-essentials": "8.4.4",
+    "@storybook/addon-links": "8.4.4",
+    "@storybook/addon-themes": "8.4.4",
+    "@storybook/blocks": "8.4.4",
+    "@storybook/experimental-addon-test": "8.4.4",
+    "@storybook/test": "8.4.4",
+    "@storybook/types": "8.4.4",
+    "@storybook/vue3": "8.4.4",
+    "@storybook/vue3-vite": "8.4.4",
     "@types/async-lock": "1.4.0",
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
@@ -112,29 +111,29 @@
     "chromatic": "11.5.4",
     "cross-env": "7.0.3",
     "dotenv": "16.0.0",
-    "electron": "30.0.1",
-    "electron-builder": "24.13.3",
+    "electron": "33.2.0",
+    "electron-builder": "25.1.8",
     "electron-devtools-installer": "3.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vue": "9.26.0",
-    "happy-dom": "8.4.2",
+    "happy-dom": "15.11.6",
     "license-checker-rseidelsohn": "4.3.0",
     "markdownlint-cli": "0.37.0",
+    "node-fetch": "2.7.0",
     "playwright": "1.48.0",
     "prettier": "3.2.5",
-    "sass": "1.77.8",
-    "storybook": "8.3.5",
-    "ts-node": "10.9.1",
+    "sass-embedded": "1.81.0",
+    "storybook": "8.4.4",
     "typescript": "5.5.2",
-    "vite": "5.3.2",
+    "vite": "5.4.11",
     "vite-plugin-checker": "0.8.0",
-    "vite-plugin-electron": "0.28.4",
-    "vite-plugin-node-polyfills": "0.21.0",
-    "vite-tsconfig-paths": "4.2.1",
+    "vite-plugin-electron": "0.29.0",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-tsconfig-paths": "5.1.2",
     "vitest": "2.1.2",
     "vue-tsc": "2.1.6",
     "yargs": "17.2.1"

playwright.config.ts

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

public/licenses.json

@@ -1,3 +1,14 @@
 [
-    {"name": "dummy name1", "version": "0.0.1", "license": "dummy license1", "text": "dummy text1"}, {"name": "dummy name2", "version": "0.0.2", "license": "dummy license2", "text": "dummy text2"}
+  {
+    "name": "dummy name1",
+    "version": "0.0.1",
+    "license": "dummy license1",
+    "text": "dummy text1"
+  },
+  {
+    "name": "dummy name2",
+    "version": "0.0.2",
+    "license": "dummy license2",
+    "text": "dummy text2"
+  }
 ]

src/backend/browser/sandbox.ts

@@ -20,7 +20,7 @@ import {
 import { AssetTextFileNames } from "@/type/staticResources";
 
 const toStaticPath = (fileName: string) =>
-  `${import.meta.env.BASE_URL}/${fileName}`.replaceAll(/\/\/+/, "/");
+  `${import.meta.env.BASE_URL}/${fileName}`.replaceAll(/\/\/+/g, "/");
 
 // FIXME: asを使わないようオーバーロードにした。オーバーロードも使わない書き方にしたい。
 function onReceivedIPCMsg<

src/backend/electron/ipc.ts

@@ -66,17 +66,19 @@ export const ipcMainSendProxy = new Proxy(
 
 /** IPCメッセージの送信元を確認する */
 const validateIpcSender = (event: IpcMainInvokeEvent) => {
-  let isValid: boolean;
-  const senderUrl = new URL(event.senderFrame.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:";
+  let isValid: boolean = false;
+  if (event.senderFrame) {
+    const senderUrl = new URL(event.senderFrame.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:";
+    }
   }
   if (!isValid) {
     throw new Error(
-      `不正なURLからのIPCメッセージを検出しました。senderUrl: ${senderUrl.toString()}`,
+      `不正なURLからのIPCメッセージを検出しました。senderUrl: ${event.senderFrame?.url}`,
     );
   }
 };

src/backend/electron/main.ts

@@ -437,13 +437,6 @@ const retryShowSaveDialogWhileSafeDir = async <
     const filePath =
       "filePaths" in result ? result.filePaths[0] : result.filePath;
 
-    // filePathが未定義の場合、エラーを返す
-    if (filePath == undefined) {
-      throw new Error(
-        `canseld == ${result.canceled} but filePath == ${filePath}`,
-      );
-    }
-
     // 選択されたパスが安全かどうかを確認
     if (isUnsafePath(filePath)) {
       const result = await showWarningDialog();
@@ -762,7 +755,7 @@ registerIpcMainHandle<IpcMainHandle>({
 });
 
 // app callback
-app.on("web-contents-created", (e, contents) => {
+app.on("web-contents-created", (_e, contents) => {
   // リンククリック時はブラウザを開く
   contents.setWindowOpenHandler(({ url }) => {
     const { protocol } = new URL(url);
@@ -972,7 +965,7 @@ app.on("ready", async () => {
 });
 
 // 他のプロセスが起動したとき、`requestSingleInstanceLock`経由で`rawData`が送信される。
-app.on("second-instance", async (event, argv, workDir, rawData) => {
+app.on("second-instance", async (_event, _argv, _workDir, rawData) => {
   const data = rawData as SingleInstanceLockData;
   if (!data.filePath) {
     log.info("No file path sent");

src/backend/electron/manager/vvppManager.ts

@@ -5,7 +5,7 @@ import log from "electron-log/main";
 import { moveFile } from "move-file";
 import { app, dialog } from "electron";
 import MultiStream from "multistream";
-import glob, { glob as callbackGlob } from "glob";
+import { glob } from "glob";
 import AsyncLock from "async-lock";
 import {
   EngineId,
@@ -24,19 +24,6 @@ const SEVEN_ZIP_MAGIC_NUMBER = Buffer.from([
 
 const ZIP_MAGIC_NUMBER = Buffer.from([0x50, 0x4b, 0x03, 0x04]);
 
-// globのPromise化
-const globAsync = (pattern: string, options?: glob.IOptions) => {
-  return new Promise<string[]>((resolve, reject) => {
-    callbackGlob(pattern, options ?? {}, (err, matches) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(matches);
-      }
-    });
-  });
-};
-
 export const isVvppFile = (filePath: string) => {
   return (
     path.extname(filePath) === ".vvpp" || path.extname(filePath) === ".vvppp"
@@ -134,7 +121,7 @@ export class VvppManager {
         .replace(/\.[0-9]+\.vvppp$/, ".*.vvppp")
         .replace(/\\/g, "/"); // node-globはバックスラッシュを使えないので、スラッシュに置換する
       const filePaths: string[] = [];
-      for (const p of await globAsync(vvpppPathGlob)) {
+      for (const p of await glob(vvpppPathGlob)) {
         if (!p.match(/\.[0-9]+\.vvppp$/)) {
           continue;
         }

src/components/Sing/ToolBar/ToolBar.vue

@@ -700,7 +700,7 @@ const snapTypeSelectModel = computed({
 .sing-volume-icon {
   margin-right: 8px;
 
-  :deep {
+  :deep() {
     color: var(--scheme-color-outline);
   }
 }

src/styles/_index.scss

@@ -4,7 +4,7 @@
 @use "./v2/colors" as colors-v2;
 @use "./v2/sing-colors"; // ソング用カラー
 @use "./v2/cursor"; // カーソル
-@import "./fonts";
+@use "fonts";
 
 // 優先度を強引に上げる
 body:not(#dummy) {

src/styles/v2/colors.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // 新デザインで使用する色変数の定義
 // 詳細: https://github.com/VOICEVOX/voicevox_project/issues/40
 
@@ -10,8 +11,8 @@ $primitive-red: #d04756;
 
 // ライトテーマの色
 :root[is-dark-theme="false"] {
-  --color-v2-background: #{lighten($primitive-primary, 25%)};
-  --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
+  --color-v2-background: #{color.adjust($primitive-primary, $lightness: 25%)};
+  --color-v2-background-drawer: #{rgba(color.adjust($primitive-primary, $lightness: 20%), 0.75)};
 
   --color-v2-surface: #{$primitive-white};
   --color-v2-border: #{rgba($primitive-black, 0.2)};
@@ -24,20 +25,20 @@ $primitive-red: #d04756;
   --color-v2-display-warning: #{$primitive-red};
 
   --color-v2-control: #{$primitive-white};
-  --color-v2-control-hovered: #{darken($primitive-white, 5%)};
-  --color-v2-control-pressed: #{darken($primitive-white, 10%)};
+  --color-v2-control-hovered: #{color.adjust($primitive-white, $lightness: -5%)};
+  --color-v2-control-pressed: #{color.adjust($primitive-white, $lightness: -10%)};
 
   --color-v2-clear: #{rgba($primitive-black, 0)};
   --color-v2-clear-hovered: #{rgba($primitive-black, 0.05)};
   --color-v2-clear-pressed: #{rgba($primitive-black, 0.1)};
 
   --color-v2-primary: #{$primitive-primary};
-  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
-  --color-v2-primary-pressed: #{darken($primitive-primary, 10%)};
+  --color-v2-primary-hovered: #{color.adjust($primitive-primary, $lightness: -5%)};
+  --color-v2-primary-pressed: #{color.adjust($primitive-primary, $lightness: -10%)};
 
   --color-v2-warning: #{$primitive-white};
-  --color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
-  --color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
+  --color-v2-warning-hovered: #{color.adjust($primitive-red, $lightness: 40%)};
+  --color-v2-warning-pressed: #{color.adjust($primitive-red, $lightness: 35%)};
 
   --color-v2-scrollbar: #{rgba($primitive-black, 0.3)};
   --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.4)};
@@ -49,31 +50,31 @@ $primitive-red: #d04756;
   --color-v2-background: #{$primitive-black};
   --color-v2-background-drawer: #{rgba($primitive-black, 0.75)};
 
-  --color-v2-surface: #{lighten($primitive-black, 3%)};
+  --color-v2-surface: #{color.adjust($primitive-black, $lightness: 3%)};
   --color-v2-border: #{rgba($primitive-white, 0.2)};
   --color-v2-selected: #{rgba($primitive-primary, 0.3)};
 
   --color-v2-display: #{$primitive-white};
   --color-v2-display-oncolor: #{$primitive-black};
   --color-v2-display-sub: #{rgba($primitive-white, 0.5)};
-  --color-v2-display-link: #{lighten($primitive-blue, 25%)};
-  --color-v2-display-warning: #{lighten($primitive-red, 25%)};
+  --color-v2-display-link: #{color.adjust($primitive-blue, $lightness: 25%)};
+  --color-v2-display-warning: #{color.adjust($primitive-red, $lightness: 25%)};
 
-  --color-v2-control: #{lighten($primitive-black, 10%)};
-  --color-v2-control-hovered: #{lighten($primitive-black, 15%)};
-  --color-v2-control-pressed: #{lighten($primitive-black, 20%)};
+  --color-v2-control: #{color.adjust($primitive-black, $lightness: 10%)};
+  --color-v2-control-hovered: #{color.adjust($primitive-black, $lightness: 15%)};
+  --color-v2-control-pressed: #{color.adjust($primitive-black, $lightness: 20%)};
 
   --color-v2-clear: #{rgba($primitive-white, 0)};
   --color-v2-clear-hovered: #{rgba($primitive-white, 0.05)};
   --color-v2-clear-pressed: #{rgba($primitive-white, 0.1)};
 
-  --color-v2-primary: #{darken($primitive-primary, 10%)};
-  --color-v2-primary-hovered: #{darken($primitive-primary, 5%)};
+  --color-v2-primary: #{color.adjust($primitive-primary, $lightness: -10%)};
+  --color-v2-primary-hovered: #{color.adjust($primitive-primary, $lightness: -5%)};
   --color-v2-primary-pressed: #{$primitive-primary};
 
-  --color-v2-warning: #{lighten($primitive-black, 10%)};
-  --color-v2-warning-hovered: #{darken($primitive-red, 35%)};
-  --color-v2-warning-pressed: #{darken($primitive-red, 30%)};
+  --color-v2-warning: #{color.adjust($primitive-black, $lightness: 10%)};
+  --color-v2-warning-hovered: #{color.adjust($primitive-red, $lightness: -35%)};
+  --color-v2-warning-pressed: #{color.adjust($primitive-red, $lightness: -30%)};
 
   --color-v2-scrollbar: #{rgba($primitive-white, 0.3)};
   --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.4)};

src/styles/v2/sing-colors.scss

@@ -10,13 +10,13 @@ https://m3.material.io/styles/color/roles
 
 ## 各ロール
 
-- primary: 
+- primary:
 主要・強調される操作可能部のカラー・ブランドカラーです
 
-- secondary: 
+- secondary:
 主要でない操作可能部のカラーです
 
-- tertiary: 
+- tertiary:
 現時点での利用部分想定としては一時的・未決定部などでプライマリ・セカンダリで表現しきれない場合に利用します
 eg: ノートのプレビュー / 一時的に全ソロのインジケータ / シンガー発音時インジケータ / 失敗がありうる場合の待ちなど
 

vite.config.mts

@@ -63,6 +63,7 @@ export default defineConfig((options) => {
     css: {
       preprocessorOptions: {
         scss: {
+          api: "modern",
           includePaths: [path.resolve(__dirname, "node_modules")],
         },
       },
@@ -90,7 +91,7 @@ export default defineConfig((options) => {
         cleanDistPlugin(),
         electron([
           {
-            entry: "./src/backend/electron/main.ts",
+            entry: "./backend/electron/main.ts",
             // ref: https://github.com/electron-vite/vite-plugin-electron/pull/122
             onstart: ({ startup }) => {
               console.log("main process build is complete.");
@@ -108,7 +109,7 @@ export default defineConfig((options) => {
           },
           {
             // ref: https://electron-vite.github.io/guide/preload-not-split.html
-            entry: "./src/backend/electron/preload.ts",
+            entry: "./backend/electron/preload.ts",
             onstart({ reload }) {
               if (!skipLahnchElectron) {
                 reload();