feat: tranform for custom component loader

Author: antfu

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@antfu/eslint-config"
+  "extends": "@antfu/eslint-config",
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off"
+  }
 }

test/fixture/index.html renamed to example/index.html

@@ -14,6 +14,7 @@
     "cross-env": "^7.0.2",
     "typescript": "^4.1.2",
     "vite": "^1.0.0-rc.13",
-    "vite-plugin-components": "workspace:*"
+    "vite-plugin-components": "workspace:*",
+    "vite-plugin-md": "^0.1.2"
   }
 }

test/fixture/package.json renamed to example/package.json

@@ -4,7 +4,7 @@
     <ComponentA msg="a" />
     <component-b msg="b" />
     <ComponentC msg="c" />
-    <ComponentD/>
+    <ComponentD />
     <h3>Recursive Components</h3>
     <recursive :data="tree" />
   </div>
@@ -18,6 +18,12 @@
     <!-- Global -->
     <Avatar />
   </div>
+
+  <div class="block">
+    <h1>Markdown (2)</h1>
+    <MarkdownA />
+    <MarkdownB />
+  </div>
 </template>
 
 <script setup lang='ts'>

test/fixture/src/App.vue renamed to example/src/App.vue

@@ -0,0 +1,3 @@
+### This is a markdown component
+
+- [ ] Check

test/fixture/src/components/ComponentA.vue renamed to example/src/components/ComponentA.vue

@@ -0,0 +1,9 @@
+## A markdown component with Vue
+
+> Component Start
+
+<div style="padding: 0 10px">
+  <ComponentA :msg="'from markdown'"/>
+</div>
+
+> Component End