From f4ad80fde929cfe90a579b138741b5224623febb Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Thu, 3 Aug 2023 11:36:15 +0200
Subject: [PATCH] added dynamically loading of xstates machines from composite
 definitions

---
 src/lib/components/Recipies/LearnReady.svelte | 28 ++++++++-----
 src/lib/components/Recipies/feedback.md       | 15 -------
 .../Recipies/machines/toggleMachine.ts        | 14 -------
 src/lib/components/Recipies/oRecipe.svelte    | 41 +++++++++++++------
 src/lib/core/Composite.svelte                 |  4 ++
 5 files changed, 50 insertions(+), 52 deletions(-)
 delete mode 100644 src/lib/components/Recipies/feedback.md
 delete mode 100644 src/lib/components/Recipies/machines/toggleMachine.ts

diff --git a/src/lib/components/Recipies/LearnReady.svelte b/src/lib/components/Recipies/LearnReady.svelte
index b18126a..f86dc32 100644
--- a/src/lib/components/Recipies/LearnReady.svelte
+++ b/src/lib/components/Recipies/LearnReady.svelte
@@ -1,22 +1,30 @@
 <script>
-	import { interpret } from 'xstate';
-	import { toggleMachine } from './machines/toggleMachine';
+	import { interpret, Machine } from 'xstate';
 
 	export let store;
+	let service;
+	let current;
+	export let machine;
 
-	$: console.log('ready child:  ' + JSON.stringify($store));
+	let compositeMachine;
 
-	let current = toggleMachine.initialState.value;
-	const service = interpret(toggleMachine).onTransition((state) => {
-		current = state.value;
-		$store.xstate = state.value;
-	});
+	$: if (machine) {
+		compositeMachine = Machine(machine);
 
-	service.start();
+		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">
-	i am the child and this is my state: {current}
+	{#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
diff --git a/src/lib/components/Recipies/feedback.md b/src/lib/components/Recipies/feedback.md
deleted file mode 100644
index 575f728..0000000
--- a/src/lib/components/Recipies/feedback.md
+++ /dev/null
@@ -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;
-      }
-    };
-  }
\ No newline at end of file
diff --git a/src/lib/components/Recipies/machines/toggleMachine.ts b/src/lib/components/Recipies/machines/toggleMachine.ts
deleted file mode 100644
index e5ded94..0000000
--- a/src/lib/components/Recipies/machines/toggleMachine.ts
+++ /dev/null
@@ -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' }
-        }
-    }
-});
\ No newline at end of file
diff --git a/src/lib/components/Recipies/oRecipe.svelte b/src/lib/components/Recipies/oRecipe.svelte
index 4c2c0f1..c1f29c7 100644
--- a/src/lib/components/Recipies/oRecipe.svelte
+++ b/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)
-		.onTransition((state) => {
-			current = state.value;
-		})
-		.start();
+	// const service = interpret(machine)
+	// 	.onTransition((state) => {
+	// 		current = state.value;
+	// 	})
+	// 	.start();
 
 	// Derive possible actions from the current state
-	$: possibleActions = machine.states[current]?.meta.buttons || [];
+	// $: possibleActions = machine.states[current]?.meta.buttons || [];
 </script>
 
+<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">
-		<div class="h-1/4">
-			<Composite {composite} />
-		</div>
+	
 		<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> -->
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index f92732b..7124037 100644
--- a/src/lib/core/Composite.svelte
+++ b/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}