refactor: remove temp page files and load page component via bundler

Author: meteorlxy

e2e/docs/.vuepress/components/ComponentForMarkdownImport.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="component-for-markdown-import-bar">
+    <p>component for markdown import bar</p>
+  </div>
+</template>

e2e/docs/.vuepress/components/ComponentForMarkdownImportBar.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="component-for-markdown-import-foo">
+    <p>component for markdown import foo</p>
+  </div>
+</template>

e2e/docs/.vuepress/components/ComponentForMarkdownImportFoo.vue

@@ -0,0 +1,5 @@
+<div class="dangling-markdown-file">
+
+dangling markdown file
+
+</div>

e2e/docs/.vuepress/markdowns/dangling-markdown-file.md

@@ -1,3 +1,5 @@
 foo
 
 ## Home H2
+
+demo

e2e/docs/README.md

@@ -1,8 +1,13 @@
 <ComponentForMarkdownGlobal />
 
-<ComponentForMarkdownImport />
+<ComponentForMarkdownImportFoo />
+
+<ComponentForMarkdownImportBar />
 
 <script setup>
-// TODO: relative path import?
-import ComponentForMarkdownImport from '@source/.vuepress/components/ComponentForMarkdownImport.vue';
+// import via alias
+import ComponentForMarkdownImportFoo from '@source/.vuepress/components/ComponentForMarkdownImportFoo.vue';
+
+// import via relative path
+import ComponentForMarkdownImportBar from '../.vuepress/components/ComponentForMarkdownImportBar.vue';
 </script>

e2e/docs/markdown/vue-components.md

@@ -6,7 +6,10 @@ test('should render vue components correctly', async ({ page }) => {
   await expect(page.locator('.component-for-markdown-global p')).toHaveText(
     'component for markdown global',
   )
-  await expect(page.locator('.component-for-markdown-import p')).toHaveText(
-    'component for markdown import',
+  await expect(page.locator('.component-for-markdown-import-foo p')).toHaveText(
+    'component for markdown import foo',
+  )
+  await expect(page.locator('.component-for-markdown-import-bar p')).toHaveText(
+    'component for markdown import bar',
   )
 })

e2e/tests/markdown/vue-components.spec.ts

@@ -1,5 +1,6 @@
 export * from './vuepressBuildPlugin.js'
 export * from './vuepressConfigPlugin.js'
 export * from './vuepressDevPlugin.js'
+export * from './vuepressMarkdownPlugin.js'
 export * from './vuepressUserConfigPlugin.js'
 export * from './vuepressVuePlugin.js'

packages/bundler-vite/src/plugins/index.ts

@@ -0,0 +1,53 @@
+import type { App } from '@vuepress/core'
+import { parsePageContent, renderPageSfcBlocksToVue } from '@vuepress/core'
+import { path } from '@vuepress/utils'
+import type { Plugin } from 'vite'
+
+/**
+ * Handle markdown transformation
+ */
+export const vuepressMarkdownPlugin = ({ app }: { app: App }): Plugin => ({
+  name: 'vuepress:markdown',
+
+  enforce: 'pre',
+
+  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)
+    }
+
+    // parse the markdown content to sfc blocks and render it to vue component
+    const { sfcBlocks } = parsePageContent({
+      app,
+      content: code,
+      filePath: id,
+      filePathRelative: path.relative(app.dir.source(), id),
+      options: {},
+    })
+    return renderPageSfcBlocksToVue(sfcBlocks)
+  },
+
+  async handleHotUpdate(ctx) {
+    if (!ctx.file.endsWith('.md')) return
+
+    // read the source code
+    const code = await ctx.read()
+
+    // parse the content to sfc blocks
+    const { sfcBlocks } = parsePageContent({
+      app,
+      content: code,
+      filePath: ctx.file,
+      filePathRelative: path.relative(app.dir.source(), ctx.file),
+      options: {},
+    })
+
+    ctx.read = () => renderPageSfcBlocksToVue(sfcBlocks)
+  },
+})

packages/bundler-vite/src/plugins/vuepressMarkdownPlugin.ts

@@ -11,5 +11,6 @@ export const vuepressVuePlugin = ({
   options: ViteBundlerOptions
 }): Plugin =>
   vuePlugin({
+    include: [/\.vue$/, /\.md$/],
     ...options.vuePluginOptions,
   })