refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)

* refactor(frontend): 非推奨となったReactivity Transformを使わないように

* refactor: 不要な括弧を除去

* fix: 不要なアノテーションを除去

* fix: Refの配列をrefしている部分の対応

* refactor: 不要な括弧を除去

* fix: lint

* refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換

* fix: type error

* chore: drop reactivity transform from eslint configuration

* refactor: remove unnecessary import

* fix: 対応漏れ

packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
@@ -35,14 +35,14 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
-let file: any = $ref(null);
+const file = ref<any>(null);
 
 async function choose() {
 	os.selectDriveFile(false).then((fileResponse) => {
-		file = fileResponse[0];
+		file.value = fileResponse[0];
 		emit('update:modelValue', {
 			...props.modelValue,
-			fileId: file.id,
+			fileId: file.value.id,
 		});
 	});
 }
@@ -54,7 +54,7 @@ onMounted(async () => {
 		os.api('drive/files/show', {
 			fileId: props.modelValue.fileId,
 		}).then(fileResponse => {
-			file = fileResponse;
+			file.value = fileResponse;
 		});
 	}
 });

packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { watch } from 'vue';
+import { watch, ref } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -40,19 +40,19 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
-let id: any = $ref(props.modelValue.note);
-let note: any = $ref(null);
+const id = ref<any>(props.modelValue.note);
+const note = ref<any>(null);
 
-watch($$(id), async () => {
-	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		id = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
+watch(id, async () => {
+	if (id.value && (id.value.startsWith('http://') || id.value.startsWith('https://'))) {
+		id.value = (id.value.endsWith('/') ? id.value.slice(0, -1) : id.value).split('/').pop();
 	}
 
 	emit('update:modelValue', {
 		...props.modelValue,
-		note: id,
+		note: id.value,
 	});
-	note = await os.api('notes/show', { noteId: id });
+	note.value = await os.api('notes/show', { noteId: id.value });
 }, {
 	immediate: true,
 });

packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue

@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
+import { defineAsyncComponent, inject, onMounted, watch, ref } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os.js';
@@ -42,12 +42,12 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
-const children = $ref(deepClone(props.modelValue.children ?? []));
+const children = ref(deepClone(props.modelValue.children ?? []));
 
-watch($$(children), () => {
+watch(children, () => {
 	emit('update:modelValue', {
 		...props.modelValue,
-		children,
+		children: children.value,
 	});
 }, {
 	deep: true,
@@ -75,7 +75,7 @@ async function add() {
 	if (canceled) return;
 
 	const id = uuid();
-	children.push({ id, type });
+	children.value.push({ id, type });
 }
 
 onMounted(() => {

packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { watch } from 'vue';
+import { watch, ref } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import { i18n } from '@/i18n.js';
 
@@ -28,12 +28,12 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
-const text = $ref(props.modelValue.text ?? '');
+const text = ref(props.modelValue.text ?? '');
 
-watch($$(text), () => {
+watch(text, () => {
 	emit('update:modelValue', {
 		...props.modelValue,
-		text,
+		text: text.value,
 	});
 });
 </script>