WIP: 読み方＆アクセント辞書ダイアログの右側パネルを別コンポーネントにする

[jdkfx]

内容

• 辞書の単語・読み、アクセントなどの追加・編集を行う部分を新しいコンポーネントに移動

関連 Issue

close #2234

スクリーンショット・動画など

その他

関連： #2237

[Hiroshiba]

リファクタリング本当にありがたいです！！！
分からないとこあったら何でもお聞きいただけると･･･！ 🙏

[jdkfx]

まだ作業中段階ではありますが、新規に編集部分のコンポーネントを作成しました。
元からあったコンポーネントと、新規に作成したコンポーネントの双方で同じ処理を行っている部分に関しては新たなコンポーザブルとして切り分けました。

ただ、今のところこの状態で動かすとUIなどの表示部分が動いていない模様で、その原因の追求と改善を行っていきたいと考えております。

[jdkfx]

dictionaryManageDialogOpenedComputedをコンポーザブルに渡してあげているのですが、そのせいか辞書ダイアログを読み込んだ際にエンジンの読み込みが終わらないという挙動が起きており、その原因がわかりません。
dictionaryManageDialogOpenedComputedを定義は以下のようになっています。

const dictionaryManageDialogOpenedComputed: WritableComputedRef<boolean>

この変数をコンポーザブルに渡す際、

型 'WritableComputedRef<boolean>' の引数を型 '() => number' のパラメーターに割り当てることはできません。
型 'WritableComputedRef<boolean>' にはシグネチャ '(): number' に一致するものがありません。

というエラーが出ておりました。
computed()の型付けなども考えてみましたが、うまくいきませんでした。
https://ja.vuejs.org/guide/typescript/composition-api#typing-computed

[Hiroshiba]

エンジンの読み込みが終わらないという挙動が起きており、その原因がわかりません。

読み込み中かどうかの判定にはloadingDictStateを使ってますが、これをコンポーザブルに渡してないから値が変わらないためですね！！

今回の場合はコンポーザブルにするかどうかはどちらでも良いはずで、先にコンポーネントを切り出してあげた方がやりやすいかもです。
その後にコンポーザブルを使ってリファクタリングを行うかどうか、となるかも･･･！

参考になれば！！

[jdkfx]

[23:20:14.210] [warn] UNLOCK_UI is called when state.uiLockCount == 0

uiLockedに関するWarningが出ている

[jdkfx]

• modelValueにbooleanの値が入るべきなのだが、辞書単語の読みの値（String）が入ってしまっている。
• それ以外にも、型の不一致エラーによってエディターコンポーネントが開かないという意図せぬ挙動が起きてしまっている。
• シングルコメントを残したのだが、uiLockedに関係しているのではないかと考えている。

現状出ているエラーについて

23:24:25 [vite] hmr update /components/Dialog/DictionaryManageDialog.vue

 ERROR(vue-tsc)  Property 'computeRegisteredAccent' does not exist on type '{ wordPriority: Ref<number, number>; userDict: Ref<Record<string, UserDictWord>, Record<string, UserDictWord>>; voiceComputed: ComputedRef<...>; ... 8 more ...; toWordEditingState: () => void; }'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryEditWordDialog.vue:351:3

    349 |   setYomi,
    350 |   createUILockAction,
  > 351 |   computeRegisteredAccent,
        |   ^^^^^^^^^^^^^^^^^^^^^^^
    352 |   loadingDictProcess,
    353 |   discardOrNotDialog,
    354 |   cancel,

 ERROR(vue-tsc)  Argument of type 'Ref<string, string>' is not assignable to parameter of type 'Ref<"loading" | "synchronizing" | null, "loading" | "synchronizing" | null>'.
  Type 'string' is not assignable to type '"loading" | "synchronizing" | null'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryEditWordDialog.vue:362:3

    360 |   surface,
    361 |   uiLocked,
  > 362 |   yomi,
        |   ^^^^
    363 |   accentPhrase,
    364 |   surfaceInput,
    365 | );

 ERROR(vue-tsc)  Argument of type 'WritableComputedRef<boolean, boolean>' is not assignable to parameter of type 'Ref<string, string>'.
  Types of property 'value' are incompatible.
    Type 'boolean' is not assignable to type 'string'.
 FILE  /Users/jdkfx/Desktop/workspace/voicevox/src/components/Dialog/DictionaryManageDialog.vue:226:3

    224 |   uiLocked,
    225 |   loadingDictState,
  > 226 |   dictionaryManageDialogOpenedComputed,
        |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    227 | );
    228 | </script>
    229 |

[vue-tsc] Found 3 errors. Watching for file changes.
[ESLint] Found 0 error and 0 warning