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

- feat: support importing module via relative paths in page files
- feat: support importing markdown as vue component

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,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-foo p')).toHaveText(
+    'component for markdown import bar',
   )
 })

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

@@ -1,5 +1,6 @@
 import type { App } from '@vuepress/core'
-import { fs, sanitizeFileName } from '@vuepress/utils'
+import { parsePageContent, renderPageSfcBlocksToVue } from '@vuepress/core'
+import { fs, path, sanitizeFileName } from '@vuepress/utils'
 import autoprefixer from 'autoprefixer'
 import history from 'connect-history-api-fallback'
 import type { AcceptedPlugin } from 'postcss'
@@ -189,6 +190,25 @@ export const vuepressMainPlugin = ({
     }
   },
 
+  transform(code, id) {
+    if (!id.endsWith('.md')) return undefined
+
+    // if this is a page source file, render its sfc blocks to vue component directly
+    if (app.pagesMap[id]) {
+      return renderPageSfcBlocksToVue(app.pagesMap[id].sfcBlocks)
+    }
+
+    // if this is a dangling markdown file, parse its content to sfc blocks and render to vue component
+    const { sfcBlocks } = parsePageContent({
+      app,
+      content: code,
+      filePath: id,
+      filePathRelative: path.relative(app.dir.source(), id),
+      options: {},
+    })
+    return renderPageSfcBlocksToVue(sfcBlocks)
+  },
+
   generateBundle(_, bundle) {
     // delete all asset outputs in server build
     if (isServer) {

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

@@ -7,5 +7,6 @@ import type { ViteBundlerOptions } from '../types.js'
  */
 export const vuepressVuePlugin = (options: ViteBundlerOptions): Plugin =>
   vuePlugin({
+    include: [/\.vue$/, /\.md$/],
     ...options.vuePluginOptions,
   })

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

@@ -20,6 +20,7 @@
   "author": "meteorlxy",
   "type": "module",
   "imports": {
+    "#vuepress-markdown-loader": "./dist/vuepress-markdown-loader.cjs",
     "#vuepress-ssr-loader": "./dist/vuepress-ssr-loader.cjs"
   },
   "exports": {

packages/bundler-webpack/package.json

@@ -1,4 +1,3 @@
-import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
 import { fs } from '@vuepress/utils'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
@@ -10,8 +9,6 @@ import { createClientBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 import { createClientPlugin } from './createClientPlugin.js'
 
-const require = createRequire(import.meta.url)
-
 /**
  * Filename of the client manifest file that generated by client plugin
  */
@@ -27,15 +24,6 @@ export const createClientConfig = async (
     isBuild: true,
   })
 
-  // use internal vuepress-ssr-loader to handle SSR dependencies
-  config.module
-    .rule('vue')
-    .test(/\.vue$/)
-    .use('vuepress-ssr-loader')
-    .before('vue-loader')
-    .loader(require.resolve('#vuepress-ssr-loader'))
-    .end()
-
   // vuepress client plugin, handle client assets info for ssr
   config
     .plugin('vuepress-client')

packages/bundler-webpack/src/build/createClientConfig.ts

@@ -1,11 +1,8 @@
-import { createRequire } from 'node:module'
 import type { App } from '@vuepress/core'
 import type Config from 'webpack-5-chain'
 import { createBaseConfig } from '../config/index.js'
 import type { WebpackBundlerOptions } from '../types.js'
 
-const require = createRequire(import.meta.url)
-
 export const createServerConfig = async (
   app: App,
   options: WebpackBundlerOptions,
@@ -43,17 +40,5 @@ export const createServerConfig = async (
   // do not need to minimize server bundle
   config.optimization.minimize(false)
 
-  // use internal vuepress-ssr-loader to handle SSR dependencies
-  config.module
-    .rule('vue')
-    .test(/\.vue$/)
-    .use('vuepress-ssr-loader')
-    .before('vue-loader')
-    .loader(require.resolve('#vuepress-ssr-loader'))
-    .options({
-      app,
-    })
-    .end()
-
   return config
 }

packages/bundler-webpack/src/build/createServerConfig.ts

@@ -52,7 +52,7 @@ export const createBaseConfig = async ({
   /**
    * module
    */
-  handleModule({ options, config, isBuild, isServer })
+  handleModule({ app, options, config, isBuild, isServer })
 
   /**
    * plugins

packages/bundler-webpack/src/config/createBaseConfig.ts

@@ -1,3 +1,4 @@
+import type { App } from '@vuepress/core'
 import type Config from 'webpack-5-chain'
 import type { WebpackBundlerOptions } from '../types.js'
 import { handleModuleAssets } from './handleModuleAssets.js'
@@ -11,11 +12,13 @@ import { handleModuleVue } from './handleModuleVue.js'
  * Set webpack module
  */
 export const handleModule = ({
+  app,
   options,
   config,
   isBuild,
   isServer,
 }: {
+  app: App
   options: WebpackBundlerOptions
   config: Config
   isBuild: boolean
@@ -27,7 +30,7 @@ export const handleModule = ({
   )
 
   // vue files
-  handleModuleVue({ options, config, isServer })
+  handleModuleVue({ app, options, config, isBuild, isServer })
 
   // pug files, for templates
   handleModulePug({ config })

packages/bundler-webpack/src/config/handleModule.ts

@@ -1,7 +1,9 @@
 import { createRequire } from 'node:module'
+import type { App } from '@vuepress/core'
 import type { VueLoaderOptions } from 'vue-loader'
 import { VueLoaderPlugin } from 'vue-loader'
 import type Config from 'webpack-5-chain'
+import type { VuepressMarkdownLoaderOptions } from '../loaders/vuepressMarkdownLoader'
 import type { WebpackBundlerOptions } from '../types.js'
 
 const require = createRequire(import.meta.url)
@@ -10,26 +12,62 @@ const require = createRequire(import.meta.url)
  * Set webpack module to handle vue files
  */
 export const handleModuleVue = ({
+  app,
   options,
   config,
+  isBuild,
   isServer,
 }: {
+  app: App
   options: WebpackBundlerOptions
   config: Config
+  isBuild: boolean
   isServer: boolean
 }): void => {
-  // .vue files
-  config.module
-    .rule('vue')
-    .test(/\.vue$/)
-    // use vue-loader
-    .use('vue-loader')
-    .loader(require.resolve('vue-loader'))
-    .options({
-      ...options.vue,
-      isServerBuild: isServer,
-    } as VueLoaderOptions)
-    .end()
+  const applyVuePipeline = ({
+    rule,
+    isMd,
+  }: {
+    rule: Config.Rule
+    isMd: boolean
+  }): void => {
+    // use internal vuepress-ssr-loader to handle SSR dependencies
+    if (isBuild) {
+      rule
+        .use('vuepress-ssr-loader')
+        .loader(require.resolve('#vuepress-ssr-loader'))
+        .end()
+    }
+
+    // use official vue-loader
+    rule
+      .use('vue-loader')
+      .loader(require.resolve('vue-loader'))
+      .options({
+        ...options.vue,
+        isServerBuild: isServer,
+      } satisfies VueLoaderOptions)
+      .end()
+
+    // use internal vuepress-markdown-loader to handle markdown files
+    if (isMd) {
+      rule
+        .use('vuepress-markdown-loader')
+        .loader(require.resolve('#vuepress-markdown-loader'))
+        .options({ app } satisfies VuepressMarkdownLoaderOptions)
+        .end()
+    }
+  }
+
+  applyVuePipeline({
+    rule: config.module.rule('md').test(/\.md$/),
+    isMd: true,
+  })
+
+  applyVuePipeline({
+    rule: config.module.rule('vue').test(/\.vue$/),
+    isMd: false,
+  })
 
   // use vue-loader plugin
   config.plugin('vue-loader').use(VueLoaderPlugin)

packages/bundler-webpack/src/config/handleModuleVue.ts

@@ -0,0 +1,3 @@
+const loader = require('./vuepressMarkdownLoader.js')
+
+module.exports = loader.vuepressMarkdownLoader

packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.cts

@@ -0,0 +1,32 @@
+import type { App } from '@vuepress/core'
+import type { LoaderDefinitionFunction } from 'webpack'
+
+export interface VuepressMarkdownLoaderOptions {
+  app: App
+}
+
+/**
+ * A webpack loader to transform markdown content to vue component
+ */
+export const vuepressMarkdownLoader: LoaderDefinitionFunction<VuepressMarkdownLoaderOptions> =
+  async function vuepressMarkdownLoader(source) {
+    const { app } = this.getOptions()
+    const [{ parsePageContent, renderPageSfcBlocksToVue }, { path }] =
+      await Promise.all([import('@vuepress/core'), import('@vuepress/utils')])
+
+    // if this is a page source file, render its sfc blocks to vue component directly
+    const page = app.pagesMap[this.resourcePath]
+    if (page) {
+      return renderPageSfcBlocksToVue(page.sfcBlocks)
+    }
+
+    // if this is a dangling markdown file, parse its content to sfc blocks and render to vue component
+    const { sfcBlocks } = parsePageContent({
+      app,
+      content: source,
+      filePath: this.resourcePath,
+      filePathRelative: path.relative(app.dir.source(), this.resourcePath),
+      options: {},
+    })
+    return renderPageSfcBlocksToVue(sfcBlocks)
+  }

packages/bundler-webpack/src/loaders/vuepressMarkdownLoader.ts

@@ -1,32 +1,3 @@
-import type { LoaderDefinitionFunction } from 'webpack'
+const loader = require('./vuepressSsrLoader.js')
 
-/**
- * A webpack loader to handle SSR dependencies
- *
- * This loader will only take effect in server bundle
- * because we only replace `ssrRender` code
- *
- * But we still need to use this loader in client,
- * to ensure that the module `request` in client and
- * server bundle are the same
- */
-const vuepressSsrLoader: LoaderDefinitionFunction = function (source) {
-  if (!this.request.endsWith('.vue')) return source
-
-  // add `request` to `ssrContext._registeredComponents` to handle SSR dependencies
-  // notice that this could only handle those sfc that cannot use inline template
-  // see https://github.com/vuejs/vue-loader/blob/1b1a195612f885a8dec3f371edf1cb8b35d341e4/src/index.ts#L167-L183
-  return source.replace(
-    /import { ssrRender } from (.*)\n/,
-    `import { ssrRender as _ssrRender } from $1
-import { ssrContextKey } from 'vue'
-const ssrRender = (...args) => {
-  const ssrContext = args[2].appContext.provides[ssrContextKey]
-  ssrContext._registeredComponents.add(${JSON.stringify(this.request)})
-  return _ssrRender(...args)
-}
-`,
-  )
-}
-
-module.exports = vuepressSsrLoader
+module.exports = loader.vuepressSsrLoader

packages/bundler-webpack/src/loaders/vuepressSsrLoader.cts

@@ -0,0 +1,29 @@
+import type { LoaderDefinitionFunction } from 'webpack'
+
+/**
+ * A webpack loader to handle SSR dependencies
+ *
+ * This loader will only take effect in server bundle
+ * because we only replace `ssrRender` code
+ *
+ * But we still need to use this loader in client,
+ * to ensure that the module `request` in client and
+ * server bundle are the same
+ */
+export const vuepressSsrLoader: LoaderDefinitionFunction =
+  function vuepressSsrLoader(source) {
+    // add `request` to `ssrContext._registeredComponents` to handle SSR dependencies
+    // notice that this could only handle those sfc that cannot use inline template
+    // see https://github.com/vuejs/vue-loader/blob/1b1a195612f885a8dec3f371edf1cb8b35d341e4/src/index.ts#L167-L183
+    return source.replace(
+      /import { ssrRender } from (.*)\n/,
+      `import { ssrRender as _ssrRender } from $1
+import { ssrContextKey } from 'vue'
+const ssrRender = (...args) => {
+  const ssrContext = args[2].appContext.provides[ssrContextKey]
+  ssrContext._registeredComponents.add(${JSON.stringify(this.request)})
+  return _ssrRender(...args)
+}
+`,
+    )
+  }

packages/bundler-webpack/src/loaders/vuepressSsrLoader.ts

@@ -18,6 +18,7 @@ export default defineConfig([
   {
     ...shared,
     entry: {
+      'vuepress-markdown-loader': './src/loaders/vuepressMarkdownLoader.cts',
       'vuepress-ssr-loader': './src/loaders/vuepressSsrLoader.cts',
     },
     format: ['cjs'],