xstate component tree
v6.1.1
Metode utilitas untuk menyelesaikan interpreter XState dan membaca informasi meta negara sehingga statechart Anda dapat digunakan untuk membuat pohon komponen untuk diterjemahkan.
$ > npm install xstate-component-treeBuat statechart xstate, dan kemudian instantiate interpreter xState dengannya.
const { Machine , interpret } = require ( "xstate" ) ;
const statechart = Machine ( {
initial : "one" ,
states : {
one : { } ,
} ,
} ) ;
const service = interpret ( statechart ) ; Tambahkan objek meta ke setiap keadaan yang ingin Anda wakili komponen.
Machine ( {
initial : "one" ,
states : {
one : {
meta : {
component : MyComponent ,
} ,
} ,
} ,
} ) ; Alat peraga untuk komponen juga didukung melalui kunci props .
// ...
one : {
meta : {
component : MyComponent ,
props : {
prop1 : 1
} ,
} ,
} ,
// ...Kemudian lulus instance interpreter dan fungsi panggilan balik ke modul ini!
const { Machine , interpret } = require ( "xstate" ) ;
const ComponentTree = require ( "xstate-component-tree" ) ;
const statechart = Machine ( {
// ...
} ) ;
const service = interpret ( statechart ) ;
new ComponentTree ( service , ( tree ) => {
// ...
} ) ; Argumen kedua untuk fungsi akan dipanggil setiap kali transisi mesin. Ini akan melewati panggilan balik objek baru yang mewakili semua tampilan yang ditentukan pada negara -negara aktif, semuanya bersarang dengan benar untuk mencocokkan struktur Statechart. Setiap elemen dalam respons juga akan berisi nilai path yang sesuai dengan keadaan spesifik yang diwakili oleh objek.
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: []
* }]
* }]
*
*/
} ) ; Struktur data ini juga dapat berisi komponen dari statecharts anak mana pun yang Anda buat menggunakan invoke , mereka akan berjalan dengan benar & dipantau untuk transisi dan muncul dalam posisi yang diharapkan dalam hierarki. Ini memungkinkan Anda menyusun statechart yang lebih besar dari beberapa yang lebih kecil dan masih memiliki semuanya berkontribusi komponen ke aplikasi.
Anda dapat secara dinamis memuat komponen atau alat peraga menggunakan fungsionalitas apa pun yang Anda sukai melalui kunci load . Untuk memuat komponen secara tidak sinkron mengembalikan janji atau menggunakan async / await .
// ...
one : {
meta : {
load : ( ) => import ( "./my/component/from/here.js" ) ,
} ,
} ,
// ... Alat peraga dinamis juga didukung. Untuk mengembalikan alat peraga mengembalikan array dari load di mana nilai pertama adalah komponen dan yang kedua adalah alat peraga untuk komponen. Kedua nilai mendukung janji yang dikembalikan.
// ...
one : {
meta : {
load : ( context ) => [
import ( "./my/component/from/here.js" ) ,
{
prop1 : context . prop1
} ,
] ,
} ,
} ,
// ... Fungsi load akan dilewatkan context dan param event dari XState.
component xstate-component-tree/component memiliki ekspor bernama yang disebut component , yang merupakan fungsi kecil untuk abstrak penugasan tandang ke objek meta di setiap node keadaan yang membutuhkan komponen. Ini adalah pembungkus kenyamanan yang membuat menulis dengan xstate-component-tree sedikit lebih bersih.
import { component } from "xstate-component-tree/component";
// ...
- one : {
- meta: {
- component: OneComponent,
- },
- },
+ one : component(OneComponent), Pengaturan alat peraga untuk komponen ditangani dengan meneruskan objek dengan component dan alat props .
import { component } from "xstate-component-tree/component";
// ...
- one : {
- meta: {
- component : MyComponent,
- props : {
- prop1 : 1
- },
- },
- },
+ one : component({
+ component : OneComponent,
+ props : {
+ prop1 : 1,
+ },
+ }), Baik kunci component dan props dapat berupa fungsi, mereka akan dilewatkan context yang sama dan arge event yang biasanya diteruskan ke metode load() .
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 , dan contoh penafsir xStatecallback , fungsi yang akan dieksekusi setiap kali pohon komponen baru sudah siapoptions , objek opsional yang berisi nilai konfigurasi untuk pustaka. Fungsi callback menerima dua argumen, yang pertama adalah pohon komponen & alat peraga Anda. Yang kedua adalah objek dengan beberapa informasi berguna di dalamnya:
.state , objek State xState yang dikembalikan untuk mesin root.broadcast() , versi terikat dari .broadcast() API yang didokumentasikan di bawah ini.can() , versi terikat dari .can() API yang didokumentasikan di bawah ini.hasTag() , versi terikat dari .hasTag() API yang didokumentasikan di bawah ini.matches() , versi terikat dari .matches() API yang didokumentasikan di bawah ini options cache (default true ), boolean menentukan apakah nilai fungsi load() harus di -cache atau tidak. Ini dapat ditimpa dengan mengatur meta.cache pada keadaan apa pun di pohon di mana caching perlu dinonaktifkan.
stable (default: false ), memberi tahu perpustakaan untuk mengurutkan status secara abjad sebelum berjalan di setiap tingkat untuk membantu memastikan bahwa output komponen lebih konsisten antara transisi keadaan.
verbose (default: false ), mencatat info tentang cara kerja & keputusan internal.
ComponentTree .broadcast(eventName | eventObject, payload) Panggilan metode xState .send() pada setiap penerjemah berjalan dalam hierarki. Ini sangat berguna untuk menghindari penggunaan opsi autoforward pada semua mesin anak Anda yang dipanggil.
eventName adalah acara string yang akan dikirimeventObject adalah objek dengan properti type nama acara, bersama dengan bidang opsional lainnyapayload adalah objek bidang opsional yang akan ditambahkan ke objek acara .can(eventName | eventObject) Panggilan metode xstate .can() pada setiap penerjemah berjalan dalam hierarki.
eventName adalah acara string yang akan dikirimeventObject adalah objek dengan properti type nama acara, bersama dengan bidang opsional lainnya .hasTag(tag)tag adalah string, yang dapat didefinisikan pada status menggunakan properti tags Panggilan metode xState .hasTag() terhadap semua mesin yang sedang berjalan dan mengembalikan hasilnya, berhenti pada pertandingan pertama yang berhasil.
.matches(stateName)stateName adalah nilai keadaan penuh atau parsial yang ditentukan sebagai string Panggilan metode xState .matches() terhadap semua mesin yang sedang berjalan dan mengembalikan hasilnya, berhenti pada pertandingan pertama yang berhasil.
component() Helper component mengembalikan node xstate sebagai objek literal, itu semata -mata metode kenyamanan bagi penulis Statechart.
component(Component | () => {}, [node])Component adalah komponen atau fungsi panah yang akan dieksekusi. Ini mendukung fungsi yang mengembalikan komponen atau Promise .node adalah node xState yang valid, objek meta akan dibuat dan dicampur oleh component() . component({ component : Component | () => {}, props : {...} | () => {} })component adalah komponen mentah atau fungsi panah yang akan dieksekusi. Ini mendukung pengembalian nilai atau Promise .props adalah objek alat peraga atau fungsi yang akan dieksekusi. Ini mendukung fungsi mengembalikan nilai atau Promise . Setelah Anda memiliki pohon komponen, bagaimana Anda mengumpulkannya ke lapisan tampilan Anda sepenuhnya terserah Anda! Inilah contoh langsing singkat.
{#each components as { path, component, props, children } (path)}
< svelte:component this = {component} {...props} {children} />
{/each}
< script >
export let components ;
</ script >
