vuepress-plugin-md-power 1.0.0-rc.53 → 1.0.0-rc.54

package/lib/client/components/CanIUse.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+interface MessageData {
+  type: string
+  payload?: {
+    feature?: string
+    meta?: string
+    height: number
+  }
+}
+
+const props = withDefaults(defineProps<{
+  feature: string
+  past?: string
+  future?: string
+  meta?: string
+}>(), {
+  past: '2',
+  future: '1',
+  meta: '',
+})
+
+const url = 'https://caniuse.pengzhanbo.cn/'
+const current = getCurrentInstance()
+
+const height = ref('330px')
+
+const isDark = computed(() => current?.appContext.config.globalProperties.$isDark.value)
+const source = computed(() => {
+  const source = `${url}${props.feature}#past=${props.past}&future=${props.future}&meta=${props.meta}&theme=${isDark.value ? 'dark' : 'light'}`
+
+  return source
+})
+
+useEventListener('message', (event) => {
+  const data = parseData(event.data)
+  const { type, payload } = data
+  if (
+    type === 'ciu_embed'
+      && payload
+      && payload.feature === props.feature
+      && payload.meta === props.meta
+  )
+    height.value = `${Math.ceil(payload.height)}px`
+})
+
+function parseData(data: string | MessageData): MessageData {
+  if (typeof data === 'string') {
+    try {
+      return JSON.parse(data)
+    }
+    catch {
+      return { type: '' }
+    }
+  }
+  return data
+}
+</script>
+
+<template>
+  <div
+    class="ciu_embed"
+    :data-feature="feature"
+    :data-meta="meta"
+    :data-past="past"
+    :data-future="future"
+  >
+    <iframe
+      :src="source"
+      :style="{ height }"
+      :title="`Can I use ${feature}`"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ciu_embed {
+  margin: 16px -24px;
+}
+
+.ciu_embed iframe {
+  width: 100%;
+  border: none;
+}
+
+@media (min-width: 768px) {
+  .ciu_embed {
+    margin: 16px 0;
+  }
+}
+</style>

package/lib/client/components/IconClose.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
+    />
+  </svg>
+</template>

package/lib/client/components/IconConsole.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M20 19V7H4v12zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-7 14v-2h5v2zm-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59z"
+    />
+  </svg>
+</template>

package/lib/client/components/IconRun.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M21.409 9.353a2.998 2.998 0 0 1 0 5.294L8.597 21.614C6.534 22.737 4 21.277 4 18.968V5.033c0-2.31 2.534-3.769 4.597-2.648z"
+    />
+  </svg>
+</template>

