vuepress-plugin-md-power 1.0.0-rc.129 → 1.0.0-rc.131

package/lib/client/components/VPDemoBasic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useExpand } from '../composables/demo.js'
 
 import '../styles/demo.css'
 
@@ -10,10 +10,7 @@ const props = defineProps<{
   expanded?: boolean
 }>()
 
-const showCode = ref(props.expanded ?? true)
-function toggleCode() {
-  showCode.value = !showCode.value
-}
+const [showCode, toggleCode] = useExpand(props.expanded)
 </script>
 
 <template>

package/lib/client/components/VPDemoNormal.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
-import { computed, onMounted, ref, useId, useTemplateRef, watch } from 'vue'
-import { loadScript, loadStyle } from '../utils/shared.js'
-import Loading from './icons/Loading.vue'
+import type { DemoConfig } from '../composables/demo.js'
+import { useTemplateRef } from 'vue'
+import { useExpand, useFence, useNormalDemo, useResources } from '../composables/demo.js'
 
 import '../styles/demo.css'
 
@@ -10,121 +9,41 @@ const props = defineProps<{
   title?: string
   desc?: string
   expanded?: boolean
-  config?: {
-    html: string
-    css: string
-    script: string
-    jsLib: string[]
-    cssLib: string[]
-  }
+  config?: DemoConfig
 }>()
 
-const draw = useTemplateRef<HTMLDivElement>('draw')
-const id = useId()
-const loaded = ref(true)
+const [showCode, toggleCode] = useExpand(props.expanded)
 
-const resourcesEl = useTemplateRef<HTMLDivElement>('resourcesEl')
-const resources = computed<{
-  name: string
-  items: { name: string, url: string }[]
-}[]>(() => {
-  if (!props.config)
-    return []
-  return [
-    { name: 'JavaScript', items: props.config.jsLib.map(url => ({ name: normalizeName(url), url })) },
-    { name: 'CSS', items: props.config.cssLib.map(url => ({ name: normalizeName(url), url })) },
-  ].filter(i => i.items.length)
-})
+const { resources, showResources, toggleResources } = useResources(
+  useTemplateRef<HTMLDivElement>('resourcesEl'),
+  () => props.config,
+)
 
-function normalizeName(url: string) {
-  return url.slice(url.lastIndexOf('/') + 1)
-}
+const { id, height } = useNormalDemo(
+  useTemplateRef<HTMLIFrameElement>('draw'),
+  () => props.title,
+  () => props.config,
+)
 
-const showResources = ref(false)
-
-function toggleResources() {
-  showResources.value = !showResources.value
-}
-
-onClickOutside(resourcesEl, () => {
-  showResources.value = false
-})
-
-onMounted(() => {
-  if (!draw.value)
-    return
-  const root = draw.value.attachShadow({ mode: 'open' })
-
-  watch(() => props.config, async () => {
-    root.innerHTML = props.config?.html ?? ''
-
-    props.config?.cssLib?.forEach(url => loadStyle(url, root))
-    if (props.config?.css) {
-      const style = document.createElement('style')
-      style.innerHTML = props.config?.css ?? ''
-      root.appendChild(style)
-    }
-
-    if (props.config?.jsLib?.length) {
-      loaded.value = false
-      await Promise.all(props.config.jsLib.map(url => loadScript(url)))
-        .catch(e => console.warn(e))
-      loaded.value = true
-    }
-
-    if (props.config?.script) {
-      const script = document.createElement('script')
-      script.type = 'text/javascript'
-      script.innerHTML = `;(function(document){\n${props.config.script}\n})(document.querySelector('#VPDemoNormalDraw${id}').shadowRoot);`
-      root.appendChild(script)
-    }
-  }, { immediate: true })
-})
-
-const fence = useTemplateRef<HTMLDivElement>('fence')
-const data = ref<{
-  js: string
-  css: string
-  html: string
-  jsType: string
-  cssType: string
-}>({ js: '', css: '', html: '', jsType: '', cssType: '' })
-
-onMounted(() => {
-  if (!fence.value)
-    return
-
-  data.value.html = props.config?.html ?? ''
-  const els = Array.from(fence.value.querySelectorAll('div[class*="language-"]'))
-  for (const el of els) {
-    const lang = el.className.match(/language-(\w+)/)?.[1] ?? ''
-    const content = el.querySelector('pre')?.textContent ?? ''
-    if (lang === 'js' || lang === 'javascript') {
-      data.value.js = content
-      data.value.jsType = 'js'
-    }
-    if (lang === 'ts' || lang === 'typescript') {
-      data.value.js = content
-      data.value.jsType = 'ts'
-    }
-    if (lang === 'css' || lang === 'scss' || lang === 'less' || lang === 'stylus' || lang === 'styl') {
-      data.value.css = content
-      data.value.cssType = lang === 'styl' ? 'stylus' : lang
-    }
-  }
-})
-
-const showCode = ref(props.expanded ?? false)
-function toggleCode() {
-  showCode.value = !showCode.value
-}
+const data = useFence(
+  useTemplateRef<HTMLDivElement>('fence'),
+  () => props.config,
+)
 </script>
 
 <template>
   <div class="vp-demo-wrapper normal">
     <div class="demo-draw">
