xstate component tree

XSTATE-COMPONTONT-TREE

用实用方法结合XSTATE解释器并读取状态元信息，以便您的Statechart可用于创建组件树以渲染。

安装

$ > npm install xstate-component-tree

用法

创建一个XSTATE Statechart，然后使用它实例化XSTATE解释器。

 const { Machine , interpret } = require ( "xstate" ) ;

const statechart = Machine ( {
    initial : "one" ,

    states : {
        one : { } ,
    } ,
} ) ;

const service = interpret ( statechart ) ;

将meta对象添加到要表示组件的每个状态。

 Machine ( {
    initial : "one" ,

    states : {
        one : {
            meta : {
                component : MyComponent ,
            } ,
        } ,
    } ,
} ) ;

还通过props密钥支持组件的道具。

    // ...
    one : {
        meta : {
            component : MyComponent ,
            props : {
                prop1 : 1
            } ,
        } ,
    } ,
    // ...

然后将解释器实例和回调函数传递到此模块！

 const { Machine , interpret } = require ( "xstate" ) ;
const ComponentTree = require ( "xstate-component-tree" ) ;

const statechart = Machine ( {
    // ...
} ) ;

const service = interpret ( statechart ) ;

new ComponentTree ( service , ( tree ) => {
    // ...
} ) ;

每当机器过渡时，将调用该函数的第二个参数。它将通过回调一个新对象，该对象表示当前活动状态上定义的所有视图，所有这些视图都正确嵌套以匹配Statechart的结构。响应中的每个元素还将包含与对象所代表的特定状态相对应的path值。

 new ComponentTree ( service , ( tree ) => {
    /**
     * 
     * tree will be something like this
     * 
     * [{
     *     path : "one",
     *     component: MyComponent,
     *     children: [],
     *     props: false,
     * }]
     * 
     * or if there are nested components
     * 
     * [{
     *     path : "one",
     *     component: MyComponent,
     *     props: false
     *     children : [{
     *         path : "one.two",
     *         component : ChildComponent,
     *         props: {
     *             one : 1
     *         },
     *         children: []
     *     }]
     * }]
     * 
     */ 
} ) ;

这种数据结构还可以包含您使用invoke创建的任何子statecharts的组件，它们将正确地行走和监视过渡，并在层次结构中出现其预期位置。这使您可以从几个较小的型号中构成一个较大的Statechart，并且仍然使它们都为该应用程序贡献组件。

高级用法

您可以使用load键动态加载组件或道具。要加载组件异步返回承诺或使用async / await 。

 // ...
one : {
    meta : {
        load : ( ) => import ( "./my/component/from/here.js" ) ,
    } ,
} ,
// ...

还支持动态道具。要返回道具，从load返回一个数组，其中第一个值是组件，第二个值是组件的道具。两个值都支持返回的承诺。

 // ...
one : {
    meta : {
        load : ( context ) => [
            import ( "./my/component/from/here.js" ) , 
            {
                prop1 : context . prop1
            } ,
        ] ,
    } ,
} ,
// ...

load函数将通过Xstate传递context和event参数。

component帮手

xstate-component-tree/component具有名为component的命名导出，这是一个小函数，可以将分配分配到需要组件的每个状态节点中的meta对象。这是一个便利包装，使使用xstate-component-tree写作有点清洁。

import { component } from "xstate-component-tree/component";

// ...
- one : {
-     meta: {
-         component: OneComponent,
-     },
- },
+ one : component(OneComponent),

通过使用component和props键传递对象来处理组件的设置道具。

import { component } from "xstate-component-tree/component";

// ...
- one : {
-     meta: {
-        component : MyComponent,
-        props : {
-            prop1 : 1
-        },
-     },
- },
+ one : component({
+    component : OneComponent,
+    props : {
+        prop1 : 1,
+    },
+ }),

component和props密钥都可以是一个函数，它们将通过相同的context传递，并且通常传递给load()方法的event args。

import { component } from "xstate-component-tree/component";

// ...
- one : {
-     meta : {
-         load : (context, event) => [
-             import("./my/component/from/here.js"),
-             {
-                 prop1 : context.prop1,
-             },
-         ],
-     },
- },
+ one : component({
+    component : () => import("./my/component/from/here.js"),
+    props : (context) => ({
+        prop1 : context.prop1,
+    }),
+ }), 

API

ComponentTree

new ComponentTree(interpreter, callback, [options])

• XSTATE解释器的interpreter和实例
• callback ，每次准备好组件新树时都会执行的函数
• options ，一个包含库配置值的可选对象。

callback函数收到两个参数，第一个是您组装的组件和道具树。第二个是一个有一些有用信息的对象：

• .state State
• .broadcast() ，以下记录的.broadcast() API的界版
• .can() ，以下记录的.can() API的绑定版本
• .hasTag() ，以下记录的.hasTag() API的绑定版本
• .matches() ，以下记录的.matches() API的界版本

options

• cache （默认为true ），一个布尔值确定是否应缓存load()函数的值。可以通过在需要禁用缓存的树中任何状态的任何状态上设置meta.cache来超越。

• stable （默认： false ），告诉库在每个层上行走之前先按字母顺序排序状态，以帮助确保组件输出之间的组件输出在状态过渡之间更加一致。

• verbose （默认： false ），记录有关内部工作和决策的信息。

ComponentTree实例方法

.broadcast(eventName | eventObject, payload)

在层次结构中的每个运行解释器上调用Xstate .send()方法。这对于避免在所有被调用的儿童机器上使用autoforward选项特别有用。

• eventName是要发送的字符串事件
• eventObject是一个具有事件名称的type属性的对象，以及其他可选字段
• payload是要添加到事件对象的可选字段的对象

.can(eventName | eventObject)

在层次结构中的每个运行解释器上调用Xstate .can()方法。

• eventName是要发送的字符串事件
• eventObject是一个具有事件名称的type属性的对象，以及其他可选字段

.hasTag(tag)

• tag是一个字符串，可以使用tags属性在状态上定义该字符串

使用所有运行机器调用Xstate .hasTag()方法并返回结果，并在第一个成功的比赛中停止。

.matches(stateName)

• stateName是指定为字符串的完整或部分状态值

针对所有运行机器调用Xstate .matches()方法并返回结果，并在第一个成功的比赛中停止。

component()助手

component助手返回xstate节点作为对象文字，它仅是Statechart作者的便利方法。

component(Component | () => {}, [node])

• Component是将要执行的组件或箭头函数。它支持返回组件或Promise功能。
• node是一个有效的XSTATE节点，将由component()创建meta对象并混合使用。

component({ component : Component | () => {}, props : {...} | () => {} })

• component是将执行的原始组件或箭头函数。它支持返回价值或Promise 。
• props要么是Props对象，要么是将要执行的函数。它支持返回值或Promise功能。

渲染组件

一旦拥有组件树，就如何将其组装到视图层中完全取决于您！这是一个简短的苗条示例。

{#each components as { path, component, props, children } (path)}
    < svelte:component this = {component} {...props} {children} />
{/each}

< script >
export let components ;
</ script >