@ archie/ devtools (英语)
Archie生成的应用程序的 Devtools 运行时间 .
公共 API
这个软件包只暴露了两个支持的切入点:
@archie/devtools- > (中文)archieDevTools@archie/devtools/client- > (中文)ArchieDevToolProvider, (中文(简体) ),ArchieDevToolProviderProps
其他一切都是内部执行的细节.
使用量
1. 配置Vite插件
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { archieDevTools } from '@archie/devtools';
export default defineConfig({
plugins: [react(), archieDevTools()],
});
2. 启动应用程序运行时间
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(
<StrictMode>
<ArchieDevToolProvider router={router}>
<App />
</ArchieDevToolProvider>
</StrictMode>,
);
3. 导出路由器
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
export const router = createBrowserRouter([
// routes
]);
export default function App() {
return <RouterProvider router={router} />;
}
router 是可选的: 当另一块已经宣布只挂载检查器和 DnD 的路径( 如 gv2 路由公告器) 时, 省略它, 而无需挂载路由倾听器 .
责任
archieDevTools()处理编译时间编辑器元数据和内部 DnD 范围注入.ArchieDevToolProviderdnD 提供者、路由同步、消毒器安装和检查员初始化.
所需资源
- 反应 18+
- 反应路由器 DOM 6.4+
- 视频 5+
部署命令
变动至 babel-plugin-editor-meta.ts是因为 __editorMeta 道具形状和
inspector.standalone.js元读取路径有负载发布
命令——见 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.codeUTF -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 插件 。 预览解说:
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接受情况adiscardUnsavedArrangeOnDisable?: 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}车轮DOMARRANGE_SESSION_CHANGED自愿参赛. 后起后起能回向者.
本地链接
pnpm add file:../archie-devtools
更改图书馆后 :
pnpm build
发展
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') 含有文本的元素<p>编号 :<h3>编号 :<span>,现在拒绝姿态 而不是完成 - 发动机倒回最近的PLAIN容器 当一个卡存在时( 如卡) 指针<div>包接一段落),或 完全拒绝手势 当没有人这样做。 这还弥补了以下差距: 外部磁盘插入路径( e)useExternalDragLoop.ts)从未应用 页:1NodeMeta- 衍生出铬/基特-原生/非平面阻塞,与 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
首先(或与本版本一起),而不是之后.