perf(plugin-md-power): optimize client config output

plugins/plugin-md-power/src/client/config.ts

@@ -1,45 +0,0 @@
-import { defineClientConfig } from 'vuepress/client'
-import type { ClientConfig } from 'vuepress/client'
-import { pluginOptions } from './options.js'
-import { setupCanIUse } from './composables/setupCanIUse.js'
-import PDFViewer from './components/PDFViewer.vue'
-import Bilibili from './components/Bilibili.vue'
-import Youtube from './components/Youtube.vue'
-import Replit from './components/Replit.vue'
-import CodeSandbox from './components/CodeSandbox.vue'
-import Plot from './components/Plot.vue'
-
-import '@internal/md-power/icons.css'
-
-declare const __VUEPRESS_SSR__: boolean
-
-export default defineClientConfig({
-  enhance({ router, app }) {
-    if (pluginOptions.pdf)
-      app.component('PDFViewer', PDFViewer)
-
-    if (pluginOptions.bilibili)
-      app.component('VideoBilibili', Bilibili)
-
-    if (pluginOptions.youtube)
-      app.component('VideoYoutube', Youtube)
-
-    if (pluginOptions.replit)
-      app.component('ReplitViewer', Replit)
-
-    if (pluginOptions.codeSandbox)
-      app.component('CodeSandboxViewer', CodeSandbox)
-
-    if (pluginOptions.plot)
-      app.component('Plot', Plot)
-
-    if (__VUEPRESS_SSR__)
-      return
-
-    if (pluginOptions.caniuse) {
-      router.afterEach(() => {
-        setupCanIUse()
-      })
-    }
-  },
-}) as ClientConfig

plugins/plugin-md-power/src/node/plugin.ts

@@ -1,5 +1,4 @@
 import type { Plugin } from 'vuepress/core'
-import { getDirname, path } from 'vuepress/utils'
 import type { CanIUseOptions, MarkdownPowerPluginOptions } from '../shared/index.js'
 import { caniusePlugin, legacyCaniuse } from './features/caniuse.js'
 import { pdfPlugin } from './features/pdf.js'
@@ -11,8 +10,8 @@ import { replitPlugin } from './features/replit.js'
 import { codeSandboxPlugin } from './features/codeSandbox.js'
 import { jsfiddlePlugin } from './features/jsfiddle.js'
 import { plotPlugin } from './features/plot.js'
-
-const __dirname = getDirname(import.meta.url)
+import { langReplPlugin } from './features/langRepl.js'
+import { prepareConfigFile } from './prepareConfigFile.js'
 
 export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): Plugin {
   return (app) => {
@@ -21,7 +20,8 @@ export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): P
     return {
       name: '@vuepress-plume/plugin-md-power',
 
-      clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+      // clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+      clientConfigFile: app => prepareConfigFile(app, options),
 
       define: {
         __MD_POWER_INJECT_OPTIONS__: options,
@@ -85,6 +85,9 @@ export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): P
           // =|plot|=
           md.use(plotPlugin)
         }
+
+        if (options.repl)
+          langReplPlugin(md)
       },
     }
   }

plugins/plugin-md-power/src/node/prepareConfigFile.ts

@@ -0,0 +1,76 @@
+import { getDirname, path } from 'vuepress/utils'
+import { ensureEndingSlash } from '@vuepress/helper'
+import type { App } from 'vuepress/core'
+import type { MarkdownPowerPluginOptions } from '../shared/index.js'
+
+const { url: filepath } = import.meta
+const __dirname = getDirname(filepath)
+
+const CLIENT_FOLDER = ensureEndingSlash(
+  path.resolve(__dirname, '../client'),
+)
+
+export async function prepareConfigFile(app: App, options: MarkdownPowerPluginOptions) {
+  const imports = new Set<string>()
+  const enhances = new Set<string>()
+
+  imports.add(`import '@internal/md-power/icons.css'`)
+
+  if (options.pdf) {
+    imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`)
+    enhances.add(`app.component('PDFViewer', PDFViewer)`)
+  }
+
+  if (options.bilibili) {
+    imports.add(`import Bilibili from '${CLIENT_FOLDER}components/Bilibili.vue'`)
+    enhances.add(`app.component('VideoBilibili', Bilibili)`)
+  }
+
+  if (options.youtube) {
+    imports.add(`import Youtube from '${CLIENT_FOLDER}components/Youtube.vue'`)
+    enhances.add(`app.component('VideoYoutube', Youtube)`)
+  }
+
+  if (options.replit) {
+    imports.add(`import Replit from '${CLIENT_FOLDER}components/Replit.vue'`)
+    enhances.add(`app.component('ReplitViewer', Replit)`)
+  }
+
+  if (options.codeSandbox) {
+    imports.add(`import CodeSandbox from '${CLIENT_FOLDER}components/CodeSandbox.vue'`)
+    enhances.add(`app.component('CodeSandboxViewer', CodeSandbox)`)
+  }
+
+  if (options.plot) {
+    imports.add(`import Plot from '${CLIENT_FOLDER}components/Plot.vue'`)
+    enhances.add(`app.component('Plot', Plot)`)
+  }
+
+  if (options.repl) {
+    imports.add(`import LanguageRepl from '${CLIENT_FOLDER}components/LanguageRepl.vue'`)
+    enhances.add(`app.component('LanguageRepl', LanguageRepl)`)
+  }
+
+  enhances.add(`if (__VUEPRESS_SSR__) return`)
+
+  if (options.caniuse) {
+    imports.add(`import { setupCanIUse } from '${CLIENT_FOLDER}composables/setupCanIUse.js'`)
+    enhances.add(`router.afterEach(() => setupCanIUse())`)
+  }
+
+  return app.writeTemp(
+    'md-power/config.js',
+    `\
+import { defineClientConfig } from 'vuepress/client'
+${Array.from(imports.values()).join('\n')}
+
+export default defineClientConfig({
+  enhance({ router, app }) {
+${Array.from(enhances.values())
+      .map(item => `    ${item}`)
+      .join('\n')}
+  }
+})
+`,
+  )
+}

plugins/plugin-md-power/src/shared/plugin.ts

@@ -20,5 +20,8 @@ export interface MarkdownPowerPluginOptions {
   codeSandbox?: boolean
   jsfiddle?: boolean
 
+  // container
+  repl?: boolean
+
   caniuse?: boolean | CanIUseOptions
 }