From d77623615d91751bab28c569781d10588bc9a17b Mon Sep 17 00:00:00 2001
From: meteorlxy <meteor.lxy@foxmail.com>
Date: Tue, 10 Sep 2024 09:29:55 +0800
Subject: [PATCH] refactor(core): extract renderPageSfcBlocksToVue method

---
 .../src/app/prepare/preparePageComponent.ts   | 11 ++------
 packages/core/src/page/createPage.ts          |  4 +--
 packages/core/src/page/index.ts               |  3 +-
 ...nderPageContent.ts => parsePageContent.ts} |  2 +-
 .../core/src/page/renderPageSfcBlocksToVue.ts | 17 +++++++++++
 ...ntent.spec.ts => parsePageContent.spec.ts} | 28 +++++++++----------
 6 files changed, 38 insertions(+), 27 deletions(-)
 rename packages/core/src/page/{renderPageContent.ts => parsePageContent.ts} (97%)
 create mode 100644 packages/core/src/page/renderPageSfcBlocksToVue.ts
 rename packages/core/tests/page/{renderPageContent.spec.ts => parsePageContent.spec.ts} (82%)

diff --git a/packages/core/src/app/prepare/preparePageComponent.ts b/packages/core/src/app/prepare/preparePageComponent.ts
index 86f0aa7936..569d63697a 100644
--- a/packages/core/src/app/prepare/preparePageComponent.ts
+++ b/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),
   )
 }
diff --git a/packages/core/src/page/createPage.ts b/packages/core/src/page/createPage.ts
index c0b5e74d26..c000873c84 100644
--- a/packages/core/src/page/createPage.ts
+++ b/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,
diff --git a/packages/core/src/page/index.ts b/packages/core/src/page/index.ts
index 179d9f4cc6..6e1bc3d592 100644
--- a/packages/core/src/page/index.ts
+++ b/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'
diff --git a/packages/core/src/page/renderPageContent.ts b/packages/core/src/page/parsePageContent.ts
similarity index 97%
rename from packages/core/src/page/renderPageContent.ts
rename to packages/core/src/page/parsePageContent.ts
index 3702cd037b..8af9d92b96 100644
--- a/packages/core/src/page/renderPageContent.ts
+++ b/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,
diff --git a/packages/core/src/page/renderPageSfcBlocksToVue.ts b/packages/core/src/page/renderPageSfcBlocksToVue.ts
new file mode 100644
index 0000000000..7428643823
--- /dev/null
+++ b/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')
diff --git a/packages/core/tests/page/renderPageContent.spec.ts b/packages/core/tests/page/parsePageContent.spec.ts
similarity index 82%
rename from packages/core/tests/page/renderPageContent.spec.ts
rename to packages/core/tests/page/parsePageContent.spec.ts
index c4c3e756fd..48331037a4 100644
--- a/packages/core/tests/page/renderPageContent.spec.ts
+++ b/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,11 +78,11 @@ 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,
@@ -90,11 +90,11 @@ describe('page title', () => {
       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,
@@ -102,13 +102,13 @@ describe('page title', () => {
       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',
     })
   })