From 0fc8445425a68195736af9b80852bb616a1d8805 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Jul 2021 12:55:17 +0900
Subject: [PATCH 1/5] :art:

---
 src/client/ui/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index c8a16cff0e..afaa96cece 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -143,7 +143,7 @@ export default defineComponent({
 		},
 
 		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 1 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 			window.addEventListener('scroll', () => {
 				sticky.calc(window.scrollY);
 			}, { passive: true });

From 98249942d53f773f8904d0fadb49a2af15e3c6aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Jul 2021 13:07:08 +0900
Subject: [PATCH 2/5] fix bug

---
 src/client/store.ts       | 2 +-
 src/client/ui/default.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/store.ts b/src/client/store.ts
index 2ae9cd790f..6ca431e059 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -90,7 +90,7 @@ export const defaultStore = markRaw(new Storage('base', {
 		default: [] as {
 			name: string;
 			id: string;
-			place: string;
+			place: string | null;
 			data: Record<string, any>;
 		}[]
 	},
diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue
index afaa96cece..5e79cd3830 100644
--- a/src/client/ui/default.vue
+++ b/src/client/ui/default.vue
@@ -115,13 +115,13 @@ export default defineComponent({
 		if (this.$store.state.widgets.length === 0) {
 			this.$store.set('widgets', [{
 				name: 'calendar',
-				id: 'a', place: 'right', data: {}
+				id: 'a', place: null, data: {}
 			}, {
 				name: 'notifications',
-				id: 'b', place: 'right', data: {}
+				id: 'b', place: null, data: {}
 			}, {
 				name: 'trends',
-				id: 'c', place: 'right', data: {}
+				id: 'c', place: null, data: {}
 			}]);
 		}
 	},

From f3b3e063293ba623446aaf1f2b90089af9fa7a21 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Jul 2021 13:28:33 +0900
Subject: [PATCH 3/5] fix email notification bug

---
 src/services/create-notification.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/create-notification.ts b/src/services/create-notification.ts
index 261b36814c..7d2726971f 100644
--- a/src/services/create-notification.ts
+++ b/src/services/create-notification.ts
@@ -1,6 +1,6 @@
 import { publishMainStream } from './stream';
 import pushSw from './push-notification';
-import { Notifications, Mutings, UserProfiles } from '../models';
+import { Notifications, Mutings, UserProfiles, Users } from '../models';
 import { genId } from '@/misc/gen-id';
 import { User } from '../models/entities/user';
 import { Notification } from '../models/entities/notification';
@@ -53,8 +53,8 @@ export async function createNotification(
 		publishMainStream(notifieeId, 'unreadNotification', packed);
 
 		pushSw(notifieeId, 'notification', packed);
-		if (type === 'follow') sendEmailNotification.follow(notifieeId, data);
-		if (type === 'receiveFollowRequest') sendEmailNotification.receiveFollowRequest(notifieeId, data);
+		if (type === 'follow') sendEmailNotification.follow(notifieeId, await Users.findOneOrFail(data.notifierId!));
+		if (type === 'receiveFollowRequest') sendEmailNotification.receiveFollowRequest(notifieeId, await Users.findOneOrFail(data.notifierId!));
 	}, 2000);
 
 	return notification;

From 2953ba17c3af1b4800d8ca7b5b13147316a871b8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Jul 2021 11:12:06 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=9F=E3=83=B3=E3=82=B0=E3=81=8C=E4=B8=8D=E5=AE=89=E5=AE=9A?=
 =?UTF-8?q?=E3=81=AA=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTING.md                               |  3 ++
 src/client/components/drive.vue               |  4 +--
 src/client/components/follow-button.vue       |  4 +--
 src/client/components/notification.vue        |  4 +--
 src/client/components/notifications.vue       |  4 +--
 src/client/components/timeline.vue            | 28 +++++++++----------
 src/client/init.ts                            |  4 +--
 src/client/pages/instance/metrics.vue         |  4 +--
 src/client/pages/instance/queue.vue           |  4 +--
 src/client/pages/messaging/index.vue          |  4 +--
 src/client/pages/messaging/messaging-room.vue |  6 ++--
 src/client/pages/reversi/game.vue             |  6 ++--
 src/client/pages/reversi/index.vue            |  4 +--
 src/client/ui/chat/timeline.vue               | 28 +++++++++----------
 src/client/widgets/job-queue.vue              |  4 +--
 src/client/widgets/photos.vue                 |  4 +--
 src/client/widgets/server-metric/index.vue    |  4 +--
 17 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6dc2e5e226..436d4224d2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -242,6 +242,9 @@ npx ts-node ./node_modules/typeorm/cli.js migration:generate -n 変更の名前
 
 作成されたスクリプトは不必要な変更を含むため除去してください。
 
+### コネクションには`markRaw`せよ
+**Vueのコンポーネントのdataオプションとして**misskey.jsのコネクションを設定するとき、必ず`markRaw`でラップしてください。インスタンスが不必要にリアクティブ化されることで、misskey.js内の処理で不具合が発生するとともに、パフォーマンス上の問題にも繋がる。なお、Composition APIを使う場合はこの限りではない(リアクティブ化はマニュアルなため)。
+
 ## その他
 ### HTMLのクラス名で follow という単語は使わない
 広告ブロッカーで誤ってブロックされる
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index ca637e3f3d..16aa9dc1a8 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
@@ -139,7 +139,7 @@ export default defineComponent({
 			});
 		}
 
-		this.connection = os.stream.useChannel('drive');
+		this.connection = markRaw(os.stream.useChannel('drive'));
 
 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
 		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 49bf678491..5685b86a51 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -71,7 +71,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = os.stream.useChannel('main');
+		this.connection = markRaw(os.stream.useChannel('main'));
 
 		this.connection.on('follow', this.onFollowChange);
 		this.connection.on('unfollow', this.onFollowChange);
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index c7063b0aa2..d4e6b65c70 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { getNoteSummary } from '@/misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
@@ -109,7 +109,7 @@ export default defineComponent({
 
 			this.readObserver.observe(this.$el);
 
-			this.connection = os.stream.useChannel('main');
+			this.connection = markRaw(os.stream.useChannel('main'));
 			this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
 		}
 	},
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 092c00f14e..9db47e08d6 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, markRaw } from 'vue';
 import paging from '@client/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
@@ -89,7 +89,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = os.stream.useChannel('main');
+		this.connection = markRaw(os.stream.useChannel('main'));
 		this.connection.on('notification', this.onNotification);
 	},
 
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index c21e1ec2a6..9676616f2a 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import XNotes from './notes.vue';
 import * as os from '@client/os';
 import * as sound from '@client/scripts/sound';
