cleanup of composer

src/lib/components/refactor/ComposerWrap.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Composer from '$lib/core/refactor/Composer.svelte';
 	import { queryMessages } from '$lib/data/queryMessages';
-	import { coreServices } from '$lib/core/refactor/coreServices';
 	import { queryTodos } from '$lib/data/queryTodos';
 
 	let composer = {

src/lib/core/refactor/Composer.svelte

@@ -6,6 +6,7 @@
 	import { createComposerStore, getComposerStore } from './composerStores';
 	import { coreServices } from './coreServices';
 	import { Machine, interpret } from 'xstate';
+	import { subscribeAndMapQueries } from './queryLoader';
 
 	interface IComposerLayout {
 		areas: string;
@@ -29,7 +30,6 @@
 	export let composer: IComposer;
 
 	let layoutStyle = '';
-	let machineService;
 	let unsubscribers = [];
 
 	$: {
@@ -42,6 +42,17 @@
 				initializeComposerState(child);
 			});
 		}
+
+		initializeAndStartMachine(composer);
+
+		if (composer?.children) {
+			composer.children.forEach((child) => {
+				initializeAndStartMachine(child);
+			});
+		}
+	}
+
+	function initializeAndStartMachine(composer: IComposer) {
 		if (composer?.machine) {
 			const machine = Machine(
 				{
@@ -52,7 +63,7 @@
 					services: composer.machine.services
 				}
 			);
-			machineService = interpret(machine).onTransition((state) => {
+			const machineService = interpret(machine).onTransition((state) => {
 				console.log(`${composer.id} State transitioned to: ${state.value}`);
 				console.log('Context:', state.context); // Log the context
 				getComposerStore(composer.id).update((storeValue) => ({
@@ -64,40 +75,6 @@
 			machineService.start();
 			composer.machineService = machineService;
 		}
-
-		if (composer?.children) {
-			composer.children.forEach((child) => {
-				if (child.machine) {
-					const childMachine = Machine(
-						{ ...child.machine, id: child.id },
-						{
-							services: child.machine.services
-						}
-					);
-					machineService = interpret(childMachine).onTransition((state) => {
-						console.log(`${child.id} State transitioned to: ${state.value}`);
-						console.log('Context:', state.context); // Log the context
-						getComposerStore(child.id).update((storeValue) => ({
-							...storeValue,
-							state: state.value, // updated
-							context: state.context // added
-						}));
-					});
-					machineService.start();
-					child.machineService = machineService;
-				}
-			});
-		}
-	}
-
-	function subscribeAndMapQueries(id: string, queryMap: Record<string, any>) {
-		Object.entries(queryMap).forEach(([name, query]) => {
-			query.subscribe((value) => {
-				if (value) {
-					coreServices.mutateStore(id, { [name]: value });
-				}
-			});
-		});
 	}
 
 	function computeLayoutStyle(layout?: IComposerLayout): string {

src/lib/core/refactor/ComposerComponent.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-	import { getComposerStore } from './composerStores';
-	import { Machine, interpret } from 'xstate';
-
-	export let composer;
-	export let Component;
-	export let loadedServices;
-	let machineService;
-
-	$: {
-		if (composer?.machine) {
-			const machine = Machine({ ...composer.machine, id: composer.id });
-			machineService = interpret(machine).onTransition((state) => {
-				getComposerStore(composer.id).update((storeValue) => ({
-					...storeValue,
-					machine: { state: state.value }
-				}));
-			});
-			machineService.start();
-			composer.machineService = machineService;
-		}
-	}
-
-	onDestroy(() => {
-		machineService?.stop();
-	});
-</script>
-
-<svelte:component
-	this={Component}
-	id={composer.id}
-	store={getComposerStore(composer.id)}
-	machine={composer.machine}
-	services={loadedServices}
-	machineService={composer.machineService}
-	me={composer.me}
-/>

src/lib/core/refactor/queryLoader.ts

@@ -1,6 +1,7 @@
 // dataLoader.ts
 import { writable } from 'svelte/store';
 import dataSources from 'virtual:data-sources-list';
+import { coreServices } from './coreServices';
 
 // The store that holds the data sets
 export const queryStore = writable({});
@@ -13,4 +14,14 @@ dataSources.forEach(src => {
 
         queryStore.update(store => ({ ...store, [src]: moduleData }));
     });
-});
+});
+
+export function subscribeAndMapQueries(id: string, queryMap: Record<string, any>) {
+    Object.entries(queryMap).forEach(([name, query]) => {
+        query.subscribe((value) => {
+            if (value) {
+                coreServices.mutateStore(id, { [name]: value });
+            }
+        });
+    });
+}