From e681fb3f5a73e93c72fb62961eabe3044e3f0f58 Mon Sep 17 00:00:00 2001
From: meteorlxy <meteor.lxy@foxmail.com>
Date: Wed, 11 Sep 2024 12:33:15 +0800
Subject: [PATCH] refactor: updates

---
 eslint.config.ts                              |  1 +
 .../src/plugins/vuepressMarkdownPlugin.ts     | 25 +++---
 .../src/loaders/vuepressMarkdownLoader.ts     | 14 ++--
 .../cli/src/commands/dev/handlePageAdd.ts     | 11 +--
 .../cli/src/commands/dev/handlePageChange.ts  |  9 +--
 .../cli/src/commands/dev/handlePageUnlink.ts  |  1 +
 packages/client/src/components/Content.ts     |  2 +-
 packages/client/src/setupGlobalComputed.ts    | 11 ++-
 packages/client/src/types/routes.ts           |  4 +-
 packages/core/src/app/appPrepare.ts           |  7 +-
 packages/core/src/app/prepare/index.ts        |  1 -
 .../core/src/app/prepare/preparePageChunk.ts  | 32 +-------
 .../src/app/prepare/preparePageComponent.ts   | 17 ----
 packages/core/src/page/createPage.ts          | 15 +---
 packages/core/src/page/index.ts               |  5 +-
 .../core/src/page/renderPageSfcBlocksToVue.ts | 17 ----
 packages/core/src/page/renderPageToVue.ts     | 79 +++++++++++++++++++
 .../core/src/page/resolvePageChunkInfo.ts     | 24 +++++-
 .../core/src/page/resolvePageComponentInfo.ts | 39 ---------
 ...geFileContent.ts => resolvePageContent.ts} | 18 +++--
 packages/core/src/types/page.ts               | 17 +---
 ...ent.spec.ts => resolvePageContent.spec.ts} | 30 +++++--
 22 files changed, 181 insertions(+), 198 deletions(-)
 delete mode 100644 packages/core/src/app/prepare/preparePageComponent.ts
 delete mode 100644 packages/core/src/page/renderPageSfcBlocksToVue.ts
 create mode 100644 packages/core/src/page/renderPageToVue.ts
 delete mode 100644 packages/core/src/page/resolvePageComponentInfo.ts
 rename packages/core/src/page/{resolvePageFileContent.ts => resolvePageContent.ts} (51%)
 rename packages/core/tests/page/{resolvePageFileContent.spec.ts => resolvePageContent.spec.ts} (51%)