-      <Loading v-if="!loaded" />
-      <div :id="`VPDemoNormalDraw${id}`" ref="draw" />
+      <iframe
+        :id="`VPDemoNormalDraw${id}`"
+        ref="draw"
+        class="draw-iframe"
+        allow="accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; web-share *; serial *; xr-spatial-tracking *"
+        allowfullscreen="true"
+        allowpaymentrequest="true"
+        allowtransparency="true"
+        sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" :style="{ height }"
+      />
     </div>
     <div v-if="title || desc" class="demo-info">
       <p v-if="title" class="title">

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

@@ -0,0 +1,48 @@
+import * as vue from 'vue';
+import { ShallowRef, MaybeRefOrGetter } from 'vue';
+
+interface DemoConfig {
+    html: string;
+    css: string;
+    script: string;
+    jsLib: string[];
+    cssLib: string[];
+}
+declare function useExpand(defaultExpand?: boolean): readonly [vue.Ref<boolean, boolean>, () => void];
+declare function useResources(el: ShallowRef<HTMLDivElement | null>, config: MaybeRefOrGetter<DemoConfig | undefined>): {
+    resources: vue.ComputedRef<{
+        name: string;
+        items: {
+            name: string;
+            url: string;
+        }[];
+    }[]>;
+    showResources: vue.Ref<boolean, boolean>;
+    toggleResources: () => void;
+};
+declare function useFence(fence: ShallowRef<HTMLDivElement | null>, config: MaybeRefOrGetter<DemoConfig | undefined>): vue.Ref<{
+    js: string;
+    css: string;
+    html: string;
+    jsType: string;
+    cssType: string;
+}, {
+    js: string;
+    css: string;
+    html: string;
+    jsType: string;
+    cssType: string;
+} | {
+    js: string;
+    css: string;
+    html: string;
+    jsType: string;
+    cssType: string;
+}>;
+declare function useNormalDemo(draw: ShallowRef<HTMLIFrameElement | null>, title: MaybeRefOrGetter<string | undefined>, config: MaybeRefOrGetter<DemoConfig | undefined>): {
+    id: string;
+    height: vue.Ref<string, string>;
+};
+declare function parseData(data: any): any;
+
+export { type DemoConfig, parseData, useExpand, useFence, useNormalDemo, useResources };

package/lib/client/composables/demo.js

