@antdv-next/docs-plugins 0.0.1

package/dist/plugins/github-alerts.js

@@ -0,0 +1,49 @@
+//#region src/plugins/github-alerts.ts
+const markerRE = /^\[!(TIP|NOTE|INFO|IMPORTANT|WARNING|CAUTION|DANGER)\]([^\n\r]*)/i;
+function gitHubAlertsPlugin(md, options) {
+	const titleMark = {
+		tip: options?.tipLabel || "TIP",
+		note: options?.noteLabel || "NOTE",
+		info: options?.infoLabel || "INFO",
+		important: options?.importantLabel || "IMPORTANT",
+		warning: options?.warningLabel || "WARNING",
+		caution: options?.cautionLabel || "CAUTION",
+		danger: options?.dangerLabel || "DANGER"
+	};
+	md.core.ruler.after("block", "github-alerts", (state) => {
+		const tokens = state.tokens;
+		for (let i = 0; i < tokens.length; i++) {
+			if (tokens[i].type !== "blockquote_open") continue;
+			const startIndex = i;
+			const open = tokens[startIndex];
+			let endIndex = i + 1;
+			while (endIndex < tokens.length && (tokens[endIndex].type !== "blockquote_close" || tokens[endIndex].level !== open.level)) endIndex++;
+			if (endIndex === tokens.length) continue;
+			const close = tokens[endIndex];
+			const firstContent = tokens.slice(startIndex, endIndex + 1).find((token) => token.type === "inline");
+			if (!firstContent) continue;
+			const match = firstContent.content.match(markerRE);
+			if (!match) continue;
+			const type = match[1].toLowerCase();
+			const title = match[2]?.trim() || titleMark[type] || capitalize(type);
+			firstContent.content = firstContent.content.slice(match[0].length).trimStart();
+			open.type = "github_alert_open";
+			open.tag = "div";
+			open.meta = {
+				title,
+				type
+			};
+			close.type = "github_alert_close";
+			close.tag = "div";
+		}
+	});
+	md.renderer.rules.github_alert_open = function(tokens, idx) {
+		const { title, type } = tokens[idx].meta;
+		return `<div class="${type} custom-block github-alert"><p class="custom-block-title">${title}</p>\n`;
+	};
+}
+function capitalize(str) {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+}
+//#endregion
+export { gitHubAlertsPlugin };

package/dist/plugins/image.d.ts

@@ -0,0 +1,12 @@
+import MarkdownIt from "markdown-it";
+//#region src/plugins/image.d.ts
+interface ImagePluginOptions {
+  /**
+   * Support native lazy loading for the `<img>` tag.
+   * @default false
+   */
+  lazyLoading?: boolean;
+}
+declare function imagePlugin(md: MarkdownIt, { lazyLoading }?: ImagePluginOptions): void;
+//#endregion
+export { ImagePluginOptions, imagePlugin };

package/dist/plugins/image.js

@@ -0,0 +1,17 @@
+import { EXTERNAL_URL_RE } from "../shared.js";
+//#region src/plugins/image.ts
+function imagePlugin(md, { lazyLoading } = {}) {
+	const imageRule = md.renderer.rules.image;
+	md.renderer.rules.image = (tokens, idx, options, env, self) => {
+		const token = tokens[idx];
+		let url = token.attrGet("src");
+		if (url && !EXTERNAL_URL_RE.test(url)) {
+			if (!/^\.?\//.test(url)) url = `./${url}`;
+			token.attrSet("src", decodeURIComponent(url));
+		}
+		if (lazyLoading) token.attrSet("loading", "lazy");
+		return imageRule(tokens, idx, options, env, self);
+	};
+}
+//#endregion
+export { imagePlugin };

package/dist/plugins/link.d.ts

@@ -0,0 +1,14 @@
+import MarkdownIt from "markdown-it";
+//#region src/plugins/link.d.ts
+/**
+ * 让 markdown 中的外部链接在新标签页打开。
+ *
+ * 仅对带协议（http(s)://、mailto: 等）的外部链接生效，
+ * 站内相对链接保持默认行为，避免影响路由内跳转与锚点导航。
+ *
+ * 已通过 `markdown-it-attrs` 等方式显式声明的 `target` / `rel`
+ * 不会被覆盖，保留作者对单个链接的控制权。
+ */
+declare function linkPlugin(md: MarkdownIt): void;
+//#endregion
+export { linkPlugin };

package/dist/plugins/link.js

@@ -0,0 +1,25 @@
+import { EXTERNAL_URL_RE } from "../shared.js";
+//#region src/plugins/link.ts
+/**
+* 让 markdown 中的外部链接在新标签页打开。
+*
+* 仅对带协议（http(s)://、mailto: 等）的外部链接生效，
+* 站内相对链接保持默认行为，避免影响路由内跳转与锚点导航。
+*
+* 已通过 `markdown-it-attrs` 等方式显式声明的 `target` / `rel`
+* 不会被覆盖，保留作者对单个链接的控制权。
+*/
+function linkPlugin(md) {
+	const defaultLinkRender = md.renderer.rules.link_open || ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
+	md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+		const token = tokens[idx];
+		const href = token.attrGet("href");
+		if (href && EXTERNAL_URL_RE.test(href)) {
+			if (!token.attrGet("target")) token.attrSet("target", "_blank");
+			if (!token.attrGet("rel")) token.attrSet("rel", "noopener noreferrer");
+		}
+		return defaultLinkRender(tokens, idx, options, env, self);
+	};
+}
+//#endregion
+export { linkPlugin };

