feat(plugin-md-power): upgrade can-i-use

plugins/plugin-md-power/src/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>

plugins/plugin-md-power/src/client/composables/setupCanIUse.ts

@@ -1,20 +0,0 @@
-let isBind = false
-export function setupCanIUse(): void {
-  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] as any).height = `${h}px`
-        el.setAttribute('data-skip', 'true')
-      }
-    }
-  })
-}

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

@@ -7,8 +7,11 @@ import type Token from 'markdown-it/lib/token.mjs'
 import type { RuleBlock } from 'markdown-it/lib/parser_block.mjs'
 import type { Markdown } from 'vuepress/markdown'
 import container from 'markdown-it-container'
+import { customAlphabet } from 'nanoid'
 import type { CanIUseMode, CanIUseOptions, CanIUseTokenMeta } from '../../shared/index.js'
 
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 5)
+
 // @[caniuse]()
 const minLength = 12
 
@@ -17,6 +20,7 @@ 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: CanIUseMode): RuleBlock {
   return (state, startLine, endLine, silent) => {
@@ -76,18 +80,16 @@ function resolveCanIUse({ feature, mode, versions }: CanIUseTokenMeta): string {
     </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}`
+  feature = feature.replace(UNDERLINE_RE, '_')
+  const { past, future } = resolveVersions(versions)
+  const meta = nanoid()
 
-  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>`
+  return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`
 }
 
-function resolveVersions(versions: string): string {
+function resolveVersions(versions: string): { past: number, future: number } {
   if (!versions)
-    return 'future_1,current,past_1,past_2'
+    return { past: 2, future: 1 }
 
   const list = versions
     .split(',')
@@ -97,16 +99,10 @@ function resolveVersions(versions: string): string {
   list.push(0)
 
   const uniq = [...new Set(list)].sort((a, b) => b - a)
-  const result: string[] = []
-  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]),
+  }
 }
 
 /**

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

@@ -51,13 +51,18 @@ export async function prepareConfigFile(app: App, options: MarkdownPowerPluginOp
     enhances.add(`app.component('LanguageRepl', LanguageRepl)`)
   }
 
-  enhances.add(`if (__VUEPRESS_SSR__) return`)
+  // enhances.add(`if (__VUEPRESS_SSR__) return`)
 
   if (options.caniuse) {
-    imports.add(`import { setupCanIUse } from '${CLIENT_FOLDER}composables/setupCanIUse.js'`)
-    enhances.add(`router.afterEach(() => setupCanIUse())`)
+    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',
     `\