Refactor components/page/page.text.vue to composition API

https://akkoma.dev/FoundKeyGang/FoundKey/pulls/25

packages/client/src/components/page/page.text.vue

@@ -1,58 +1,47 @@
 <template>
 <div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
+	<Mfm :key="text" :text="text" :is-note="false"/>
 	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { defineAsyncComponent, watch, computed } from 'vue';
+import * as mfm from 'mfm-js';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 
-export default defineComponent({
-	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	computed: {
-		urls(): string[] {
-			if (this.text) {
-				return extractUrlFromMfm(mfm.parse(this.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
+const props = defineProps<{
+	block: TextBlock;
+	hpml: Hpml;
+}>();
+
+const MkUrlPreview = defineAsyncComponent(() => import('@/components/url-preview.vue'));
+
+let text: string = $ref('');
+
+const urls = computed((): string[] => {
+	if (text) {
+		return extractUrlFromMfm(mfm.parse(text));
+	} else {
+		return [];
+	}
+});
+
+watch(props.hpml.vars, () => {
+	text = props.hpml.interpolate(props.block.text) as string;
+}, {
+	deep: true,
+	immediate: true,
 });
 </script>
 
 <style lang="scss" scoped>
 .mrdgzndn {
+	padding-left: 1em;
+	padding-right: 1em;
+
 	&:not(:first-child) {
 		margin-top: 0.5em;
 	}