@@ -92,33 +92,33 @@ export default defineComponent({
 			this.query = {
 				antennaId: this.antenna
 			};
-			this.connection = os.stream.useChannel('antenna', {
+			this.connection = markRaw(os.stream.useChannel('antenna', {
 				antennaId: this.antenna
-			});
+			}));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'home') {
 			endpoint = 'notes/timeline';
-			this.connection = os.stream.useChannel('homeTimeline');
+			this.connection = markRaw(os.stream.useChannel('homeTimeline'));
 			this.connection.on('note', prepend);
 
-			this.connection2 = os.stream.useChannel('main');
+			this.connection2 = markRaw(os.stream.useChannel('main'));
 			this.connection2.on('follow', onChangeFollowing);
 			this.connection2.on('unfollow', onChangeFollowing);
 		} else if (this.src == 'local') {
 			endpoint = 'notes/local-timeline';
-			this.connection = os.stream.useChannel('localTimeline');
+			this.connection = markRaw(os.stream.useChannel('localTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'social') {
 			endpoint = 'notes/hybrid-timeline';
-			this.connection = os.stream.useChannel('hybridTimeline');
+			this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'global') {
 			endpoint = 'notes/global-timeline';
-			this.connection = os.stream.useChannel('globalTimeline');
+			this.connection = markRaw(os.stream.useChannel('globalTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'mentions') {
 			endpoint = 'notes/mentions';
-			this.connection = os.stream.useChannel('main');
+			this.connection = markRaw(os.stream.useChannel('main'));
 			this.connection.on('mention', prepend);
 		} else if (this.src == 'directs') {
 			endpoint = 'notes/mentions';
@@ -130,16 +130,16 @@ export default defineComponent({
 					prepend(note);
 				}
 			};
-			this.connection = os.stream.useChannel('main');
+			this.connection = markRaw(os.stream.useChannel('main'));
 			this.connection.on('mention', onNote);
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {
 				listId: this.list
 			};
-			this.connection = os.stream.useChannel('userList', {
+			this.connection = markRaw(os.stream.useChannel('userList', {
 				listId: this.list
-			});
+			}));
 			this.connection.on('note', prepend);
 			this.connection.on('userAdded', onUserAdded);
 			this.connection.on('userRemoved', onUserRemoved);
@@ -148,9 +148,9 @@ export default defineComponent({
 			this.query = {
 				channelId: this.channel
 			};
-			this.connection = os.stream.useChannel('channel', {
+			this.connection = markRaw(os.stream.useChannel('channel', {
 				channelId: this.channel
-			});
+			}));
 			this.connection.on('note', prepend);
 		}
 
diff --git a/src/client/init.ts b/src/client/init.ts
index d1c408bb77..e6b308c5fb 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -6,7 +6,7 @@ import '@client/style.scss';
 
 import * as Sentry from '@sentry/browser';
 import { Integrations } from '@sentry/tracing';
-import { computed, createApp, watch } from 'vue';
+import { computed, createApp, watch, markRaw } from 'vue';
 
 import widgets from '@client/widgets';
 import directives from '@client/directives';
@@ -282,7 +282,7 @@ if ($i) {
 		}
 	}
 
-	const main = stream.useChannel('main', null, 'System');
+	const main = markRaw(stream.useChannel('main', null, 'System'));
 
 	// 自分の情報が更新されたとき
 	main.on('meUpdated', i => {
diff --git a/src/client/pages/instance/metrics.vue b/src/client/pages/instance/metrics.vue
index 407cce9e7f..131af37c7f 100644
--- a/src/client/pages/instance/metrics.vue
+++ b/src/client/pages/instance/metrics.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 			stats: null,
 			serverInfo: null,
 			connection: null,
-			queueConnection: os.stream.useChannel('queueStats'),
+			queueConnection: markRaw(os.stream.useChannel('queueStats')),
 			memUsage: 0,
 			chartCpuMem: null,
 			chartNet: null,
@@ -121,7 +121,7 @@ export default defineComponent({
 		os.api('admin/server-info', {}).then(res => {
 			this.serverInfo = res;
 
-			this.connection = os.stream.useChannel('serverStats');
+			this.connection = markRaw(os.stream.useChannel('serverStats'));
 			this.connection.on('stats', this.onStats);
 			this.connection.on('statsLog', this.onStatsLog);
 			this.connection.send('requestLog', {
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 8f56fd74bf..e8ec0bc97d 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
 import FormBase from '@client/components/form/base.vue';
@@ -35,7 +35,7 @@ export default defineComponent({
 				title: this.$ts.jobQueue,
 				icon: 'fas fa-clipboard-list',
 			},
-			connection: os.stream.useChannel('queueStats'),
+			connection: markRaw(os.stream.useChannel('queueStats')),
 		}
 	},
 
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 87ca1890fd..b9c29492c6 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
 import { getAcct } from '@/misc/acct';
 import MkButton from '@client/components/ui/button.vue';
 import { acct } from '../../filters/user';
@@ -63,7 +63,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = os.stream.useChannel('messagingIndex');
+		this.connection = markRaw(os.stream.useChannel('messagingIndex'));
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 6ec60566b6..396f5f56fd 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, markRaw } from 'vue';
 import XList from '@client/components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
@@ -141,10 +141,10 @@ const Component = defineComponent({
 				this.group = group;
 			}
 
-			this.connection = os.stream.useChannel('messaging', {
+			this.connection = markRaw(os.stream.useChannel('messaging', {
 				otherparty: this.user ? this.user.id : undefined,
 				group: this.group ? this.group.id : undefined,
-			});
+			}));
 
 			this.connection.on('message', this.onMessage);
 			this.connection.on('read', this.onRead);
diff --git a/src/client/pages/reversi/game.vue b/src/client/pages/reversi/game.vue
index dc4d11ca4a..ae10b45b5b 100644
--- a/src/client/pages/reversi/game.vue
+++ b/src/client/pages/reversi/game.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import GameSetting from './game.setting.vue';
 import GameBoard from './game.board.vue';
 import * as os from '@client/os';
@@ -61,9 +61,9 @@ export default defineComponent({
 				if (this.connection) {
 					this.connection.dispose();
 				}
-				this.connection = os.stream.useChannel('gamesReversiGame', {
+				this.connection = markRaw(os.stream.useChannel('gamesReversiGame', {
 					gameId: this.game.id
-				});
+				}));
 				this.connection.on('started', this.onStarted);
 			});
 		},
diff --git a/src/client/pages/reversi/index.vue b/src/client/pages/reversi/index.vue
index dd329084a8..cedfd12089 100644
--- a/src/client/pages/reversi/index.vue
+++ b/src/client/pages/reversi/index.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import * as os from '@client/os';
 import MkButton from '@client/components/ui/button.vue';
 import MkFolder from '@client/components/ui/folder.vue';
@@ -92,7 +92,7 @@ export default defineComponent({
 
 	mounted() {
 		if (this.$i) {
-			this.connection = os.stream.useChannel('gamesReversi');
+			this.connection = markRaw(os.stream.useChannel('gamesReversi'));
 
 			this.connection.on('invited', this.onInvited);
 
diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue
index 2245a9d8a5..0fbcbfb713 100644
--- a/src/client/ui/chat/timeline.vue
+++ b/src/client/ui/chat/timeline.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import XNotes from './notes.vue';
 import * as os from '@client/os';
 import * as sound from '@client/scripts/sound';
@@ -121,33 +121,33 @@ export default defineComponent({
 			this.query = {
 				antennaId: this.antenna
 			};
-			this.connection = os.stream.useChannel('antenna', {
+			this.connection = markRaw(os.stream.useChannel('antenna', {
 				antennaId: this.antenna
-			});
+			}));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'home') {
 			endpoint = 'notes/timeline';
-			this.connection = os.stream.useChannel('homeTimeline');
+			this.connection = markRaw(os.stream.useChannel('homeTimeline'));
 			this.connection.on('note', prepend);
 
-			this.connection2 = os.stream.useChannel('main');
+			this.connection2 = markRaw(os.stream.useChannel('main'));
 			this.connection2.on('follow', onChangeFollowing);
 			this.connection2.on('unfollow', onChangeFollowing);
 		} else if (this.src == 'local') {
 			endpoint = 'notes/local-timeline';
-			this.connection = os.stream.useChannel('localTimeline');
+			this.connection = markRaw(os.stream.useChannel('localTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'social') {
 			endpoint = 'notes/hybrid-timeline';
-			this.connection = os.stream.useChannel('hybridTimeline');
+			this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'global') {
 			endpoint = 'notes/global-timeline';
-			this.connection = os.stream.useChannel('globalTimeline');
+			this.connection = markRaw(os.stream.useChannel('globalTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'mentions') {
 			endpoint = 'notes/mentions';
-			this.connection = os.stream.useChannel('main');
+			this.connection = markRaw(os.stream.useChannel('main'));
 			this.connection.on('mention', prepend);
 		} else if (this.src == 'directs') {
 			endpoint = 'notes/mentions';
@@ -159,16 +159,16 @@ export default defineComponent({
 					prepend(note);
 				}
 			};
-			this.connection = os.stream.useChannel('main');
+			this.connection = markRaw(os.stream.useChannel('main'));
 			this.connection.on('mention', onNote);
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {
 				listId: this.list
 			};
-			this.connection = os.stream.useChannel('userList', {
+			this.connection = markRaw(os.stream.useChannel('userList', {
 				listId: this.list
-			});
+			}));
 			this.connection.on('note', prepend);
 			this.connection.on('userAdded', onUserAdded);
 			this.connection.on('userRemoved', onUserRemoved);
@@ -178,9 +178,9 @@ export default defineComponent({
 			this.query = {
 				channelId: this.channel
 			};
-			this.connection = os.stream.useChannel('channel', {
+			this.connection = markRaw(os.stream.useChannel('channel', {
 				channelId: this.channel
-			});
+			}));
 			this.connection.on('note', prepend);
 			this.connection.on('typers', typers => {
 				this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index 162ffe9c89..beb80f7faf 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import define from './define';
 import * as os from '@client/os';
 import number from '@client/filters/number';
@@ -65,7 +65,7 @@ export default defineComponent({
 	extends: widget,
 	data() {
 		return {
-			connection: os.stream.useChannel('queueStats'),
+			connection: markRaw(os.stream.useChannel('queueStats')),
 			inbox: {
 				activeSincePrevTick: 0,
 				active: 0,
diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue
index 7f6fa82722..25365d6b87 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import MkContainer from '@client/components/ui/container.vue';
 import define from './define';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
@@ -48,7 +48,7 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.connection = os.stream.useChannel('main');
+		this.connection = markRaw(os.stream.useChannel('main'));
 
 		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
diff --git a/src/client/widgets/server-metric/index.vue b/src/client/widgets/server-metric/index.vue
index 2398e9920f..45cd8cebf2 100644
--- a/src/client/widgets/server-metric/index.vue
+++ b/src/client/widgets/server-metric/index.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import define from '../define';
 import MkContainer from '@client/components/ui/container.vue';
 import XCpuMemory from './cpu-mem.vue';
@@ -63,7 +63,7 @@ export default defineComponent({
 		os.api('server-info', {}).then(res => {
 			this.meta = res;
 		});
-		this.connection = os.stream.useChannel('serverStats');
+		this.connection = markRaw(os.stream.useChannel('serverStats'));
 	},
 	unmounted() {
 		this.connection.dispose();

From 41fe364b4948de7c494fe6654e39fc4eaf250a2f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Jul 2021 11:15:33 +0900
Subject: [PATCH 5/5] 12.84.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 51a7ba08f8..c89fe96103 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.84.2",
+	"version": "12.84.3",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",