refactoring Composer part3

src/lib/components/refactor/ComposerAlice.svelte

@@ -1,4 +1,5 @@
 <script>
+	export let me;
 	export let services;
 	export let store;
 
@@ -6,8 +7,8 @@
 
 	let childStore;
 
-	$: if (services.core) {
-		childStore = services.core.subscribeComposer('@ComposerBob');
+	$: if (me.do) {
+		childStore = me.do.subscribeComposer('@ComposerBob');
 	}
 
 	$: {
@@ -19,6 +20,8 @@
 </script>
 
 <div class="p-2 border-2 border-blue-500">
+	<p>My ID is: {me.id}</p>
+
 	I am the parent, this is my state: {$store.machine.state}
 	<div
 		class="p-2 border-2"

src/lib/components/refactor/ComposerBob.svelte

@@ -1,4 +1,5 @@
 <script>
+	export let me;
 	export let store;
 	export let machineService;
 
@@ -10,6 +11,8 @@
 </script>
 
 <div class="border-2 border-yellow-500">
+	<p>My ID is: {me.id}</p>
+
 	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"

src/lib/components/refactor/ComposerCharly.svelte

@@ -1,52 +1,8 @@
 <script>
-	export let services;
-	export let store;
-
-	let isStoreLoaded = false;
-
-	$: if (services && services.helloEarthAlert) {
-		// services.helloEarthAlert.alertMe();
-	}
-	$: if (services.core) {
-		// services.core.testAlert();
-	}
-
-	$: if ($store) isStoreLoaded = true;
+	export let me;
 </script>
 
-{#if isStoreLoaded}
-	<div class="container p-12">
-		<h1 class="h1">
-			{#if $store.title}{$store.title}{/if}
-		</h1>
-		<h2 class="py-6 h2">
-			{#if $store.description}{$store.description}{/if}
-		</h2>
-		<h3 class="mt-4 h3">Wallet Address</h3>
-		{#if $store.pkpWallet}
-			<p>{$store.pkpWallet.address}</p>
-		{/if}
-
-		<h4 class="mt-4 h4">store: hello (init default)</h4>
-		{#if $store.hello}{$store.hello}{/if}
-		<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
-		{#if $store.hello2}{$store.hello2}{/if}
-
-		<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
-		{#if $store.todos}
-			<dl class="list-dl">
-				{#each $store.todos as todo}
-					<div>
-						<span class="flex-auto">
-							<dd>{todo.text}</dd>
-						</span>
-					</div>
-				{/each}
-			</dl>
-		{/if}
-	</div>
-{:else}
-	<div class="container">
-		<p>Loading...</p>
-	</div>
-{/if}
+<div class="border-2 border-green-500">
+	<p>My ID is: {me.id}</p>
+	<h1 class="h1">I am charly</h1>
+</div>

src/lib/components/refactor/ComposerWrap.svelte

@@ -3,12 +3,6 @@
 
 	let composer = {
 		id: 'ComposerParent',
-		store: {
-			title: 'Hello Earth',
-			description:
-				'how to use the store and mapping logic of store to store and data to store maps',
-			helloMapMe: 'this is going to be mapped'
-		},
 		machine: {
 			initial: 'NOTREADY',
 			states: {
@@ -43,20 +37,7 @@
 							on: { TOGGLE: 'NOTREADY' }
 						}
 					}
-				},
-				store: {
-					machine: { state: 'NOTREADY' },
-					hello: 'define me directly',
-					hello2: 'overwrite me with the mapping value'
-				},
-				map: {
-					title: '@hello:title',
-					description: '@hello:description',
-					hello2: '@hello:helloMapMe',
-					pkpWallet: '@wallet:pkpWallet',
-					todos: '@data:queryTodos'
-				},
-				services: ['helloEarthAlert']
+				}
 			},
 			{
 				id: 'ComposerBob',

src/lib/core/coreServices.ts

@@ -1,6 +1,5 @@
 // coreServices.ts
 import { getCompositeStore } from './compositeStores';
-import { interpret, Machine } from 'xstate';
 
 export const coreServices = {
     updateComposite: (mappings: Record<string, string>) => {
@@ -20,16 +19,5 @@ 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();
-        }
     }
 };

src/lib/core/refactor/Composer.svelte

@@ -2,7 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import Composer from './Composer.svelte';
 	import FallBack from './FallBack.svelte';
-	import components from './componentLoader';
+	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
 	import { dataStore } from '$lib/core/dataLoader';
 	import { createComposerStore, getComposerStore } from './composerStores';
@@ -20,6 +20,7 @@
 	interface IComposer {
 		layout?: IComposerLayout;
 		id: string;
+		me?: { id: string; do: any };
 		slot?: string;
 		component?: string;
 		services?: string[];
@@ -205,6 +206,7 @@
 
 	async function loadComponentAndService(component: IComposer) {
 		const componentName = component.component || 'FallBack';
+		component.me = { id: component.id, do: loadedServices.core };
 		return await getComponent(componentName);
 	}
 </script>
@@ -222,6 +224,7 @@
 				machine={composer.machine}
 				services={loadedServices}
 				machineService={child.machineService}
+				me={composer.me}
 			/>
 		{/await}
 	{/if}
@@ -240,6 +243,7 @@
 							machine={child.machine}
 							services={loadedServices}
 							machineService={child.machineService}
+							me={child.me}
 						/>
 						{#if child.children && child.children.length}
 							<Composer composer={child} />