# @archie/devtools 中文文档 规范地址：https://npmcn.com/package/%40archie/devtools/ 版本：0\.1\.33 npm 元数据更新时间：2026-11-04T18:45:15.815Z 中文译文更新时间：2026-11-06T14:26:22.745Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40archie/devtools 原文对照：https://npmcn.com/package/%40archie/devtools/?lang=original 项目主页：https://github.com/8base-archie/archie-devtools#readme 源码仓库：https://github.com/8base-archie/archie-devtools ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.1 MB，19 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0 - 首次发布：2026-01-24T22:30:15.206Z - 最新版本发布：2026-11-04T18:45:15.700Z - 近 30 天下载量：12640（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：80（近 12 个月 80 个） ## 中文简介 Archie的 DevTools 生成应用程序 - 路由同步和编辑器通信 ## 安装 ```sh npm install @archie/devtools ``` 也可以使用：`pnpm add @archie/devtools`、`yarn add @archie/devtools`、`bun add @archie/devtools` ## README # @ archie/ devtools (英语) Archie生成的应用程序的 Devtools 运行时间 . ## 公共 API 这个软件包只暴露了两个支持的切入点: - `@archie/devtools` - > (中文) `archieDevTools` - `@archie/devtools/client` - > (中文) `ArchieDevToolProvider`, (中文(简体) ), `ArchieDevToolProviderProps` 其他一切都是内部执行的细节. ## 使用量 ### 1\. 配置Vite插件 ```ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { archieDevTools } from '@archie/devtools'; export default defineConfig({ plugins: [react(), archieDevTools()], }); ``` ### 2\. 启动应用程序运行时间 ```tsx import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { ArchieDevToolProvider } from '@archie/devtools/client'; import App, { router } from './App'; createRoot(document.getElementById('root')!).render( , ); ``` ### 3\. 导出路由器 ```tsx import { createBrowserRouter, RouterProvider } from 'react-router-dom'; export const router = createBrowserRouter([ // routes ]); export default function App() { return ; } ``` `router` 是可选的: 当另一块已经宣布只挂载检查器和 DnD 的路径( 如 gv2 路由公告器) 时, 省略它, 而无需挂载路由倾听器 . ## 责任 - `archieDevTools()` 处理编译时间编辑器元数据和内部 DnD 范围注入. - `ArchieDevToolProvider` dnD 提供者、路由同步、消毒器安装和检查员初始化. ## 所需资源 - 反应 18+ - 反应路由器 DOM 6.4+ - 视频 5+ ## 部署命令 变动至 `babel-plugin-editor-meta.ts`是因为 `__editorMeta` 道具形状和 `inspector.standalone.js`元读取路径有负载发布 命令——见 [`docs/deploy-order.md`](https://npmcn.com/package/%40archie/devtools/docs/deploy-order.md)。 。 。 . ## 身份认证 `data-vid`,节点Meta, 1.x 程序 `babelPluginEditorMeta` 阿霍拉·李(英语: `data-vid` (persistido en el source por el.) 互联网档案馆的存檔,存档日期2013-12-02 创世纪报社, `/^[a-z0-9]{6,8}$/`(原始内容存档于2013-10-12) (中文(简体) ) `file:line:col:componentName`, que se 无效 en cada escritura del source. 宽度元素领带 `data-vid`, (中文(简体) ), `__editorMeta.nodeId === __editorMeta.vid` y el 插件: 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相相相接相相相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 `NodeMeta` (单位:千美元)`@8base-archie/editor-protocol`: `dynamicType`, (中文(简体) ), `isKitOrigin`, (中文(简体) ), `isChrome`, (中文(简体) ), `containerKind` y, cuando aplica, (英语), `lockReason`。 。 。 . `parentNodeId` 我们 el `vid` 神父cuando存在. ## `sourceHash` 猪笼草 卡达 `__editorMeta` 莱瓦 `sourceHash`: sha256 en hex (64 caracteres) del texto (英语) compiló el 插件`state.file.code`UTF -8 罪恶 (原始内容存档于2018-09-29). Normalizar BOM ni CRLF. (原始内容存档于2013-10-12). Es el mismo algoritmo que `legacyIdsSourceHash` (单位:千美元) (单位:千美元)`createHash('sha256').update(texto).digest('hex')`) (中文(简体) ). 阿尔·皮帕加督察 内 `inspectorSource` (单位:千美元)`ELEMENT_SELECTED` i-dás mensajes que lo levan), en 维基语录链接:名人名言 - 文学作品 - 谚语 `editorMeta` y en cada entrada de (法语) `editorMetaChain`; 埃尔 `InspectorRef` 三角岛 国家`inserted`, (中文(简体) ), `moved`, (中文(简体) ), `resized`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我.. `sourceHash`虚弱的恶作剧 忽略了 主持人 o compara con `legacyIdsSourceHash` 拒绝解决遗留问题 预览 viene de una revisión ditinta a la del mapa 。 洛斯主机反古斯 (原始内容存档于2012-10-12). ignoran el campo. 阴性 `data-vid`,插件 cae al priccionamiento legado SOLO cuando la 临 时 `allowLegacyIds` 对 `true` (默认为 versión —— 截角, e eliminará más adelante); se eliminará más adelante; se eliminará más adelante; se e `allowLegacyIds: false` 没有元素本身 仪器a. 埃尔插件 nunica estampa `data-vid` 运行时间 创世纪. 埃尔插件 Vite (`archieDevTools()`) 单独 VALIDA: en dev, un `JSXOpeningElement` 罪恶 `data-vid` 放弃警告 una vez por ravivo (单位:千美元)`onMissingVid` 内 `babel-plugin-editor-meta.ts`) (中文(简体) ). 运行时间, `node-key.ts` 保留先验身份 `meta.vid` → `data-vid` del DOM − (立法) `meta.nodeId` → `runtime:N`中文无改动 `fiber-bridge.ts` 开始 `getNodeMeta(el)`时, que vicia el `NodeMeta` 安桑布拉多反战 `NodeMetaSchema` 肛门去去去伏活. `structural-policy.ts` 亚军 `isNonDraggableNodeMeta`, (中文(简体) ), `isNonDroppableNodeMeta` 尔 `computeDroppableSet` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}真让人心烦. 握个手`INSPECTOR_SCRIPT_LOADED`编号 :`CAPABILITIES_RESULT`(掌声) `editorProtocolVersion` (单位:千美元) `PROTOCOL_VERSION` 议会 反之- uncampo NUEVO, nunica superpuesto al `protocolVersion` 纳梅里科 存在 que `archie-app` y compara extrammente) 和 las 容量 : `vidIdentity`, (中文(简体) ), `nodeMeta`, (中文(简体) ), `refusals`。 。 。 . `ELEMENT_SELECTED` 亚军 `vid` 尔 `nodeMeta`词汇 `REFUSED{code, cause, vid}` 错失责任 (单位:千美元)`refuseNode` 内 `inspector.standalone.js`() para cuando un host rechaza un gesto de arrastre/ drop fuera de politica. 中国植物物种信息数据库. 旋转 `@8base-archie/editor-protocol` 反面行动 (单位:千美元)`Vid`, (中文(简体) ), `NodeMeta`, (中文(简体) ), `LockReason`, os schemas Zod)—— ver ) `src/types/editor-meta.ts`重新出口 esos tipos en vez de duplicarlos. ### `data-vid` 建设国家 编号 `vite build` (单位:千美元)`command === 'build'`, (中文(简体) ), `archieDevTools()` 埃利米娜·埃尔 联合来文十 `data-vid` código generado——已部署的管道 运行时没有空穴 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你这混蛋 `__editorMeta.vid`,没有setoca。 独奏 `vite dev` 保护 `data-vid` sin cambios: este 插件corre en (英语: `transform`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我很高兴见到你 `vite preview` 尔时世尊 `dist/` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你这无赖 `vite build` y por lo (法语) 坦图无相会 `data-vid` ——以"建"为主,不搞" commando propio de este 插件 。 预览解说: ```ts archieDevTools({ stripVidsInBuild: false }) ``` ## Apagar el 设计模式 y sesión de 安排 Al pasar de 设计模式 On a Off(`SET_EDITOR_MODE`编号 :`SYNC_EDITOR_STATE`, (中文(简体) ), `STOP_INSPECTION`, Ctrl+Shift+D, crash del overlay o desmontaje) 运行时间 (原始内容存档于2018-03-21) (英语). siempre vacía history, cambios, straw externo, selección y `canUndo/canRedo`。 。 。 . DOM Cambios de revertir además en el DOM los cambios de control singuardar(移动,插入, 调整大小, 宽度 as **选入 del 主机**页:1 外出时 - `SET_EDITOR_MODE` 接受情况a `discardUnsavedArrangeOnDisable?: boolean`埃尔 巡视员 `set-design-mode`. 辛埃尔 (原始内容存档于2012-10-12). Campo (host legado) el DOM no se toca. - `{ type: 'ARRANGE_SESSION_SAVED' }`永不放弃 sesión, marca lo actual como guardado: el runtime olvida el historial sin 互联网档案馆的存檔,存档日期2013-12-21 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}车轮DOM `ARRANGE_SESSION_CHANGED` 自愿参赛. 后起后起能回向者. ## 本地链接 ```bash pnpm add file:../archie-devtools ``` 更改图书馆后 : ```bash pnpm build ``` ## 发展 ```bash pnpm test pnpm typecheck ``` 试验采用同地办公方式: - 小模块保留 `*.test.ts(x)` 源文件旁边 - 大型子系统可能使用本地 `__tests__/` 特性旁边的文件夹 - `src/client/dnd/design-mode/__tests__/` 多文件特性覆盖的参考模式 ## 发布注释 ### 0.1.9 (中文(简体) ) 修补 `arrange-session-changed` 在屏幕上移动的索引 root( 0. 1. 8 的屏幕根翻译) , 因此它与直接 `ELEMENT_MOVED` 活动. - **屏幕根部移动索引 .** `recordCommittedMove`是因为 `after` 有效载荷 一个 `serializeArrangeChange` 读作 `event.payload.after.index` 联 合 国 `arrange-session-changed` 包含原始 DOM- child 索引 (单位:千美元)`command.to.index`即便滴入到屏幕目标上, 改为 `screenRootTarget.index` ——位置重新调整为只计数 屏幕本身的根子。 直接 `element-moved` 运行时间事件 已使用重映射索引; 只有会话更改有效载荷滞后 . 常见情况(无径流注入的铬在a之间互出) 屏幕的根子),两个指数相接而无断 只有在屏幕根部孩子和 投放槽是有效的,但与铬节点不相邻. ### 0.1.8 (中文(简体) ) 解决两个相关的案件,其中调色板滴出或扫描后移动 在某地登陆 宿主会放弃 而不是拒绝 手势 : - **银幕-根相翻译.** 滴入/ 插入到应用程序内 罐壳的儿童槽容器(kit-internal/chrome, `containerKind: 'expression'` - 构成 `{children}`(中文(简体) ) 在屏幕本身的根节点之间翻译为屏幕根 目标而不是普通容器插入。 电报 (单位:千美元)`ELEMENT_INSERTED`编号 :`ELEMENT_MOVED`,以及 `arrange-session-changed`是因为 每起变动) `screenRootFile` (屏幕文件)和一个 `index` 回到屏幕上自己的根子位置—— `containerVid` 仍为观察到的DOM容器. - **文本/表达容器,以及所有其他铬/基特-内部 集装箱.** 任何其他投放/插入应用壳/基特铬或a 非原告(`containerKind !== 'plain'`) 含有文本的元素 `

