xstate component tree
v6.1.1
XSTATEインタープリターをラップし、状態メタ情報を読み取り、ステートチャートを使用してレンダリングするコンポーネントのツリーを作成できるユーティリティ方法。
$ > npm install xstate-component-treeXSTATE SateChartを作成し、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 ) => {
// ...
} ) ;関数に対する2番目の引数は、マシンが遷移するたびに呼び出されます。コールバックは、現在アクティブな状態で定義されているすべてのビューを表す新しいオブジェクトを渡します。応答の各要素には、オブジェクトが表す特定の状態に対応する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を使用して作成した任意の子供のステートチャートのコンポーネントを含めることもできます。それらは、遷移について正しく歩き、監視され、階層内の予想される位置に表示されます。これにより、いくつかの小さなステートチャートからより大きなステートチャートを作成できますが、それらはすべてアプリにコンポーネントを提供します。
loadキーを介して好きな機能を使用して、コンポーネントまたはプロップを動的にロードできます。コンポーネントを非同期にロードするには、約束を返したり、 async / awaitを使用したりします。
// ...
one : {
meta : {
load : ( ) => import ( "./my/component/from/here.js" ) ,
} ,
} ,
// ...動的な小道具もサポートされています。プロップを返すには、最初の値がコンポーネントであり、2番目はコンポーネントのプロップである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キーの両方が関数になる可能性があり、通常はload()メソッドに渡される同じcontextとevent argに渡されます。
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,
+ }),
+ }), ComponentTree new ComponentTree(interpreter, callback, [options])interpreter 、およびXSTATE通訳のインスタンスcallback 、新しいコンポーネントの新しいツリーの準備が整うたびに実行される関数options 、ライブラリの構成値を含むオプションのオブジェクト。 callback関数は2つの引数を受け取ります。1つ目は、コンポーネントとプロップの組み立てられたツリーです。 2つ目は、いくつかの有用な情報があるオブジェクトです。
.state 、ルートマシンの返されたXSTATE 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ノードであり、 metaオブジェクトはcomponent()によって作成され、混合されます。 component({ component : Component | () => {}, props : {...} | () => {} })component 、生コンポーネントまたは実行される矢印関数のいずれかです。価値またはPromiseいずれかを返すことをサポートします。propsは、プロップオブジェクトまたは実行される関数のいずれかです。値またはPromiseいずれかを返す関数をサポートします。 コンポーネントの木を手に入れたら、それをあなたのビューレイヤーに組み立てた方法は完全にあなた次第です！これが簡単な例です。
{#each components as { path, component, props, children } (path)}
< svelte:component this = {component} {...props} {children} />
{/each}
< script >
export let components ;
</ script >
