refactor: use more modern style to define component

Author: p-kuen

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;

dist/VueMarkdown.js

@@ -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>

dist/VueMarkdown.js.map

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