`编号 :`

`编号 :``,现在拒绝姿态 而不是完成 - 发动机倒回最近的PLAIN容器 当一个卡存在时( 如卡) 指针 `
` 包接一段落),或 完全拒绝手势 当没有人这样做。 这还弥补了以下差距: 外部磁盘插入路径( e)`useExternalDragLoop.ts`)从未应用 页:1 `NodeMeta`\- 衍生出铬/基特-原生/非平面阻塞,与 canvas 移动路径——每个调色板滴入到文本或app-shell chrome上 曾经被宿主接受并默不作声地丢弃. 这个 `screenRootFile` 电线场是添加剂:主机本身 `@8base-archie/editor-protocol` 副本尚未添加 `DropMessage.screenRootFile` 完全无视它。 此软件包没有 构造 `InsertOp`编号 :`MoveOp` ,而不导入任何 `@8base-archie/editor-protocol` 运行时的计数(只有两个平坦常数, `VID_ATTR`编号 :`VID_PATTERN` - 其它东西都是 `import type`因此它携带 与此变化没有关联的依赖性转换. ### 0.1.5 (中文(简体) ) 处理 JSX 评论(`{/* ... */}`)作为平板容器,而非表达式 一,一个集装箱,其唯一非元素儿童是评论,现在得到 `containerKind: 'plain'` 改为 `'expression'`。 。 。 . **这与 archie-code-生成(ag) PR # 416**: acg 自己的集装箱处理 必须已经治疗 `{/* ... */}` 同样的方式,在这个版本是 已经部署,或者曾经双方同意的集装箱将不同意 一次0.1.5分舰 没有代码级门执行配对——部署acg #416 首先(或与本版本一起),而不是之后. ## 常见问题 ### @archie/devtools 是什么？ Archie的 DevTools 生成应用程序 - 路由同步和编辑器通信 ### 如何安装 @archie/devtools？ 在项目目录运行 npm install @archie/devtools，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @archie/devtools 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @archie/devtools 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @archie/devtools 可以商用吗？ @archie/devtools 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @archie/devtools 的下载量有多少？ 根据 npm 官方下载统计，@archie/devtools 在 2026/10/07 – 2026/11/05 这 30 天内被下载 12,640 次，日均约 421 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @archie/devtools 还在维护吗？ 最新版本 0\.1\.33 发布于 2026/11/05（3 天前）；至今共发布 80 个版本，其中过去 12 个月发布了 80 个；首次发布于 2026/01/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。