diff --git a/eslint.config.ts b/eslint.config.ts
index fa0eed31d7..1cb1edfb7b 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -19,6 +19,7 @@ export default vuepress(
             allow: [
               '__dirname',
               '_context',
+              '_pageData',
               '_pageChunk',
               '_registeredComponents',
             ],
diff --git a/packages/bundler-vite/src/plugins/vuepressMarkdownPlugin.ts b/packages/bundler-vite/src/plugins/vuepressMarkdownPlugin.ts
index eb072f840c..94da9828c8 100644
--- a/packages/bundler-vite/src/plugins/vuepressMarkdownPlugin.ts
+++ b/packages/bundler-vite/src/plugins/vuepressMarkdownPlugin.ts
@@ -1,6 +1,5 @@
 import type { App } from '@vuepress/core'
-import { parsePageContent, renderPageSfcBlocksToVue } from '@vuepress/core'
-import { path } from '@vuepress/utils'
+import { createPage, renderPageToVue } from '@vuepress/core'
 import type { Plugin } from 'vite'
 
 /**
@@ -11,7 +10,7 @@ export const vuepressMarkdownPlugin = ({ app }: { app: App }): Plugin => ({
 
   enforce: 'pre',
 
-  transform(code, id) {
+  async transform(code, id) {
     if (!id.endsWith('.md')) return
 
     // get the matched page by file path (id)
@@ -19,18 +18,15 @@ export const vuepressMarkdownPlugin = ({ app }: { app: App }): Plugin => ({
 
     // if the page content is not changed, render it to vue component directly
     if (page?.content === code) {
-      return renderPageSfcBlocksToVue(page.sfcBlocks)
+      return renderPageToVue(page)
     }
 
-    // parse the markdown content to sfc blocks and render it to vue component
-    const { sfcBlocks } = parsePageContent({
-      app,
+    // create a new page with the new content
+    const newPage = await createPage(app, {
       content: code,
       filePath: id,
-      filePathRelative: path.relative(app.dir.source(), id),
-      options: {},
     })
-    return renderPageSfcBlocksToVue(sfcBlocks)
+    return renderPageToVue(newPage)
   },
 
   async handleHotUpdate(ctx) {
@@ -39,15 +35,12 @@ export const vuepressMarkdownPlugin = ({ app }: { app: App }): Plugin => ({
     // read the source code
     const code = await ctx.read()
 
-    // parse the content to sfc blocks
-    const { sfcBlocks } = parsePageContent({
-      app,
+    // create a new page with the new content
+    const newPage = await createPage(app, {
       content: code,
       filePath: ctx.file,
-      filePathRelative: path.relative(app.dir.source(), ctx.file),
-      options: {},
     })
 
-    ctx.read = () => renderPageSfcBlocksToVue(sfcBlocks)
+    ctx.read = () => renderPageToVue(newPage)
   },
 })
diff --git a/packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.ts b/packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.ts
index d9ca435d14..819dc29f66 100644
--- a/packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.ts
+++ b/packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.ts
@@ -11,8 +11,7 @@ export interface VuepressMarkdownLoaderOptions {
 export const vuepressMarkdownLoader: LoaderDefinitionFunction<VuepressMarkdownLoaderOptions> =
   async function vuepressMarkdownLoader(source) {
     // import esm dependencies
-    const [{ parsePageContent, renderPageSfcBlocksToVue }, { path }] =
-      await Promise.all([import('@vuepress/core'), import('@vuepress/utils')])
+    const { createPage, renderPageToVue } = await import('@vuepress/core')
 
     // get app instance from loader options
     const { app } = this.getOptions()
@@ -22,16 +21,13 @@ export const vuepressMarkdownLoader: LoaderDefinitionFunction<VuepressMarkdownLo
 
     // if the page content is not changed, render it to vue component directly
     if (page?.content === source) {
-      return renderPageSfcBlocksToVue(page.sfcBlocks)
+      return renderPageToVue(page)
     }
 
-    // parse the markdown content to sfc blocks and render it to vue component
-    const { sfcBlocks } = parsePageContent({
-      app,
+    // create a new page with the new content
+    const newPage = await createPage(app, {
       content: source,
       filePath: this.resourcePath,
-      filePathRelative: path.relative(app.dir.source(), this.resourcePath),
-      options: {},
     })
-    return renderPageSfcBlocksToVue(sfcBlocks)
+    return renderPageToVue(newPage)
   }
diff --git a/packages/cli/src/commands/dev/handlePageAdd.ts b/packages/cli/src/commands/dev/handlePageAdd.ts
index bcf5415a97..4c8d7c2512 100644
--- a/packages/cli/src/commands/dev/handlePageAdd.ts
+++ b/packages/cli/src/commands/dev/handlePageAdd.ts
@@ -1,10 +1,5 @@
 import type { App, Page } from '@vuepress/core'
-import {
-  createPage,
-  preparePageChunk,
-  preparePageComponent,
-  prepareRoutes,
-} from '@vuepress/core'
+import { createPage, preparePageChunk, prepareRoutes } from '@vuepress/core'
 
 /**
  * Event handler for page add event
@@ -28,9 +23,9 @@ export const handlePageAdd = async (
 
   // add the new page
   app.pages.push(page)
+  app.pagesMap[filePath] = page
 
-  // prepare page files
-  await preparePageComponent(app, page)
+  // prepare page file
   await preparePageChunk(app, page)
 
   // prepare routes file
diff --git a/packages/cli/src/commands/dev/handlePageChange.ts b/packages/cli/src/commands/dev/handlePageChange.ts
index c2255096f0..c7e29debf6 100644
--- a/packages/cli/src/commands/dev/handlePageChange.ts
+++ b/packages/cli/src/commands/dev/handlePageChange.ts
@@ -1,10 +1,5 @@
 import type { App, Page } from '@vuepress/core'
-import {
-  createPage,
-  preparePageChunk,
-  preparePageComponent,
-  prepareRoutes,
-} from '@vuepress/core'
+import { createPage, preparePageChunk, prepareRoutes } from '@vuepress/core'
 
 /**
  * Event handler for page change event
@@ -31,9 +26,9 @@ export const handlePageChange = async (
 
   // replace the old page with the new page
   app.pages.splice(pageIndex, 1, pageNew)
+  app.pagesMap[filePath] = pageNew
 
   // prepare page files
-  await preparePageComponent(app, pageNew)
   await preparePageChunk(app, pageNew)
 
   const isPathChanged = pageOld.path !== pageNew.path
diff --git a/packages/cli/src/commands/dev/handlePageUnlink.ts b/packages/cli/src/commands/dev/handlePageUnlink.ts
index ad4d01a2c4..40dca36d4e 100644
--- a/packages/cli/src/commands/dev/handlePageUnlink.ts
+++ b/packages/cli/src/commands/dev/handlePageUnlink.ts
@@ -20,6 +20,7 @@ export const handlePageUnlink = async (
 
   // remove the old page
   app.pages.splice(pageIndex, 1)
+  delete app.pagesMap[filePath]
 
   // re-prepare routes file
   await prepareRoutes(app)
diff --git a/packages/client/src/components/Content.ts b/packages/client/src/components/Content.ts
index e58b46214d..c17bc44a3a 100644
--- a/packages/client/src/components/Content.ts
+++ b/packages/client/src/components/Content.ts
@@ -22,7 +22,7 @@ export const Content = defineComponent({
       if (!props.path) return pageComponent.value
       const route = resolveRoute(props.path)
       return defineAsyncComponent(async () =>
-        route.loader().then(({ comp }) => comp),
+        route.loader().then((m) => m.default),
       )
     })
 
diff --git a/packages/client/src/setupGlobalComputed.ts b/packages/client/src/setupGlobalComputed.ts
index e258cb7673..79c8fe459a 100644
--- a/packages/client/src/setupGlobalComputed.ts
+++ b/packages/client/src/setupGlobalComputed.ts
@@ -47,12 +47,15 @@ export const setupGlobalComputed = (
   if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
     __VUE_HMR_RUNTIME__.updatePageData = async (newPageData: PageData) => {
       const oldPageChunk = await routes.value[newPageData.path].loader()
-      const newPageChunk = { comp: oldPageChunk.comp, data: newPageData }
+      const newPageChunk: PageChunk = {
+        default: oldPageChunk.default,
+        _pageData: newPageData,
+      }
       routes.value[newPageData.path].loader = async () =>
         Promise.resolve(newPageChunk)
       if (
         newPageData.path ===
-        router.currentRoute.value.meta._pageChunk?.data.path
+        router.currentRoute.value.meta._pageChunk?._pageData.path
       ) {
         pageChunk.value = newPageChunk
       }
@@ -67,8 +70,8 @@ export const setupGlobalComputed = (
   const siteLocaleData = computed(() =>
     resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value),
   )
-  const pageComponent = computed(() => pageChunk.value.comp)
-  const pageData = computed(() => pageChunk.value.data)
+  const pageComponent = computed(() => pageChunk.value.default)
+  const pageData = computed(() => pageChunk.value._pageData)
   const pageFrontmatter = computed(() => pageData.value.frontmatter)
   const pageHeadTitle = computed(() =>
     resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value),
diff --git a/packages/client/src/types/routes.ts b/packages/client/src/types/routes.ts
index 6aa5d10871..c102dee700 100644
--- a/packages/client/src/types/routes.ts
+++ b/packages/client/src/types/routes.ts
@@ -2,8 +2,8 @@ import type { Component } from 'vue'
 import type { PageData } from '../types/index.js'
 
 export interface PageChunk {
-  comp: Component
-  data: PageData
+  default: Component
+  _pageData: PageData
 }
 
 export type RouteMeta = Record<string, unknown>
diff --git a/packages/core/src/app/appPrepare.ts b/packages/core/src/app/appPrepare.ts
index f8d2585f50..a41f8d72be 100644
--- a/packages/core/src/app/appPrepare.ts
+++ b/packages/core/src/app/appPrepare.ts
@@ -3,7 +3,6 @@ import type { App } from '../types/index.js'
 import {
   prepareClientConfigs,
   preparePageChunk,
-  preparePageComponent,
   prepareRoutes,
   prepareSiteData,
 } from './prepare/index.js'
@@ -13,7 +12,6 @@ const log = debug('vuepress:core/app')
 /**
  * Prepare files for development or build
  *
- * - page components
  * - page chunks
  * - routes
  * - site data
@@ -23,10 +21,7 @@ export const appPrepare = async (app: App): Promise<void> => {
   log('prepare start')
 
   await Promise.all([
-    ...app.pages.flatMap((page) => [
-      preparePageComponent(app, page),
-      preparePageChunk(app, page),
-    ]),
+    ...app.pages.map(async (page) => preparePageChunk(app, page)),
     prepareRoutes(app),
     prepareSiteData(app),
     prepareClientConfigs(app),
diff --git a/packages/core/src/app/prepare/index.ts b/packages/core/src/app/prepare/index.ts
index ea49aa7600..460f3b497f 100644
--- a/packages/core/src/app/prepare/index.ts
+++ b/packages/core/src/app/prepare/index.ts
@@ -1,5 +1,4 @@
 export * from './prepareClientConfigs.js'
 export * from './preparePageChunk.js'
-export * from './preparePageComponent.js'
 export * from './prepareRoutes.js'
 export * from './prepareSiteData.js'
diff --git a/packages/core/src/app/prepare/preparePageChunk.ts b/packages/core/src/app/prepare/preparePageChunk.ts
index 353a98eee1..2ade465418 100644
--- a/packages/core/src/app/prepare/preparePageChunk.ts
+++ b/packages/core/src/app/prepare/preparePageChunk.ts
@@ -1,35 +1,11 @@
+import { renderPageToVue } from '../../page/index.js'
 import type { App, Page } from '../../types/index.js'
 
-const HMR_CODE = `
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept()
-  if (__VUE_HMR_RUNTIME__.updatePageData) {
-    __VUE_HMR_RUNTIME__.updatePageData(data)
-  }
-}
-
-if (import.meta.hot) {
-  import.meta.hot.accept(({ data }) => {
-    __VUE_HMR_RUNTIME__.updatePageData(data)
-  })
-}
-`
-
 /**
- * Generate page chunk temp file of a single page
+ * Generate temp file the page does not have a source file
  */
 export const preparePageChunk = async (app: App, page: Page): Promise<void> => {
-  // page chunk file content
-  let content = `\
-import comp from ${JSON.stringify(page.componentFilePath)}
-const data = JSON.parse(${JSON.stringify(JSON.stringify(page.data))})
-export { comp, data }
-`
-
-  // inject HMR code
-  if (app.env.isDev) {
-    content += HMR_CODE
+  if (page.filePath === null) {
+    await app.writeTemp(page.chunkFilePathRelative, renderPageToVue(page))
   }
-
-  await app.writeTemp(page.chunkFilePathRelative, content)
 }
diff --git a/packages/core/src/app/prepare/preparePageComponent.ts b/packages/core/src/app/prepare/preparePageComponent.ts
deleted file mode 100644
index e88d6123d5..0000000000
--- a/packages/core/src/app/prepare/preparePageComponent.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { renderPageSfcBlocksToVue } from '../../page/index.js'
-import type { App, Page } from '../../types/index.js'
-
-/**
- * Generate page component temp file if the page does not have a source file
- */
-export const preparePageComponent = async (
-  app: App,
-  page: Page,
-): Promise<void> => {
-  if (page.filePath === null) {
-    await app.writeTemp(
-      page.componentFilePathRelative,
-      renderPageSfcBlocksToVue(page.sfcBlocks),
-    )
-  }
-}
diff --git a/packages/core/src/page/createPage.ts b/packages/core/src/page/createPage.ts
index 0c48399162..9965abf4a4 100644
--- a/packages/core/src/page/createPage.ts
+++ b/packages/core/src/page/createPage.ts
@@ -2,9 +2,8 @@ import type { App, Page, PageOptions } from '../types/index.js'
 import { inferPagePath } from './inferPagePath.js'
 import { parsePageContent } from './parsePageContent.js'
 import { resolvePageChunkInfo } from './resolvePageChunkInfo.js'
-import { resolvePageComponentInfo } from './resolvePageComponentInfo.js'
+import { resolvePageContent } from './resolvePageContent.js'
 import { resolvePageDate } from './resolvePageDate.js'
-import { resolvePageFileContent } from './resolvePageFileContent.js'
 import { resolvePageFilePath } from './resolvePageFilePath.js'
 import { resolvePageHtmlInfo } from './resolvePageHtmlInfo.js'
 import { resolvePageLang } from './resolvePageLang.js'
@@ -27,7 +26,7 @@ export const createPage = async (
   })
 
   // read the raw file content according to the absolute file path
-  const content = await resolvePageFileContent({ filePath, options })
+  const content = await resolvePageContent({ filePath, options })
 
   // render page content and extract information
   const {
@@ -81,18 +80,14 @@ export const createPage = async (
     path,
   })
 
-  // resolve page component and extract headers & links
-  const { componentFilePath, componentFilePathRelative } =
-    resolvePageComponentInfo({
+  const { chunkFilePath, chunkFilePathRelative, chunkName } =
+    resolvePageChunkInfo({
       app,
       filePath,
       filePathRelative,
       htmlFilePathRelative,
     })
 
-  const { chunkFilePath, chunkFilePathRelative, chunkName } =
-    resolvePageChunkInfo({ app, htmlFilePathRelative })
-
   const page: Page = {
     // page data
     data: {
@@ -127,8 +122,6 @@ export const createPage = async (
     // file info
     filePath,
     filePathRelative,
-    componentFilePath,
-    componentFilePathRelative,
     chunkFilePath,
     chunkFilePathRelative,
     chunkName,
diff --git a/packages/core/src/page/index.ts b/packages/core/src/page/index.ts
index 6e1bc3d592..e6bc9edd07 100644
--- a/packages/core/src/page/index.ts
+++ b/packages/core/src/page/index.ts
@@ -1,11 +1,10 @@
 export * from './createPage.js'
 export * from './inferPagePath.js'
 export * from './parsePageContent.js'
-export * from './renderPageSfcBlocksToVue.js'
+export * from './renderPageToVue.js'
 export * from './resolvePageChunkInfo.js'
-export * from './resolvePageComponentInfo.js'
 export * from './resolvePageDate.js'
-export * from './resolvePageFileContent.js'
+export * from './resolvePageContent.js'
 export * from './resolvePageFilePath.js'
 export * from './resolvePageHtmlInfo.js'
 export * from './resolvePageLang.js'
diff --git a/packages/core/src/page/renderPageSfcBlocksToVue.ts b/packages/core/src/page/renderPageSfcBlocksToVue.ts
deleted file mode 100644
index 7428643823..0000000000
--- a/packages/core/src/page/renderPageSfcBlocksToVue.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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/src/page/renderPageToVue.ts b/packages/core/src/page/renderPageToVue.ts
new file mode 100644
index 0000000000..849e647d4c
--- /dev/null
+++ b/packages/core/src/page/renderPageToVue.ts
@@ -0,0 +1,79 @@
+import { isString } from '@vuepress/shared'
+import type { Page } from '../types/index.js'
+
+const TEMPLATE_WRAPPER_TAG_OPEN = '<div>'
+const TEMPLATE_WRAPPER_TAG_CLOSE = '</div>'
+
+const SCRIPT_TAG_OPEN = '<script>'
+const SCRIPT_TAG_CLOSE = '</script>'
+
+const SCRIPT_TAG_OPEN_LANG_TS_REGEX = /<\s*script[^>]*\blang=['"]ts['"][^>]*/
+const SCRIPT_TAG_OPEN_LANG_TS = '<script lang="ts">'
+
+const HMR_CODE = `
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(_pageData)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ _pageData }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(_pageData)
+  })
+}
+`
+
+/**
+ * Util to resolve the open tag of script block
+ */
+const resolveScriptTagOpen = (sfcBlocks: Page['sfcBlocks']): string => {
+  // use existing script open tag
+  if (sfcBlocks.script?.tagOpen) {
+    return sfcBlocks.script.tagOpen
+  }
+  // if the setup script block is using typescript, we should use the same language for script block
+  const isUsingTs = sfcBlocks.scriptSetup?.tagOpen.match(
+    SCRIPT_TAG_OPEN_LANG_TS_REGEX,
+  )
+  return isUsingTs ? SCRIPT_TAG_OPEN_LANG_TS : SCRIPT_TAG_OPEN
+}
+
+/**
+ * Render page to vue component
+ */
+export const renderPageToVue = ({ data, sfcBlocks }: Page): string => {
+  // #688: wrap the content of `<template>` with a `<div>` to avoid some potential issues of fragment component
+  const templateContent =
+    sfcBlocks.template &&
+    [
+      sfcBlocks.template.tagOpen,
+      TEMPLATE_WRAPPER_TAG_OPEN,
+      sfcBlocks.template.contentStripped,
+      TEMPLATE_WRAPPER_TAG_CLOSE,
+      sfcBlocks.template.tagClose,
+    ].join('')
+
+  // inject page data code and HMR code into the script content
+  const pageDataCode = `export const _pageData = JSON.parse(${JSON.stringify(JSON.stringify(data))})`
+  const scriptContent = [
+    resolveScriptTagOpen(sfcBlocks),
+    sfcBlocks.script?.contentStripped,
+    pageDataCode,
+    HMR_CODE,
+    sfcBlocks.script?.tagClose ?? SCRIPT_TAG_CLOSE,
+  ]
+    .filter(isString)
+    .join('\n')
+
+  return [
+    templateContent,
+    scriptContent,
+    sfcBlocks.scriptSetup?.content,
+    ...sfcBlocks.styles.map((item) => item.content),
+    ...sfcBlocks.customBlocks.map((item) => item.content),
+  ]
+    .filter(isString)
+    .join('\n')
+}
diff --git a/packages/core/src/page/resolvePageChunkInfo.ts b/packages/core/src/page/resolvePageChunkInfo.ts
index 037018c6cc..b297794c04 100644
--- a/packages/core/src/page/resolvePageChunkInfo.ts
+++ b/packages/core/src/page/resolvePageChunkInfo.ts
@@ -2,23 +2,41 @@ import { path, transformPathToFileName } from '@vuepress/utils'
 import type { App } from '../types/index.js'
 
 /**
- * Resolve page data file path
+ * Resolve page chunk file relative info
  */
 export const resolvePageChunkInfo = ({
   app,
+  filePath,
+  filePathRelative,
   htmlFilePathRelative,
 }: {
   app: App
+  filePath: string | null
+  filePathRelative: string | null
   htmlFilePathRelative: string
 }): {
   chunkFilePath: string
   chunkFilePathRelative: string
   chunkName: string
 } => {
-  const chunkFilePathRelative = path.join('pages', `${htmlFilePathRelative}.js`)
-  const chunkFilePath = app.dir.temp(chunkFilePathRelative)
   const chunkName = transformPathToFileName(htmlFilePathRelative)
 
+  // if there is a source file for the page, use it directly as the page chunk
+  if (filePath && filePathRelative) {
+    return {
+      chunkFilePath: filePath,
+      chunkFilePathRelative: filePathRelative,
+      chunkName,
+    }
+  }
+
+  // otherwise, generate a temp file for the page
+  const chunkFilePathRelative = path.join(
+    'pages',
+    `${htmlFilePathRelative}.vue`,
+  )
+  const chunkFilePath = app.dir.temp(chunkFilePathRelative)
+
   return {
     chunkFilePath,
     chunkFilePathRelative,
diff --git a/packages/core/src/page/resolvePageComponentInfo.ts b/packages/core/src/page/resolvePageComponentInfo.ts
deleted file mode 100644
index 2105bdb187..0000000000
--- a/packages/core/src/page/resolvePageComponentInfo.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { path } from '@vuepress/utils'
-import type { App } from '../types/index.js'
-
-/**
- * Resolve page component and related info
- */
-export const resolvePageComponentInfo = ({
-  app,
-  filePath,
-  filePathRelative,
-  htmlFilePathRelative,
-}: {
-  app: App
-  filePath: string | null
-  filePathRelative: string | null
-  htmlFilePathRelative: string
-}): {
-  componentFilePath: string
-  componentFilePathRelative: string
-} => {
-  // if there is a source file for the page, use it as the component file
-  if (filePath && filePathRelative) {
-    return {
-      componentFilePath: filePath,
-      componentFilePathRelative: filePathRelative,
-    }
-  }
-  // otherwise, generate a component file for the page
-  const componentFilePathRelative = path.join(
-    'pages',
-    `${htmlFilePathRelative}.vue`,
-  )
-  const componentFilePath = app.dir.temp(componentFilePathRelative)
-
-  return {
-    componentFilePath,
-    componentFilePathRelative,
-  }
-}
diff --git a/packages/core/src/page/resolvePageFileContent.ts b/packages/core/src/page/resolvePageContent.ts
similarity index 51%
rename from packages/core/src/page/resolvePageFileContent.ts
rename to packages/core/src/page/resolvePageContent.ts
index e05bf9a501..c4bda0732b 100644
--- a/packages/core/src/page/resolvePageFileContent.ts
+++ b/packages/core/src/page/resolvePageContent.ts
@@ -1,21 +1,30 @@
+import { isString } from '@vuepress/shared'
 import { debug, fs } from '@vuepress/utils'
 import type { PageOptions } from '../types/index.js'
 
 const log = debug('vuepress:core/page')
 
+// fallback to empty string
+const FALLBACK_CONTENT = ''
+
 /**
- * Resolve page file content according to filePath or options content
+ * Resolve page content according to `content` or `filePath`
  */
-export const resolvePageFileContent = async ({
+export const resolvePageContent = async ({
   filePath,
   options,
 }: {
   filePath: string | null
   options: PageOptions
 }): Promise<string> => {
+  // if `content` is provided by options, use it directly
+  if (isString(options.content)) {
+    return options.content
+  }
+
+  // if `filePath` is resolved, read content from file
   if (filePath) {
     try {
-      // read page content from file
       const content = await fs.readFile(filePath, 'utf-8')
       return content
     } catch (e) {
@@ -23,6 +32,5 @@ export const resolvePageFileContent = async ({
     }
   }
 
-  // load raw content from options
-  return options.content ?? ''
+  return FALLBACK_CONTENT
 }
diff --git a/packages/core/src/types/page.ts b/packages/core/src/types/page.ts
index 178fec9782..ade17a2fd8 100644
--- a/packages/core/src/types/page.ts
+++ b/packages/core/src/types/page.ts
@@ -104,16 +104,6 @@ export type Page<
      */
     filePathRelative: string | null
 
-    /**
-     * Component file path
-     */
-    componentFilePath: string
-
-    /**
-     * Component file path relative to temp directory
-     */
-    componentFilePathRelative: string
-
     /**
      * Chunk file path
      */
@@ -147,11 +137,10 @@ export type Page<
  */
 export interface PageOptions {
   /**
-   * If `filePath` is not set, this option will be used as the raw
-   * markdown content of the page.
+   * The raw markdown content of the page.
    *
-   * If `filePath` is set, this option will be ignored, while the
-   * content of the file will be used.
+   * If `content` is not provided, the file content of the `filePath`
+   * will be used.
    */
   content?: string
 
diff --git a/packages/core/tests/page/resolvePageFileContent.spec.ts b/packages/core/tests/page/resolvePageContent.spec.ts
similarity index 51%
rename from packages/core/tests/page/resolvePageFileContent.spec.ts
rename to packages/core/tests/page/resolvePageContent.spec.ts
index 41f92f9132..f7a22b50b4 100644
--- a/packages/core/tests/page/resolvePageFileContent.spec.ts
+++ b/packages/core/tests/page/resolvePageContent.spec.ts
@@ -1,10 +1,10 @@
 import { fs, path } from '@vuepress/utils'
 import { expect, it } from 'vitest'
-import { resolvePageFileContent } from '../../src/index.js'
+import { resolvePageContent } from '../../src/index.js'
 
 it('should resolve file content correctly from file path', async () => {
   const filePath = path.resolve(__dirname, '../__fixtures__/pages/foo.md')
-  const resolved = await resolvePageFileContent({ filePath, options: {} })
+  const resolved = await resolvePageContent({ filePath, options: {} })
 
   const expected = (await fs.readFile(filePath)).toString()
   expect(resolved).toBe(expected)
@@ -12,24 +12,40 @@ it('should resolve file content correctly from file path', async () => {
 
 it('should use content from page options', async () => {
   const content = 'foobar'
-  const resolved = await resolvePageFileContent({
+  const resolved = await resolvePageContent({
     filePath: null,
     options: { content },
   })
-  expect(resolved).toBe(resolved)
+
+  const expected = content
+  expect(resolved).toBe(expected)
 })
 
 it('should return empty string if nothing provided', async () => {
-  const resolved = await resolvePageFileContent({
+  const resolved = await resolvePageContent({
     filePath: null,
     options: {},
   })
-  expect(resolved).toBe('')
+
+  const expected = ''
+  expect(resolved).toBe(expected)
+})
+
+it('should use content from page options and ignore file path', async () => {
+  const filePath = path.resolve(__dirname, '../__fixtures__/pages/foo.md')
+  const content = 'foobar'
+  const resolved = await resolvePageContent({
+    filePath,
+    options: { content },
+  })
+
+  const expected = content
+  expect(resolved).toBe(expected)
 })
 
 it('should throw error if the file does not exist', async () => {
   try {
-    await resolvePageFileContent({
+    await resolvePageContent({
       filePath: '404',
       options: {},
     })