xstate component tree

Xstate-Component 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: []
     *     }]
     * }]
     * 
     */ 
} ) ;

يمكن أن تحتوي بنية البيانات هذه أيضًا على مكونات من أي طفل من 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 هو إما مكون RAW أو وظيفة سهم سيتم تنفيذها. وهو يدعم إرجاع القيمة أو Promise .
• props هي إما كائن الدعائم أو وظيفة سيتم تنفيذها. وهو يدعم الوظيفة لإعادة إما قيمة أو Promise .

مكونات تقديم

بمجرد حصولك على شجرة المكونات ، فإن كيفية تجميع ذلك في طريقة العرض الخاصة بك متروك لك تمامًا! إليك مثال مختصر.

{#each components as { path, component, props, children } (path)}
    < svelte:component this = {component} {...props} {children} />
{/each}

< script >
export let components ;
</ script >