refactor(markdown): externalize sfc plugin

BREAKING CHANGE: `markdown.hoistTags` has been renamed to `markdown.sfc` BREAKING CHANGE: node-api `page.hoistedTags` has been renamed to `page.sfcBlocks`
vuepress · Jun 23, 2022 · a23aaa1 · a23aaa1
1 parent a1909c0
commit a23aaa1
Show file tree

Hide file tree

Showing 18 changed files with 99 additions and 225 deletions.
diff --git a/docs/reference/config.md b/docs/reference/config.md
@@ -467,7 +467,7 @@ You can disable it if you want to implement them in client side. For example, [P
 
 - Details:
 
-  Options for [@mdit-vue/plugin-component](https://www.npmjs.com/package/@mdit-vue/plugin-component).
+  Options for [@mdit-vue/plugin-component](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component).
 
   Set to `false` to disable this plugin.
 
@@ -557,36 +557,6 @@ If you really want to modify the slugify function, you'd better change the [mark
 You should not configure it unless you understand what it is for.
 :::
 
-### markdown.hoistTags
-
-- Type: `HoistTagsPluginOptions | false`
-
-- Details:
-
-  Options for VuePress built-in markdown-it hoist-tags plugin.
-
-  It will hoist specific HTML tags in your markdown to the top-level of SFC.
-
-  Set to `false` to disable this plugin.
-
-- Also see:
-  - [Cookbook > Markdown and Vue SFC](../advanced/cookbook/markdown-and-vue-sfc.md)
-  - [Node API > Page Properties > hoistedTags](./node-api.md#hoistedtags)
-
-#### markdown.hoistTags.customBlocks
-
-- Type: `string[]`
-
-- Default: `[]`
-
-- Details:
-
-  SFC custom blocks to be hoisted.
-
-  By default, only `<script>` and `<style>` tags will be hoisted. You can set this option to support SFC custom blocks in markdown.
-
-  For example, if you set this option to `['foo']`, the `<foo>` tag in your markdown content will be hoisted as Vue SFC custom block. Remember that you need to configure the bundler correctly to handle custom blocks.
-
 ### markdown.importCode
 
 - Type: `ImportCodePluginOptions | false`
@@ -647,6 +617,20 @@ You should not configure it unless you understand what it is for.
 
   Additional attributes for external links.
 
+### markdown.sfc
+
+- Type: `SfcPluginOptions | false`
+
+- Details:
+
+  Options for [@mdit-vue/plugin-sfc](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc).
+
+  Set to `false` to disable this plugin.
+
+- Also see:
+  - [Cookbook > Markdown and Vue SFC](../advanced/cookbook/markdown-and-vue-sfc.md)
+  - [Node API > Page Properties > sfcBlocks](./node-api.md#sfcblocks)
+
 ### markdown.slugify
 
 - Type: `(str: string) => string`

diff --git a/docs/reference/node-api.md b/docs/reference/node-api.md
@@ -554,17 +554,6 @@ interface PageData {
 - Also see:
   - [Config > markdown.importCode](./config.md#markdown-importcode)
 
-### hoistedTags
-
-- Type: `string[]`
-
-- Details:
-
-  Hoisted tags of the page.
-
-- Also see:
-  - [Config > markdown.hoistTags](./config.md#markdown-hoisttags)
-
 ### links
 
 - Type: `MarkdownLink[]`
@@ -649,6 +638,17 @@ Both [route meta](#routemeta) and [page data](#data) is available in client side
 Therefore, it's not recommended to store large amounts of info into route meta, otherwise the initial loading speed will be affected a lot when your site has a large number of pages.
 :::
 
+### sfcBlocks
+
+- Type: `string[]`
+
+- Details:
+
+  Extracted vue SFC blocks of the page.
+
+- Also see:
+  - [Config > markdown.sfc](./config.md#markdown-sfc)
+
 ### slug
 
 - Type: `string`

diff --git a/docs/zh/reference/config.md b/docs/zh/reference/config.md
@@ -466,7 +466,7 @@ VuePress 在开发和构建时会加载临时文件，因此临时文件目录
 
 - 详情：
 
-  [@mdit-vue/plugin-component](https://www.npmjs.com/package/@mdit-vue/plugin-component) 插件的配置项。
+  [@mdit-vue/plugin-component](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-component) 插件的配置项。
 
   设置为 `false` 可以禁用该插件。
 
@@ -556,36 +556,6 @@ VuePress 在开发和构建时会加载临时文件，因此临时文件目录
 除非你了解它的用途，否则你不应该设置该配置项。
 :::
 
-### markdown.hoistTags
-
-- 类型： `HoistTagsPluginOptions | false`
-
-- 详情：
-
-  VuePress 内置的 markdown-it hoist-tags 插件的配置项。
-
-  它将会把你的 Markdown 中特定的 HTML 标签提升到 SFC 的顶层。
-
-  设置为 `false` 可以禁用该插件。
-
-- 参考：
-  - [Cookbook > Markdown 与 Vue SFC](../advanced/cookbook/markdown-and-vue-sfc.md)
-  - [Node API > Page 属性 > hoistedTags](./node-api.md#hoistedtags)
-
-#### markdown.hoistTags.customBlocks
-
-- 类型： `string[]`
-
-- 默认值： `[]`
-
-- 详情：
-
-  想要提升的 SFC 自定义块。
-
-  默认情况下，只会提升 `<script>` 和 `<style>` 标签。你可以设置该选项以便在 Markdown 中支持自定义块。
-
-  例如，如果你将该选项设置为 `['foo']` ，那么 Markdown 中的 `<foo>` 标签就会提升为 Vue SFC 的自定义块。需要提醒的是，为了处理自定义块，你还需要正确配置你的打包工具。
-
 ### markdown.importCode
 
 - 类型： `ImportCodePluginOptions | false`
@@ -646,6 +616,20 @@ VuePress 在开发和构建时会加载临时文件，因此临时文件目录
 
   为外部链接添加额外的属性。
 
+### markdown.sfc
+
+- 类型： `SfcPluginOptions | false`
+
+- 详情：
+
+  [@mdit-vue/plugin-sfc](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc) 插件的配置项。
+
+  设置为 `false` 可以禁用该插件。
+
+- 参考：
+  - [Cookbook > Markdown 与 Vue SFC](../advanced/cookbook/markdown-and-vue-sfc.md)
+  - [Node API > Page 属性 > sfcBlocks](./node-api.md#sfcblocks)
+
 ### markdown.slugify
 
 - 类型： `(str: string) => string`

diff --git a/docs/zh/reference/node-api.md b/docs/zh/reference/node-api.md
@@ -552,17 +552,6 @@ interface PageData {
 - 参考：
   - [配置 > markdown.importCode](./config.md#markdown-importcode)
 
-### hoistedTags
-
-- 类型： `string[]`
-
-- 详情：
-
-  该 Page 中提升的 Tags。
-
-- 参考：
-  - [配置 > markdown.hoistTags](./config.md#markdown-hoisttags)
-
 ### links
 
 - 类型： `MarkdownLink[]`
@@ -648,6 +637,17 @@ interface MarkdownLink {
 因此，不建议在 Route Meta 中存储大量的信息，否则在站点有很多页面时，将会影响站点的初始加载速度。
 :::
 
+### sfcBlocks
+
+- 类型： `string[]`
+
+- 详情：
+
+  该 Page 中提取出的 Vue SFC Blocks 。
+
+- 参考：
+  - [配置 > markdown.sfc](./config.md#markdown-sfc)
+
 ### slug
 
 - 类型： `string`

diff --git a/packages/@vuepress/core/__tests__/page/createPage.spec.ts b/packages/@vuepress/core/__tests__/page/createPage.spec.ts
@@ -50,7 +50,7 @@ describe('core > page > createPage', () => {
     expect(page.contentRendered).toBe('')
     expect(page.date).toBe('0000-00-00')
     expect(page.deps).toEqual([])
-    expect(page.hoistedTags).toEqual([])
+    expect(page.sfcBlocks).toEqual([])
     expect(page.links).toEqual([])
     expect(page.pathInferred).toBeNull()
     expect(page.pathLocale).toBe('/')

diff --git a/packages/@vuepress/core/__tests__/page/renderPageContent.spec.ts b/packages/@vuepress/core/__tests__/page/renderPageContent.spec.ts
@@ -23,8 +23,8 @@ describe('core > page > renderPageContent', () => {
       contentRendered: '<p>foobar</p>\n',
       deps: [],
       headers: [],
-      hoistedTags: [],
       links: [],
+      sfcBlocks: [],
       title: '',
     })
   })

diff --git a/packages/@vuepress/core/src/app/prepare/preparePageComponent.ts b/packages/@vuepress/core/src/app/prepare/preparePageComponent.ts
@@ -14,7 +14,7 @@ export const preparePageComponent = async (
       // #688: wrap the content with a <div> to avoid some potential issues of fragment component
       `<template><div>${page.contentRendered}</div></template>\n`,
       // hoist `<script>`, `<style>` and other custom blocks
-      ...page.hoistedTags,
+      ...page.sfcBlocks,
     ].join('\n')
   )
 }
diff --git a/packages/@vuepress/core/src/page/createPage.ts b/packages/@vuepress/core/src/page/createPage.ts
@@ -51,7 +51,7 @@ export const createPage = async (
   })
 
   // render page content and extract information
-  const { contentRendered, deps, headers, hoistedTags, links, title } =
+  const { contentRendered, deps, headers, links, sfcBlocks, title } =
     await renderPageContent({
       app,
       content,
@@ -137,12 +137,12 @@ export const createPage = async (
     contentRendered,
     date,
     deps,
-    hoistedTags,
     links,
     pathInferred,
     pathLocale,
     permalink,
     routeMeta,
+    sfcBlocks,
     slug,
 
     // file info

diff --git a/packages/@vuepress/core/src/page/renderPageContent.ts b/packages/@vuepress/core/src/page/renderPageContent.ts
@@ -24,8 +24,8 @@ export const renderPageContent = async ({
   contentRendered: string
   deps: string[]
   headers: MarkdownHeader[]
-  hoistedTags: string[]
   links: MarkdownLink[]
+  sfcBlocks: string[]
   title: string
 }> => {
   const markdownEnv: MarkdownEnv = {
@@ -40,18 +40,18 @@ export const renderPageContent = async ({
   /* istanbul ignore next */
   const {
     headers = [],
-    hoistedTags = [],
     importedFiles = [],
     links = [],
+    sfcBlocks = [],
     title = '',
   } = markdownEnv
 
   return {
     contentRendered,
     deps: importedFiles,
     headers,
-    hoistedTags,
     links,
+    sfcBlocks,
     title,
   }
 }
diff --git a/packages/@vuepress/core/src/types/page.ts b/packages/@vuepress/core/src/types/page.ts
@@ -37,11 +37,6 @@ export type Page<
      */
     deps: string[]
 
-    /**
-     * Hoisted tags of the page
-     */
-    hoistedTags: string[]
-
     /**
      * Links of the page
      */
@@ -79,6 +74,11 @@ export type Page<
      */
     routeMeta: Record<string, unknown>
 
+    /**
+     * Extracted sfc blocks of the page
+     */
+    sfcBlocks: string[]
+
     /**
      * Slug of the page
      */

diff --git a/packages/@vuepress/markdown/__tests__/markdown.spec.ts b/packages/@vuepress/markdown/__tests__/markdown.spec.ts
@@ -8,8 +8,6 @@ describe('@vuepress/markdown > markdown', () => {
 
     it.todo('extractHeaders')
 
-    it.todo('hoistTags')
-
     it.todo('links')
 
     it.todo('toc')

diff --git a/packages/@vuepress/markdown/__tests__/plugins/hoistTagsPlugin.spec.ts b/packages/@vuepress/markdown/__tests__/plugins/hoistTagsPlugin.spec.ts
diff --git a/packages/@vuepress/markdown/package.json b/packages/@vuepress/markdown/package.json
@@ -26,7 +26,9 @@
     "clean": "rimraf lib *.tsbuildinfo"
   },
   "dependencies": {
-    "@mdit-vue/plugin-component": "^0.1.0",
+    "@mdit-vue/plugin-component": "^0.2.0",
+    "@mdit-vue/plugin-sfc": "^0.2.0",
+    "@mdit-vue/shared": "^0.2.0",
     "@types/markdown-it": "^12.2.3",
     "@vuepress/shared": "workspace:*",
     "@vuepress/utils": "workspace:*",