diff --git a/packages/plugin-caniuse/src/client/clientConfig.ts b/packages/plugin-caniuse/src/client/clientConfig.ts index 15db4490..402e7541 100644 --- a/packages/plugin-caniuse/src/client/clientConfig.ts +++ b/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() } }) }, diff --git a/packages/plugin-caniuse/src/client/resolveCanIUse.ts b/packages/plugin-caniuse/src/client/resolveCanIUse.ts index 2f738c9c..e78bb8e7 100644 --- a/packages/plugin-caniuse/src/client/resolveCanIUse.ts +++ b/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 = `` - el.innerHTML = d - } else - el.innerHTML = - "A feature was not included. Go to https://caniuse.bitsofco.de/#how-to-use 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' } } }) diff --git a/packages/plugin-caniuse/src/node/resolveCanIUse.ts b/packages/plugin-caniuse/src/node/resolveCanIUse.ts index 49bc1807..a9aac7e9 100644 --- a/packages/plugin-caniuse/src/node/resolveCanIUse.ts +++ b/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' - ? `
' : '' - return ` -${before} -
-
+