@antdv-next/docs-plugins 0.0.1 → 0.0.3

package/README.md

@@ -68,7 +68,8 @@ provideDemoContext({
     '@antdv-next/icons': () => import('@antdv-next/icons'),
   },
   openPlayground: code => window.open(loadPlaygroundUrl(code), '_blank'),
-  // openStackBlitz / demoPageUrl / iframeRenderer / preferredCodeType 可选
+  // openStackBlitz / demoPageUrl / editUrl / iframeRenderer / preferredCodeType 可选
+  // copyCode: false 可隐藏操作栏复制按钮(默认显示)
 })
 ```
 
@@ -79,7 +80,7 @@ provideDemoContext({
 ```
 
 - 展开代码面板即得可编辑编辑器(Sandpack),编辑内容经 `@vue/compiler-sfc` + `sucrase` 在浏览器端实时编译并替换预览
-- 未提供的能力(如 StackBlitz)对应按钮自动隐藏
+- 操作栏按钮全部由站点能力驱动:未提供的能力(如 StackBlitz)对应按钮自动隐藏;复制按钮默认显示,`copyCode: false` 可关闭;标题区编辑图标由 `editUrl` 提供时显示
 
 建议在 vite 中对这些依赖做 `resolve.dedupe`,保证与站点共享同一实例:
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antdv-next/docs-plugins",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "description": "Vite / markdown-it plugins and demo components for docs-base documentation sites",
   "license": "MIT",
@@ -73,6 +73,7 @@
     "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^14.4.0",
     "antdv-style": "^1.0.0-rc.1",
+    "bumpp": "^11.1.0",
     "eslint": "^9.39.5",
     "postcss": "^8.5.25",
     "sandpack-vue3": "^3.1.12",
@@ -89,6 +90,7 @@
     "dev": "tsdown --watch",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "bump": "bumpp --tag \"@antdv-next/docs-plugins@\""
   }
 }

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

@@ -20,7 +20,10 @@ async function ensureDependencies(extraModules: Record<string, () => Promise<any
       Object.entries(extraModules).map(async ([name, loader]) => {
         try {
           const mod = await loader()
-          resolved[name] = (mod as any).default || mod
+          // 保存模块命名空间:命名导入从空间上取(default 导入经 transformCode 的
+          // `mod.default || mod` 兜底)。取 mod.default 会丢掉命名导出(如 icons 的
+          // 836 个图标,其 default 只是单个图标组件)。
+          resolved[name] = mod
         }
         catch {
           // 依赖不可用时跳过，保持 modulesMap 中无该条目
@@ -38,6 +41,42 @@ function buildModulesMap(extraModules: Record<string, () => Promise<any>>) {
   }
 }
 
+/**
+ * 从模块命名空间收集组件,建立 名称/kebab/camel 三种索引。
+ * 模板里 `<a-avatar>` / `<ax-bubble>` 经编译为 _resolveComponent("a-avatar"),
+ * 运行时解析需要站点全局注册;这里在编译期直接映射到模块里的 AAvatar/AxBubble,
+ * 使在线编辑不依赖站点全量注册(保留按需引入与摇树)。
+ */
+function buildComponentsMap(modulesMap: Record<string, any>): Record<string, unknown> {
+  const comps: Record<string, unknown> = {}
+  for (const mod of Object.values(modulesMap)) {
+    if (!mod || typeof mod !== 'object')
+      continue
+    for (const value of Object.values(mod)) {
+      if (!value || typeof value !== 'object' || !('name' in value))
+        continue
+      const name = value.name
+      if (typeof name !== 'string' || !name)
+        continue
+      comps[name] = value
+      // 与 vue 的 hyphenate 一致:AAvatar -> a-avatar,AxBubble -> ax-bubble
+      const kebab = name.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+      comps[kebab] = value
+      comps[kebab.replace(/-(\w)/g, (_, c: string) => c.toUpperCase())] = value
+    }
+  }
+  return comps
+}
+
+/** 把 _resolveComponent("name") 替换为组件映射查找,未命中时回退运行时解析 */
+function injectComponentResolution(code: string): string {
+  return code.replace(
+    /_resolveComponent\(\s*(['"])([^'"]+)\1(?:,([^)]*))?\)/g,
+    (_, quote: string, name: string, rest?: string) =>
+      `(__componentsMap[${quote}${name}${quote}] || _resolveComponent(${quote}${name}${quote}${rest ? `,${rest}` : ''}))`,
+  )
+}
+
 function transformCode(code: string): string {
   let result = code
 
@@ -179,11 +218,15 @@ export async function compileSfcSource(
     // Transform imports / exports to work with new Function
     jsCode = transformCode(jsCode)
 
+    // 编译期组件解析:模板中的 <a-*>/<ax-*> 映射到模块内的组件,不依赖站点全局注册
+    const componentsMap = buildComponentsMap(modulesMap)
+    jsCode = injectComponentResolution(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__)
+    const fn = new Function('__modules__', '__componentsMap', '__exports__', jsCode)
+    fn(modulesMap, componentsMap, __exports__)
 
     // For options API + separate template, attach the render function
     if (!descriptor.scriptSetup && descriptor.script && descriptor.template) {

package/src/components/code-demo/context.ts

@@ -32,6 +32,10 @@ export interface DemoContext {
   openStackBlitz?: (options: { title: string, code: string }) => void
   /** demo 独立页地址（不提供则隐藏按钮） */
   demoPageUrl?: (id: string) => string
+  /** 源码编辑地址（不提供则隐藏标题区编辑图标） */
+  editUrl?: (id: string) => string
+  /** 操作栏是否显示复制按钮（默认 true） */
+  copyCode?: boolean
   /** iframe 模式渲染器（不提供则忽略 iframe 属性） */
   iframeRenderer?: (id: string, height?: string) => any
   /** 记住 TS/JS 页签偏好（不提供则仅组件内记忆） */
@@ -41,7 +45,9 @@ export interface DemoContext {
   }
 }
 
-export const demoContextKey: InjectionKey<DemoContext> = Symbol('demo-context')
+// Symbol.for 全局注册:站点(或依赖预打包)可能产生多份 context 模块实例,
+// 普通 Symbol 会让 provide/inject 键不匹配导致上下文丢失
+export const demoContextKey: InjectionKey<DemoContext> = Symbol.for('antdv-next.docs-plugins.demo-context')
 
 export function provideDemoContext(context: DemoContext) {
   provide(demoContextKey, context)