vue3への移行

[sapphi-red]

ライブラリの対応は大体できてるっぽい(コンポーネント系はそうでもないかも)
vue-codemodあたりがよさげになったら移行が楽になりそうだからそのくらいにやるのがよさそう

ビルド周り

• vue-cliの設定
  • 対応してるはず
• eslint
  • 今はベータ、v-forを<template>と組み合わせた時の:key周りがvueのcompilerと矛盾してるからなんかおかしそうだけどそれ以外は大丈夫そう
• vue-svg-loader (https://github.com/visualfanatic/vue-svg-loader/tree/dev#vue-cli)
  • 多分動く

ライブラリ

• vue-textarea-autosizeがvue 3で動作するかチェック
• vue-slider-componentがvue 3で動作するかチェック (It will be compatible when the stable version of vue3 is released.)
• v-click-outsideがvue 3で動作するかチェック
• vue 2 => 3
• vuex 3 => 4
  • direct-vuexがvuex4でも動作するかチェック (See https://github.com/sapphi-red/vite-boilerplate-plus/blob/master/src/store/index.ts)
  • vuex-persistがvuex4でも動作するかチェック (今はダメそう) (たぶんここだけ　https://github.com/championswimmer/vuex-persist/blob/07209bd80e092bfc4e4cd7ff470469fb7cfb0ccb/src/index.ts#L102)
• vue-router 3 => 4
• portal-vue => <Teleport> (たぶん全部書き換え可)
  • 常にIDがvalidになるようにする

リファクタ

• emitsの記述
• @～.nativeの.nativeの除去
• 一部のストアをprovide/injectに書き換え
  • MessageInput.vueとかMessageEditor.vueもprovide/injectに書き換え
• websocketの受け取りを一括ではなくそれぞれのストア側で受け取るように
• ArrayやRecordをSetやMapに書き換え Store architecture refactor #1699
• テンプレート内でのoptional chaining、nullish coalescingの利用

その他

• [Vue warn]: Extraneous non-props attributes (class, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
• [Vue warn]: setup() return property "$img" should not start with "$" or "_" which are reserved prefixes for Vue internals.
• 下記

vue-router.esm-browser.js?954b:42 [Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState:

history.replaceState(history.state, '', url)

You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.

[sapphi-red]

常にIDがvalidになるようにする

portal-vueのvue3対応版が出ればそのまま移行できるけど別に必要な箇所そんなにないので書き換えたほうがよさそうな気がする

[sapphi-red]

メモ: vue-textarea-autosize

1. vue-cliがv3でvue3に対応してないので、4.5.6にアップデート
2. vueを3.0.0にして、vue-template-compilerを消して@vue/compiler-sfc@3.0.0を入れる
3. node_modules/vue-cli-plugin-p11nに移動して、rollup-plugin-vueを6.0.0-beta.10にアップデート(そこでnpm i)
4. vueをdevDepからdependenciesに移動(これしないとvue本体が出力に混ざる)
5. 元の場所でnpm run build

[sapphi-red]

vue-slider-componentについて

vue-slider-componentはTSX + vue-class-component + vue-property-decoratorで開発されてる

TSXは問題なくVue3で対応
vue-class-componentもvue3対応ベータが出てる https://github.com/vuejs/vue-class-component/tree/next
vue-property-decoratorは出てくるか怪しいかも？今のとこ何もないけど見てはいるっぽい kaorun343/vue-property-decoratorの#.294

今すぐにやるのは厳しそう

[sapphi-red]

#1422 (comment)

[sapphi-red]

TODO: vue-slider-component@nextが出たのでそれに差し替える https://jsfiddle.net/3ea4qbg9/1/

[sapphi-red]

emitsの記述に関しては #2216 に移動