perf(plugin-caniuse): optimize render content

packages/plugin-caniuse/src/client/clientConfig.ts

@@ -12,9 +12,8 @@ export default defineClientConfig({
     if (__VUEPRESS_SSR__) return
 
     router.afterEach((to, from) => {
-      if (to.path === from.path) return
       if (mode === 'embed') {
-        setTimeout(() => resolveCanIUse(), 1500)
+        resolveCanIUse()
       }
     })
   },

packages/plugin-caniuse/src/client/resolveCanIUse.ts

@@ -1,28 +1,17 @@
+let isBind = false
 export const resolveCanIUse = (): void => {
-  const canIUseEls = Array.from(document.getElementsByClassName('ciu_embed'))
-  for (const el of canIUseEls) {
-    const feature = el.getAttribute('data-feature')
-    const periods = el.getAttribute('data-periods')
-    const accessible = el.getAttribute('data-accessible-colours') || 'false'
-    const image = el.getAttribute('data-image-base') || 'none'
-    if (feature) {
-      const url = 'https://caniuse.bitsofco.de/embed/index.html'
-      const d = `<iframe src="${url}?feat=${feature}&periods=${periods}&accessible-colours=${accessible}&image-base=${image}" frameborder="0" width="100%" height="400px"></iframe>`
-      el.innerHTML = d
-    } else
-      el.innerHTML =
-        "A feature was not included. Go to <a href='https://caniuse.bitsofco.de/#how-to-use'>https://caniuse.bitsofco.de/#how-to-use</a> to generate an embed."
-  }
+  if (isBind) return
+  isBind = true
+
   window.addEventListener('message', (message) => {
     const data = message.data
+
     if (typeof data === 'string' && data.indexOf('ciu_embed') > -1) {
       const [, feature, height] = data.split(':')
-      for (const el of canIUseEls) {
-        if (el.getAttribute('data-feature') === feature) {
-          const h = parseInt(height) + 30
-          ;(el.childNodes[0] as any).height = h + 'px'
-          break
-        }
+      const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]`)
+      if (el) {
+        const h = parseInt(height) + 30
+        ;(el.childNodes[0] as any).height = h + 'px'
       }
     }
   })

packages/plugin-caniuse/src/node/resolveCanIUse.ts

@@ -1,17 +1,20 @@
 import type { CanIUseMode } from '../shared/index.js'
 export const resolveCanIUse = (feature: string, mode: CanIUseMode): string => {
-  const before =
-    mode === 'embed'
-      ? `<p class="ciu_embed" data-feature="${feature}" data-periods="future_2,future_1,current,past_1,past_2" data-accessible-colours="false">`
-      : ''
-  const after = mode === 'embed' ? '</p>' : ''
-  return `
-${before}
-  <picture>
-    <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/${feature}.webp">
-    <source type="image/png" srcset="https://caniuse.bitsofco.de/image/${feature}.png">
-    <img src="https://caniuse.bitsofco.de/image/${feature}.jpg" alt="Data on support for the ${feature} feature across the major browsers from caniuse.com">
-  </picture>
-${after}
-    `
+  if (!feature) return ''
+
+  if (mode === 'image') {
+    return `<picture>
+      <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/${feature}.webp">
+      <source type="image/png" srcset="https://caniuse.bitsofco.de/image/${feature}.png">
+      <img src="https://caniuse.bitsofco.de/image/${feature}.jpg" alt="Data on support for the ${feature} feature across the major browsers from caniuse.com">
+    </picture>`
+  }
+
+  const periods = 'future_2,future_1,current,past_1,past_2'
+  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 `<div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px"></iframe></div>`
 }