refactoring next part
This commit is contained in:
parent
4a01649087
commit
2e4e4bdf59
@ -5,7 +5,7 @@
|
|||||||
let childData;
|
let childData;
|
||||||
|
|
||||||
$: if (me.do) {
|
$: if (me.do) {
|
||||||
childData = me.do.core.subscribeData('@ComposerBob');
|
childData = me.do.core.subscribeData('ComposerBob');
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
@ -1,8 +1,32 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { coreServices } from '$lib/core/refactor/coreServices';
|
||||||
|
|
||||||
export let me;
|
export let me;
|
||||||
|
export let data;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
|
||||||
|
});
|
||||||
|
function toggle() {
|
||||||
|
me.do.machine.send('TOGGLE');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="border-2 border-green-500">
|
<div class="border-2 border-green-500">
|
||||||
<p>My ID is: {me.id}</p>
|
<p>My ID is: {me.id}</p>
|
||||||
|
my state is {$data.state}
|
||||||
<h1 class="h1">I am charly</h1>
|
<h1 class="h1">I am charly</h1>
|
||||||
|
my data.context prop: {JSON.stringify($data.context)}
|
||||||
|
<br />
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
|
||||||
|
on:click={toggle}
|
||||||
|
>
|
||||||
|
Toggle
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- {#each $data.context.messages as message (message.timestamp)}
|
||||||
|
<p>{message.text}</p>
|
||||||
|
{/each} -->
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import Composer from '$lib/core/refactor/Composer.svelte';
|
import Composer from '$lib/core/refactor/Composer.svelte';
|
||||||
|
import { assign } from 'xstate';
|
||||||
|
import { coreServices } from '$lib/core/refactor/coreServices';
|
||||||
|
import { queryMessages } from '$lib/data/queryMessages';
|
||||||
|
|
||||||
let composer = {
|
let composer = {
|
||||||
id: 'ComposerParent',
|
id: 'ComposerParent',
|
||||||
@ -26,18 +29,31 @@
|
|||||||
{
|
{
|
||||||
id: 'ComposerCharly',
|
id: 'ComposerCharly',
|
||||||
component: 'ComposerCharly',
|
component: 'ComposerCharly',
|
||||||
data: {
|
|
||||||
context: { messenges: 'put the messengesStore here' }
|
|
||||||
},
|
|
||||||
slot: 'aside',
|
slot: 'aside',
|
||||||
|
data: {},
|
||||||
machine: {
|
machine: {
|
||||||
initial: 'NOTREADY',
|
initial: 'LOADING',
|
||||||
|
context: {
|
||||||
|
hello: 'start',
|
||||||
|
messages: []
|
||||||
|
},
|
||||||
states: {
|
states: {
|
||||||
NOTREADY: {
|
LOADING: {
|
||||||
on: { TOGGLE: 'READY' }
|
on: {
|
||||||
|
TOGGLE: {
|
||||||
|
target: 'READY',
|
||||||
|
actions: assign({
|
||||||
|
hello: (context, event) => 'this was updated from loading'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
READY: {
|
READY: {
|
||||||
on: { TOGGLE: 'NOTREADY' }
|
on: {
|
||||||
|
TOGGLE: {
|
||||||
|
target: 'LOADING'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -46,11 +62,8 @@
|
|||||||
id: 'ComposerBob',
|
id: 'ComposerBob',
|
||||||
component: 'ComposerBob',
|
component: 'ComposerBob',
|
||||||
slot: 'top',
|
slot: 'top',
|
||||||
data: {
|
|
||||||
machine: { state: 'NOTREADY' }
|
|
||||||
},
|
|
||||||
machine: {
|
machine: {
|
||||||
initial: 'NOTREADY',
|
initial: 'READY',
|
||||||
states: {
|
states: {
|
||||||
NOTREADY: {
|
NOTREADY: {
|
||||||
on: { TOGGLE: 'READY' }
|
on: { TOGGLE: 'READY' }
|
||||||
|
@ -43,12 +43,22 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (composer?.machine) {
|
if (composer?.machine) {
|
||||||
const machine = Machine({ ...composer.machine, id: composer.id });
|
const machine = Machine(
|
||||||
|
{
|
||||||
|
...composer.machine,
|
||||||
|
id: composer.id
|
||||||
|
},
|
||||||
|
{
|
||||||
|
services: composer.machine.services
|
||||||
|
}
|
||||||
|
);
|
||||||
machineService = interpret(machine).onTransition((state) => {
|
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) => ({
|
getComposerStore(composer.id).update((storeValue) => ({
|
||||||
...storeValue,
|
...storeValue,
|
||||||
state: state.value, // updated
|
state: state.value,
|
||||||
context: state.context // added
|
context: state.context
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
machineService.start();
|
machineService.start();
|
||||||
@ -58,8 +68,15 @@
|
|||||||
if (composer?.children) {
|
if (composer?.children) {
|
||||||
composer.children.forEach((child) => {
|
composer.children.forEach((child) => {
|
||||||
if (child.machine) {
|
if (child.machine) {
|
||||||
const childMachine = Machine({ ...child.machine, id: child.id });
|
const childMachine = Machine(
|
||||||
|
{ ...child.machine, id: child.id },
|
||||||
|
{
|
||||||
|
services: child.machine.services
|
||||||
|
}
|
||||||
|
);
|
||||||
machineService = interpret(childMachine).onTransition((state) => {
|
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) => ({
|
getComposerStore(child.id).update((storeValue) => ({
|
||||||
...storeValue,
|
...storeValue,
|
||||||
state: state.value, // updated
|
state: state.value, // updated
|
||||||
|
@ -2,18 +2,15 @@
|
|||||||
import { getComposerStore } from './composerStores';
|
import { getComposerStore } from './composerStores';
|
||||||
|
|
||||||
export const coreServices = {
|
export const coreServices = {
|
||||||
mutateData: (mappings: Record<string, string>) => {
|
mutateData: (storeID: string, value: any) => {
|
||||||
for (const [mappingString, value] of Object.entries(mappings)) {
|
|
||||||
const [storeID, key] = mappingString.replace('@', '').split(':');
|
|
||||||
const store = getComposerStore(storeID);
|
const store = getComposerStore(storeID);
|
||||||
|
console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
|
||||||
store.update(storeData => {
|
store.update(storeData => {
|
||||||
storeData[key] = value;
|
storeData.context = value;
|
||||||
return storeData;
|
return storeData;
|
||||||
});
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
subscribeData: (mappingString: string) => {
|
subscribeData: (storeID: string) => {
|
||||||
const [storeID] = mappingString.replace('@', '').split(':');
|
|
||||||
const store = getComposerStore(storeID);
|
const store = getComposerStore(storeID);
|
||||||
return store;
|
return store;
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user