refactor: updates

eslint.config.ts

@@ -19,6 +19,7 @@ export default vuepress(
             allow: [
               '__dirname',
               '_context',
+              '_pageData',
               '_pageChunk',
               '_registeredComponents',
             ],

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,26 +10,23 @@ 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)
     const page = app.pagesMap[id]
 
     // 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)
   },
 })

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)
   }

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

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

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)

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),
       )
     })
 

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),

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>

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),

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'

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)
 }

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,

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'