7fc1d77 以降に更新するとタイムラインが正常に表示・操作できなくなる

[okinjp]

💡 Summary

7fc1d77 以降に更新するとタイムラインが正常に表示・操作できなくなる

🥰 Expected Behavior

すべてがうまくいく

🤬 Actual Behavior

TLが表示できなくなりTL切り替えやページ遷移なども作動せずコンソールにエラーが残る
ユーザーページや個別投稿のURLを直接開くことは可能

コンソールログ
a1.miclear.casa-1707482555884.log

_.Ver.A1.37.-.-.Microsoft_.Edge.2024-02-09.mp4

📝 Steps to Reproduce

1. 7fc1d77 に更新する
2. TLが空になりまともに操作できなくなる

💻 Frontend Environment

* Model and OS of the device(s): Windows 11 23H2
* Browser: Microsoft Edge 121.0.2277.83 (公式ビルド) (64 ビット)
* Server URL: https://a1.miclear.casa
* Misskey: 2024.2.0-beta.10 (7fc1d77893631f7bc792c7d6d5398aba65a331c9)

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service: docker compose
* Misskey: 2024.2.0-beta.10 (7fc1d77893631f7bc792c7d6d5398aba65a331c9)
* Node: 20.10.0
* PostgreSQL: 15
* Redis: 7
* OS and Architecture: Ubuntu 22.04.3 LTS amd64

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[kakkokari-gtyih]

なんか無限ループが走ってそう

[tamaina]

too much recursion (firefox

[tamaina]

vue 3.4.16以降がだめ

[tamaina]

vuejs/core#10214 / vuejs/core#10232 に関係がありそう

[tamaina]

Vue Landに投げてみた(

https://discord.com/channels/325477692906536972/1205559733101010984

[tamaina]

• Vueのバージョンを下げれば動きはするが、今後一切vueのバージョンが上げられないのは相当まずいのでこの問題は後回しにできない
• 私はVueの内部構造に詳しいわけではないので何が起きているのかわからない（→解決策が出せない
  • （読み解けばいい話だけど私が読むより詳しい人に聞いた方が早そう）

[tamaina]

tasukete

[syuilo]

3.4.15にするか

[kakkokari-gtyih]

withRepliesとonlyFilesが悪さしてそう

[kakkokari-gtyih]

computed内で別のcomputedの値をお互いに参照し合うと無限ループに入るっぽい（ここを消したら普通に動いた）

[syuilo]

あーそれはアカンわね

[kakkokari-gtyih]

なんで今まで動いてたんだろう（）

[syuilo]

むしろなぜ今まで動いてたのか

[kakkokari-gtyih]

じゃあどう対応すればいいのかしら（これ構造的にお互いに影響し合う値なので…）（watch使うとか？）

[tamaina]

computedじゃなくてただのfunctionを作って見れば良いんじゃないかしら

[kakkokari-gtyih]

// computed内での無限ループを防ぐためのフラグ
const localSocialTLFilterSwitchStore = ref<'withReplies'|'onlyFiles'|false>('withReplies');

const withReplies = computed<boolean>({
	get: () => {
		if (!$i) return false;
		if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'onlyFiles') {
			return false;
		} else {
			return defaultStore.reactiveState.tl.value.filter.withReplies;
		}
	},
	set: (x: boolean) => saveTlFilter('withReplies', x),
});
const onlyFiles = computed<boolean>({
	get: () => {
		if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'withReplies') {
			return false;
		} else {
			return defaultStore.reactiveState.tl.value.filter.onlyFiles;
		}
	},
	set: (x: boolean) => saveTlFilter('onlyFiles', x),
});

watch([withReplies, onlyFiles], ([withRepliesTo, onlyFilesTo]) => {
	if (withRepliesTo) {
		localSocialTLFilterSwitchStore.value = 'withReplies';
	} else if (onlyFilesTo) {
		localSocialTLFilterSwitchStore.value = 'onlyFiles';
	} else {
		localSocialTLFilterSwitchStore.value = false;
	}
});

これでいけた

[tamaina]

↑functionが無限ループするだけだわ

[syuilo]

じゃあどう対応すればいいのかしら（これ構造的にお互いに影響し合う値なので…）（watch使うとか？）

そのような構造にしないのが正攻法

[kakkokari-gtyih]

これでいけた

(#13219 (comment)) の方法はどう？

[tamaina]

{ withReplies: boolean; onlyFiles: boolean; }を吐き出す関数を作る方がスマートな気がした

[tamaina]

（もしくはそういうcomputedにしちゃうとか

[kakkokari-gtyih]

{ withReplies: boolean; onlyFiles: boolean; }を吐き出す関数を作る方がスマートな気がした

なるほど（リアクティブにやってくれるのかしら）

（もしくはそういうcomputedにしちゃうとか

これはMkPopupMenuから値のセットができなくなる（そのために煩雑な処理を追加する必要がありそう）のであかんかも

[kakkokari-gtyih]

とりあえずなおした #13248

[tamaina]

これはMkPopupMenuから値のセットができなくなる（そのために煩雑な処理を追加する必要がありそう）のであかんかも

（MkSwitch、popupが呼ばれるごとに新しくref/computedを作るのがベターではあったりする）