refactor(markdown): bump sfc plugin to v0.9

BREAKING CHANGE: type of node-api `page.sfcBlocks` has been changed

Author: meteorlxy

docs/reference/node-api.md

@@ -640,7 +640,7 @@ Therefore, it's not recommended to store large amounts of info into route meta,
 
 ### sfcBlocks
 
-- Type: `string[]`
+- Type: `MarkdownSfcBlocks`
 
 - Details:
 

docs/zh/reference/node-api.md

@@ -639,7 +639,7 @@ interface MarkdownLink {
 
 ### sfcBlocks
 
-- 类型： `string[]`
+- 类型： `MarkdownSfcBlocks`
 
 - 详情：
 

packages/@vuepress/core/src/app/prepare/preparePageComponent.ts

@@ -10,11 +10,13 @@ export const preparePageComponent = async (
   await app.writeTemp(
     page.componentFilePathRelative,
     [
-      // take the rendered markdown content as <template>
-      // #688: wrap the content with a <div> to avoid some potential issues of fragment component
-      `<template><div>${page.contentRendered}</div></template>\n`,
+      // #688: wrap the content of `<template>` with a `<div>` to avoid some potential issues of fragment component
+      `${page.sfcBlocks.template?.tagOpen}<div>${page.sfcBlocks.template?.contentStripped}</div>${page.sfcBlocks.template?.tagClose}\n`,
       // hoist `<script>`, `<style>` and other custom blocks
-      ...page.sfcBlocks,
+      page.sfcBlocks.script?.content,
+      page.sfcBlocks.scriptSetup?.content,
+      ...page.sfcBlocks.styles.map((item) => item.content),
+      ...page.sfcBlocks.customBlocks.map((item) => item.content),
     ].join('\n')
   )
 }

packages/@vuepress/core/src/page/renderPageContent.ts

@@ -2,6 +2,7 @@ import type {
   MarkdownEnv,
   MarkdownHeader,
   MarkdownLink,
+  MarkdownSfcBlocks,
 } from '@vuepress/markdown'
 import type { App, PageFrontmatter, PageOptions } from '../types'
 
@@ -27,7 +28,7 @@ export const renderPageContent = async ({
   frontmatter: PageFrontmatter
   headers: MarkdownHeader[]
   links: MarkdownLink[]
-  sfcBlocks: string[]
+  sfcBlocks: MarkdownSfcBlocks
   title: string
 }> => {
   const markdownEnv: MarkdownEnv = {
@@ -46,7 +47,13 @@ export const renderPageContent = async ({
     headers = [],
     importedFiles = [],
     links = [],
-    sfcBlocks = [],
+    sfcBlocks = {
+      template: null,
+      script: null,
+      scriptSetup: null,
+      styles: [],
+      customBlocks: [],
+    },
     title = '',
   } = markdownEnv
 

packages/@vuepress/core/src/types/page.ts

@@ -1,4 +1,4 @@
-import type { MarkdownLink } from '@vuepress/markdown'
+import type { MarkdownLink, MarkdownSfcBlocks } from '@vuepress/markdown'
 import type { PageBase, PageData, PageFrontmatter } from '@vuepress/shared'
 
 /**
@@ -77,7 +77,7 @@ export type Page<
     /**
      * Extracted sfc blocks of the page
      */
-    sfcBlocks: string[]
+    sfcBlocks: MarkdownSfcBlocks
 
     /**
      * Slug of the page

packages/@vuepress/markdown/package.json

@@ -26,14 +26,14 @@
     "clean": "rimraf lib *.tsbuildinfo"
   },
   "dependencies": {
-    "@mdit-vue/plugin-component": "^0.7.1",
-    "@mdit-vue/plugin-frontmatter": "^0.7.1",
-    "@mdit-vue/plugin-headers": "^0.7.1",
-    "@mdit-vue/plugin-sfc": "^0.7.1",
-    "@mdit-vue/plugin-title": "^0.7.1",
-    "@mdit-vue/plugin-toc": "^0.7.1",
-    "@mdit-vue/shared": "^0.7.1",
-    "@mdit-vue/types": "^0.7.1",
+    "@mdit-vue/plugin-component": "^0.9.0",
+    "@mdit-vue/plugin-frontmatter": "^0.9.1",
+    "@mdit-vue/plugin-headers": "^0.9.1",
+    "@mdit-vue/plugin-sfc": "^0.9.1",
+    "@mdit-vue/plugin-title": "^0.9.1",
+    "@mdit-vue/plugin-toc": "^0.9.1",
+    "@mdit-vue/shared": "^0.9.1",
+    "@mdit-vue/types": "^0.9.0",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-emoji": "^2.0.2",
     "@vuepress/shared": "workspace:*",