xstate component tree
v6.1.1
유틸리티 방법 Xstate 통역사를 마무리하고 상태 메타 정보를 읽으려면 StateChart를 사용하여 렌더링 할 구성 요소 트리를 만들 수 있습니다.
$ > npm install xstate-component-treeXstate 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 ) => {
// ...
} ) ; 함수에 대한 두 번째 인수는 기계가 전환 할 때마다 호출됩니다. 그것은 현재 활성 상태에 정의 된 모든 뷰를 나타내는 새로운 객체를 통과시킬 것입니다. 응답의 각 요소에는 객체가 나타내는 특정 상태에 해당하는 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의 구성 요소가 포함될 수 있으며, 전환을 올바르게 걸어 가고 모니터링하며 계층 구조 내에서 예상 위치에 나타납니다. 이를 통해 여러 작은 스테치치 카트를 구성 할 수 있으며 여전히 앱에 구성 요소를 기여할 수 있습니다.
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 키는 모두 함수 일 수 있으며, 일반적으로 load() 메소드로 전달되는 동일한 context 및 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,
+ }),
+ }), ComponentTree new ComponentTree(interpreter, callback, [options])interpreter 및 Xstate 통역사 인스턴스callback , 새로운 구성 요소가 준비 될 때마다 실행될 함수options , 라이브러리의 구성 값이 포함 된 선택적 객체. callback 함수는 두 가지 인수를받습니다. 첫 번째는 구성 요소 및 소품의 조립 된 트리입니다. 두 번째는 유용한 정보가있는 객체입니다.
.state , 루트 머신의 반환 된 Xstate State 개체.broadcast() , 아래 문서화 된 .broadcast() API의 바운드 버전.can() , 아래에 문서화 된 .can() API의 바운드 버전.hasTag() , 아래 문서화 된 .hasTag() API의 바운드 버전.matches() , 아래 문서화 된 .matches() API의 바운드 버전 options load() 함수의 값을 캐시 해야하는지 여부를 결정하는 부울 인 cache (기본 true ). 캐싱을 비활성화 해야하는 트리의 모든 상태에서 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 >
