From f256e8b5781c7ca1ae9c45b452f4b72ec65e61d5 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 25 Jul 2022 07:51:31 +0200
Subject: [PATCH] Refactor components/page/page.textarea.vue to composition API

https://akkoma.dev/FoundKeyGang/FoundKey/pulls/26
---
 .../src/components/page/page.textarea.vue     | 45 +++++++------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 5b4ee2b45..54ba8a86e 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -2,38 +2,23 @@
 <MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { watch } from 'vue';
+import MkTextarea from '../form/textarea.vue';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
 
-export default defineComponent({
-	components: {
-		MkTextarea
-	},
-	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),
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	}
+const props = defineProps<{
+	block: TextBlock;
+	hpml: Hpml;
+}>();
+
+let text = $ref('');
+
+watch(props.hpml.vars, () => {
+	text = props.hpml.interpolate(props.block.text) as string;
+}, {
+	deep: true,
+	immediate: true,
 });
 </script>