feat: support markdown sfc options (#1238)

Author: meteorlxy

docs/config/app-configs.md

@@ -160,6 +160,18 @@ interface MarkdownOptions extends MarkdownIt.Options {
     disable?: boolean
   }
 
+  // @mdit-vue/plugin-frontmatter plugin options.
+  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter#options
+  frontmatter?: FrontmatterPluginOptions
+
+  // @mdit-vue/plugin-headers plugin options.
+  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-headers#options
+  headers?: HeadersPluginOptions
+
+  // @mdit-vue/plugin-sfc plugin options.
+  // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc#options
+  sfc?: SfcPluginOptions
+
   // @mdit-vue/plugin-toc plugin options.
   // See: https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
   toc?: TocPluginOptions

package.json

@@ -92,13 +92,14 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@mdit-vue/plugin-component": "^0.10.0",
-    "@mdit-vue/plugin-frontmatter": "^0.10.0",
-    "@mdit-vue/plugin-headers": "^0.10.0",
-    "@mdit-vue/plugin-title": "^0.10.0",
-    "@mdit-vue/plugin-toc": "^0.10.0",
-    "@mdit-vue/shared": "^0.10.0",
-    "@mdit-vue/types": "^0.10.0",
+    "@mdit-vue/plugin-component": "^0.11.0",
+    "@mdit-vue/plugin-frontmatter": "^0.11.0",
+    "@mdit-vue/plugin-headers": "^0.11.0",
+    "@mdit-vue/plugin-sfc": "^0.11.0",
+    "@mdit-vue/plugin-title": "^0.11.0",
+    "@mdit-vue/plugin-toc": "^0.11.0",
+    "@mdit-vue/shared": "^0.11.0",
+    "@mdit-vue/types": "^0.11.0",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",

pnpm-lock.yaml

@@ -11,6 +11,7 @@ import {
   headersPlugin,
   type HeadersPluginOptions
 } from '@mdit-vue/plugin-headers'
+import { sfcPlugin, type SfcPluginOptions } from '@mdit-vue/plugin-sfc'
 import { titlePlugin } from '@mdit-vue/plugin-title'
 import { tocPlugin, type TocPluginOptions } from '@mdit-vue/plugin-toc'
 import { IThemeRegistration } from 'shiki'
@@ -20,7 +21,6 @@ import { highlightLinePlugin } from './plugins/highlightLines'
 import { lineNumberPlugin } from './plugins/lineNumbers'
 import { containerPlugin } from './plugins/containers'
 import { snippetPlugin } from './plugins/snippet'
-import { hoistPlugin } from './plugins/hoist'
 import { preWrapperPlugin } from './plugins/preWrapper'
 import { linkPlugin } from './plugins/link'
 import { imagePlugin } from './plugins/image'
@@ -42,13 +42,13 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   }
   frontmatter?: FrontmatterPluginOptions
   headers?: HeadersPluginOptions
+  sfc?: SfcPluginOptions
   theme?: ThemeOptions
   toc?: TocPluginOptions
   externalLinks?: Record<string, string>
 }
 
 export interface MarkdownParsedData {
-  hoistedTags?: string[]
   links?: string[]
 }
 
@@ -77,7 +77,6 @@ export const createMarkdownRenderer = async (
     .use(highlightLinePlugin)
     .use(preWrapperPlugin)
     .use(snippetPlugin, srcDir)
-    .use(hoistPlugin)
     .use(containerPlugin)
     .use(imagePlugin)
     .use(
@@ -94,7 +93,9 @@ export const createMarkdownRenderer = async (
   if (!options.attrs?.disable) {
     md.use(attrsPlugin, options.attrs)
   }
+  md.use(emojiPlugin)
 
+  // mdit-vue plugins
   md.use(anchorPlugin, {
     slugify,
     permalink: anchorPlugin.permalink.ariaHidden({}),
@@ -107,12 +108,14 @@ export const createMarkdownRenderer = async (
       slugify,
       ...options.headers
     } as HeadersPluginOptions)
+    .use(sfcPlugin, {
+      ...options.sfc
+    } as SfcPluginOptions)
     .use(titlePlugin)
     .use(tocPlugin, {
       slugify,
       ...options.toc
     } as TocPluginOptions)
-    .use(emojiPlugin)
 
   // apply user config
   if (options.config) {

src/node/markdown/markdown.ts

@@ -84,7 +84,7 @@ export async function createMarkdownToVueRenderFn(
     }
     const html = md.render(src, env)
     const data = md.__data
-    const { frontmatter = {}, headers = [], title = '' } = env
+    const { frontmatter = {}, headers = [], sfcBlocks, title = '' } = env
 
     // validate data.links
     const deadLinks: string[] = []
@@ -142,15 +142,20 @@ export async function createMarkdownToVueRenderFn(
       pageData.lastUpdated = await getGitTimestamp(file)
     }
 
-    const vueSrc =
-      genPageDataCode(data.hoistedTags || [], pageData, replaceRegex).join(
-        '\n'
-      ) +
-      `\n<template><div>${replaceConstants(
+    const vueSrc = [
+      ...injectPageDataCode(
+        sfcBlocks?.scripts.map((item) => item.content) ?? [],
+        pageData,
+        replaceRegex
+      ),
+      `<template><div>${replaceConstants(
         html,
         replaceRegex,
         vueTemplateBreaker
-      )}</div></template>`
+      )}</div></template>`,
+      ...(sfcBlocks?.styles.map((item) => item.content) ?? []),
+      ...(sfcBlocks?.customBlocks.map((item) => item.content) ?? [])
+    ].join('\n')
 
     debug(`[render] ${file} in ${Date.now() - start}ms.`)
 
@@ -203,7 +208,11 @@ function replaceConstants(str: string, replaceRegex: RegExp, breaker: string) {
   return str.replace(replaceRegex, (_) => `${_[0]}${breaker}${_.slice(1)}`)
 }
 
-function genPageDataCode(tags: string[], data: PageData, replaceRegex: RegExp) {
+function injectPageDataCode(
+  tags: string[],
+  data: PageData,
+  replaceRegex: RegExp
+) {
   const dataJson = JSON.stringify(data)
   const code = `\nexport const __pageData = JSON.parse(${JSON.stringify(
     replaceConstants(dataJson, replaceRegex, jsStringBreaker)