diff --git a/docs/.vuepress/themes/components/CanIUseConfig.vue b/docs/.vuepress/themes/components/CanIUseConfig.vue index 70f0cbc8..429308ab 100644 --- a/docs/.vuepress/themes/components/CanIUseConfig.vue +++ b/docs/.vuepress/themes/components/CanIUseConfig.vue @@ -35,7 +35,7 @@ const locale = computed(() => LOCALES[routeLocale.value]) const { feature, featureList, onSelect, isFocus } = useCaniuseFeaturesSearch(inputEl, listEl) const { past, pastList, future, futureList, embedType, embedTypeList } = useCaniuseVersionSelect() -const { output, rendered } = useCaniuse({ feature, embedType, past, future }) +const { output } = useCaniuse({ feature, embedType, past, future }) diff --git a/docs/.vuepress/themes/composables/caniuse.ts b/docs/.vuepress/themes/composables/caniuse.ts index 19a4f9d4..b2b314f9 100644 --- a/docs/.vuepress/themes/composables/caniuse.ts +++ b/docs/.vuepress/themes/composables/caniuse.ts @@ -34,8 +34,8 @@ const locales: LocaleConfig< } const embedTypes: SelectItem[] = [ - { label: 'iframe', value: '' }, - { label: 'image', value: 'image' }, + { label: 'caniuse', value: '' }, + { label: 'baseline', value: 'baseline' }, ] export function useCaniuseVersionSelect(): { @@ -159,18 +159,19 @@ export function useCaniuse({ feature, embedType, past, future }: { future: Ref }): { output: ComputedRef - rendered: ComputedRef } { const output = computed(() => { let content = '@[caniuse' if (embedType.value) content += ` ${embedType.value}` - if (past.value !== '-2' || future.value !== '1') { - if (past.value === '0' && future.value === '0') - content += '{0}' - else - content += `{-${past.value},${future.value}}` + if (embedType.value !== 'baseline') { + if (past.value !== '-2' || future.value !== '1') { + if (past.value === '0' && future.value === '0') + content += '{0}' + else + content += `{-${past.value},${future.value}}` + } } content += '](' @@ -181,21 +182,5 @@ export function useCaniuse({ feature, embedType, past, future }: { return `${content})` }) - const rendered = computed(() => { - if (!feature.value || !embedType.value) - return '' - return resolveCanIUse(feature.value) - }) - - return { output, rendered } -} - -function resolveCanIUse(feature: string): string { - const link = 'https://caniuse.bitsofco.de/image/' - const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com` - return `

- - - ${alt} -

` + return { output } } diff --git a/docs/en/guide/markdown/caniuse.md b/docs/en/guide/markdown/caniuse.md index 6ba4c4dd..4b30ef63 100644 --- a/docs/en/guide/markdown/caniuse.md +++ b/docs/en/guide/markdown/caniuse.md @@ -3,6 +3,7 @@ title: Can I Use createTime: 2025/10/08 14:50:55 icon: streamline:desktop-help permalink: /en/guide/markdown/caniuse/ +badge: New --- ## Overview @@ -43,36 +44,39 @@ You can use this tool directly to help generate the markdown code. @[caniuse embed_type{browser_versions}](feature) ``` +:::info Using the caniuse tool provided by the theme: [caniuse feature search](../../../../tools/caniuse.md) to help generate markdown code. +::: + - `feature` Required. For correct values, please refer to [caniuse-embed.vercel.app](https://caniuse-embed.vercel.app/zh-CN). -- `{browser_versions}` +- `{browser_period}` - Optional. Specifies the support status of the current feature across multiple browser versions. + Optional. The support status of the current feature across multiple version cycles. Default value: `{-2,1}` - Format: `{past,future}` Value range: `-5 ~ 3` + Format: `{past,future}` with a value range of `-5 ~ 3` - - Values less than `0` indicate support status for browser versions lower than the current one. - - `0` indicates the support status for the current browser version. - - Values greater than `0` indicate support status for browser versions higher than the current one. + - Values less than `0` indicate support status in past browser version cycles. + - `0` indicates support status in the current browser version. + - Values greater than `0` indicate support status in future browser version cycles. - `embed_type` Optional. The type of resource embedding. - Type: `'embed' | 'image'` + Type: `'embed' | 'baseline'` Default value: `'embed'` -:::caution -The `image` type is no longer recommended. It is advised to use the `embed` type. -The theme has changed the implementation technology for the embed component. -The current `embed` type now offers significant advantages over the `image` type, -including faster loading speed, smaller size, and better interactive experience. -::: + - `embed` means embedding as version compatibility data tables similar to `caniuse.com` + - `baseline` means embedding as the baseline support status of a feature. + - `Wildly available` indicates broad support across all major browsers + - `Newly available` indicates support only in the latest major browsers + - `limit available` indicates that major browsers may offer partial support, but it is limited, or not supported + - `deprecated` indicates that major browsers have marked it as **deprecated** and do not recommend its use ## Examples @@ -86,22 +90,12 @@ Result: @[caniuse](css-matches-pseudo) -**Get the browser support for the CSS pseudo-class selector `:dir()` as an image:** +**Display baseline support for the CSS pseudo-class selector `:dir()`:** ```md -@[caniuse image](css-matches-pseudo) +@[caniuse baseline](css-matches-pseudo) ``` Result: -@[caniuse image](css-matches-pseudo) - -**Get the browser support for the CSS pseudo-class selector `:dir()` for a specific range of browser versions:** - -```md -@[caniuse{-2,3}](css-matches-pseudo) -``` - -Result: - -@[caniuse{-2,3}](css-matches-pseudo) +@[caniuse baseline](css-matches-pseudo) diff --git a/docs/guide/markdown/caniuse.md b/docs/guide/markdown/caniuse.md index f39c11dd..b5052b09 100644 --- a/docs/guide/markdown/caniuse.md +++ b/docs/guide/markdown/caniuse.md @@ -3,6 +3,7 @@ title: Can I Use createTime: 2024/09/30 14:50:55 icon: streamline:desktop-help permalink: /guide/markdown/caniuse/ +badge: 新 --- ## 概述 @@ -43,34 +44,39 @@ export default defineUserConfig({ @[caniuse embed_type{browser_versions}](feature) ``` +:::info 使用主题提供的 caniuse 工具：[caniuse 特性搜索](../../../tools/caniuse.md) 帮助生成 markdown 代码。 +::: + - `feature` 必填。 正确取值请参考 [caniuse-embed.vercel.app](https://caniuse-embed.vercel.app/zh-CN) -- `{browser_versions}` +- `{browser_period}` - 可选。当前特性在多个版本中的支持情况。 + 可选。当前特性在多个版本周期中的支持情况。 默认值为: `{-2,1}` 格式： `{past,future}` 取值范围为 `-5 ~ 3` - - 小于`0` 表示低于当前浏览器版本的支持情况 + - 小于`0` 表示过去的浏览器版本周期的支持情况 - `0` 表示当前浏览器版本的支持情况 - - 大于`0` 表示高于当前浏览器版本的支持情况 + - 大于`0` 表示未来的浏览器版本周期的支持情况 - `embed_type` - 可选。 资源嵌入的类型。 + 可选。 嵌入的类型。 - 类型： `'embed' | 'image'` + 类型： `'embed' | 'baseline'` 默认值为：`'embed'` -:::caution -不再推荐使用 image 类型，建议使用 embed 类型，主题更换了 embed 实现技术方案， -现在的 embed 类型优势已远远超过 image 类型，加载速度更快，体积更小，交互体验更好。 -::: + - `embed` 表示嵌入为 类似 `caniuse.com` 的版本兼容数据表格 + - `baseline` 表示嵌入为 特性的基线支持情况。 + - `Wildly available` 表示受到所有主流浏览器的广泛支持 + - `Newly available` 表示仅受到最新主流浏览器的支持 + - `limit available` 表示主流浏览器可能部分支持，但支持程度有限，或者不支持 + - `deprecated` 表示主流浏览器已将其标记为 **弃用**，不推荐使用 ## 示例 @@ -84,22 +90,12 @@ export default defineUserConfig({ @[caniuse](css-matches-pseudo) -**以图片的形式，获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况：** +**显示 css 伪类选择器 `:dir()` 的基线支持情况：** ```md -@[caniuse image](css-matches-pseudo) +@[caniuse baseline](css-matches-pseudo) ``` 效果： -@[caniuse image](css-matches-pseudo) - -**获取 css 伪类选择器 `:dir()` 特定范围浏览器的支持情况：** - -```md -@[caniuse{-2,3}](css-matches-pseudo) -``` - -效果： - -@[caniuse{-2,3}](css-matches-pseudo) +@[caniuse baseline](css-matches-pseudo) diff --git a/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap index 70c7fc45..58a07490 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap @@ -39,13 +39,7 @@ exports[`caniusePlugin > should not work 8`] = ` exports[`caniusePlugin > should work 1`] = `""`; -exports[`caniusePlugin > should work 2`] = ` -"

- - - Data on support for the feature feature across the major browsers from caniuse.com -

" -`; +exports[`caniusePlugin > should work 2`] = `""`; exports[`caniusePlugin > should work 3`] = `""`; @@ -55,13 +49,7 @@ exports[`caniusePlugin > should work 5`] = `" should work 6`] = `""`; -exports[`caniusePlugin > should work with options 1`] = ` -"

- - - Data on support for the feature feature across the major browsers from caniuse.com -

" -`; +exports[`caniusePlugin > should work with options 1`] = `""`; exports[`caniusePlugin > should work with options 2`] = `""`; @@ -74,17 +62,17 @@ exports[`legacyCaniuse > should work 2`] = `" should work with unknown mode 1`] = ` -"

+"

Data on support for the feature feature across the major browsers from caniuse.com -

" +

" `; exports[`legacyCaniuse > should work with unknown mode 2`] = ` -"

+"

Data on support for the feature{-2,4} feature across the major browsers from caniuse.com -

" +

" `; diff --git a/plugins/plugin-md-power/__test__/caniusePlugin.spec.ts b/plugins/plugin-md-power/__test__/caniusePlugin.spec.ts index 29381195..0e24e9d0 100644 --- a/plugins/plugin-md-power/__test__/caniusePlugin.spec.ts +++ b/plugins/plugin-md-power/__test__/caniusePlugin.spec.ts @@ -21,7 +21,7 @@ describe('caniusePlugin', () => { const md = createMarkdown() expect(md.render('@[caniuse](feature)')).toMatchSnapshot() - expect(md.render('@[caniuse image](feature)')).toMatchSnapshot() + expect(md.render('@[caniuse baseline](feature)')).toMatchSnapshot() expect(md.render('@[caniuse embed](feature)')).toMatchSnapshot() expect(md.render('@[caniuse {-2,4}](feature)')).toMatchSnapshot() expect(md.render(`\ @@ -32,7 +32,7 @@ describe('caniusePlugin', () => { }) it('should work with options', () => { - const md = createMarkdown({ mode: 'image' }) + const md = createMarkdown({ mode: 'baseline' }) expect(md.render('@[caniuse](feature)')).toMatchSnapshot() expect(md.render('@[caniuse embed](feature)')).toMatchSnapshot() diff --git a/plugins/plugin-md-power/src/client/components/CanIUse.vue b/plugins/plugin-md-power/src/client/components/CanIUse.vue index 1cae46fb..17766940 100644 --- a/plugins/plugin-md-power/src/client/components/CanIUse.vue +++ b/plugins/plugin-md-power/src/client/components/CanIUse.vue @@ -12,20 +12,21 @@ interface MessageData { } } -const { feature, past = 2, future = 1, meta = '' } = defineProps<{ +const { feature, past = 2, future = 1, meta = '', baseline = false } = defineProps<{ feature: string past?: number future?: number meta?: string + baseline?: boolean }>() const url = 'https://caniuse.pengzhanbo.cn/' -const height = ref('330px') +const height = ref(baseline ? '150px' : '350px') const isDark = useDarkMode() const source = computed(() => { - const source = `${url}${feature}#past=${past}&future=${future}&meta=${meta}&theme=${isDark.value ? 'dark' : 'light'}` + const source = `${url}${feature}${baseline ? '/baseline#' : `#past=${past}&future=${future}&`}meta=${meta}&theme=${isDark.value ? 'dark' : 'light'}` return source }) @@ -34,7 +35,7 @@ useEventListener('message', (event) => { const data = parseData(event.data) const { type, payload } = data if ( - type === 'ciu_embed' + type === 'ciu-embed' && payload && payload.feature === feature && payload.meta === meta @@ -57,13 +58,7 @@ function parseData(data: string | MessageData): MessageData {