refactor: updates

Author: meteorlxy

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