xstate component tree

XState-Komponentenbaum

Versorgungsmethode zum Abschluss eines Xstate -Interpreter- und Lesens -Status -Meta -Informationen, damit Ihr Statechart verwendet werden kann, um einen Baum mit Komponenten zum Rendern zu erstellen.

Installation

$ > npm install xstate-component-tree

Verwendung

Erstellen Sie einen XState StatechArt und instanziieren Sie dann einen Xstate -Interpreter damit.

 const { Machine , interpret } = require ( "xstate" ) ;

const statechart = Machine ( {
    initial : "one" ,

    states : {
        one : { } ,
    } ,
} ) ;

const service = interpret ( statechart ) ;

Fügen Sie jedem Zustand meta -Objekte hinzu, den Sie eine Komponente darstellen möchten.

 Machine ( {
    initial : "one" ,

    states : {
        one : {
            meta : {
                component : MyComponent ,
            } ,
        } ,
    } ,
} ) ;

Requisiten für die Komponenten werden auch über den Taste props unterstützt.

    // ...
    one : {
        meta : {
            component : MyComponent ,
            props : {
                prop1 : 1
            } ,
        } ,
    } ,
    // ...

Geben Sie dann die Interpreter -Instanz und eine Rückruffunktion an dieses Modul weiter!

 const { Machine , interpret } = require ( "xstate" ) ;
const ComponentTree = require ( "xstate-component-tree" ) ;

const statechart = Machine ( {
    // ...
} ) ;

const service = interpret ( statechart ) ;

new ComponentTree ( service , ( tree ) => {
    // ...
} ) ;

Das zweite Argument für die Funktion wird jedes Mal aufgerufen, wenn die Maschine wechselt. Es wird den Rückruf ein neues Objekt übergeben, das alle in aktuell aktiven Zuständen definierten Ansichten darstellt, die alle korrekt verschachtelt sind, um der Struktur des Statechart zu entsprechen. Jedes Element in der Antwort enthält auch einen path , der dem spezifischen Zustand entspricht, den das Objekt darstellt.

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

Diese Datenstruktur kann auch Komponenten von allen untergeordneten StatechArts enthalten, die Sie mit invoke erstellt haben. Sie werden korrekt gegangen und für Übergänge überwacht und erscheinen in ihrer erwarteten Position innerhalb der Hierarchie. Auf diese Weise können Sie ein größeres Statechart aus mehreren kleineren komponieren und dennoch alle Komponenten zur App beitragen.

Erweiterte Verwendung

Sie können Komponenten oder Requisiten dynamisch laden, indem Sie die Funktionalität über die load verwenden. Um Komponenten asynchron zu laden, geben Sie ein Versprechen zurück oder verwenden Sie async / await .

 // ...
one : {
    meta : {
        load : ( ) => import ( "./my/component/from/here.js" ) ,
    } ,
} ,
// ...

Dynamische Requisiten werden ebenfalls unterstützt. Um Requisiten zurückzugeben, geben Sie ein Array aus load zurück, wobei der erste Wert die Komponente und die zweite die Requisiten für die Komponente ist. Beide Werte unterstützen ein zurückgegebenes Versprechen.

 // ...
one : {
    meta : {
        load : ( context ) => [
            import ( "./my/component/from/here.js" ) , 
            {
                prop1 : context . prop1
            } ,
        ] ,
    } ,
} ,
// ...

Die load wird der context und event von Xstate übergeben.

Der component

xstate-component-tree/component verfügt über einen benannten Export namens component , der eine kleine Funktion ist, um die Zuordnung zum meta Objekt in jedem Statusknoten abstrahieren zu können, der eine Komponente benötigt. Es ist ein Komfortumschlag, der das Schreiben mit xstate-component-tree etwas sauberer macht.

import { component } from "xstate-component-tree/component";

// ...
- one : {
-     meta: {
-         component: OneComponent,
-     },
- },
+ one : component(OneComponent),

Das Einstellen von Requisiten für die Komponente wird behandelt, indem ein Objekt mit component und props bestanden wird.

import { component } from "xstate-component-tree/component";

// ...
- one : {
-     meta: {
-        component : MyComponent,
-        props : {
-            prop1 : 1
-        },
-     },
- },
+ one : component({
+    component : OneComponent,
+    props : {
+        prop1 : 1,
+    },
+ }),

