xstate component tree

Tree-component-component-tree

วิธีการยูทิลิตี้ในการสรุปข้อมูลล่าม XSTATE และอ่านข้อมูลเมตาสถานะเพื่อให้ StatEchart ของคุณสามารถใช้ในการสร้างต้นไม้ของส่วนประกอบที่จะแสดงผล

การติดตั้ง

$ > npm install xstate-component-tree

การใช้งาน

สร้าง StateChart XSTATE จากนั้นสร้างอินสแตนซ์ล่าม 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: []
     *     }]
     * }]
     * 
     */ 
} ) ;

โครงสร้างข้อมูลนี้ยังสามารถมีส่วนประกอบจาก statecharts เด็กที่คุณสร้างขึ้นโดยใช้ invoke พวกเขาจะเดินอย่างถูกต้องและตรวจสอบสำหรับการเปลี่ยนและปรากฏในตำแหน่งที่คาดหวังภายในลำดับชั้น สิ่งนี้ช่วยให้คุณเขียน 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 จะถูกส่งผ่าน context และพารามิเตอร์ event จาก XSTATE

ผู้ช่วย 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 และ event ที่เหมือนกันซึ่งปกติจะส่งผ่านไปยังวิธีการ 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,
+    }),
+ }), 

API

ComponentTree

new ComponentTree(interpreter, callback, [options])

• interpreter และอินสแตนซ์ของล่าม XSTATE
• callback ฟังก์ชั่นที่จะดำเนินการทุกครั้งที่ต้นไม้ใหม่ของส่วนประกอบพร้อม
• options วัตถุเสริมที่มีค่าการกำหนดค่าสำหรับไลบรารี

ฟังก์ชั่น callback ได้รับสองอาร์กิวเมนต์แรกคือต้นไม้ประกอบของส่วนประกอบและอุปกรณ์ประกอบฉากของคุณ ประการที่สองคือวัตถุที่มีข้อมูลที่เป็นประโยชน์บางอย่าง:

• .state วัตถุ State XSTATE ที่ส่งคืนสำหรับเครื่องรูท
• .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 >