IFABLE

从批量样式修改、粘贴与删除等真实操作出发，拆解 React 如何命令式调用 X6 Graph、如何用 batch 定义撤销边界，以及如何区分用户意图与派生状态。

从 Graph 单次创建的生命周期出发，拆解 XFlow 如何用图类型与只读状态组成能力矩阵，并解释为什么 props 更新不会自动切换画布运行时能力。

从工具栏缩放、平移后错位的问题出发，拆解 X6 局部坐标、浏览器视口坐标、React Portal 和图事件订阅如何组成稳定的浮层同步协议。

以泳道图为例，说明视觉包含关系为何不足以表达业务归属，以及如何通过分栏判定、派生字段和撤销事务维护建模语义。

从多选节点的对齐与等距分布出发，说明排序与边界盒、中位数和最小间距如何组合成一套可解释、可扩展的图编辑器排版策略。

拆解设计系统工具类 .gradient-border：用透明 border、双层背景裁剪和 CSS 变量，实现 border-image 做不到的圆角、渐变、半透明边框。

Rax 是淘宝出品的一个多端开发框架，语法层面以 React 为标准，支持 Hooks、Context 等 80% 以上的 React API。它最大的特点是”双引擎”——同时支持编译时和运行时两种方案，而且允许在同一个项目里混用：默认走运行时保证开发效率，局部高性能场景（如长列表）用编译时组件做优化。

这篇文章以 Rax 为主线，覆盖从项目搭建、组件编写、状态管理、到小程序原生能力接入的全流程。如果你已经有 React 基础，这篇文章能帮你快速把 Rax 用起来。

小程序开发有一个”行业特产”的痛点：同一个业务要在微信、支付宝、百度等多个平台上线，每个平台有自己的 DSL、自己的 API、自己的组件体系。如果每个平台写一套代码，维护成本直接乘以 N。

跨端框架试图解决这个问题——用一套 DSL（通常是 React 或 Vue 语法）写代码，编译或运行时转换为各平台的小程序代码。这篇文章从行业小程序的差异对比开始，然后拆解编译时（Rax compile）和运行时（Rax runtime + kbone）两种方案的原理。

小程序页面本质上是网页——HTML、CSS、JS 的技术栈和 Web 开发完全一致。区别只有两点：不支持浏览器 API，只能用宿主 App（微信、支付宝等）提供的 API；运行在 App 内部的 WebView 容器中，受双线程模型约束。

这篇文章从微信小程序的双线程架构讲起，覆盖原生框架的核心机制（数据驱动、事件系统、运行机制），然后对比增强型框架和编译时/运行时转换类框架的思路差异。

目标

1. 使用 Rollup、TypeScript 构建三个工具包，分别为：仅支持浏览器环境（使用了 BOM、DOM）、仅支持 nodejs 环境（使用了 nodejs API）、纯 JavaScript 环境；
2. 自动生成 *.d.ts 文件，使用 @microsoft/api-documenter、 @microsoft/api-extractor 生成 API Doc；
3. 加入 Jest 测试工具，测试覆盖率达标后方可发包；
4. 使用 Lerna 进行多 package 管理与 npm 发布。