From f5eb555008bc3e419b3da558274b9c4b0cf00fb9 Mon Sep 17 00:00:00 2001
From: Patrick <p.kuen@cloudacy.com>
Date: Fri, 24 May 2024 06:59:16 +0200
Subject: [PATCH] refactor: use more modern style to define component

---
 dist/VueMarkdown.d.ts   | 12 ++++++++++--
 dist/VueMarkdown.js     | 35 ++++++++++-------------------------
 dist/VueMarkdown.js.map |  2 +-
 example/src/App.vue     | 12 ++++++------
 src/VueMarkdown.ts      | 39 ++++++++++++---------------------------
 5 files changed, 39 insertions(+), 61 deletions(-)

diff --git a/dist/VueMarkdown.d.ts b/dist/VueMarkdown.d.ts
index 678e499..5334335 100644
--- a/dist/VueMarkdown.d.ts
+++ b/dist/VueMarkdown.d.ts
@@ -1,4 +1,12 @@
-import { type Component } from "vue";
+import MarkdownIt from "markdown-it";
 export type { Options } from "markdown-it";
-declare const VueMarkdown: Component;
+declare const VueMarkdown: import("vue").DefineSetupFnComponent<{
+    source: string;
+    options?: MarkdownIt.Options | undefined;
+    plugins?: MarkdownIt.PluginSimple[] | undefined;
+}, {}, {}, {
+    source: string;
+    options?: MarkdownIt.Options | undefined;
+    plugins?: MarkdownIt.PluginSimple[] | undefined;
+} & {}, import("vue").PublicProps>;
 export default VueMarkdown;
diff --git a/dist/VueMarkdown.js b/dist/VueMarkdown.js
index bcf5a15..370c0b9 100644
--- a/dist/VueMarkdown.js
+++ b/dist/VueMarkdown.js
@@ -1,29 +1,14 @@
 import MarkdownIt, {} from "markdown-it";
-import { computed, defineComponent, h, ref, } from "vue";
-const VueMarkdown = defineComponent({
-    name: "VueMarkdown",
-    props: {
-        source: {
-            type: String,
-            required: true,
-        },
-        options: {
-            type: Object,
-            required: false,
-        },
-        plugins: {
-            type: Array,
-            required: false,
-        },
-    },
-    setup(props) {
-        const md = ref(new MarkdownIt(props.options ?? {}));
-        for (const plugin of props.plugins ?? []) {
-            md.value.use(plugin);
-        }
-        const content = computed(() => md.value.render(props.source));
-        return () => h("div", { innerHTML: content.value });
-    },
+import { computed, defineComponent, h, ref } from "vue";
+const VueMarkdown = defineComponent((props) => {
+    const md = ref(new MarkdownIt(props.options ?? {}));
+    for (const plugin of props.plugins ?? []) {
+        md.value.use(plugin);
+    }
+    const content = computed(() => md.value.render(props.source));
+    return () => h("div", { innerHTML: content.value });
+}, {
+    props: ["source", "options", "plugins"],
 });
 export default VueMarkdown;
 //# sourceMappingURL=VueMarkdown.js.map
\ No newline at end of file
diff --git a/dist/VueMarkdown.js.map b/dist/VueMarkdown.js.map
index e96278a..5b8ca87 100644
--- a/dist/VueMarkdown.js.map
+++ b/dist/VueMarkdown.js.map
@@ -1 +1 @@
-{"version":3,"file":"VueMarkdown.js","sourceRoot":"","sources":["../src/VueMarkdown.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,EAAE,EAGlB,MAAM,aAAa,CAAC;AACrB,OAAO,EAGL,QAAQ,EACR,eAAe,EACf,CAAC,EACD,GAAG,GACJ,MAAM,KAAK,CAAC;AAGb,MAAM,WAAW,GAAc,eAAe,CAAC;IAC7C,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;SACf;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAqC;YAC3C,QAAQ,EAAE,KAAK;SAChB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,KAAiC;YACvC,QAAQ,EAAE,KAAK;SAChB;KACF;IACD,KAAK,CAAC,KAAK;QACT,MAAM,EAAE,GAAG,GAAG,CAAa,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;QAEhE,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC;YACzC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;QAED,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QAE9D,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;CACF,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}
\ No newline at end of file
+{"version":3,"file":"VueMarkdown.js","sourceRoot":"","sources":["../src/VueMarkdown.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,EAAE,EAGlB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAGxD,MAAM,WAAW,GAAG,eAAe,CACjC,CAAC,KAIA,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;IAEpD,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC;QACzC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9D,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;AACtD,CAAC,EACD;IACE,KAAK,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC;CACxC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index 97b0651..0c87243 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import VueMarkdown, { Options } from '../../dist/VueMarkdown'
-import { ref } from 'vue'
+import VueMarkdown, { Options } from "../../dist/VueMarkdown";
+import { ref } from "vue";
 
-const i = ref(0)
-const options: Options = { html: true }
+const i = ref(0);
+const options: Options = { html: true };
 </script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <button type="button" @click="i++">Increment</button>
-  <vue-markdown
+  <VueMarkdown
     :source="`# This is a markdown heading\n## This is your number: ${i}.\n<i>HTML is allowed via options</i>`"
     :options="options"
-  ></vue-markdown>
+  />
 </template>
 
 <style>
diff --git a/src/VueMarkdown.ts b/src/VueMarkdown.ts
index 0471ca7..3de7e56 100644
--- a/src/VueMarkdown.ts
+++ b/src/VueMarkdown.ts
@@ -2,34 +2,16 @@ import MarkdownIt, {
   type Options as MarkdownItOptions,
   type PluginSimple,
 } from "markdown-it";
-import {
-  type Component,
-  type PropType,
-  computed,
-  defineComponent,
-  h,
-  ref,
-} from "vue";
+import { computed, defineComponent, h, ref } from "vue";
 export type { Options } from "markdown-it";
 
-const VueMarkdown: Component = defineComponent({
-  name: "VueMarkdown",
-  props: {
-    source: {
-      type: String,
-      required: true,
-    },
-    options: {
-      type: Object as PropType<MarkdownItOptions>,
-      required: false,
-    },
-    plugins: {
-      type: Array as PropType<PluginSimple[]>,
-      required: false,
-    },
-  },
-  setup(props) {
-    const md = ref<MarkdownIt>(new MarkdownIt(props.options ?? {}));
+const VueMarkdown = defineComponent(
+  (props: {
+    source: string;
+    options?: MarkdownItOptions;
+    plugins?: PluginSimple[];
+  }) => {
+    const md = ref(new MarkdownIt(props.options ?? {}));
 
     for (const plugin of props.plugins ?? []) {
       md.value.use(plugin);
@@ -39,6 +21,9 @@ const VueMarkdown: Component = defineComponent({
 
     return () => h("div", { innerHTML: content.value });
   },
-});
+  {
+    props: ["source", "options", "plugins"],
+  }
+);
 
 export default VueMarkdown;