refactor: improve hmr code injection

Author: meteorlxy

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

@@ -1,21 +1,20 @@
 import { normalizeRoutePath } from '@vuepress/shared'
 import type { App, Page } from '../../types/index.js'
 
+const ROUTES_VAR_NAME = 'routes'
+const REDIRECTS_VAR_NAME = 'redirects'
+
 const HMR_CODE = `
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept()
-  if (__VUE_HMR_RUNTIME__.updateRoutes) {
-    __VUE_HMR_RUNTIME__.updateRoutes(routes)
-  }
-  if (__VUE_HMR_RUNTIME__.updateRedirects) {
-    __VUE_HMR_RUNTIME__.updateRedirects(redirects)
-  }
+  __VUE_HMR_RUNTIME__.updateRoutes?.(${ROUTES_VAR_NAME})
+  __VUE_HMR_RUNTIME__.updateRedirects?.(${REDIRECTS_VAR_NAME}})
 }
 
 if (import.meta.hot) {
-  import.meta.hot.accept(({ routes, redirects }) => {
-    __VUE_HMR_RUNTIME__.updateRoutes(routes)
-    __VUE_HMR_RUNTIME__.updateRedirects(redirects)
+  import.meta.hot.accept((m) => {
+    __VUE_HMR_RUNTIME__.updateRoutes?.(m.${ROUTES_VAR_NAME})
+    __VUE_HMR_RUNTIME__.updateRedirects?.(m.${REDIRECTS_VAR_NAME})
   })
 }
 `
@@ -47,7 +46,7 @@ const resolvePageRedirects = ({ path, pathInferred }: Page): string[] => {
 export const prepareRoutes = async (app: App): Promise<void> => {
   // routes file content
   let content = `\
-export const redirects = JSON.parse(${JSON.stringify(
+export const ${REDIRECTS_VAR_NAME} = JSON.parse(${JSON.stringify(
     JSON.stringify(
       Object.fromEntries(
         app.pages.flatMap((page) =>
@@ -57,7 +56,7 @@ export const redirects = JSON.parse(${JSON.stringify(
     ),
   )})
 
-export const routes = Object.fromEntries([
+export const ${ROUTES_VAR_NAME} = Object.fromEntries([
 ${app.pages
   .map(
     ({ chunkFilePath, chunkName, path, routeMeta }) =>

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

@@ -1,16 +1,16 @@
 import type { App } from '../../types/index.js'
 
+const SITE_DATA_VAR_NAME = 'siteData'
+
 const HMR_CODE = `
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept()
-  if (__VUE_HMR_RUNTIME__.updateSiteData) {
-    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
-  }
+  __VUE_HMR_RUNTIME__.updateSiteData?.(${SITE_DATA_VAR_NAME})
 }
 
 if (import.meta.hot) {
-  import.meta.hot.accept(({ siteData }) => {
-    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
+  import.meta.hot.accept((m) => {
+    __VUE_HMR_RUNTIME__.updateSiteData?.(m.${SITE_DATA_VAR_NAME})
   })
 }
 `
@@ -20,7 +20,7 @@ if (import.meta.hot) {
  */
 export const prepareSiteData = async (app: App): Promise<void> => {
   let content = `\
-export const siteData = JSON.parse(${JSON.stringify(
+export const ${SITE_DATA_VAR_NAME} = JSON.parse(${JSON.stringify(
     JSON.stringify(app.siteData),
   )})
 `

packages/core/src/page/renderPageToVue.ts

@@ -1,5 +1,5 @@
 import { isString } from '@vuepress/shared'
-import type { Page } from '../types/index.js'
+import type { App, Page } from '../types/index.js'
 
 const TEMPLATE_WRAPPER_TAG_OPEN = '<div>'
 const TEMPLATE_WRAPPER_TAG_CLOSE = '</div>'
@@ -10,21 +10,32 @@ 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 PAGE_DATA_CODE_VAR_NAME = '_pageData'
+const PAGE_DATA_CODE_TEMPLATE_OUTLET = '__PAGE_DATA__'
+const PAGE_DATA_CODE_TEMPLATE = `export const ${PAGE_DATA_CODE_VAR_NAME} = JSON.parse(${PAGE_DATA_CODE_TEMPLATE_OUTLET})`
+
 const HMR_CODE = `
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept()
-  if (__VUE_HMR_RUNTIME__.updatePageData) {
-    __VUE_HMR_RUNTIME__.updatePageData(_pageData)
-  }
+  __VUE_HMR_RUNTIME__.updatePageData?.(${PAGE_DATA_CODE_VAR_NAME})
 }
 
 if (import.meta.hot) {
-  import.meta.hot.accept(({ _pageData }) => {
-    __VUE_HMR_RUNTIME__.updatePageData(_pageData)
+  import.meta.hot.accept((m) => {
+    __VUE_HMR_RUNTIME__.updatePageData?.(m.${PAGE_DATA_CODE_VAR_NAME})
   })
 }
 `
 
+/**
+ * Util to resolve the page data code
+ */
+const resolvePageDataCode = (data: Page['data']): string =>
+  PAGE_DATA_CODE_TEMPLATE.replace(
+    PAGE_DATA_CODE_TEMPLATE_OUTLET,
+    JSON.stringify(JSON.stringify(data)),
+  )
+
 /**
  * Util to resolve the open tag of script block
  */
@@ -43,7 +54,10 @@ const resolveScriptTagOpen = (sfcBlocks: Page['sfcBlocks']): string => {
 /**
  * Render page to vue component
  */
-export const renderPageToVue = ({ data, sfcBlocks }: Page): string => {
+export const renderPageToVue = (
+  app: App,
+  { 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 &&
@@ -56,12 +70,13 @@ export const renderPageToVue = ({ data, sfcBlocks }: Page): string => {
     ].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 scriptTagOpen = resolveScriptTagOpen(sfcBlocks)
+  const pageDataCode = resolvePageDataCode(data)
   const scriptContent = [
-    resolveScriptTagOpen(sfcBlocks),
+    scriptTagOpen,
     sfcBlocks.script?.contentStripped,
     pageDataCode,
-    HMR_CODE,
+    app.env.isDev && HMR_CODE,
     sfcBlocks.script?.tagClose ?? SCRIPT_TAG_CLOSE,
   ]
     .filter(isString)