upgrade typescript to 5.0.4, vue to 3.3.4, pinia to 2.1.3, @pinia/testing to 0.1.2

package.json

@@ -44,13 +44,13 @@
     "throttle-debounce": "^5.0.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
     "vue-router": "^4.1.5",
     "vue-slider-component": "^4.0.0-beta.9",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@pinia/testing": "^0.0.15",
+    "@pinia/testing": "^0.1.2",
     "@types/autosize": "^4.0.1",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/katex": "^0.16.0",
@@ -82,13 +82,13 @@
     "fonteditor-core": "^2.1.11",
     "jsdom": "^21.1.1",
     "patch-package": "^6.5.1",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.3",
     "postcss": "^8.4.23",
     "prettier": "^2.7.1",
     "rollup-plugin-brotli": "^3.1.0",
     "sass": "^1.60.0",
     "start-server-and-test": "^2.0.0",
-    "typescript": "^4.8.3",
+    "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-pwa": "^0.14.7",
     "vite-svg-loader": "^3.6.0",

src/components/UI/FoldButton.vue

@@ -13,7 +13,7 @@
 import type { ButtonHTMLAttributes } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 
-interface Props extends ButtonHTMLAttributes {
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {
   showIcon?: boolean
   background?: 'primary' | 'secondary' | 'tertiary'
   isFold: boolean

src/lib/basic/reactive.ts

@@ -21,8 +21,14 @@ export const toRawDeep = (value: any, map = new WeakMap()) => {
   const newValue = toRaw(value)
   map.set(value, newValue)
 
-  for (const k of Object.keys(newValue)) {
-    newValue[k] = toRawDeep(newValue[k], map)
+  if (Array.isArray(newValue)) {
+    for (let i = 0; i < newValue.length; i++) {
+      newValue[i] = toRawDeep(newValue[i], map)
+    }
+  } else {
+    for (const k of Object.keys(newValue)) {
+      newValue[k] = toRawDeep(newValue[k], map)
+    }
   }
 
   return newValue

src/lib/markdown/effects.ts

@@ -40,8 +40,8 @@ const animeEffects = [
 ] as const
 const sizeEffects = ['ex-large', 'large', 'small'] as const
 
-type AnimeEffectsCustom = typeof animeEffects[number]
-type SizeEffectsCustom = typeof sizeEffects[number]
+type AnimeEffectsCustom = (typeof animeEffects)[number]
+type SizeEffectsCustom = (typeof sizeEffects)[number]
 
 // []でくくっているのはDistributive Conditional Typesを避けたいため
 // https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

src/store/ui/messageInputStateStore.ts

@@ -15,7 +15,7 @@ import type { ChannelId } from '/@/types/entity-ids'
  * share-target: Web Share Target APIで使う画面で利用
  */
 const VIRTUAL_IDS = ['share-target'] as const
-export type VirtualChannelId = typeof VIRTUAL_IDS[number]
+export type VirtualChannelId = (typeof VIRTUAL_IDS)[number]
 const virtualIds: ReadonlySet<string> = new Set(VIRTUAL_IDS)
 
 export interface MessageInputState {

tests/e2e/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "lib": ["esnext", "dom", "dom.iterable"]
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "sourceMap": false // FIXME: https://github.com/cypress-io/cypress/issues/26203
   },
   "include": ["./**/*.ts"]
 }

tsconfig.json

@@ -14,8 +14,7 @@
     "noFallthroughCasesInSwitch": true,
     "noPropertyAccessFromIndexSignature": true,
     "noUncheckedIndexedAccess": true,
-    // TODO: TypeScriptをv5にしたら使う
-    // "verbatimModuleSyntax": true,
+    "verbatimModuleSyntax": true,
     "sourceMap": true,
     "noEmit": true,
     "baseUrl": ".",