je code un composant d'affichage/masquage condtionné aux états d'un automate à états finis (FSM = Finite State Machine) simple à configurer et en l'impléntant avec un Store et des slots.

En pièce FSM.jsjointe de ce mail: le code de la FSM.

Concrètement j'aimerai pouvoir instancier ce composant avec le moins de props possibles voir (dés-)aggréger les props avec l'opérateur de destructuration (eliipsis ...) un peu de la façon suivante:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <MachView { ...test.INIT }>
        <h1> INIT </h1>
        <MachButton { ...show.MIDDLE } MIDDLE </MachButton>
        <MachButton { ...show.DEST } DEST </MachButton>
    </MachView>
    <MachView { ...test.MIDDLE }>
        <h1> MIDDLE </h1>
        <MachButton { ...show.INIT } INIT </MachButton>
        <MachButton { ...show.DEST } DEST </MachButton>
    </MachView>
    <MachView { ...test.DEST }>
        <h1> DEST </h1>
    </MachView>
    
    <script lang="ts">
        import { onMount } from 'svelte'
        import { MachView, MachButton, MachStore  } from '$lib/mach'
        
        const store = FSMStore ({ debug: true })
        const { test, show, run } = store
        
       onMount (() => {
           run ({ state: 'INIT'})    
       }) 
        
    </script>
Le problème vient du fait que:

* on observe un clignotement lors de l'instanciation
* l'affichage se positionne sur le dernier état déclaré (TERM)

QUESTION: quand il est question de slots en Svelte, dans quel ordre les codes des composants inclus et leur onMount sont-ils dérolués ?

Voici le code du composant de la MachView ke panneau d'affichage conditionnel

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
    {#if $ctx === active }
        <slot />
    {/if}

    <script lang="ts">
        export let ctx = null
        export let active = '#STATE?'
    
        $: active = ctx.active
     </script>
Je ne vais pas détailler le code de MachStore, car cela serait peut etre long:

* utilisation d'un custom writable store qui stocke l'état courant de l'automate

* utilisation d'un Proxy vers une vriable interne de type tableau pour stocker les labels, c'est ce qui permet de créer les getters magiques 'test' et 'show' afin de renvoyer la signature complète du store personnalisé... au moment où on tente d'instancier un état (...test.ABC)

* ls getters magiques 'test' et 'show' en renvoyant l'API du store permettent de n'avoir qu'un seul paramètre au niveau de MachView, c'est plus court à écrire !!!

* je n'utilise pas l'API context de svelte car je souhaite pouvoir disposer de plusieurs automates dans mon appli... il doit rester générique, et le store, voyage parmi les props

Avez vous déjà créé quelque chose de ce genre, et quel est votre avis sur mon approche ?

FSM.js