samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added dynamic instantiation of machines in composite

Browse Source
This commit is contained in:
Samuel Andert 2023-08-03 12:25:55 +02:00
parent f4ad80fde9
commit 3aa211a35d
6 changed files with 97 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/components/Recipies/LearnColor.svelte
View File

@ -1,7 +1,6 @@
<script>
import { Machine, interpret } from 'xstate';
export let services;
export let store;
let childStore;
@ -9,44 +8,18 @@
childStore = services.core.subscribeComposite('@child');
}
const colorMachine = Machine({
id: 'color',
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
});
let current = colorMachine.initialState.value;
const service = interpret(colorMachine)
.onTransition((state) => {
current = state.value;
})
.start();
$: {
if ($childStore && $childStore.xstate) {
service.send($childStore.xstate);
if ($childStore && $childStore.machine.state) {
services.machine.send($childStore.machine.state);
}
}
</script>
<div class="p-2 border-2 border-blue-500">I am the parent, this is my state: {current}</div>
<div class="p-2 border-2 border-blue-500">
I am the parent, this is my state: {$store.machine.state}
</div>
<div
class="p-2 border-2"
style="background-color: {current}; border-radius: 50%; width: 50px; height: 50px;"
style="background-color: {$store.machine.state}; border-radius: 50%; width: 50px; height: 50px;"
/>
<p>The child state: {JSON.stringify($childStore)}</p>

9
src/lib/components/Recipies/LearnReady.svelte
View File

@ -11,10 +11,9 @@
$: if (machine) {
compositeMachine = Machine(machine);
current = compositeMachine.initialState.value; // remove let
current = compositeMachine.initialState.value;
service = interpret(compositeMachine).onTransition((state) => {
current = state.value;
$store.xstate = state.value;
$store.machine.state = state.value;
});
service.start();
@ -22,9 +21,7 @@
</script>
<div class="border-2 border-yellow-500">
{#if machine}
i am the child and this is my state: {current}
{/if}
i am the child and this is my state: {$store.machine.state}
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
on:click={() => service.send('TOGGLE')}>Switch</button

14
src/lib/components/Recipies/machines/toggleMachine.ts Normal file
View File

@ -0,0 +1,14 @@
import { Machine } from 'xstate';
export const toggleMachine = Machine({
id: 'toggleMachine',
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
});

25
src/lib/components/Recipies/oRecipe.svelte
View File

@ -19,7 +19,7 @@
component: 'LearnReady',
slot: 'left',
store: {
xstate: 'NOTREADY'
machine: { state: 'NOTREADY' }
},
machine: {
id: 'compositemachine',
@ -35,9 +35,28 @@
}
},
{
id: 'parent',
id: 'learncolor',
component: 'LearnColor',
slot: 'right'
slot: 'right',
machine: {
id: 'color',
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
}
}
]
};

30
src/lib/core/Composite.svelte
View File

@ -7,7 +7,7 @@
import { dataStore } from '$lib/core/dataLoader';
import { createCompositeStore, getCompositeStore } from '$lib/core/compositeStores';
import { coreServices } from './coreServices';
import { Machine } from 'xstate';
import { Machine, interpret } from 'xstate';
interface ICompositeLayout {
areas: string;
@ -35,6 +35,7 @@
core: coreServices
};
let layoutStyle = '';
let machineService;
$: {
layoutStyle = computeLayoutStyle(composite?.layout);
@ -50,6 +51,33 @@
mapAndSubscribe(child);
});
}
if (composite?.machine) {
const machine = Machine(composite.machine);
machineService = interpret(machine).onTransition((state) => {
getCompositeStore(composite.id).update((storeValue) => ({
...storeValue,
machine: { state: state.value }
}));
});
machineService.start();
loadedServices.machine = machineService;
}
if (composite?.children) {
composite.children.forEach((child) => {
if (child.machine) {
const childMachine = Machine(child.machine);
machineService = interpret(childMachine).onTransition((state) => {
getCompositeStore(child.id).update((storeValue) => ({
...storeValue,
machine: { state: state.value }
}));
});
machineService.start();
loadedServices.machine = machineService;
}
});
}
}
function computeLayoutStyle(layout?: ICompositeLayout): string {

32
src/lib/core/coreServices.ts
View File

@ -1,17 +1,18 @@
// coreServices.ts
import { getCompositeStore } from './compositeStores';
import { interpret, Machine } from 'xstate';
export const coreServices = {
// updateComposite: (mappings: Record<string, string>) => {
// for (const [mappingString, value] of Object.entries(mappings)) {
// const [storeID, key] = mappingString.replace('@', '').split(':');
// const store = getCompositeStore(storeID);
// store.update(storeData => {
// storeData[key] = value;
// return storeData;
// });
// }
// },
updateComposite: (mappings: Record<string, string>) => {
for (const [mappingString, value] of Object.entries(mappings)) {
const [storeID, key] = mappingString.replace('@', '').split(':');
const store = getCompositeStore(storeID);
store.update(storeData => {
storeData[key] = value;
return storeData;
});
}
},
subscribeComposite: (mappingString: string) => {
const [storeID] = mappingString.replace('@', '').split(':');
const store = getCompositeStore(storeID);
@ -19,5 +20,16 @@ export const coreServices = {
},
testAlert: () => {
alert("core service alert")
},
machine: {
service: null,
send: (event) => coreServices.machine.service.send(event),
initialize: (machineDefinition, store) => {
const machine = Machine(machineDefinition);
coreServices.machine.service = interpret(machine).onTransition((state) => {
store.update(storeValue => ({ ...storeValue, machine: { state: state.value } }));
});
coreServices.machine.service.start();
}
}
};