vitepress-plugin-caniuse 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,108 @@
+# vitepress-plugin-caniuse
+
+Embed [caniuse.com](https://caniuse.com/) data in your VitePress site.
+
+在 VitePress 中嵌入 [caniuse.com](https://caniuse.com/) 数据
+
+## Usage
+
+### With Vitepress-tuck
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-tuck vitepress-plugin-caniuse
+# pnpm
+pnpm add -D vitepress-tuck vitepress-plugin-caniuse
+# yarn
+yarn add -D vitepress-tuck vitepress-plugin-caniuse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import caniuse from 'vitepress-plugin-caniuse'
+import { defineConfig } from 'vitepress-tuck'
+
+export default defineConfig({
+  plugins: [caniuse()],
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import enhanceApp from 'virtual:enhance-app'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceApp(ctx)
+  },
+} satisfies Theme
+```
+
+### With Vitepress
+
+**Installation:**
+
+```bash
+# npm
+npm install -D vitepress-plugin-caniuse
+# pnpm
+pnpm add -D vitepress-plugin-caniuse
+# yarn
+yarn add -D vitepress-plugin-caniuse
+```
+
+**Configuration:**
+
+```ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { caniuseMarkdownPlugin } from 'vitepress-plugin-caniuse'
+
+export default defineConfig({
+  markdown: {
+    config: (md) => {
+      md.use(caniuseMarkdownPlugin)
+    },
+  },
+  vite: {
+    ssr: {
+      noExternal: ['vitepress-plugin-caniuse'],
+    },
+  },
+})
+```
+
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import { enhanceAppWithCaniuse } from 'vitepress-plugin-caniuse/client'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    enhanceAppWithCaniuse(ctx)
+  },
+} satisfies Theme
+```
+
+## Syntax
+
+```md
+@[caniuse](feature_name)
+```
+
+## Example
+
+```md
+@[caniuse](css-grid)
+```
+
+You can view all available `feature_name` from <https://caniuse-embed.vercel.app> or <https://caniuse.com/>

package/dist/client/browser/index.d.ts

@@ -0,0 +1,19 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPCaniuse.vue.d.ts
+type __VLS_Props = {
+  feature: string;
+  past?: number;
+  future?: number;
+  meta?: string;
+  baseline?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithCaniuse({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCaniuse, enhanceAppWithCaniuse };

package/dist/client/browser/index.js

@@ -0,0 +1,53 @@
+import "../style.css";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { useData } from "vitepress/client";
+//#region src/client/VPCaniuse.vue
+const _hoisted_1 = ["src", "title"];
+const url = "https://caniuse.pengzhanbo.cn/";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCaniuse",
+	props: {
+		feature: {},
+		past: { default: 2 },
+		future: { default: 1 },
+		meta: { default: "" },
+		baseline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const { isDark } = useData();
+		const height = ref(__props.baseline ? "150px" : "350px");
+		const source = computed(() => {
+			return `${url}${__props.feature}${__props.baseline ? "/baseline#" : `#past=${__props.past}&future=${__props.future}&`}meta=${__props.meta}&theme=${isDark.value ? "dark" : "light"}`;
+		});
+		useEventListener("message", (event) => {
+			const { type, payload } = parseData(event.data);
+			if (type === "ciu-embed" && payload && payload.feature === __props.feature && payload.meta === __props.meta) height.value = `${Math.ceil(payload.height)}px`;
+		});
+		function parseData(data) {
+			if (typeof data === "string") try {
+				return JSON.parse(data);
+			} catch {
+				return { type: "" };
+			}
+			return data;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["vp-caniuse ciu_embed", { baseline: __props.baseline }]) }, [createElementVNode("iframe", {
+				src: source.value,
+				style: normalizeStyle({ height: height.value }),
+				title: `Can I use ${__props.feature}`
+			}, null, 12, _hoisted_1)], 2);
+		};
+	}
+});
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCaniuse({ app }) {
+	app.component("VPCaniuse", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPCaniuse, enhanceAppWithCaniuse };

package/dist/client/ssr/index.d.ts

@@ -0,0 +1,19 @@
+import { EnhanceAppContext } from "vitepress/client";
+
+//#region src/client/VPCaniuse.vue.d.ts
+type __VLS_Props = {
+  feature: string;
+  past?: number;
+  future?: number;
+  meta?: string;
+  baseline?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+//#region src/client/index.d.ts
+declare function enhanceAppWithCaniuse({
+  app
+}: EnhanceAppContext): void;
+//#endregion
+export { _default as VPCaniuse, enhanceAppWithCaniuse };

package/dist/client/ssr/index.js

@@ -0,0 +1,55 @@
+import { computed, defineComponent, mergeProps, ref, useSSRContext } from "vue";
+import { ssrRenderAttr, ssrRenderAttrs, ssrRenderStyle } from "vue/server-renderer";
+import { useEventListener } from "@vueuse/core";
+import { useData } from "vitepress/client";
+//#region src/client/VPCaniuse.vue
+const url = "https://caniuse.pengzhanbo.cn/";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCaniuse",
+	__ssrInlineRender: true,
+	props: {
+		feature: {},
+		past: { default: 2 },
+		future: { default: 1 },
+		meta: { default: "" },
+		baseline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const { isDark } = useData();
+		const height = ref(__props.baseline ? "150px" : "350px");
+		const source = computed(() => {
+			return `${url}${__props.feature}${__props.baseline ? "/baseline#" : `#past=${__props.past}&future=${__props.future}&`}meta=${__props.meta}&theme=${isDark.value ? "dark" : "light"}`;
+		});
+		useEventListener("message", (event) => {
+			const { type, payload } = parseData(event.data);
+			if (type === "ciu-embed" && payload && payload.feature === __props.feature && payload.meta === __props.meta) height.value = `${Math.ceil(payload.height)}px`;
+		});
+		function parseData(data) {
+			if (typeof data === "string") try {
+				return JSON.parse(data);
+			} catch {
+				return { type: "" };
+			}
+			return data;
+		}
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: ["vp-caniuse ciu_embed", { baseline: __props.baseline }] }, _attrs))}><iframe${ssrRenderAttr("src", source.value)} style="${ssrRenderStyle({ height: height.value })}"${ssrRenderAttr("title", `Can I use ${__props.feature}`)}></iframe></div>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/VPCaniuse.vue");
+	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/index.ts
+function enhanceAppWithCaniuse({ app }) {
+	app.component("VPCaniuse", _sfc_main);
+}
+//#endregion
+export { _sfc_main as VPCaniuse, enhanceAppWithCaniuse };

