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

FoundKeyGang/FoundKey#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({
+const props = defineProps<{
-	components: {
+	block: TextBlock;
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
+	hpml: Hpml;
-	},
+}>();
-	props: {
+
-		block: {
+const MkUrlPreview = defineAsyncComponent(() => import('@/components/url-preview.vue'));
-			type: Object as PropType<TextBlock>,
+
-			required: true
+let text: string = $ref('');
-		},
+
-		hpml: {
+const urls = computed((): string[] => {
-			type: Object as PropType<Hpml>,
+	if (text) {
-			required: true
+		return extractUrlFromMfm(mfm.parse(text));
-		}
+	} else {
-	},
+		return [];
-	data() {
+	}
-		return {
+});
-			text: this.hpml.interpolate(this.block.text),
+
-		};
+watch(props.hpml.vars, () => {
-	},
+	text = props.hpml.interpolate(props.block.text) as string;
-	computed: {
+}, {
-		urls(): string[] {
+	deep: true,
-			if (this.text) {
+	immediate: true,
-				return extractUrlFromMfm(mfm.parse(this.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
 });
 </script>
 
 <style lang="scss" scoped>
 .mrdgzndn {
+	padding-left: 1em;
+	padding-right: 1em;
+
 	&:not(:first-child) {
 		margin-top: 0.5em;
 	}