xstate component tree

árbol de componente XSTATE

Método de utilidad para concluir un intérprete de XSTATE y leer la meta información del estado para que su statechart pueda usarse para crear un árbol de componentes para renderizar.

Instalación

$ > npm install xstate-component-tree

Uso

Cree un XSTATE statechart y luego instanciar un intérprete XSTATE con él.

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

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

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

const service = interpret ( statechart ) ;

Agregue meta objetos a cada estado que desea representar un componente.

 Machine ( {
    initial : "one" ,

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

Los accesorios para los componentes también son compatibles a través de la clave props .

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

¡Luego pase la instancia del intérprete y una función de devolución de llamada a este módulo!

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

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

const service = interpret ( statechart ) ;

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

El segundo argumento a la función se llamará cada vez que la máquina transique. Pasará la devolución de llamada un nuevo objeto que representa todas las vistas definidas en los estados actualmente activos, todos correctamente anidados para que coincidan con la estructura de Statechart. Cada elemento en la respuesta también contendrá un valor path correspondiente al estado específico que representa el objeto.

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

Esta estructura de datos también puede contener componentes de cualquier Child Statecharts que creó utilizando invoke , se transmitirán y monitorearán correctamente las transiciones y aparecerán en su posición esperada dentro de la jerarquía. Esto le permite componer un statechart más grande de varios más pequeños y aún así que todos contribuyen con componentes a la aplicación.

Uso avanzado

Puede cargar dinámicamente componentes o accesorios utilizando cualquier funcionalidad que desee a través de la tecla load . Para cargar componentes de devolver una promesa o usar async / await .

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

Los accesorios dinámicos también son compatibles. Para devolver los accesorios, devuelva una matriz de load donde el primer valor es el componente y el segundo son los accesorios para el componente. Ambos valores admiten una promesa devuelta.

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

La función load se pasará por el context y los parámetros event desde XState.

El ayudante component

xstate-component-tree/component tiene una exportación con nombre llamada component , que es una función pequeña para abstraer la asignación al meta objeto en cada nodo de estado que necesita un componente. Es un envoltorio de conveniencia que hace que la escritura con xstate-component-tree sea un poco más limpio.

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

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

Establecer accesorios para el componente se maneja pasando un objeto con claves component y props .

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

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

Tanto el component como la clave props pueden ser una función, se pasarán el mismo context y los argumentos event que normalmente se pasan a los métodos 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 , e instancia de un intérprete XSTATE
• callback , una función que se ejecutará cada vez que esté listo un nuevo árbol de componentes
• options , un objeto opcional que contiene valores de configuración para la biblioteca.

Las funciones callback reciben dos argumentos, el primero es su árbol ensamblado de componentes y accesorios. El segundo es un objeto con información útil:

• .state , el objeto State Xstate devuelto para la máquina raíz
• .broadcast() , una versión vinculada de la API .broadcast() documentada a continuación
• .can() , una versión vinculada de la API .can() documentada a continuación
• .hasTag() , una versión vinculada de la API .hasTag() documentada a continuación
• .matches() , una versión vinculada de la API .matches() documentada a continuación

options

• cache (predeterminado true ), un booleano que determina si el valor de las funciones load() debe almacenarse en caché. Esto se puede anular estableciendo meta.cache en cualquier estado en el árbol donde el almacenamiento en caché debe deshabilitarse.

• stable (predeterminado: false ), le dice a la biblioteca que ordene los estados alfabéticamente antes de guiarlos en cada nivel para ayudar a garantizar que la salida del componente sea más consistente entre las transiciones de estado.

• verbose (predeterminado: false ), inicia información sobre los trabajos y decisiones internas.

Métodos de instancia ComponentTree

.broadcast(eventName | eventObject, payload)

Llama al método XState .send() en cada intérprete en ejecución en la jerarquía. Esto es especialmente útil para evitar el uso de la opción autoforward en todas sus máquinas infantiles invocadas.

• eventName es un evento de cadena que se enviará
• eventObject es un objeto con una propiedad type del nombre del evento, junto con otros campos opcionales
• payload es un objeto de campos opcionales que se agregarán al objeto de eventos

.can(eventName | eventObject)

Llama al método XState .can() en cada intérprete en ejecución en la jerarquía.

• eventName es un evento de cadena que se enviará
• eventObject es un objeto con una propiedad type del nombre del evento, junto con otros campos opcionales

.hasTag(tag)

• tag es una cadena, que se puede definir en los estados utilizando la propiedad tags

Llama al método XState .hasTag() contra todas las máquinas en ejecución y devuelve el resultado, deteniéndose en la primera coincidencia exitosa.

.matches(stateName)

• stateName es un valor de estado completo o parcial especificado como una cadena

Llama al método XState .matches() contra todas las máquinas en ejecución y devuelve el resultado, deteniéndose en la primera coincidencia exitosa.

component() ayudante

El component ayudante devuelve un nodo xstate como un objeto literal, es únicamente un método de conveniencia para los autores de Statechart.

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

• Component es un componente o una función de flecha que se ejecutará. Admite funciones que devuelven un componente o una Promise .
• node es un nodo XState válido, el meta objeto será creado y mezclado por el component() .

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

• component es un componente sin procesar o una función de flecha que se ejecutará. Admite devolver un valor o una Promise .
• props son un objeto de accesorios o una función que se ejecutará. Admite la función que devuelve un valor o una Promise .

Componentes de representación

Una vez que tenga el árbol de los componentes, ¡cómo ensambló eso en su capa de vista depende completamente de usted! Aquí hay un breve ejemplo de esbelto.

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

< script >
export let components ;
</ script >