专业做网站 上海,密云城市建设官方网站,如何保护网站模板,广东深圳区号1. 前言
状态机的一大好处就是可以可视化状态#xff0c;降低业务的理解成本和相互间的沟通成本。
目前 XState 官方提供的可视化工具已经做的很不错了#xff0c;但用起来偏重#xff0c;国内访问也比较慢。这边我再原基础上进行了优化#xff0c;并增加了部分新功能降低业务的理解成本和相互间的沟通成本。
目前 XState 官方提供的可视化工具已经做的很不错了但用起来偏重国内访问也比较慢。这边我再原基础上进行了优化并增加了部分新功能开发了 Viz-Lite 版。
2. Viz-Lite
Viz-Lite 可视化工具地址 主要有如下功能
直接在右侧区域进行编写或粘贴 XState 状态机代码右侧进行可视化。可以在左侧可视化区域通过点击进行状态机执行。可以在右侧事件面板中查看事件历史且可以手动进行自定义事件发送。可以通过 xstate/inspect 与页面中的状态机实时建立连接可视化查看当前页面状态机细节。可以将可视化出来的状态图进行图片导出。可以切切亮/暗色。
等等。
3. Inspect 底层实现
Viz-Lite 可以实时与页面中的状态图建立数据连接需要依赖 xstate/inspect且在页面、Inspect、Viz-Lite 建立有严格的依赖关系。
我大致梳理了一下三者的关系如下的序列图所示
#mermaid-svg-86dzAJtVjnO1JwiF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-86dzAJtVjnO1JwiF .error-icon{fill:#552222;}#mermaid-svg-86dzAJtVjnO1JwiF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-86dzAJtVjnO1JwiF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-86dzAJtVjnO1JwiF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-86dzAJtVjnO1JwiF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-86dzAJtVjnO1JwiF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-86dzAJtVjnO1JwiF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-86dzAJtVjnO1JwiF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-86dzAJtVjnO1JwiF .marker.cross{stroke:#333333;}#mermaid-svg-86dzAJtVjnO1JwiF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-86dzAJtVjnO1JwiF .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-86dzAJtVjnO1JwiF text.actortspan{fill:black;stroke:none;}#mermaid-svg-86dzAJtVjnO1JwiF .actor-line{stroke:grey;}#mermaid-svg-86dzAJtVjnO1JwiF .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-86dzAJtVjnO1JwiF .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-86dzAJtVjnO1JwiF #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-86dzAJtVjnO1JwiF .sequenceNumber{fill:white;}#mermaid-svg-86dzAJtVjnO1JwiF #sequencenumber{fill:#333;}#mermaid-svg-86dzAJtVjnO1JwiF #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-86dzAJtVjnO1JwiF .messageText{fill:#333;stroke:#333;}#mermaid-svg-86dzAJtVjnO1JwiF .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-86dzAJtVjnO1JwiF .labelText,#mermaid-svg-86dzAJtVjnO1JwiF .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-86dzAJtVjnO1JwiF .loopText,#mermaid-svg-86dzAJtVjnO1JwiF .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-86dzAJtVjnO1JwiF .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-86dzAJtVjnO1JwiF .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-86dzAJtVjnO1JwiF .noteText,#mermaid-svg-86dzAJtVjnO1JwiF .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-86dzAJtVjnO1JwiF .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-86dzAJtVjnO1JwiF .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-86dzAJtVjnO1JwiF .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-86dzAJtVjnO1JwiF .actorPopupMenu{position:absolute;}#mermaid-svg-86dzAJtVjnO1JwiF .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-86dzAJtVjnO1JwiF .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-86dzAJtVjnO1JwiF .actor-man circle,#mermaid-svg-86dzAJtVjnO1JwiF line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-86dzAJtVjnO1JwiF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}VizInspectInterpreter开启 Inspect 并打开 Viz 工具全局注入 __xstate__打开 VizInspect.createWindowReceiver()send(xstate.inspecting)打开状态机服务并与注册到 Inspect__REDUX_DEVTOOLS_EXTENSION__registerService(this)send(service.registe)send(service.registe)send(service.registe, {sessionId})三者建立连接alt[has __xstate__]VizInspectInterpreter类似于 HTTP 三次握手。
在 Viz-Lite 中建立连接主要依靠 xstate/inspect 的 createWindowReceiver 方法。
Viz-Lite 向 页面状态机发送事件可以使用 createWindowReceiver 返回值中的 send 方法消息体中 type 必须是 xstate.event。
页面中状态机的变化可以通过 createWindowReceiver 返回值中的 subscribe 方法进行订阅包括 service.state 和 service.event。监听 service.stop 可以确定连接的断开。
4. 接入调试方法
安装 xstate/inspect
npm i -S xstate/inspect从上面的序列图中也可以看出inspect 必须在 interpret() 之前执行不然无法连接 import { inspect } from xstate/inspect;inspect({url: https://apis.leping.fun/viz?inspect,iframe: false
});url 中指定 Viz-Lite 的地址 https://apis.leping.fun/viz?inspect。iframe 指定在哪里挂载 Viz-Lite。可以直接指定一个 DOM也可以设置为 false浏览器会打开一个新页面。 注意调试模式必须在 Viz-Lite 的地址中加上 ?inspect。如果想默认关闭右侧面板可以加上 ?inspectpanelfalse。 然后在创建状态机服务时指定 devTools 标志位就可以了
import { interpret } from xstate;const service interpret(someMachine, { devTools: true });可以访问这个 地址 查看效果 Github 代码地址
5. 快捷键 / - 或者 CMD 滚轮上/下缩放。CMD Enter: 可视化当前代码。↑↓←→平移视图。同时按住 Shift增大平移服毒。Shift 1适配到到窗口大小。
6. 配合 Redux DevTools 使用
从序列图中可以看到在开启 devTools: true 的时候会判断是否有 __REDUX_DEVTOOLS_EXTENSION__如果有的话也可以在 Redux DevTools 中查看事件信息如下图所示 ⭐ 原文地址
