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; }