refactor(core): extract renderPageSfcBlocksToVue method

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

@@ -1,3 +1,4 @@
+import { renderPageSfcBlocksToVue } from '../../page/index.js'
 import type { App, Page } from '../../types/index.js'
 
 /**
@@ -9,14 +10,6 @@ export const preparePageComponent = async (
 ): Promise<void> => {
   await app.writeTemp(
     page.componentFilePathRelative,
-    [
-      // #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.script?.content,
-      page.sfcBlocks.scriptSetup?.content,
-      ...page.sfcBlocks.styles.map((item) => item.content),
-      ...page.sfcBlocks.customBlocks.map((item) => item.content),
-    ].join('\n'),
+    renderPageSfcBlocksToVue(page.sfcBlocks),
   )
 }

packages/core/src/page/createPage.ts

@@ -1,6 +1,6 @@
 import type { App, Page, PageOptions } from '../types/index.js'
 import { inferPagePath } from './inferPagePath.js'
-import { renderPageContent } from './renderPageContent.js'
+import { parsePageContent } from './parsePageContent.js'
 import { resolvePageChunkInfo } from './resolvePageChunkInfo.js'
 import { resolvePageComponentInfo } from './resolvePageComponentInfo.js'
 import { resolvePageDate } from './resolvePageDate.js'
@@ -39,7 +39,7 @@ export const createPage = async (
     markdownEnv,
     sfcBlocks,
     title,
-  } = renderPageContent({
+  } = parsePageContent({
     app,
     content,
     filePath,

packages/core/src/page/index.ts

@@ -1,6 +1,7 @@
 export * from './createPage.js'
 export * from './inferPagePath.js'
-export * from './renderPageContent.js'
+export * from './parsePageContent.js'
+export * from './renderPageSfcBlocksToVue.js'
 export * from './resolvePageChunkInfo.js'
 export * from './resolvePageComponentInfo.js'
 export * from './resolvePageDate.js'

packages/core/src/page/renderPageContent.ts → packages/core/src/page/parsePageContent.ts

@@ -10,7 +10,7 @@ import type { App, PageFrontmatter, PageOptions } from '../types/index.js'
 /**
  * Render page content and extract related info
  */
-export const renderPageContent = ({
+export const parsePageContent = ({
   app,
   content,
   filePath,

packages/core/src/page/renderPageSfcBlocksToVue.ts

@@ -0,0 +1,17 @@
+import type { MarkdownSfcBlocks } from '@vuepress/markdown'
+
+/**
+ * Render page sfc blocks to vue component
+ */
+export const renderPageSfcBlocksToVue = (
+  sfcBlocks: MarkdownSfcBlocks,
+): string =>
+  [
+    // #688: wrap the content of `<template>` with a `<div>` to avoid some potential issues of fragment component
+    `${sfcBlocks.template?.tagOpen}<div>${sfcBlocks.template?.contentStripped}</div>${sfcBlocks.template?.tagClose}\n`,
+    // hoist `<script>`, `<style>` and other custom blocks
+    sfcBlocks.script?.content,
+    sfcBlocks.scriptSetup?.content,
+    ...sfcBlocks.styles.map((item) => item.content),
+    ...sfcBlocks.customBlocks.map((item) => item.content),
+  ].join('\n')

packages/core/tests/page/renderPageContent.spec.ts → packages/core/tests/page/parsePageContent.spec.ts

@@ -2,7 +2,7 @@ import { createMarkdown } from '@vuepress/markdown'
 import { path } from '@vuepress/utils'
 import { describe, expect, it } from 'vitest'
 import type { Bundler } from '../../src/index.js'
-import { createBaseApp, renderPageContent } from '../../src/index.js'
+import { createBaseApp, parsePageContent } from '../../src/index.js'
 
 const app = createBaseApp({
   source: path.resolve(__dirname, 'fake-source'),
@@ -11,8 +11,8 @@ const app = createBaseApp({
 })
 app.markdown = createMarkdown()
 
-it('should render page content correctly', () => {
-  const resolved = renderPageContent({
+it('should parse page content correctly', () => {
+  const result = parsePageContent({
     app,
     content: `\
 foobar
@@ -25,7 +25,7 @@ const msg = 'msg'
     options: {},
   })
 
-  expect(resolved).toEqual({
+  expect(result).toEqual({
     contentRendered: '<p>foobar</p>\n',
     deps: [],
     frontmatter: {},
@@ -66,7 +66,7 @@ const msg = 'msg'
 
 describe('page title', () => {
   it('should use title in frontmatter', () => {
-    const resolved = renderPageContent({
+    const result = parsePageContent({
       app,
       content: '# title in header',
       filePath: null,
@@ -78,37 +78,37 @@ describe('page title', () => {
       },
     })
 
-    expect(resolved.title).toEqual('title in frontmatter')
+    expect(result.title).toEqual('title in frontmatter')
   })
 
   it('should use title in the first h1 header', () => {
-    const resolved = renderPageContent({
+    const result = parsePageContent({
       app,
       content: '# title in header',
       filePath: null,
       filePathRelative: null,
       options: {},
     })
 
-    expect(resolved.title).toEqual('title in header')
+    expect(result.title).toEqual('title in header')
   })
 
   it('should use empty title', () => {
-    const resolved = renderPageContent({
+    const result = parsePageContent({
       app,
       content: '',
       filePath: null,
       filePathRelative: null,
       options: {},
     })
 
-    expect(resolved.title).toEqual('')
+    expect(result.title).toEqual('')
   })
 })
 
 describe('page frontmatter', () => {
   it('should merge markdown frontmatter and options frontmatter', () => {
-    const resolved = renderPageContent({
+    const result = parsePageContent({
       app,
       content: `\
 ---
@@ -124,14 +124,14 @@ title: title in markdown frontmatter
       },
     })
 
-    expect(resolved.frontmatter).toEqual({
+    expect(result.frontmatter).toEqual({
       title: 'title in markdown frontmatter',
       description: 'description in options frontmatter',
     })
   })
 
   it('should use fields from markdown frontmatter first', () => {
-    const resolved = renderPageContent({
+    const result = parsePageContent({
       app,
       content: `\
 ---
@@ -147,7 +147,7 @@ title: title in markdown frontmatter
       },
     })
 
-    expect(resolved.frontmatter).toEqual({
+    expect(result.frontmatter).toEqual({
       title: 'title in markdown frontmatter',
     })
   })