Added dynamic instantiation of machines in composite

src/lib/components/Recipies/LearnColor.svelte

@@ -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) {
+		if ($childStore && $childStore.machine.state) {
-			service.send($childStore.xstate);
+			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>

src/lib/components/Recipies/LearnReady.svelte

@@ -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.machine.state = state.value;
-			$store.xstate = 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: {$store.machine.state}
-		i am the child and this is my state: {current}
-	{/if}
 	<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

src/lib/components/Recipies/machines/toggleMachine.ts

@@ -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' }
+        }
+    }
+});

src/lib/components/Recipies/oRecipe.svelte

@@ -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'
+					}
+				}
 			}
 		]
 	};

src/lib/core/Composite.svelte

@@ -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 {

src/lib/core/coreServices.ts

@@ -1,17 +1,18 @@
 // coreServices.ts
 import { getCompositeStore } from './compositeStores';
+import { interpret, Machine } from 'xstate';
 
 export const coreServices = {
-    // updateComposite: (mappings: Record<string, string>) => {
+    updateComposite: (mappings: Record<string, string>) => {
-    //     for (const [mappingString, value] of Object.entries(mappings)) {
+        for (const [mappingString, value] of Object.entries(mappings)) {
-    //         const [storeID, key] = mappingString.replace('@', '').split(':');
+            const [storeID, key] = mappingString.replace('@', '').split(':');
-    //         const store = getCompositeStore(storeID);
+            const store = getCompositeStore(storeID);
-    //         store.update(storeData => {
+            store.update(storeData => {
-    //             storeData[key] = value;
+                storeData[key] = value;
-    //             return storeData;
+                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();
+        }
     }
 };