vuepress-plugin-md-power 1.0.0-rc.126 → 1.0.0-rc.128

package/lib/node/index.js

@@ -212,7 +212,7 @@ async function resolveImageSize(app, url, remote = false) {
 
 // src/node/plugin.ts
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
-import { isPackageExists as isPackageExists2 } from "local-pkg";
+import { isPackageExists as isPackageExists3 } from "local-pkg";
 
 // src/node/container/index.ts
 import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
@@ -352,6 +352,7 @@ var definitions = {
     "CSS": "vscode-icons:file-type-css",
     "less": "vscode-icons:file-type-less",
     "Less": "vscode-icons:file-type-less",
+    "LESS": "vscode-icons:file-type-less",
     "scss": "vscode-icons:file-type-scss",
     "Scss": "vscode-icons:file-type-scss",
     "SCSS": "vscode-icons:file-type-scss",
@@ -1824,6 +1825,688 @@ async function containerPlugin(app, md, options) {
   }
 }
 
+// src/node/demo/demo.ts
+import container5 from "markdown-it-container";
+
+// src/node/embed/createEmbedRuleBlock.ts
+function createEmbedRuleBlock(md, {
+  type: type2,
+  name = type2,
+  syntaxPattern,
+  beforeName = "import_code",
+  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
+  meta,
+  content
+}) {
+  const MIN_LENGTH = type2.length + 5;
+  const START_CODES = [64, 91, ...type2.split("").map((c) => c.charCodeAt(0))];
+  md.block.ruler.before(
+    beforeName,
+    name,
+    (state, startLine, endLine, silent) => {
+      const pos = state.bMarks[startLine] + state.tShift[startLine];
+      const max = state.eMarks[startLine];
+      if (pos + MIN_LENGTH > max)
+        return false;
+      for (let i = 0; i < START_CODES.length; i += 1) {
+        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+          return false;
+      }
+      const content2 = state.src.slice(pos, max);
+      const match = content2.match(syntaxPattern);
+      if (!match)
+        return false;
+      if (silent)
+        return true;
+      const token = state.push(name, "", 0);
+      token.meta = meta(match);
+      token.content = content2;
+      token.map = [startLine, startLine + 1];
+      state.line = startLine + 1;
+      return true;
+    },
+    ruleOptions
+  );
+  md.renderer.rules[name] = (tokens, index, _, env) => {
+    const token = tokens[index];
+    token.content = content(token.meta, token.content, env);
+    return token.content;
+  };
+}
+
+// src/node/demo/supports/file.ts
+import fs3 from "node:fs";
+import { createRequire } from "node:module";
+import path3 from "node:path";
+import process from "node:process";
+var require2 = createRequire(process.cwd());
+function findFile(app, env, url) {
+  if (url.startsWith("/"))
+    return app.dir.source(url.slice(1));
+  if (url.startsWith("./") || url.startsWith("../"))
+    return app.dir.source(path3.dirname(env.filePathRelative), url);
+  if (url.startsWith("@source/")) {
+    return app.dir.source(url.slice("@source/".length));
+  }
+  try {
+    return require2.resolve(url);
+  } catch {
+    return url;
+  }
+}
+function readFileSync(filepath2) {
+  try {
+    return fs3.readFileSync(filepath2, "utf-8");
+  } catch {
+    return false;
+  }
+}
+function writeFileSync(filepath2, content) {
+  const dirname = path3.dirname(filepath2);
+  fs3.mkdirSync(dirname, { recursive: true });
+  fs3.writeFileSync(filepath2, content, "utf-8");
+}
+
+// src/node/demo/markdown.ts
+function markdownEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded = false }) {
+  const filepath2 = findFile(app, env, url);
+  const code = readFileSync(filepath2);
+  if (code === false) {
+    console.warn("[vuepress-plugin-md-power] Cannot read markdown file:", filepath2);
+    return "";
+  }
+  const demo = { type: "markdown", path: filepath2 };
+  env.demoFiles ??= [];
+  if (!env.demoFiles.some((d) => d.path === filepath2)) {
+    env.demoFiles.push(demo);
+  }
+  return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    ${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
+    <template #code>
+      ${md.render(`\`\`\`md ${codeSetting}
+${code}
+\`\`\``, {})}
+    </template>
+  </VPDemoBasic>`;
+}
+var markdownContainerRender = {
+  before(app, md, env, meta, codeMap) {
+    const { title, desc, expanded = false } = meta;
+    const code = codeMap.md || "";
+    return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+      ${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
+      <template #code>`;
+  },
+  after: () => "</template></VPDemoBasic>"
+};
+
+// src/node/demo/normal.ts
+import fs5 from "node:fs";
+import path5 from "node:path";
+
+// src/node/demo/supports/compiler.ts
+import { isPackageExists } from "local-pkg";
+import { LRUCache } from "lru-cache";
+
+// src/node/utils/package.ts
+async function interopDefault(m) {
+  const resolved = await m;
+  return resolved.default || resolved;
+}
+
+// src/node/demo/supports/compiler.ts
+var cache2 = new LRUCache({ max: 64 });
+var compiler = {
+  script: importer(async () => {
+    const { transform } = await import("esbuild");
+    return transform;
+  }),
+  less: importer(() => import("less")),
+  sass: importer(async () => {
+    if (isPackageExists("sass-embedded")) {
+      return await import("sass-embedded");
+    }
+    return await import("sass");
+  }),
+  stylus: importer(() => import("stylus"))
+};
+async function compileScript(source, type2) {
+  const key = `${type2}:::${source}`;
+  if (cache2.has(key))
+    return cache2.get(key);
+  const transform = await compiler.script();
+  const res = await transform(source, {
+    target: "es2018",
+    format: "cjs",
+    loader: type2 === "ts" ? "ts" : "js",
+    sourcemap: false
+  });
+  cache2.set(key, res.code);
+  return res.code;
+}
+async function compileStyle(source, type2) {
+  const key = `${type2}:::${source}`;
+  if (cache2.has(key))
+    return cache2.get(key);
+  if (type2 === "css")
+    return source;
+  if (type2 === "less") {
+    const less = await compiler.less();
+    const res = await less.render(source);
+    cache2.set(key, res.css);
+    return res.css;
+  }
+  if (type2 === "scss") {
+    const sass = await compiler.sass();
+    const res = sass.compileString(source);
+    cache2.set(key, res.css);
+    return res.css;
+  }
+  if (type2 === "stylus") {
+    const stylus = await compiler.stylus();
+    const res = stylus.render(source);
+    cache2.set(key, res);
+    return res;
+  }
+  return source;
+}
+function importer(func) {
+  let imported;
+  return async () => {
+    if (!imported) {
+      imported = interopDefault(await func());
+    }
+    return imported;
+  };
+}
+
+// src/node/demo/supports/insertScript.ts
+var SCRIPT_RE = /<script.*?>/;
+function insertSetupScript({ export: name, path: path9 }, env) {
+  const imports = `import ${name ? `${name} from ` : ""}'${path9}';`;
+  const scriptSetup = env.sfcBlocks.scriptSetup ??= {
+    type: "script",
+    content: "<script setup>\n</script>",
+    contentStripped: "",
+    tagOpen: "<script setup>",
+    tagClose: "</script>"
+  };
+  scriptSetup.contentStripped = `${imports}
+${scriptSetup.contentStripped}`;
+  scriptSetup.content = scriptSetup.content.replace(SCRIPT_RE, (matched) => `${matched}
+${imports}`);
+}
+
+// src/node/demo/watcher.ts
+import fs4 from "node:fs";
+import path4 from "node:path";
+import { watch } from "chokidar";
+var renderDone = null;
+var renderCount = 0;
+var renderPromise;
+function createDemoRender() {
+  renderPromise = new Promise((resolve) => {
+    renderDone = resolve;
+  });
+}
+async function waitDemoRender() {
+  if (renderCount === 0) {
+    renderDone?.();
+    renderDone = null;
+  }
+  await renderPromise;
+}
+function markDemoRender() {
+  renderCount++;
+}
+function checkDemoRender() {
+  if (renderCount > 0) {
+    renderCount--;
+  }
+  if (renderCount === 0) {
+    renderDone?.();
+    renderDone = null;
+  }
+}
+var watcher = null;
+var tasks = {};
+var target = "md-power/demo/watcher.txt";
+function demoWatcher(app, watchers) {
+  if (!watcher) {
+    watcher = watch([], { ignoreInitial: true });
+  }
+  Object.keys(tasks).forEach((path9) => {
+    watcher.add(path9);
+  });
+  const code = readFileSync(app.dir.temp(target));
+  if (code) {
+    const paths = JSON.parse(code || "{}");
+    Object.entries(paths).forEach(([path9, output]) => {
+      watcher.add(path9);
+      tasks[path9] = output;
+    });
+  }
+  updateWatchFiles(app);
+  watcher.on("change", (path9) => {
+    if (tasks[path9]) {
+      const code2 = readFileSync(path9);
+      if (code2 === false)
+        return;
+      const source = parseEmbedCode(code2);
+      compileCode(source, tasks[path9]);
+    }
+  });
+  watcher.on("unlink", (path9) => {
+    delete tasks[path9];
+    watcher.unwatch(path9);
+  });
+  watchers.push(() => {
+    watcher.close();
+    watcher = null;
+  });
+}
+function addTask(app, path9, output) {
+  if (tasks[path9])
+    return;
+  tasks[path9] = output;
+  if (watcher) {
+    watcher.add(path9);
+  }
+  updateWatchFiles(app);
+}
+async function updateWatchFiles(app) {
+  await fs4.promises.mkdir(app.dir.temp(path4.dirname(target)), { recursive: true });
+  await fs4.promises.writeFile(app.dir.temp(target), JSON.stringify(tasks));
+}
+
+// src/node/demo/normal.ts
+var CONFIG_RE = /<script type="config">([\s\S]*?)\n<\/script>/;
+var SCRIPT_RE2 = /<script\s?(?:lang="(\w+)")?>([\s\S]*?)\n<\/script>/;
+var STYLE_RE = /<style\s?(?:lang="(\w+)")?>([\s\S]*?)\n<\/style>/;
+var scriptSupported = ["ts", "js"];
+var styleSupported = ["css", "scss", "less", "stylus", "styl"];
+var target2 = "md-power/demo/normal";
+var FENCE = "```";
+function parseEmbedCode(code) {
+  const res = { html: "", css: "", script: "", imports: "", jsType: "js", cssType: "css" };
+  res.html = code.replace(CONFIG_RE, (_, config) => {
+    res.imports = config;
+    return "";
+  }).replace(SCRIPT_RE2, (_, lang, script) => {
+    res.script = script;
+    res.jsType = scriptSupported.includes(lang) ? lang : "js";
+    return "";
+  }).replace(STYLE_RE, (_, lang, style) => {
+    res.css = style;
+    res.cssType = styleSupported.includes(lang) ? lang === "styl" ? "stylus" : lang : "css";
+    return "";
+  });
+  return res;
+}
+function codeToHtml(md, source, info) {
+  let content = "::: code-tabs\n";
+  if (source.html)
+    content += `@tab HTML
+${FENCE}html ${info}
+${source.html.trim()}
+${FENCE}
+`;
+  if (source.script) {
+    const title = source.jsType === "ts" ? "Typescript" : "Javascript";
+    content += `@tab ${title}
+${FENCE}${source.jsType} ${info}
+${source.script.trim()}
+${FENCE}
+`;
+  }
+  if (source.css) {
+    const title = source.cssType === "stylus" ? "Stylus" : source.cssType.toUpperCase();
+    content += `@tab ${title}
+${FENCE}${source.cssType} ${info}
+${source.css.trim()}
+${FENCE}
+`;
+  }
+  content += "\n:::";
+  return md.render(content, {});
+}
+async function compileCode(code, output) {
+  markDemoRender();
+  const res = { jsLib: [], cssLib: [], script: "", css: "", html: "" };
+  if (!fs5.existsSync(output))
+    writeFileSync(output, `import { ref } from "vue"
+export default ref(${JSON.stringify(res, null, 2)})`);
+  try {
+    if (code.imports) {
+      const imports = JSON.parse(code.imports);
+      res.jsLib = imports.jsLib ?? [];
+      res.cssLib = imports.cssLib ?? [];
+    }
+    if (code.script) {
+      res.script = await compileScript(code.script.trim(), code.jsType);
+    }
+    if (code.css) {
+      res.css = await compileStyle(code.css.trim(), code.cssType);
+    }
+    if (code.html) {
+      res.html = code.html.trim();
+    }
+  } catch (e) {
+    console.error("[vuepress-plugin-md-power] demo parse error: \n", e);
+  }
+  writeFileSync(output, `import { ref } from "vue"
+export default ref(${JSON.stringify(res, null, 2)})`);
+  checkDemoRender();
+}
+function normalEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded = false }) {
+  const filepath2 = findFile(app, env, url);
+  const code = readFileSync(filepath2);
+  if (code === false) {
+    console.warn("[vuepress-plugin-md-power] Cannot read demo file:", filepath2);
+    return "";
+  }
+  const source = parseEmbedCode(code);
+  const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
+  const basename = path5.basename(filepath2).replace(/-|\./g, "_");
+  const name = `Demo${basename[0].toUpperCase()}${basename.slice(1)}`;
+  const demo = { type: "normal", export: name, path: filepath2 };
+  const output = app.dir.temp(target2, `${prefix}-${name}.js`);
+  compileCode(source, output);
+  addTask(app, filepath2, output);
+  env.demoFiles ??= [];
+  if (!env.demoFiles.some((d) => d.path === filepath2)) {
+    env.demoFiles.push(demo);
+    insertSetupScript({ ...demo, path: output }, env);
+  }
+  return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    ${codeToHtml(md, source, codeSetting)}
+  </VPDemoNormal>`;
+}
+var normalContainerRender = {
+  before(app, md, env, meta, codeMap) {
+    const { url, title, desc, expanded = false } = meta;
+    const name = `DemoContainer${url}`;
+    const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
+    const output = app.dir.temp(path5.join(target2, `${prefix}-${name}.js`));
+    env.demoFiles ??= [];
+    if (!env.demoFiles.some((d) => d.path === output)) {
+      const demo = { type: "normal", export: name, gitignore: true, path: output };
+      env.demoFiles.push(demo);
+      insertSetupScript(demo, env);
+    }
+    const source = parseContainerCode(codeMap);
+    compileCode(source, output);
+    return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>`;
+  },
+  after: () => "</VPDemoNormal>",
+  token(token) {
+    if (token.info.trim().startsWith("json")) {
+      token.hidden = true;
+      token.type = "text";
+      token.content = "";
+    }
+  }
+};
+function parseContainerCode(map) {
+  const res = { html: "", css: "", script: "", imports: "", jsType: "js", cssType: "css" };
+  if (map.html) {
+    res.html = map.html;
+  }
+  if (map.js) {
+    res.script = map.js;
+    res.jsType = "js";
+  }
+  if (map.ts) {
+    res.script = map.ts;
+    res.jsType = "ts";
+  }
+  if (map.css) {
+    res.css = map.css;
+    res.cssType = "css";
+  }
+  if (map.less) {
+    res.css = map.less;
+    res.cssType = "less";
+  }
+  if (map.scss) {
+    res.css = map.scss;
+    res.cssType = "scss";
+  }
+  if (map.styl || map.stylus) {
+    res.css = map.styl || map.stylus;
+    res.cssType = "stylus";
+  }
+  if (map.json) {
+    res.imports = map.json;
+  }
+  return res;
+}
+
+// src/node/demo/supports/alias.ts
+function normalizeAlias(info) {
+  const [lang] = info.trim().split(/\s+|:|\{/);
+  switch (lang) {
+    case "vue":
+      return "vue";
+    case "js":
+    case "javascript":
+      return "js";
+    case "ts":
+    case "typescript":
+      return "ts";
+    case "stylus":
+    case "styl":
+      return "stylus";
+    case "md":
+    case "markdown":
+      return "md";
+  }
+  return lang;
+}
+
+// src/node/demo/vue.ts
+import path6 from "node:path";
+function vueEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded = false }) {
+  const filepath2 = findFile(app, env, url);
+  const code = readFileSync(filepath2);
+  if (code === false) {
+    console.warn("[vuepress-plugin-md-power] Cannot read vue file:", filepath2);
+    return "";
+  }
+  const basename = path6.basename(filepath2).replace(/-|\./g, "_");
+  const ext = path6.extname(filepath2).slice(1);
+  const name = `Demo${basename[0].toUpperCase()}${basename.slice(1)}`;
+  const demo = { type: "vue", export: name, path: filepath2 };
+  env.demoFiles ??= [];
+  if (!env.demoFiles.some((d) => d.path === filepath2)) {
+    env.demoFiles.push(demo);
+    insertSetupScript(demo, env);
+  }
+  return `<VPDemoBasic type="vue"${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    <${name} />
+    <template #code>
+      ${md.render(`\`\`\`${ext}${codeSetting}
+${code}
+\`\`\``, {})}
+    </template>
+  </VPDemoBasic>`;
+}
+var target3 = "md-power/demo/vue";
+var vueContainerRender = {
+  before: (app, md, env, meta, codeMap) => {
+    const { url, title, desc, expanded = false } = meta;
+    const componentName2 = `DemoContainer${url}`;
+    const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
+    env.demoFiles ??= [];
+    const output = app.dir.temp(path6.join(target3, `${prefix}-${componentName2}`));
+    if (codeMap.vue || codeMap.js || codeMap.ts) {
+      let scriptOutput = output;
+      let content = "";
+      if (codeMap.vue) {
+        scriptOutput += ".vue";
+        content = transformStyle(codeMap.vue);
+      } else if (codeMap.ts) {
+        scriptOutput += ".ts";
+        content = codeMap.ts;
+      } else if (codeMap.js) {
+        scriptOutput += ".js";
+        content = codeMap.js;
+      }
+      content = transformImports(content, env.filePath || "");
+      const script = { type: "vue", export: componentName2, path: scriptOutput, gitignore: true };
+      writeFileSync(scriptOutput, content);
+      if (!env.demoFiles.some((d) => d.path === scriptOutput)) {
+        env.demoFiles.push(script);
+        insertSetupScript(script, env);
+      }
+    }
+    if (codeMap.css || codeMap.scss || codeMap.less || codeMap.stylus) {
+      let styleOutput = output;
+      let content = "";
+      if (codeMap.css) {
+        styleOutput += ".css";
+        content = codeMap.css;
+      } else if (codeMap.scss) {
+        styleOutput += ".scss";
+        content = codeMap.scss;
+      } else if (codeMap.less) {
+        styleOutput += ".less";
+        content = codeMap.less;
+      } else if (codeMap.stylus) {
+        styleOutput += ".styl";
+        content = codeMap.stylus;
+      }
+      writeFileSync(styleOutput, content);
+      const style = { type: "css", path: styleOutput, gitignore: true };
+      if (!env.demoFiles.some((d) => d.path === styleOutput)) {
+        env.demoFiles.push(style);
+        insertSetupScript(style, env);
+      }
+    }
+    return `<VPDemoBasic${title ? ` title="${title}"` : ""}${desc ? ` desc="${desc}"` : ""}${expanded ? " expanded" : ""}>
+    <${componentName2} />
+    <template #code>
+`;
+  },
+  after: () => "</template></VPDemoBasic>"
+};
+var IMPORT_RE = /import\s+(?:\w+\s+from\s+)?['"]([^'"]+)['"]/g;
+var STYLE_RE2 = /<style.*?>/;
+function transformImports(code, filepath2) {
+  return code.replace(IMPORT_RE, (matched, url) => {
+    if (url.startsWith("./") || url.startsWith("../")) {
+      return matched.replace(url, `${path6.resolve(path6.dirname(filepath2), url)}`);
+    }
+    return matched;
+  });
+}
+function transformStyle(code) {
+  return code.replace(STYLE_RE2, (matched) => {
+    if (matched.includes("scoped")) {
+      return matched;
+    }
+    return matched.replace("<style", "<style scoped");
+  });
+}
+
+// src/node/demo/demo.ts
+function demoEmbed(app, md) {
+  createEmbedRuleBlock(md, {
+    type: "demo",
+    syntaxPattern: /^@\[demo(?:\s(vue|normal|markdown))?\s?(.*)\]\((.*)\)/,
+    meta: ([, type2, info, url]) => ({
+      type: type2 || "normal",
+      url,
+      ...resolveAttrs(info).attrs
+    }),
+    content: (meta, content, env) => {
+      const { url, type: type2 } = meta;
+      if (!url) {
+        console.warn("[vuepress-plugin-md-power] Invalid demo url: ", url);
+        return content;
+      }
+      if (type2 === "vue") {
+        return vueEmbed(app, md, env, meta);
+      }
+      if (type2 === "normal") {
+        return normalEmbed(app, md, env, meta);
+      }
+      if (type2 === "markdown") {
+        return markdownEmbed(app, md, env, meta);
+      }
+      return content;
+    }
+  });
+}
+var INFO_RE = /(vue|normal|markdown)?\s?(.*)/;
+var renderMap = {
+  vue: vueContainerRender,
+  normal: normalContainerRender,
+  markdown: markdownContainerRender
+};
+function demoContainer(app, md) {
+  let currentRender;
+  const render = (tokens, index, _, env) => {
+    const token = tokens[index];
+    if (token.nesting === 1) {
+      const meta = getContainerMeta(token.info);
+      meta.url = `${index}`;
+      currentRender = renderMap[meta.type];
+      return currentRender?.before(
+        app,
+        md,
+        env,
+        meta,
+        parseCodeMapping(tokens, index, currentRender.token)
+      ) || "";
+    } else {
+      const res = currentRender?.after() || "";
+      currentRender = void 0;
+      return res;
+    }
+  };
+  md.use(container5, "demo", { render });
+}
+function parseCodeMapping(tokens, index, cb) {
+  const codeMap = {};
+  for (let i = index + 1; !(tokens[i].nesting === -1 && tokens[i].type === "container_demo_close"); ++i) {
+    const token = tokens[i];
+    if (token.type === "fence") {
+      codeMap[normalizeAlias(token.info)] = token.content.trim();
+      cb?.(token, tokens, i);
+    }
+  }
+  return codeMap;
+}
+function getContainerMeta(info) {
+  const [, type2, raw] = (info.trim().slice(4).trim() || "").match(INFO_RE) || [];
+  const { attrs: attrs2 } = resolveAttrs(raw);
+  return {
+    url: "",
+    type: type2 || "normal",
+    ...attrs2
+  };
+}
+
+// src/node/demo/extendPage.ts
+function extendsPageWithDemo(page) {
+  const markdownEnv = page.markdownEnv;
+  const demoFiles = markdownEnv.demoFiles ?? [];
+  page.deps.push(
+    ...demoFiles.filter(({ type: type2 }) => type2 === "markdown").map(({ path: path9 }) => path9)
+  );
+  (page.frontmatter.gitInclude ??= []).push(
+    ...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path9 }) => path9)
+  );
+}
+
+// src/node/demo/index.ts
+function demoPlugin(app, md) {
+  createDemoRender();
+  demoEmbed(app, md);
+  demoContainer(app, md);
+}
+
 // src/node/embed/audio/reader.ts
 var audioReader = (state, silent) => {
   const max = state.posMax;
@@ -1886,56 +2569,12 @@ var audioReader = (state, silent) => {
 var audioReaderPlugin = (md) => md.inline.ruler.before("link", "audio-reader", audioReader);
 
 // src/node/embed/caniuse.ts
-import container5 from "markdown-it-container";
+import container6 from "markdown-it-container";
 
 // src/node/utils/nanoid.ts
 import { customAlphabet } from "nanoid";
 var nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz", 5);
 
-// src/node/embed/createEmbedRuleBlock.ts
-function createEmbedRuleBlock(md, {
-  type: type2,
-  name = type2,
-  syntaxPattern,
-  beforeName = "import_code",
-  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
-  meta,
-  content
-}) {
-  const MIN_LENGTH = type2.length + 5;
-  const START_CODES = [64, 91, ...type2.split("").map((c) => c.charCodeAt(0))];
-  md.block.ruler.before(
-    beforeName,
-    name,
-    (state, startLine, endLine, silent) => {
-      const pos = state.bMarks[startLine] + state.tShift[startLine];
-      const max = state.eMarks[startLine];
-      if (pos + MIN_LENGTH > max)
-        return false;
-      for (let i = 0; i < START_CODES.length; i += 1) {
-        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
-          return false;
-      }
-      const match = state.src.slice(pos, max).match(syntaxPattern);
-      if (!match)
-        return false;
-      if (silent)
-        return true;
-      const token = state.push(name, "", 0);
-      token.meta = meta(match);
-      token.map = [startLine, startLine + 1];
-      state.line = startLine + 1;
-      return true;
-    },
-    ruleOptions
-  );
-  md.renderer.rules[name] = (tokens, index) => {
-    const token = tokens[index];
-    token.content = content(token.meta);
-    return token.content;
-  };
-}
-
 // src/node/embed/caniuse.ts
 var UNDERLINE_RE = /_+/g;
 var caniusePlugin = (md, { mode: defaultMode = "embed" } = {}) => {
@@ -1970,7 +2609,7 @@ function legacyCaniuse(md, { mode = "embed" } = {}) {
       return "";
     }
   };
-  md.use(container5, type2, { validate, render });
+  md.use(container6, type2, { validate, render });
 }
 function resolveCanIUse({ feature, mode, versions }) {
   if (!feature)
@@ -2124,7 +2763,7 @@ var replitPlugin = (md) => {
 };
 
 // src/node/embed/pdf.ts
-import { path as path3 } from "vuepress/utils";
+import { path as path7 } from "vuepress/utils";
 var pdfPlugin = (md) => {
   createEmbedRuleBlock(md, {
     type: "pdf",
@@ -2140,7 +2779,7 @@ var pdfPlugin = (md) => {
         width: attrs2.width ? parseRect(attrs2.width) : "100%",
         height: attrs2.height ? parseRect(attrs2.height) : "",
         ratio: attrs2.ratio ? parseRect(attrs2.ratio) : "",
-        title: path3.basename(src || "")
+        title: path7.basename(src || "")
       };
     },
     content({ title, src, page, noToolbar, width, height, ratio, zoom }) {
@@ -2150,12 +2789,12 @@ var pdfPlugin = (md) => {
 };
 
 // src/node/embed/video/artPlayer.ts
-import { isPackageExists } from "local-pkg";
+import { isPackageExists as isPackageExists2 } from "local-pkg";
 import { colors } from "vuepress/utils";
 var installed = {
-  dashjs: isPackageExists("dashjs"),
-  hlsjs: isPackageExists("hls.js"),
-  mpegtsjs: isPackageExists("mpegts.js")
+  dashjs: isPackageExists2("dashjs"),
+  hlsjs: isPackageExists2("hls.js"),
+  mpegtsjs: isPackageExists2("mpegts.js")
 };
 var SUPPORTED_VIDEO_TYPES = ["mp4", "mp3", "webm", "ogg", "mpd", "dash", "m3u8", "hls", "ts", "flv"];
 var artPlayerPlugin = (md) => {
@@ -2512,11 +3151,11 @@ function inlineSyntaxPlugin(md, options) {
 
 // src/node/prepareConfigFile.ts
 import { ensureEndingSlash } from "@vuepress/helper";
-import { getDirname, path as path4 } from "vuepress/utils";
+import { getDirname, path as path8 } from "vuepress/utils";
 var { url: filepath } = import.meta;
 var __dirname = getDirname(filepath);
 var CLIENT_FOLDER = ensureEndingSlash(
-  path4.resolve(__dirname, "../client")
+  path8.resolve(__dirname, "../client")
 );
 async function prepareConfigFile(app, options) {
   const imports = /* @__PURE__ */ new Set();
@@ -2569,6 +3208,12 @@ async function prepareConfigFile(app, options) {
     imports.add(`import AudioReader from '${CLIENT_FOLDER}components/AudioReader.vue'`);
     enhances.add(`app.component('AudioReader', AudioReader)`);
   }
+  if (options.demo) {
+    imports.add(`import VPDemoBasic from '${CLIENT_FOLDER}components/VPDemoBasic.vue'`);
+    imports.add(`import VPDemoNormal from '${CLIENT_FOLDER}components/VPDemoNormal.vue'`);
+    enhances.add(`app.component('VPDemoBasic', VPDemoBasic)`);
+    enhances.add(`app.component('VPDemoNormal', VPDemoNormal)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'
@@ -2592,9 +3237,9 @@ function markdownPowerPlugin(options = {}) {
     clientConfigFile: (app) => prepareConfigFile(app, options),
     define: {
       __MD_POWER_INJECT_OPTIONS__: options,
-      __MD_POWER_DASHJS_INSTALLED__: isPackageExists2("dashjs"),
-      __MD_POWER_HLSJS_INSTALLED__: isPackageExists2("hls.js"),
-      __MD_POWER_MPEGTSJS_INSTALLED__: isPackageExists2("mpegts.js")
+      __MD_POWER_DASHJS_INSTALLED__: isPackageExists3("dashjs"),
+      __MD_POWER_HLSJS_INSTALLED__: isPackageExists3("hls.js"),
+      __MD_POWER_MPEGTSJS_INSTALLED__: isPackageExists3("mpegts.js")
     },
     extendsBundlerOptions(bundlerOptions, app) {
       if (options.repl) {
@@ -2616,8 +3261,23 @@ function markdownPowerPlugin(options = {}) {
       docsTitlePlugin(md);
       embedSyntaxPlugin(md, options);
       inlineSyntaxPlugin(md, options);
+      if (options.demo)
+        demoPlugin(app, md);
       await containerPlugin(app, md, options);
       await imageSizePlugin(app, md, options.imageSize);
+    },
+    onPrepared: async () => {
+      if (options.demo)
+        await waitDemoRender();
+    },
+    onWatched(app, watchers) {
+      if (options.demo) {
+        demoWatcher(app, watchers);
+      }
+    },
+    extendsPage: (page) => {
+      if (options.demo)
+        extendsPageWithDemo(page);
     }
   };
 }
@@ -2625,6 +3285,6 @@ export {
   markdownPowerPlugin,
   resolveImageSize
 };
-/* istanbul ignore else -- @preserve */
 /* istanbul ignore if -- @preserve */
+/* istanbul ignore else -- @preserve */
 /* istanbul ignore next -- @preserve */