package/dist/plugins/pre-wrapper.d.ts

@@ -0,0 +1,10 @@
+import MarkdownIt from "markdown-it";
+//#region src/plugins/pre-wrapper.d.ts
+interface Options {
+  hasSingleTheme: boolean;
+}
+declare function preWrapperPlugin(md: MarkdownIt, options: Options): void;
+declare function getAdaptiveThemeMarker(options: Options): "" | " ant-code-theme";
+declare function extractTitle(info: string, html?: boolean): string;
+//#endregion
+export { Options, extractTitle, getAdaptiveThemeMarker, preWrapperPlugin };

package/dist/plugins/pre-wrapper.js

@@ -0,0 +1,26 @@
+//#region src/plugins/pre-wrapper.ts
+function preWrapperPlugin(md, options) {
+	const fence = md.renderer.rules.fence;
+	md.renderer.rules.fence = (...args) => {
+		const [tokens, idx] = args;
+		const token = tokens[idx];
+		token.info = token.info.replace(/\[.*\]/, "");
+		const active = / active(?: |$)/.test(token.info) ? " active" : "";
+		token.info = token.info.replace(/ active$/, "").replace(/ active /, " ");
+		const lang = extractLang(token.info);
+		const rawCode = fence(...args);
+		return `<div class="language-${lang}${getAdaptiveThemeMarker(options)}${active}"><button title="Copy Code" class="copy"></button><span class="lang">${lang}</span>${rawCode}</div>`;
+	};
+}
+function getAdaptiveThemeMarker(options) {
+	return options.hasSingleTheme ? "" : " ant-code-theme";
+}
+function extractTitle(info, html = false) {
+	if (html) return info.replace(/<!--[\s\S]*?-->/g, "").match(/data-title="(.*?)"/)?.[1] || "";
+	return info.match(/\[(.*)\]/)?.[1] || extractLang(info) || "txt";
+}
+function extractLang(info) {
+	return info.trim().replace(/=(\d*)/, "").replace(/:(no-)?line-numbers(\{| |$|=\d*).*/, "").replace(/(-vue|\{| ).*$/, "").replace(/^vue-html$/, "template").replace(/^ansi$/, "");
+}
+//#endregion
+export { extractTitle, getAdaptiveThemeMarker, preWrapperPlugin };

package/dist/plugins/stackblitz.d.ts

@@ -0,0 +1,5 @@
+import MarkdownIt from "markdown-it";
+//#region src/plugins/stackblitz.d.ts
+declare function stackblitzPlugin(md: MarkdownIt): void;
+//#endregion
+export { stackblitzPlugin };

package/dist/plugins/stackblitz.js

@@ -0,0 +1,21 @@
+//#region src/plugins/stackblitz.ts
+function stackblitzPlugin(md) {
+	const fence = md.renderer.rules.fence;
+	md.renderer.rules.fence = (...args) => {
+		const [tokens, idx] = args;
+		const token = tokens[idx];
+		const info = token.info.trim();
+		if (info.startsWith("stackblitz")) {
+			const code = token.content;
+			const titleMatch = info.match(/\{[^}]*title\s*=\s*"([^"]*)"[^}]*\}/);
+			const title = titleMatch ? titleMatch[1] : "";
+			return `<stackblitz code="${encodeURIComponent(code)}" title="${escapeHtml(title)}"></stackblitz>`;
+		}
+		return fence(...args);
+	};
+}
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+//#endregion
+export { stackblitzPlugin };

package/dist/plugins/table.d.ts

@@ -0,0 +1,5 @@
+import MarkdownIt from "markdown-it";
+//#region src/plugins/table.d.ts
+declare function tablePlugin(md: MarkdownIt): void;
+//#endregion
+export { tablePlugin };

package/dist/plugins/table.js

@@ -0,0 +1,25 @@
+//#region src/plugins/table.ts
+function tablePlugin(md) {
+	md.core.ruler.push("table_api_attribute", (state) => {
+		const tokens = state.tokens;
+		let inApiSection = false;
+		for (let i = 0; i < tokens.length; i++) {
+			const token = tokens[i];
+			if (token.type === "heading_open" && token.tag === "h2") {
+				const inlineToken = tokens[i + 1];
+				if (inlineToken && inlineToken.type === "inline") {
+					if (inlineToken.content.trim().toLowerCase() === "api") inApiSection = true;
+					else inApiSection = false;
+				}
+			}
+			if (inApiSection && token.type === "table_open") {
+				const existingClass = token.attrGet("class") || "";
+				const newClass = existingClass ? `${existingClass} component-table-api` : "component-table-api";
+				token.attrSet("class", newClass);
+			}
+		}
+		return true;
+	});
+}
+//#endregion
+export { tablePlugin };

package/dist/shared.d.ts

@@ -0,0 +1,7 @@
+//#region src/shared.d.ts
+declare const EXTERNAL_URL_RE: RegExp;
+declare const SCRIPT_REGEX: RegExp;
+declare const STYLE_REGEX: RegExp;
+declare const DOCS_REGEX: RegExp;
+//#endregion
+export { DOCS_REGEX, EXTERNAL_URL_RE, SCRIPT_REGEX, STYLE_REGEX };

package/dist/shared.js

@@ -0,0 +1,7 @@
+//#region src/shared.ts
+const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
+const SCRIPT_REGEX = /<script\b[^>]*>[\s\S]*?<\/script>/gi;
+const STYLE_REGEX = /<style\b[^>]*>[\s\S]*?<\/style>/gi;
+const DOCS_REGEX = /<docs\b[^>]*>[\s\S]*?<\/docs>/gi;
+//#endregion
+export { DOCS_REGEX, EXTERNAL_URL_RE, SCRIPT_REGEX, STYLE_REGEX };

package/dist/utils/short-hash.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/short-hash.d.ts
+declare function shortHash(str: string): string;
+//#endregion
+export { shortHash };

package/dist/utils/short-hash.js

@@ -0,0 +1,21 @@
+//#region src/utils/short-hash.ts
+const BASE62 = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+function toBase62(num) {
+	let str = "";
+	do {
+		str = BASE62[num % 62] + str;
+		num = Math.floor(num / 62);
+	} while (num > 0);
+	return str;
+}
+function shortHash(str) {
+	const bytes = new TextEncoder().encode(str);
+	let hash = 2166136261;
+	for (let i = 0; i < bytes.length; i++) {
+		hash ^= bytes[i];
+		hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+	}
+	return toBase62(hash >>> 0);
+}
+//#endregion
+export { shortHash };

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@antdv-next/docs-plugins",
+  "type": "module",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Vite / markdown-it plugins and demo components for docs-base documentation sites",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antdv-next/docs-plugins.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./component/*": {
+      "types": "./src/components/*.d.ts",
+      "import": "./src/components/*"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json",
+    "src"
+  ],
+  "dependencies": {
+    "@mdit-vue/plugin-frontmatter": "^3.0.2",
+    "@mdit-vue/plugin-headers": "^3.0.2",
+    "@mdit-vue/plugin-title": "^3.0.2",
+    "@mdit-vue/plugin-toc": "^3.0.2",
+    "@mdit-vue/shared": "^3.0.2",
+    "@mdit-vue/types": "^3.0.2",
+    "@shikijs/markdown-it": "^4.4.1",
+    "@shikijs/transformers": "^4.4.1",
+    "lru-cache": "^11.5.2",
+    "markdown-it": "^14.3.0",
+    "markdown-it-anchor": "^9.2.1",
+    "markdown-it-async": "^2.2.0",
+    "markdown-it-attrs": "^4.5.0",
+    "markdown-it-container": "^4.0.0",
+    "markdown-it-emoji": "^3.1.0",
+    "mlly": "^1.8.2",
+    "nanoid": "^5.1.16",
+    "oxfmt": "^0.41.0",
+    "pathe": "^2.0.3",
+    "picomatch": "^4.0.5",
+    "postcss-selector-parser": "^7.1.4",
+    "shiki": "^4.4.1",
+    "vite": "^8.2.0",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@antdv-next/icons": "^1.1.1",
+    "@antfu/eslint-config": "^7.7.3",
+    "@codesandbox/sandpack-themes": "^2.0.21",
+    "@types/markdown-it": "14.1.2",
+    "@types/markdown-it-attrs": "^4.1.3",
+    "@types/markdown-it-container": "^2.0.11",
+    "@types/node": "^25.9.5",
+    "@types/picomatch": "^4.0.3",
+    "@vue/compiler-sfc": "^3.5.40",
+    "@vue/tsconfig": "^0.8.1",
+    "@vueuse/core": "^14.4.0",
+    "antdv-style": "^1.0.0-rc.1",
+    "eslint": "^9.39.5",
+    "postcss": "^8.5.25",
+    "sandpack-vue3": "^3.1.12",
+    "sucrase": "^3.35.1",
+    "tsdown": "^0.22.14",
+    "typescript": "~5.9.3",
+    "vue-router": "^4.6.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/code-demo/code-editor-bridge.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { SandpackCodeEditor, useActiveCode, useSandpack } from 'sandpack-vue3'
+import { watch } from 'vue'
+
+defineProps<{
+  readOnly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:code', code: string): void
+}>()
+
+const { code } = useActiveCode()
+const { sandpack } = useSandpack()
+
+function resetCode(newCode: string) {
+  sandpack.updateCurrentFile(newCode)
+}
+
+defineExpose({ resetCode })
+
+watch(code, (val) => {
+  if (val !== undefined) {
+    emit('update:code', val)
+  }
+})
+</script>
+
+<template>
+  <SandpackCodeEditor
+    :show-tabs="false"
+    :show-line-numbers="false"
+    :read-only="readOnly"
+    style="min-height: 100px;"
+  />
+</template>

package/src/components/code-demo/compile-sfc.ts

@@ -0,0 +1,207 @@
+import * as Vue from 'vue'
+
+let compilerSfc: typeof import('@vue/compiler-sfc') | null = null
+let sucraseModule: typeof import('sucrase') | null = null
+
+// 演示源码可 import 的模块由站点注入，逐模块容错：
+// 某个模块不可用只影响其自身的编辑预览，不阻断整个编译链路
+const resolvedExtraModules = new WeakMap<Record<string, () => Promise<any>>, Record<string, any>>()
+
+async function ensureDependencies(extraModules: Record<string, () => Promise<any>>) {
+  if (!compilerSfc) {
+    compilerSfc = await import('@vue/compiler-sfc')
+  }
+  if (!sucraseModule) {
+    sucraseModule = await import('sucrase')
+  }
+  if (!resolvedExtraModules.has(extraModules)) {
+    const resolved: Record<string, any> = {}
+    await Promise.all(
+      Object.entries(extraModules).map(async ([name, loader]) => {
+        try {
+          const mod = await loader()
+          resolved[name] = (mod as any).default || mod
+        }
+        catch {
+          // 依赖不可用时跳过，保持 modulesMap 中无该条目
+        }
+      }),
+    )
+    resolvedExtraModules.set(extraModules, resolved)
+  }
+}
+
+function buildModulesMap(extraModules: Record<string, () => Promise<any>>) {
+  return {
+    vue: Vue,
+    ...resolvedExtraModules.get(extraModules),
+  }
+}
+
+function transformCode(code: string): string {
+  let result = code
+
+  // Named imports: import { a, b as c } from 'module'
+  // Need to convert 'as' to ':' for destructuring syntax
+  result = result.replace(
+    /import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]\s*;?/g,
+    (_, names, source) => {
+      const transformedNames = names.replace(/\bas\b/g, ':')
+      return `const {${transformedNames}} = (__modules__["${source}"] || {});`
+    },
+  )
+
+  // Default import: import Name from 'module'
+  result = result.replace(
+    /import\s+(\w+)\s+from\s*['"]([^'"]+)['"]\s*;?/g,
+    (_, name, source) => `const ${name} = (__modules__["${source}"] || {}).default || (__modules__["${source}"] || {});`,
+  )
+
+  // Namespace import: import * as Name from 'module'
+  result = result.replace(
+    /import\s*\*\s*as\s+(\w+)\s+from\s*['"]([^'"]+)['"]\s*;?/g,
+    (_, name, source) => `const ${name} = (__modules__["${source}"] || {});`,
+  )
+
+  // Side-effect imports: import 'module'
+  result = result.replace(/^\s*import\s*['"][^'"]+['"]\s*(?:;\s*)?$/gm, '')
+
+  // export default → __exports__.default =
+  result = result.replace(/export\s+default\s+/g, '__exports__.default = ')
+
+  // export function name → function name + track for later export
+  const exportedNames: string[] = []
+  result = result.replace(/export\s+function\s+(\w+)/g, (_, name) => {
+    exportedNames.push(name)
+    return `function ${name}`
+  })
+
+  result = result.replace(/export\s+(const|let|var)\s+(\w+)/g, (_, keyword, name) => {
+    exportedNames.push(name)
+    return `${keyword} ${name}`
+  })
+
+  // Append exports for named declarations
+  for (const name of exportedNames) {
+    result += `\n__exports__["${name}"] = ${name};`
+  }
+
+  return result
+}
+
+export async function compileSfcSource(
+  source: string,
+  extraModules: Record<string, () => Promise<any>> = {},
+): Promise<{ component: any, error: string | null }> {
+  await ensureDependencies(extraModules)
+
+  const modulesMap = buildModulesMap(extraModules)
+
+  try {
+    const { compileScript, compileTemplate, parse } = compilerSfc!
+    const { transform } = sucraseModule!
+
+    const id = `live-${Math.random().toString(36).slice(2, 8)}`
+    const { descriptor, errors } = parse(source, { filename: 'Demo.vue' })
+
+    if (errors.length > 0) {
+      return { component: null, error: errors.map(e => e.message).join('\n') }
+    }
+
+    let jsCode: string
+
+    if (descriptor.scriptSetup) {
+      // <script setup> — use inlineTemplate to bake render into setup()
+      const compiled = compileScript(descriptor, {
+        id,
+        inlineTemplate: true,
+      })
+      jsCode = compiled.content
+    }
+    else if (descriptor.script) {
+      // Options API <script>
+      const compiled = compileScript(descriptor, { id })
+      jsCode = compiled.content
+
+      if (descriptor.template) {
+        const templateResult = compileTemplate({
+          source: descriptor.template.content,
+          filename: 'Demo.vue',
+          id,
+          compilerOptions: {
+            bindingMetadata: compiled.bindings,
+          },
+        })
+        if (templateResult.errors.length) {
+          return {
+            component: null,
+            error: templateResult.errors
+              .map(e => (typeof e === 'string' ? e : e.message))
+              .join('\n'),
+          }
+        }
+        jsCode += `\n${templateResult.code}`
+      }
+    }
+    else if (descriptor.template) {
+      // Template-only component
+      const templateResult = compileTemplate({
+        source: descriptor.template.content,
+        filename: 'Demo.vue',
+        id,
+      })
+      if (templateResult.errors.length) {
+        return {
+          component: null,
+          error: templateResult.errors
+            .map(e => (typeof e === 'string' ? e : e.message))
+            .join('\n'),
+        }
+      }
+      jsCode = templateResult.code
+    }
+    else {
+      return { component: null, error: 'No template or script found' }
+    }
+
+    // Strip TypeScript type annotations
+    try {
+      const result = transform(jsCode, {
+        transforms: ['typescript'],
+        disableESTransforms: true,
+      })
+      jsCode = result.code
+    }
+    catch {
+      // May already be plain JS — continue
+    }
+
+    // Transform imports / exports to work with new Function
+    jsCode = transformCode(jsCode)
+
+    // Evaluate the compiled code
+    const __exports__: Record<string, any> = {}
+    // eslint-disable-next-line no-new-func
+    const fn = new Function('__modules__', '__exports__', jsCode)
+    fn(modulesMap, __exports__)
+
+    // For options API + separate template, attach the render function
+    if (!descriptor.scriptSetup && descriptor.script && descriptor.template) {
+      const comp = __exports__.default || {}
+      if (__exports__.render) {
+        comp.render = __exports__.render
+      }
+      return { component: comp, error: null }
+    }
+
+    // For template-only, create component with render
+    if (!descriptor.scriptSetup && !descriptor.script && descriptor.template) {
+      return { component: { render: __exports__.render }, error: null }
+    }
+
+    return { component: __exports__.default, error: null }
+  }
+  catch (e: any) {
+    return { component: null, error: e.message || String(e) }
+  }
+}