diff --git a/plugins/plugin-md-power/src/client/config.ts b/plugins/plugin-md-power/src/client/config.ts deleted file mode 100644 index 2f2d6e22..00000000 --- a/plugins/plugin-md-power/src/client/config.ts +++ /dev/null @@ -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 diff --git a/plugins/plugin-md-power/src/node/plugin.ts b/plugins/plugin-md-power/src/node/plugin.ts index ee64e4cf..fa35a4e3 100644 --- a/plugins/plugin-md-power/src/node/plugin.ts +++ b/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) }, } } diff --git a/plugins/plugin-md-power/src/node/prepareConfigFile.ts b/plugins/plugin-md-power/src/node/prepareConfigFile.ts new file mode 100644 index 00000000..24a075cc --- /dev/null +++ b/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() + const enhances = new Set() + + 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')} + } +}) +`, + ) +} diff --git a/plugins/plugin-md-power/src/shared/plugin.ts b/plugins/plugin-md-power/src/shared/plugin.ts index d3cbbfa2..9615b198 100644 --- a/plugins/plugin-md-power/src/shared/plugin.ts +++ b/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 }