feat: frontmatter, close antfu#2

README.md

@@ -72,6 +72,31 @@ app.mount()
 
 Use [`vite-plugin-components`](#work-with-vite-plugin-components) for auto components registration.
 
+## Frontmatter
+
+Frontmatter will be parsed and inject into Vue's instance data `frontmatter` field. 
+
+For example:
+
+```md
+---
+title: My Cool App
+---
+
+# Hello World
+
+This is {{frontmatter.title}}
+```
+
+Will be rendered as
+
+```html
+<h1>Hello World</h1>
+<p>This is My Cool App</p>
+```
+
+It will also be passed to the wrapper component's props if you have set `wrapperComponent` option.
+
 ## Options
 
 `vite-plugin-md` uses [`markdown-it`](https://github.com/markdown-it/markdown-it) under the hood, see [`markdown-it`'s docs](https://markdown-it.github.io/markdown-it/) for more details

example/App.vue

@@ -1,13 +1,9 @@
 <template>
- <HelloWorld style="padding: 20px 40px" />
+ <ComponentA style="padding: 20px 40px" />
+ <ComponentB style="padding: 20px 40px" />
 </template>
 
-<script>
-import HelloWorld from './README.md'
-
-export default {
- components: {
- HelloWorld,
- },
-}
+<script setup>
+import ComponentA from './README.md'
+import ComponentB from './matter.md'
 </script>

example/matter.md

@@ -0,0 +1,8 @@
+---
+title: Hello
+slug: home
+---
+
+<h1>Hello world!</h1>
+
+Front matter: {{ frontmatter }}

package.json

@@ -41,6 +41,7 @@
  "vite": "^1.0.0-rc.13"
  },
  "dependencies": {
+ "gray-matter": "^4.0.2",
  "markdown-it": "^12.0.2"
  }
 }

src/index.ts

@@ -1,6 +1,7 @@
 import type { Plugin } from 'vite'
 import MarkdownIt from 'markdown-it'
 import { compileTemplate } from '@vue/compiler-sfc'
+import matter from 'gray-matter'
 import { Options, ResolvedOptions } from './types'
 
 function toArray<T>(n: T | T[]): T[] {
@@ -44,16 +45,17 @@ function VitePluginMarkdown(options: Options = {}): Plugin {
  },
  transform(ctx) {
  const { isBuild, path } = ctx
- let md = ctx.code
+ let raw = ctx.code
 
  if (resolved.transforms.before)
- md = resolved.transforms.before({ ...ctx, code: md })
+ raw = resolved.transforms.before({ ...ctx, code: raw })
 
+ const { content: md, data: frontmatter } = matter(raw)
  let sfc = markdown.render(md, {})
  if (resolved.wrapperClasses)
  sfc = `<div class="${wrapperClasses}">${sfc}</div>`
  if (resolved.wrapperComponent)
- sfc = `<${resolved.wrapperComponent}>${sfc}</${resolved.wrapperComponent}>`
+ sfc = `<${resolved.wrapperComponent} :frontmatter="frontmatter">${sfc}</${resolved.wrapperComponent}>`
 
  if (resolved.transforms.after)
  sfc = resolved.transforms.after({ ...ctx, code: sfc })
@@ -66,7 +68,9 @@ function VitePluginMarkdown(options: Options = {}): Plugin {
  })
 
  result = result.replace('export function render', 'function render')
- result += '\nconst __script = { render };'
+ result += `\nconst __matter = ${JSON.stringify(frontmatter)};`
+ result += '\nconst data = () => ({ frontmatter: __matter });'
+ result += '\nconst __script = { render, data };'
 
  if (!isBuild)
  result += `\n__script.__hmrId = ${JSON.stringify(path)};`