1 pièce(s) jointe(s)
SvelteKit composant automate à états finis (store, props, destructuration JS)
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 Pièce jointe 625436jointe 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:
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:
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 ?
Pièce jointe 625436
