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 >