added dynamically loading of xstates machines from composite definitions

src/lib/components/Recipies/LearnReady.svelte

@@ -1,22 +1,30 @@
 <script>
-	import { interpret } from 'xstate';
+	import { interpret, Machine } from 'xstate';
-	import { toggleMachine } from './machines/toggleMachine';
 
 	export let store;
+	let service;
+	let current;
+	export let machine;
 
-	$: console.log('ready child:  ' + JSON.stringify($store));
+	let compositeMachine;
 
-	let current = toggleMachine.initialState.value;
+	$: if (machine) {
-	const service = interpret(toggleMachine).onTransition((state) => {
+		compositeMachine = Machine(machine);
+
+		current = compositeMachine.initialState.value; // remove let
+		service = interpret(compositeMachine).onTransition((state) => {
 			current = state.value;
 			$store.xstate = state.value;
 		});
 
 		service.start();
+	}
 </script>
 
 <div class="border-2 border-yellow-500">
+	{#if machine}
 		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/feedback.md

@@ -1,15 +0,0 @@
-childState: function subscribe2(run, invalidate = noop) {
-    const subscriber = [run, invalidate];
-    subscribers.add(subscriber);
-    if (subscribers.size === 1) {
-      stop = start(set, update) || noop;
-    }
-    run(value);
-    return () => {
-      subscribers.delete(subscriber);
-      if (subscribers.size === 0 && stop) {
-        stop();
-        stop = null;
-      }
-    };
-  }

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

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

src/lib/components/Recipies/oRecipe.svelte

@@ -3,7 +3,7 @@
 	import { interpret } from 'xstate';
 	import Composite from '$lib/core/Composite.svelte';
 
-	export let machine;
+	// export let machine;
 
 	let composite = {
 		id: 'testingstuff',
@@ -16,10 +16,22 @@
 		children: [
 			{
 				id: 'child',
-				// component: 'LearnReady',
+				component: 'LearnReady',
 				slot: 'left',
 				store: {
 					xstate: 'NOTREADY'
+				},
+				machine: {
+					id: 'compositemachine',
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
 				}
 			},
 			{
@@ -30,23 +42,26 @@
 		]
 	};
 
-	let current = machine.initialState.value;
+	// let current = machine.initialState.value;
 
-	const service = interpret(machine)
+	// const service = interpret(machine)
-		.onTransition((state) => {
+	// 	.onTransition((state) => {
-			current = state.value;
+	// 		current = state.value;
-		})
+	// 	})
-		.start();
+	// 	.start();
 
 	// Derive possible actions from the current state
-	$: possibleActions = machine.states[current]?.meta.buttons || [];
+	// $: possibleActions = machine.states[current]?.meta.buttons || [];
 </script>
 
-<main class="grid w-full h-full grid-rows-layout">
-	<div class="w-full h-full p-4 overflow-scroll">
 <div class="h-1/4">
 	<Composite {composite} />
 </div>
+
+<!-- 
+<main class="grid w-full h-full grid-rows-layout">
+	<div class="w-full h-full p-4 overflow-scroll">
+	
 		<p>Current state: {current}</p>
 		<h1>{machine.states[current].meta.title}</h1>
 		{#if machine.states[current].meta.composite}
@@ -70,4 +85,4 @@
 	.grid-rows-layout {
 		grid-template-rows: 1fr auto;
 	}
-</style>
+</style> -->

src/lib/core/Composite.svelte

@@ -7,6 +7,7 @@
 	import { dataStore } from '$lib/core/dataLoader';
 	import { createCompositeStore, getCompositeStore } from '$lib/core/compositeStores';
 	import { coreServices } from './coreServices';
+	import { Machine } from 'xstate';
 
 	interface ICompositeLayout {
 		areas: string;
@@ -26,6 +27,7 @@
 		store?: Record<string, any>;
 		children?: IComposite[];
 		servicesLoaded?: boolean;
+		machine?: any;
 	}
 
 	export let composite: IComposite;
@@ -185,6 +187,7 @@
 				this={Component}
 				id={composite.id}
 				store={getCompositeStore(composite.id)}
+				machine={composite.machine}
 				services={loadedServices}
 			/>
 		{/await}
@@ -201,6 +204,7 @@
 							this={ChildComponent}
 							id={child.id}
 							store={getCompositeStore(child.id)}
+							machine={child.machine}
 							services={loadedServices}
 						/>
 						{#if child.children && child.children.length}