用途:本技能面向已用 devtools-plugin-panel 构建好插件、并已发布 npm 包的开发者,指导其把插件提交到 TanStack Devtools 内置市场(Marketplace 标签页),使用户可一键安装。
主要能力与格式:市场条目写在 TanStack/devtools 仓库的 packages/devtools/src/tabs/plugin-registry.ts 中,遵循 PluginMetadata 接口。字段包括 packageName、title、description、logoUrl、requires(packageName、minVersion、maxVersion)、pluginImport(importName、type)、pluginId、docsUrl、author、repoUrl、framework、featured、isNew、tags。接口严格必填的是 packageName、title、framework;实际应同时提供 requires、pluginImport、description,否则卡片可用但无法自动接线。
pluginImport.type 取 'function' 或 'jsx':前者把 ImportName() 追加进 plugins 数组,后者追加 { name, render: <ImportName /> }。importName 必须是包中精确的具名导出。多框架支持时按框架各写一条,键为各自 npm 包名。
自动安装流程位于 packages/devtools-vite/src/inject-plugin.ts:安装包、扫描含 TanStackDevtools 的文件、用 oxc-parser 解析并经 MagicString 修改 plugins 属性、插入 import、按 type 注入插件。缺少 pluginImport 时后三步跳过,用户需手动接线。
提交步骤:发布 npm 包;fork 并克隆 TanStack/devtools;在 plugin-registry.ts 的 THIRD-PARTY PLUGINS 注释区添加条目;向 main 分支提 PR,标题格式 feat(marketplace): add <your-plugin-name>。
限制与注意:framework 用于过滤,仅真正框架无关才用 'other';requires.minVersion 应填实际测试的最低版本,有破坏性变更时设 maxVersion,市场用 semver 比较,不满足时显示 Bump Version。featured 仅限官方合作方,提交时不要自行设为 true,需邮件申请。pluginId 用于匹配已注册插件,默认取小写包名并把非字母数字替换为 -。常见错误包括缺 pluginImport、缺 minVersion、framework 设置错误、importName 不匹配。