From a0205341400336e6b23d6ca7d198a73b019b30b7 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 25 Jul 2022 07:50:22 +0200
Subject: [PATCH] Refactor components/page/page.text.vue to composition API
https://akkoma.dev/FoundKeyGang/FoundKey/pulls/25
---
.../client/src/components/page/page.text.vue | 69 ++++++++-----------
1 file changed, 29 insertions(+), 40 deletions(-)
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 8d2955466..1e07da8c0 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/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;
}