package/dist/client/style.css

@@ -0,0 +1,19 @@
+.vp-caniuse {
+  margin: 16px -24px;
+}
+
+.vp-caniuse.baseline {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.vp-caniuse iframe {
+  width: 100%;
+  border: none;
+}
+
+@media (min-width: 768px) {
+  .vp-caniuse {
+    margin: 16px 0;
+  }
+}

package/dist/node/index.d.ts

@@ -0,0 +1,35 @@
+import { PluginSimple } from "markdown-it";
+
+//#region src/node/caniusePlugin.d.ts
+/**
+ * @example
+ * `.vitepress/config.ts`
+ * ```ts
+ * import { definePlugin } from 'vitepress'
+ * import { caniuseMarkdownPlugin } from 'vitepress-plugin-caniuse'
+ * export default defineConfig({
+ *   markdown: {
+ *     config: (md) => {
+ *       md.use(caniuseMarkdownPlugin)
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const caniuseMarkdownPlugin: PluginSimple;
+//#endregion
+//#region src/node/index.d.ts
+/**
+ * @example
+ * `.vitepress/config.ts`
+ * ```ts
+ * import { definePlugin } from 'vitepress-tuck'
+ * import caniuse from 'vitepress-plugin-caniuse'
+ * export default defineConfig({
+ *   plugins: [caniuse()],
+ * })
+ * ```
+ */
+declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+export { caniuseMarkdownPlugin, _default as default };

package/dist/node/index.js

@@ -0,0 +1,81 @@
+import { definePlugin } from "vitepress-tuck";
+import { createEmbedRuleBlock, stringifyAttrs } from "vitepress-plugin-toolkit";
+//#region src/node/caniusePlugin.ts
+/**
+* @example
+* `.vitepress/config.ts`
+* ```ts
+* import { definePlugin } from 'vitepress'
+* import { caniuseMarkdownPlugin } from 'vitepress-plugin-caniuse'
+* export default defineConfig({
+*   markdown: {
+*     config: (md) => {
+*       md.use(caniuseMarkdownPlugin)
+*     },
+*   },
+* })
+* ```
+*/
+const caniuseMarkdownPlugin = (md) => {
+	createEmbedRuleBlock(md, {
+		type: "caniuse",
+		syntaxPattern: /^@\[caniuse\s*(embed|baseline)?(?:\{([0-9,\-]*)\})?\]\(([^)]*)\)/,
+		meta: ([, mode, versions = "", feature = ""]) => ({
+			feature,
+			mode: mode || "embed",
+			versions
+		}),
+		content: resolveCanIUse
+	});
+};
+const UNDERLINE_RE = /_+/g;
+let uuid = 0;
+function resolveCanIUse({ feature, mode, versions }) {
+	if (!feature) return "";
+	feature = feature.replace(UNDERLINE_RE, "_");
+	const { past, future } = resolveVersions(versions);
+	const meta = `${feature}-${uuid++}`;
+	return `<VPCaniuse${stringifyAttrs({
+		feature,
+		meta,
+		past,
+		future,
+		baseline: mode === "baseline"
+	})} />`;
+}
+function resolveVersions(versions) {
+	if (!versions) return {
+		past: 5,
+		future: 3
+	};
+	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);
+	return {
+		future: uniq[0],
+		past: Math.abs(uniq[uniq.length - 1])
+	};
+}
+//#endregion
+//#region src/node/index.ts
+/**
+* @example
+* `.vitepress/config.ts`
+* ```ts
+* import { definePlugin } from 'vitepress-tuck'
+* import caniuse from 'vitepress-plugin-caniuse'
+* export default defineConfig({
+*   plugins: [caniuse()],
+* })
+* ```
+*/
+var node_default = definePlugin(() => ({
+	name: "vitepress-plugin-caniuse",
+	client: { enhance: "enhanceAppWithCaniuse" },
+	markdown: { config: (md) => {
+		md.use(caniuseMarkdownPlugin);
+	} },
+	vite: { ssr: { noExternal: ["vitepress-plugin-caniuse"] } }
+}));
+//#endregion
+export { caniuseMarkdownPlugin, node_default as default };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vitepress-plugin-caniuse",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Embed caniuse.com data in your VitePress site",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
+  "license": "MIT",
+  "keywords": [
+    "vitepress",
+    "vitepress-plugin",
+    "caniuse",
+    "browser-compatibility"
+  ],
+  "exports": {
+    ".": "./dist/node/index.js",
+    "./client": {
+      "browser": "./dist/client/browser/index.js",
+      "default": "./dist/client/ssr/index.js"
+    },
+    "./style.css": "./dist/client/style.css"
+  },
+  "module": "./dist/node/index.js",
+  "types": "./dist/node/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1.6.4 || ^2.0.0-alpha.17",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.3.0",
+    "vitepress-plugin-toolkit": "0.1.0",
+    "vitepress-tuck": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf --glob ./dist",
+    "dev": "pnpm '/(tsdown|copy):watch/'",
+    "build": "pnpm tsdown && pnpm copy",
+    "copy": "cpx \"src/**/*.css\" dist",
+    "copy:watch": "pnpm copy -w",
+    "tsdown": "tsdown --config-loader unrun",
+    "tsdown:watch": "pnpm tsdown -w"
+  }
+}