@@ -0,0 +1,140 @@
+// src/client/composables/demo.ts
+import { onClickOutside, useEventListener } from "@vueuse/core";
+import { computed, getCurrentInstance, onMounted, ref, toValue, useId, watch } from "vue";
+import { isPlainObject } from "vuepress/shared";
+function useExpand(defaultExpand = true) {
+  const expanded = ref(defaultExpand);
+  function toggle() {
+    expanded.value = !expanded.value;
+  }
+  return [expanded, toggle];
+}
+function useResources(el, config) {
+  const resources = computed(() => {
+    const conf = toValue(config);
+    if (!conf)
+      return [];
+    return [
+      { name: "JavaScript", items: conf.jsLib.map((url) => ({ name: normalizeName(url), url })) },
+      { name: "CSS", items: conf.cssLib.map((url) => ({ name: normalizeName(url), url })) }
+    ].filter((i) => i.items.length);
+  });
+  function normalizeName(url) {
+    return url.slice(url.lastIndexOf("/") + 1);
+  }
+  const showResources = ref(false);
+  function toggleResources() {
+    showResources.value = !showResources.value;
+  }
+  onClickOutside(el, () => {
+    showResources.value = false;
+  });
+  return {
+    resources,
+    showResources,
+    toggleResources
+  };
+}
+function useFence(fence, config) {
+  const data = ref({ js: "", css: "", html: "", jsType: "", cssType: "" });
+  onMounted(() => {
+    if (!fence.value)
+      return;
+    const conf = toValue(config);
+    data.value.html = conf?.html ?? "";
+    const els = Array.from(fence.value.querySelectorAll('div[class*="language-"]'));
+    for (const el of els) {
+      const lang = el.className.match(/language-(\w+)/)?.[1] ?? "";
+      const content = el.querySelector("pre")?.textContent ?? "";
+      if (lang === "js" || lang === "javascript") {
+        data.value.js = content;
+        data.value.jsType = "js";
+      }
+      if (lang === "ts" || lang === "typescript") {
+        data.value.js = content;
+        data.value.jsType = "ts";
+      }
+      if (lang === "css" || lang === "scss" || lang === "less" || lang === "stylus" || lang === "styl") {
+        data.value.css = content;
+        data.value.cssType = lang === "styl" ? "stylus" : lang;
+      }
+    }
+  });
+  return data;
+}
+function useNormalDemo(draw, title, config) {
+  const current = getCurrentInstance();
+  const id = useId();
+  const isDark = computed(() => current?.appContext.config.globalProperties.$isDark.value);
+  const height = ref("100px");
+  onMounted(() => {
+    if (!draw.value)
+      return;
+    const iframeDoc = draw.value.contentDocument || draw.value.contentWindow?.document;
+    if (!iframeDoc)
+      return;
+    const templateId = `VPDemoNormalDraw${id}`;
+    useEventListener("message", (event) => {
+      const data = parseData(event.data);
+      if (data.type === templateId) {
+        height.value = `${data.height + 5}px`;
+      }
+    });
+    watch([config, title], () => {
+      iframeDoc.write(createHTMLTemplate(toValue(title) || "Demo", templateId, toValue(config)));
+    }, { immediate: true });
+    watch(isDark, () => {
+      iframeDoc.documentElement.dataset.theme = isDark.value ? "dark" : "light";
+    }, { immediate: true });
+  });
+  return { id, height };
+}
+function createHTMLTemplate(title, id, config) {
+  const { cssLib = [], jsLib = [], html, css, script } = config || {};
+  const stylesheet = cssLib.map((url) => `<link rel="stylesheet" href="${url}">`).join("");
+  const scripts = jsLib.map((url) => `<script src="${url}"></script>`).join("");
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>${title}</title>
+    ${stylesheet}${scripts}
+    <style>${css}</style>
+  </head>
+  <body>
+    ${html}
+    <script>;(function(){${script}})();</script>
+    <script>;(function(){
+  const height = Math.ceil(document.documentElement.getBoundingClientRect().height)
+  window.parent?.postMessage({ type: '${id}', height }, '*')
+  if (typeof window.ResizeObserver === 'undefined')
+    return
+  const resizeObserver = new ResizeObserver(entries => {
+    const height = Math.ceil(document.documentElement.getBoundingClientRect().height)
+    window.parent?.postMessage({ type: '${id}', height }, '*')
+  })
+  resizeObserver.observe(document.documentElement)
+})();</script>
+  </body>
+</html>`;
+}
+function parseData(data) {
+  try {
+    if (typeof data === "string") {
+      return JSON.parse(data);
+    } else if (isPlainObject(data)) {
+      return data;
+    }
+    return {};
+  } catch {
+    return {};
+  }
+}
+export {
+  parseData,
+  useExpand,
+  useFence,
+  useNormalDemo,
+  useResources
+};

package/lib/client/styles/demo.css

@@ -9,6 +9,13 @@
   padding: 24px;
 }
 
+.vp-demo-wrapper .demo-draw .draw-iframe {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
 .vp-demo-wrapper .demo-info .title {
   display: flex;
   align-items: center;

package/lib/node/index.js

@@ -2101,9 +2101,11 @@ function demoWatcher(app, watchers) {
     delete tasks[path9];
     watcher.unwatch(path9);
   });
-  watchers.push(() => {
-    watcher.close();
-    watcher = null;
+  watchers.push({
+    close: () => {
+      watcher.close();
+      watcher = null;
+    }
   });
 }
 function addTask(app, path9, output) {
@@ -3254,7 +3256,7 @@ function markdownPowerPlugin(options = {}) {
         addViteOptimizeDepsInclude(
           bundlerOptions,
           app,
-          ["artplayer", "dashjs", "hls.js", "mpegts.js"]
+          ["artplayer", "dashjs", "hls.js", "mpegts.js/dist/mpegts.js"]
         );
       }
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.129",
+  "version": "1.0.0-rc.131",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -33,14 +33,14 @@
   "peerDependencies": {
     "artplayer": "^5.2.0",
     "dashjs": "^4.7.4",
-    "esbuild": "^0.24.2",
+    "esbuild": ">=0.24.2",
     "hls.js": "^1.5.18",
     "less": "^4.2.1",
     "markdown-it": "^14.0.0",
-    "mpegts.js": "1.7.3",
+    "mpegts.js": "^1.8.0",
     "sass": "^1.83.0",
     "sass-embedded": "^1.83.0",
-    "stylus": "0.64.0",
+    "stylus": ">=0.64.0",
     "vuepress": "2.0.0-rc.19"
   },
   "peerDependenciesMeta": {
@@ -61,7 +61,7 @@
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.16.2",
+    "@mdit/plugin-attrs": "^0.16.7",
     "@mdit/plugin-footnote": "^0.16.0",
     "@mdit/plugin-mark": "^0.16.0",
     "@mdit/plugin-sub": "^0.16.0",
@@ -69,24 +69,24 @@
     "@mdit/plugin-tab": "^0.16.0",
     "@mdit/plugin-tasklist": "^0.16.0",
     "@vuepress/helper": "2.0.0-rc.73",
-    "@vueuse/core": "^12.4.0",
+    "@vueuse/core": "^12.7.0",
     "chokidar": "3.6.0",
     "image-size": "^1.2.0",
     "local-pkg": "^1.0.0",
     "lru-cache": "^11.0.2",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.0.9",
-    "shiki": "^2.0.3",
-    "tm-grammars": "^1.22.9",
-    "tm-themes": "^1.9.8",
+    "nanoid": "^5.1.0",
+    "shiki": "^2.4.1",
+    "tm-grammars": "^1.22.14",
+    "tm-themes": "^1.9.12",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "artplayer": "^5.2.2",
-    "dashjs": "^4.7.4",
-    "hls.js": "^1.5.19",
-    "mpegts.js": "1.7.3"
+    "dashjs": "^5.0.0",
+    "hls.js": "^1.5.20",
+    "mpegts.js": "^1.8.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,4 +0,0 @@
-declare function loadScript(src: string): Promise<void>;
-declare function loadStyle(href: string, target: ShadowRoot): void;
-
-export { loadScript, loadStyle };

package/lib/client/utils/shared.js

@@ -1,36 +0,0 @@
-// src/client/utils/shared.ts
-var cache = {};
-function loadScript(src) {
-  if (__VUEPRESS_SSR__)
-    return Promise.resolve();
-  if (document.querySelector(`script[src="${src}"]`)) {
-    if (cache[src])
-      return cache[src];
-    return Promise.resolve();
-  }
-  const script = document.createElement("script");
-  script.src = src;
-  document.body.appendChild(script);
-  cache[src] = new Promise((resolve, reject) => {
-    script.onload = () => {
-      resolve();
-      delete cache[src];
-    };
-    script.onerror = reject;
-  });
-  return cache[src];
-}
-function loadStyle(href, target) {
-  if (__VUEPRESS_SSR__)
-    return;
-  if (target.querySelector(`link[href="${href}"]`))
-    return;
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = href;
-  target.appendChild(link);
-}
-export {
-  loadScript,
-  loadStyle
-};