package/lib/client/components/LanguageRepl.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { useCodeRepl } from '../composables/codeRepl.js'
+import IconRun from './IconRun.vue'
+import Loading from './Loading.vue'
+import IconConsole from './IconConsole.vue'
+import IconClose from './IconClose.vue'
+
+const replEl = shallowRef<HTMLDivElement | null>(null)
+const outputEl = shallowRef<HTMLDivElement | null>(null)
+const {
+  onRunCode,
+  onCleanRun,
+  firstRun,
+  stderr,
+  stdout,
+  error,
+  loaded,
+  finished,
+  lang,
+  backendVersion,
+} = useCodeRepl(replEl)
+
+function runCode() {
+  onRunCode()
+
+  if (outputEl.value)
+    outputEl.value.scrollIntoView?.({ behavior: 'smooth', block: 'center' })
+}
+</script>
+
+<template>
+  <div ref="replEl" class="code-repl">
+    <span v-show="loaded && finished" class="icon-run" title="Run Code" @click="runCode">
+      <IconRun />
+    </span>
+    <slot />
+    <div ref="outputEl" class="code-repl-pin" />
+    <div v-if="!firstRun" class="code-repl-output">
+      <div class="output-head">
+        <IconConsole class="icon-console" />
+        <span class="title">console</span>
+        <span v-if="lang && backendVersion" class="output-version">
+          Running on: {{ lang }} <i>{{ backendVersion }}</i>
+        </span>
+        <IconClose class="icon-close" @click="onCleanRun" />
+      </div>
+      <div v-if="!loaded" class="output-content">
+        <Loading />
+      </div>
+      <div v-else class="output-content" :class="lang">
+        <p v-if="error" class="error">
+          {{ error }}
+        </p>
+        <div v-if="stderr.length" class="stderr">
+          <h4>Stderr:</h4>
+          <p
+            v-for="(item, index) in stderr" :key="index"
+            :class="{ error: lang === 'rust' && item.startsWith('error') }"
+          >
+            <pre>{{ item }}</pre>
+          </p>
+        </div>
+        <div v-if="stdout.length" class="stdout">
+          <h4 v-if="stderr.length">
+            Stdout:
+          </h4>
+          <p v-for="(item, index) in stdout" :key="index">
+            <pre>{{ item }}</pre>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-repl {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.code-repl-output {
+  position: relative;
+  top: -20px;
+  padding-top: 6px;
+  margin: 0 -1.5rem;
+  background-color: var(--vp-code-block-bg);
+  transition: background-color, var(--t-color);
+}
+
+@media (min-width: 768px) {
+  .code-repl-output {
+    margin: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+}
+
+.icon-run {
+  position: absolute;
+  top: -10px;
+  right: 10px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: 16px;
+  color: var(--vp-c-bg);
+  cursor: pointer;
+  background-color: var(--vp-c-brand-1);
+  border-radius: 100%;
+  transition: var(--t-color);
+  transition-property: color, background-color;
+}
+
+@media (min-width: 768px) {
+  .icon-run {
+    top: 60px;
+    right: 16px;
+  }
+}
+
+.icon-run:hover {
+  background-color: var(--vp-c-brand-2);
+}
+
+.code-repl-output .output-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px 4px 20px;
+  border-top: solid 2px var(--vp-c-border);
+  transition: border-color var(--t-color);
+}
+
+.output-head .title {
+  flex: 1;
+  margin-left: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.output-head .output-version {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  transition: color var(--t-color);
+}
+
+.output-head .icon-close {
+  width: 20px;
+  height: 20px;
+  margin-left: 20px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  transition: color var(--t-color);
+}
+
+.output-head .icon-close:hover {
+  color: var(--vp-c-text-2);
+}
+
+.output-content {
+  padding: 12px 20px 24px;
+  overflow-x: auto;
+}
+
+.output-content h4 {
+  margin: 8px 0;
+  font-size: 16px;
+}
+
+.output-content p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.output-content p pre {
+  width: fit-content;
+  padding: 0 20px 0 0;
+  margin: 0;
+  overflow-x: initial;
+}
+
+.output-content .error,
+.output-content .stderr p,
+.output-content.rust .stderr p.error {
+  color: var(--vp-c-danger-1, #b8272c);
+  transition: color var(--t-color);
+}
+
+.output-content.rust .stderr p {
+  color: var(--vp-c-text-1);
+}
+
+.output-content .stderr + .stdout {
+  margin-top: 12px;
+  border-top: 1px solid var(--vp-c-divider);
+  transition: border-color var(--t-color);
+}
+</style>

package/lib/client/components/Loading.vue

@@ -29,7 +29,8 @@ defineProps<{
   justify-content: center;
   font-size: 36px;
   color: currentcolor;
-  background-color: var(--vp-c-bg, #fff);
+  background-color: inherit;
+  transition: background-color var(--t-color);
 }
 
 .md-power-loading.absolute {

package/lib/client/composables/codeRepl.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+type Lang = 'kotlin' | 'go' | 'rust';
+export declare function resolveCodeInfo(el: HTMLDivElement): {
+    lang: Lang;
+    code: string;
+};
+export declare function useCodeRepl(el: Ref<HTMLDivElement | null>): {
+    onRunCode: () => Promise<void>;
+    onCleanRun: () => void;
+    lang: Ref<Lang | undefined>;
+    backendVersion: Ref<string>;
+    firstRun: Ref<boolean>;
+    stderr: Ref<string[]>;
+    stdout: Ref<string[]>;
+    loaded: Ref<boolean>;
+    finished: Ref<boolean>;
+    error: Ref<string>;
+};
+export {};

package/lib/client/composables/codeRepl.js

@@ -0,0 +1,150 @@
+import { ref } from 'vue';
+import { http } from '../utils/http.js';
+import { sleep } from '../utils/sleep.js';
+import { rustExecute } from './rustRepl.js';
+const ignoredNodes = ['.diff.remove', '.vp-copy-ignore'];
+const RE_LANGUAGE = /language-([\w]+)/;
+const api = {
+    go: 'https://api.pengzhanbo.cn/repl/golang/run',
+    kotlin: 'https://api.pengzhanbo.cn/repl/kotlin/run',
+};
+const langAlias = {
+    kt: 'kotlin',
+    kotlin: 'kotlin',
+    go: 'go',
+    rust: 'rust',
+    rs: 'rust',
+};
+const supportLang = ['kotlin', 'go', 'rust'];
+function resolveLang(lang) {
+    return lang ? langAlias[lang] || lang : '';
+}
+export function resolveCodeInfo(el) {
+    const wrapper = el.querySelector('[class*=language-]');
+    const lang = wrapper?.className.match(RE_LANGUAGE)?.[1];
+    const codeEl = wrapper?.querySelector('pre code');
+    let code = '';
+    if (codeEl) {
+        const clone = codeEl.cloneNode(true);
+        clone
+            .querySelectorAll(ignoredNodes.join(','))
+            .forEach(node => node.remove());
+        code = clone.textContent || '';
+    }
+    return { lang: resolveLang(lang), code };
+}
+export function useCodeRepl(el) {
+    const lang = ref();
+    const loaded = ref(true);
+    const firstRun = ref(true);
+    const finished = ref(true);
+    const stdout = ref([]); // like print
+    const stderr = ref([]); // like print error
+    const error = ref(''); // execute error
+    const backendVersion = ref('');
+    const executeMap = {
+        kotlin: executeKotlin,
+        go: executeGolang,
+        rust: executeRust,
+    };
+    function onCleanRun() {
+        loaded.value = false;
+        finished.value = false;
+        stdout.value = [];
+        stderr.value = [];
+        error.value = '';
+        firstRun.value = true;
+        backendVersion.value = '';
+    }
+    async function onRunCode() {
+        if (!el.value || !loaded.value)
+            return;
+        const info = resolveCodeInfo(el.value);
+        lang.value = info.lang;
+        if (!lang.value || !info.code || !supportLang.includes(lang.value))
+            return;
+        if (firstRun.value)
+            firstRun.value = false;
+        loaded.value = false;
+        finished.value = false;
+        stdout.value = [];
+        stderr.value = [];
+        error.value = '';
+        await executeMap[lang.value]?.(info.code);
+    }
+    async function executeGolang(code) {
+        const res = await http.post(api.go, { code });
+        backendVersion.value = `v${res.version}`;
+        loaded.value = true;
+        if (res.error) {
+            error.value = res.error;
+            finished.value = true;
+            return;
+        }
+        const events = res.events || [];
+        for (const event of events) {
+            if (event.kind === 'stdout') {
+                if (event.delay)
+                    await sleep(event.delay / 1000000);
+                stdout.value.push(event.message);
+            }
+            else if (event.kind === 'stderr') {
+                stderr.value.push(event.message);
+            }
+        }
+        finished.value = true;
+    }
+    async function executeKotlin(code) {
+        const filename = 'File.kt';
+        const res = await http.post(api.kotlin, {
+            args: '',
+            files: [{ name: filename, publicId: '', text: code }],
+        });
+        backendVersion.value = `v${res.version}`;
+        loaded.value = true;
+        if (res.errors) {
+            const errors = Array.isArray(res.errors[filename]) ? res.errors[filename] : [res.errors[filename]];
+            if (errors.length) {
+                errors.forEach(({ message, severity }) => severity === 'ERROR' && stderr.value.push(message));
+            }
+        }
+        stdout.value.push(res.text);
+        finished.value = true;
+    }
+    async function executeRust(code) {
+        await rustExecute(code, {
+            onBegin: () => {
+                loaded.value = true;
+                finished.value = false;
+                stdout.value = [];
+                stderr.value = [];
+                error.value = '';
+                backendVersion.value = 'release';
+            },
+            onError(message) {
+                error.value = message;
+            },
+            onStdout(message) {
+                stdout.value.push(message);
+            },
+            onStderr(message) {
+                stderr.value.push(message);
+            },
+            onEnd: () => {
+                finished.value = true;
+            },
+        });
+    }
+    return {
+        onRunCode,
+        onCleanRun,
+        lang,
+        backendVersion,
+        firstRun,
+        stderr,
+        stdout,
+        loaded,
+        finished,
+        error,
+    };
+}

package/lib/client/composables/rustRepl.d.ts

@@ -0,0 +1,9 @@
+export declare function rustExecute(code: string, { onEnd, onError, onStderr, onStdout, onBegin }: RustExecuteOptions): Promise<void>;
+interface RustExecuteOptions {
+    onBegin?: () => void;
+    onStdout?: (message: string) => void;
+    onStderr?: (message: string) => void;
+    onEnd?: () => void;
+    onError?: (message: string) => void;
+}
+export {};

package/lib/client/composables/rustRepl.js

@@ -0,0 +1,102 @@
+/**
+ * 相比于 golang 和 kotlin 可以比较简单的实现，
+ * rust 需要通过 websocket 建立连接在实现交互，因此，将其进行一些包装，
+ * 方便在 codeRepl 中使用
+ */
+import { tryOnScopeDispose } from '@vueuse/core';
+const wsUrl = 'wss://play.rust-lang.org/websocket';
+const payloadType = {
+    connected: 'websocket/connected',
+    request: 'output/execute/wsExecuteRequest',
+    execute: {
+        begin: 'output/execute/wsExecuteBegin',
+        // status: 'output/execute/wsExecuteStatus',
+        stderr: 'output/execute/wsExecuteStderr',
+        stdout: 'output/execute/wsExecuteStdout',
+        end: 'output/execute/wsExecuteEnd',
+    },
+};
+let ws = null;
+let isOpen = false;
+let uuid = 0;
+function connect() {
+    if (isOpen)
+        return Promise.resolve();
+    ws = new WebSocket(wsUrl);
+    uuid = 0;
+    ws.addEventListener('open', () => {
+        isOpen = true;
+        send(payloadType.connected, { iAcceptThisIsAnUnsupportedApi: true }, { websocket: true, sequenceNumber: uuid });
+    });
+    ws.addEventListener('close', () => {
+        isOpen = false;
+        ws = null;
+    });
+    tryOnScopeDispose(() => ws?.close());
+    return new Promise((resolve) => {
+        function connected(e) {
+            const data = JSON.parse(e.data);
+            if (data.type === payloadType.connected) {
+                ws?.removeEventListener('message', connected);
+                resolve();
+            }
+        }
+        ws?.addEventListener('message', connected);
+    });
+}
+function send(type, payload, meta) {
+    const msg = { type, meta, payload };
+    ws?.send(JSON.stringify(msg));
+}
+export async function rustExecute(code, { onEnd, onError, onStderr, onStdout, onBegin }) {
+    await connect();
+    const meta = { sequenceNumber: uuid++ };
+    const payload = {
+        backtrace: false,
+        channel: 'stable',
+        crateType: 'bin',
+        edition: '2021',
+        mode: 'release',
+        tests: false,
+        code,
+    };
+    send(payloadType.request, payload, meta);
+    let stdout = '';
+    let stderr = '';
+    function onMessage(e) {
+        const data = JSON.parse(e.data);
+        const { type, payload, meta: _meta = {} } = data;
+        if (_meta.sequenceNumber !== meta.sequenceNumber)
+            return;
+        if (type === payloadType.execute.begin)
+            onBegin?.();
+        if (type === payloadType.execute.stdout) {
+            stdout += payload;
+            if (stdout.endsWith('\n')) {
+                onStdout?.(stdout);
+                stdout = '';
+            }
+        }
+        if (type === payloadType.execute.stderr) {
+            stderr += payload;
+            if (stderr.endsWith('\n')) {
+                if (stderr.startsWith('error:')) {
+                    const index = stderr.indexOf('\n');
+                    onStderr?.(stderr.slice(0, index));
+                    onStderr?.(stderr.slice(index + 1));
+                }
+                else {
+                    onStderr?.(stderr);
+                }
+                stderr = '';
+            }
+        }
+        if (type === payloadType.execute.end) {
+            if (payload.success === false)
+                onError?.(payload.exitDetail);
+            ws?.removeEventListener('message', onMessage);
+            onEnd?.();
+        }
+    }
+    ws?.addEventListener('message', onMessage);
+}

package/lib/client/utils/http.d.ts

@@ -0,0 +1,4 @@
+export declare const http: {
+    get: <T extends object = object, R = any>(url: string, query?: T) => Promise<R>;
+    post: <T_1 extends object = object, R_1 = any>(url: string, data?: T_1 | undefined) => Promise<R_1>;
+};

package/lib/client/utils/http.js

@@ -0,0 +1,21 @@
+export const http = {
+    get: async (url, query) => {
+        const _url = new URL(url);
+        if (query) {
+            for (const [key, value] of Object.entries(query))
+                _url.searchParams.append(key, value);
+        }
+        const res = await fetch(_url.toString());
+        return await res.json();
+    },
+    post: async (url, data) => {
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: data ? JSON.stringify(data) : undefined,
+        });
+        return await res.json();
+    },
+};

package/lib/client/utils/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(ms: number): Promise<void>;

package/lib/client/utils/sleep.js

@@ -0,0 +1,5 @@
+export function sleep(ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}

package/lib/node/features/caniuse.js

@@ -1,10 +1,13 @@
 import container from 'markdown-it-container';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 5);
 // @[caniuse]()
 const minLength = 12;
 // char codes of '@[caniuse'
 const START_CODES = [64, 91, 99, 97, 110, 105, 117, 115, 101];
 // regexp to match the import syntax
 const SYNTAX_RE = /^@\[caniuse(?:\s*?(embed|image)?(?:{([0-9,\-]*?)})?)\]\(([^)]*)\)/;
+const UNDERLINE_RE = /_+/g;
 function createCanIUseRuleBlock(defaultMode) {
     return (state, startLine, endLine, silent) => {
         const pos = state.bMarks[startLine] + state.tShift[startLine];
@@ -50,32 +53,24 @@ function resolveCanIUse({ feature, mode, versions }) {
       <img src="${link}${feature}.jpg" alt="${alt}" width="100%">
     </picture></p></ClientOnly>`;
     }
-    const periods = resolveVersions(versions);
-    const accessible = 'false';
-    const image = 'none';
-    const url = 'https://caniuse.bitsofco.de/embed/index.html';
-    const src = `${url}?feat=${feature}&periods=${periods}&accessible-colours=${accessible}&image-base=${image}`;
-    return `<ClientOnly><div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px" title="Can I use ${feature}"></iframe></div></ClientOnly>`;
+    feature = feature.replace(UNDERLINE_RE, '_');
+    const { past, future } = resolveVersions(versions);
+    const meta = nanoid();
+    return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`;
 }
 function resolveVersions(versions) {
     if (!versions)
-        return 'future_1,current,past_1,past_2';
+        return { past: 2, future: 1 };
     const list = versions
         .split(',')
         .map(v => Number(v.trim()))
         .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3);
     list.push(0);
     const uniq = [...new Set(list)].sort((a, b) => b - a);
-    const result = [];
-    uniq.forEach((v) => {
-        if (v < 0)
-            result.push(`past_${Math.abs(v)}`);
-        if (v === 0)
-            result.push('current');
-        if (v > 0)
-            result.push(`future_${v}`);
-    });
-    return result.join(',');
+    return {
+        future: uniq[0],
+        past: Math.abs(uniq[uniq.length - 1]),
+    };
 }
 /**
  * @example

package/lib/node/features/langRepl.d.ts

@@ -0,0 +1,2 @@
+import type markdownIt from 'markdown-it';
+export declare function langReplPlugin(md: markdownIt): void;

package/lib/node/features/langRepl.js

@@ -0,0 +1,17 @@
+import container from 'markdown-it-container';
+function createReplContainer(md, type) {
+    const validate = (info) => info.trim().startsWith(type);
+    const render = (tokens, index) => {
+        const token = tokens[index];
+        if (token.nesting === 1)
+            return '<LanguageRepl>';
+        else
+            return '</LanguageRepl>';
+    };
+    md.use(container, type, { validate, render });
+}
+export function langReplPlugin(md) {
+    createReplContainer(md, 'kotlin-repl');
+    createReplContainer(md, 'go-repl');
+    createReplContainer(md, 'rust-repl');
+}

package/lib/node/plugin.js

@@ -1,4 +1,3 @@
-import { getDirname, path } from 'vuepress/utils';
 import { caniusePlugin, legacyCaniuse } from './features/caniuse.js';
 import { pdfPlugin } from './features/pdf.js';
 import { createIconCSSWriter, iconsPlugin } from './features/icons/index.js';
@@ -9,13 +8,15 @@ 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 = {}) {
     return (app) => {
         const { initIcon, addIcon } = createIconCSSWriter(app, options.icons);
         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,
             },
@@ -65,6 +66,8 @@ export function markdownPowerPlugin(options = {}) {
                     // =|plot|=
                     md.use(plotPlugin);
                 }
+                if (options.repl)
+                    langReplPlugin(md);
             },
         };
     };

package/lib/node/prepareConfigFile.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vuepress/core';
+import type { MarkdownPowerPluginOptions } from '../shared/index.js';
+export declare function prepareConfigFile(app: App, options: MarkdownPowerPluginOptions): Promise<string>;

package/lib/node/prepareConfigFile.js

@@ -0,0 +1,59 @@
+import { getDirname, path } from 'vuepress/utils';
+import { ensureEndingSlash } from '@vuepress/helper';
+const { url: filepath } = import.meta;
+const __dirname = getDirname(filepath);
+const CLIENT_FOLDER = ensureEndingSlash(path.resolve(__dirname, '../client'));
+export async function prepareConfigFile(app, options) {
+    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 CanIUse from '${CLIENT_FOLDER}components/CanIUse.vue'`);
+        enhances.add(`app.component('CanIUseViewer', CanIUse)`);
+    }
+    // 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')}
+  }
+})
+`);
+}

package/lib/shared/plugin.d.ts

@@ -12,5 +12,6 @@ export interface MarkdownPowerPluginOptions {
     replit?: boolean;
     codeSandbox?: boolean;
     jsfiddle?: boolean;
+    repl?: boolean;
     caniuse?: boolean | CanIUseOptions;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.53",
+  "version": "1.0.0-rc.54",
   "description": "The Plugin for VuePres 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -45,10 +45,10 @@
     "local-pkg": "^0.5.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
-    "vue": "^3.4.23"
+    "vue": "^3.4.25"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.202",
+    "@iconify/json": "^2.2.204",
     "@types/markdown-it": "^14.0.1"
   },
   "publishConfig": {

package/lib/client/composables/setupCanIUse.d.ts

@@ -1 +0,0 @@
-export declare function setupCanIUse(): void;

package/lib/client/composables/setupCanIUse.js

@@ -1,18 +0,0 @@
-let isBind = false;
-export function setupCanIUse() {
-    if (isBind)
-        return;
-    isBind = true;
-    window.addEventListener('message', (message) => {
-        const data = message.data;
-        if (typeof data === 'string' && data.includes('ciu_embed')) {
-            const [, feature, height] = data.split(':');
-            const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]:not([data-skip])`);
-            if (el) {
-                const h = Number.parseInt(height) + 30;
-                el.childNodes[0].height = `${h}px`;
-                el.setAttribute('data-skip', 'true');
-            }
-        }
-    });
-}

package/lib/client/config.d.ts

@@ -1,4 +0,0 @@
-import type { ClientConfig } from 'vuepress/client';
-import '@internal/md-power/icons.css';
-declare const _default: ClientConfig;
-export default _default;

package/lib/client/config.js

@@ -1,33 +0,0 @@
-import { defineClientConfig } 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';
-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();
-            });
-        }
-    },
-});