From d537d5af93173fe5c2f3e6fe2def2e66e6419b26 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 31 Dec 2023 00:08:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-caniuse):=20=E6=96=B0=E5=A2=9E=20?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E7=89=88=E6=9C=AC=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/client/resolveCanIUse.ts              |  3 +-
 plugins/plugin-caniuse/src/node/plugin.ts     |  6 ++--
 .../plugin-caniuse/src/node/resolveCanIUse.ts | 28 +++++++++++++++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/plugins/plugin-caniuse/src/client/resolveCanIUse.ts b/plugins/plugin-caniuse/src/client/resolveCanIUse.ts
index 1530b7aa2..6c60b7ac3 100644
--- a/plugins/plugin-caniuse/src/client/resolveCanIUse.ts
+++ b/plugins/plugin-caniuse/src/client/resolveCanIUse.ts
@@ -9,10 +9,11 @@ export function resolveCanIUse(): void {
 
     if (typeof data === 'string' && data.includes('ciu_embed')) {
       const [, feature, height] = data.split(':')
-      const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]`)
+      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')
       }
     }
   })
diff --git a/plugins/plugin-caniuse/src/node/plugin.ts b/plugins/plugin-caniuse/src/node/plugin.ts
index 09d9b9437..ce9d2f899 100644
--- a/plugins/plugin-caniuse/src/node/plugin.ts
+++ b/plugins/plugin-caniuse/src/node/plugin.ts
@@ -30,8 +30,10 @@ export function caniusePlugin({
   const render = (tokens: Token[], index: number): string => {
     const token = tokens[index]
     if (token.nesting === 1) {
-      const feature = token.info.trim().slice(type.length).trim() || ''
-      return feature ? resolveCanIUse(feature, mode) : ''
+      const info = token.info.trim().slice(type.length).trim() || ''
+      const feature = info.split(/\s+/)[0]
+      const versions = info.match(/\{(.*)\}/)?.[1] || ''
+      return feature ? resolveCanIUse(feature, mode, versions) : ''
     }
     else {
       return ''
diff --git a/plugins/plugin-caniuse/src/node/resolveCanIUse.ts b/plugins/plugin-caniuse/src/node/resolveCanIUse.ts
index cf8ee547c..9c4a99944 100644
--- a/plugins/plugin-caniuse/src/node/resolveCanIUse.ts
+++ b/plugins/plugin-caniuse/src/node/resolveCanIUse.ts
@@ -1,6 +1,6 @@
 import type { CanIUseMode } from '../shared/index.js'
 
-export function resolveCanIUse(feature: string, mode: CanIUseMode): string {
+export function resolveCanIUse(feature: string, mode: CanIUseMode, versions: string): string {
   if (!feature)
     return ''
 
@@ -12,7 +12,7 @@ export function resolveCanIUse(feature: string, mode: CanIUseMode): string {
     </picture>`
   }
 
-  const periods = 'future_2,future_1,current,past_1,past_2'
+  const periods = resolveVersions(versions)
   const accessible = 'false'
   const image = 'none'
   const url = 'https://caniuse.bitsofco.de/embed/index.html'
@@ -20,3 +20,27 @@ export function resolveCanIUse(feature: string, mode: CanIUseMode): string {
 
   return `<div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px"></iframe></div>`
 }
+
+function resolveVersions(versions: string): string {
+  if (!versions)
+    return 'future_1,current,past_1,past_2'
+
+  const list = versions
+    .split(',')
+    .map(v => Number(v.trim()))
+    .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3)
+
+  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(',')
+}