feat(plugin-caniuse): 新增 浏览器版本支持列表选项

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')
       }
     }
   })

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 ''

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,11 +12,35 @@ 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'
   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>`
 }
+
+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(',')
+}