Sowohl der component als auch props -Schlüssel können eine Funktion sein, sie werden denselben context und event übergeben, die normalerweise an load() -Methoden übergeben werden.

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 und Instanz eines Xstate -Dolmetschers
• callback , eine Funktion, die jedes Mal ausgeführt wird, wenn ein neuer Baumbaum bereit ist
• options , ein optionales Objekt, das Konfigurationswerte für die Bibliothek enthält.

Die callback empfangen zwei Argumente, der erste ist Ihr zusammengesetzter Baum mit Komponenten und Requisiten. Das zweite ist ein Objekt mit einigen nützlichen Informationen dazu:

• .state State
• .broadcast() , eine gebundene Version der unten dokumentierten .broadcast() -API
• .can() , eine gebundene Version der unten dokumentierten .can() -API
• .hasTag() , eine gebundene Version der unten dokumentierten API .hasTag()
• .matches() , eine gebundene Version der unten dokumentierten .matches() -API

options

• cache (Standard true ), ein Boolescher, der feststellt, ob der Wert von load() -Funktionen zwischengespeichert werden sollte oder nicht. Dies kann überschrieben werden, indem meta.cache auf jedem Zustand im Baum festgelegt wird, in dem das Caching deaktiviert werden muss.

• stable (Standard: false ) fordert die Bibliothek an, Zustände alphabetisch zu sortieren, bevor sie auf jeder Stufe gelangen, um sicherzustellen, dass die Komponentenausgabe zwischen Zustandsübergängen konsistenter ist.

• verbose (Standard: false ), melden Sie sich Informationen zu den internen Arbeiten und Entscheidungen an.

ComponentTree -Instanzmethoden

.broadcast(eventName | eventObject, payload)

Ruft die Xstate .send() -Methode auf jedem laufenden Interpreter in der Hierarchie auf. Dies ist besonders nützlich, um die Verwendung der autoforward -Option für alle aufgerufenen Kindergeräte zu vermeiden.

• eventName ist ein String -Ereignis, das gesendet werden muss
• eventObject ist ein Objekt mit einer type des Ereignisnamens zusammen mit anderen optionalen Feldern
• payload ist ein Objekt optionaler Felder, die dem Ereignisobjekt hinzugefügt werden sollen

.can(eventName | eventObject)

Ruft die Xstate .can() -Methode auf jedem laufenden Interpreter in der Hierarchie auf.

• eventName ist ein String -Ereignis, das gesendet werden muss
• eventObject ist ein Objekt mit einer type des Ereignisnamens zusammen mit anderen optionalen Feldern

.hasTag(tag)

• tag ist eine Zeichenfolge, die in den Zuständen unter Verwendung der tags -Eigenschaft definiert werden kann

Ruft die XState .hasTag() -Methode gegen alle laufenden Maschinen auf und gibt das Ergebnis zurück, wobei Sie beim ersten erfolgreichen Spiel stehen.

.matches(stateName)

• stateName ist ein vollständiger oder partieller Zustandswert, der als Zeichenfolge angegeben ist

Ruft die XState .matches() -Methode gegen alle laufenden Maschinen auf und gibt das Ergebnis zurück, um beim ersten erfolgreichen Spiel zu stehen.

component() helfer

Der component gibt einen xstate -Knoten als Objektliteral zurück. Es ist ausschließlich eine Komfortmethode für StatechArt -Autoren.

component(Component | () => {}, [node])

• Component ist entweder eine Komponente oder eine Pfeilfunktion, die ausgeführt wird. Es unterstützt Funktionen, die entweder eine Komponente oder ein Promise zurückgeben.
• node ist ein gültiger XState-Knoten, das meta Objekt wird von der component() erstellt und gemischt.

component({ component : Component | () => {}, props : {...} | () => {} })

• component ist entweder eine Rohkomponente oder eine Pfeilfunktion, die ausgeführt wird. Es unterstützt die Rückgabe entweder einen Wert oder ein Promise .
• props ist entweder ein Props -Objekt oder eine Funktion, die ausgeführt wird. Es unterstützt die Funktion, die entweder einen Wert oder ein Promise zurückgibt.

Rendering -Komponenten

Sobald Sie den Baum der Komponenten haben, liegt die Art und Weise, wie Sie dies in Ihrer Sichtschicht zusammengestellt haben, ganz bei Ihnen! Hier ist ein kurzes Beispiel.

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

< script >
export let components ;
</ script >