refactor: Composition APIへ移行

[tamaina]

#7681

What

Composition APIに書き換える作業用。1コンポーネントにつき100円もらえると聞いて

[syuilo]

setup sugar使うとより簡潔に書けそう
https://v3.vuejs.org/api/sfc-script-setup.html

[syuilo]

さらにref sugar使うとより簡潔に書けるけど現時点では個人的には逆に分かりにくくて好みじゃないかも（あとまだRFCだから仕様が変わる可能性がある）
vuejs/rfcs#369

[tamaina]

↑こんな感じかしら

[syuilo]

↑こんな感じかしら

👍

[tamaina]

analog-clock、テーマが変わっても色がそのまんまな仕様なんだな

[acid-chicken]

analog-clock、テーマが変わっても色がそのまんまな仕様なんだな

仕様というか仕様バグ感ある（getComputedStyle でスタイルの変更を検知する術がないので）
やるとしたら別途スタイル変更を通知できるようにするか、あるいは MutationObserver でスタイルの変更を見張るか（サブツリーまで見ると重いと思うのでトップレベルだけ見るようなルーズな実装が落とし所かと思ったけど親ノード全部ぶちこむだけだったらそんな大規模にはならなさそう） computed 内で直接 getPropertyValue を挟まなければ良いだけだった

[syuilo]

テーマ切り替えしたときにグローバルなイベント発行してたはずだからそれListenして再レンダリングするようにする予定だった

[tamaina]

captcha設定画面、hcaptcha開いた後recaptcha開くとなぜかhcaptchaのプレビューが表示される

[tamaina]

（compositionじゃなくても）

recaptchaのあとにhcaptchaのパターンは正常なのでなんかよくわからん

[acid-chicken]

captcha設定画面、hcaptcha開いた後recaptcha開くとなぜかhcaptchaのプレビューが表示される

hcaptcha は grecaptcha を上書きする挙動だったはず

[acid-chicken]

#6303 (comment)

[syuilo]

packages/client/src/components/autocomplete.vue みたいな<script setup>移行前にトップレベルでデータの準備していたようなケースだと、<script setup>移行後にコンポーネントが作成されるたびにデータの準備が行われることになってパフォーマンスの問題が発生しそう

<script setup>とは別に<script>を用意することで回避できるっぽいけどやったことないから詳細は不明

[tamaina]

<script>で宣言した変数を参照できない(?)ので素直にdefineComponentしたほうがよさそう

[syuilo]

@tamaina pagination.vue と paging.ts は私がやる

[tamaina]

abc順にやってるから私が手を付けるとしてもまだ先だと思う

[tamaina]

<script>で宣言した変数を参照できない(?)ので

export defaultしなきゃいけないのを見逃していた

[tamaina]

これってマージされるんやろか
（見つけたバグの修正もしたかったりする（compositon-workに対してプルリク作ればいいんだろうけどこれ以上プルリクを抱えるのがきつい）

[syuilo]

マージするか

[syuilo]

🙏🙏🙏