samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added loading and passing of svelte state stores to the machine context

Browse Source
This commit is contained in:
Samuel Andert 2023-08-04 14:11:55 +02:00
parent 2e4e4bdf59
commit 481cc8cf68
3 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/refactor/ComposerCharly.svelte
View File

@ -1,23 +1,17 @@
<script>
import { onMount } from 'svelte';
import { coreServices } from '$lib/core/refactor/coreServices';
export let me;
export let data;
onMount(() => {
// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
});
function toggle() {
me.do.machine.send('TOGGLE');
}
</script>
<div class="border-2 border-green-500">
<div class="w-full h-full border-2 border-green-500">
<p>My ID is: {me.id}</p>
my state is {$data.state}
<h1 class="h1">I am charly</h1>
my data.context prop: {JSON.stringify($data.context)}
my data.context.hello prop: {JSON.stringify($data.context.hello)}
<br />
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
@ -25,8 +19,11 @@
>
Toggle
</button>
<!-- {#each $data.context.messages as message (message.timestamp)}
<p>{message.text}</p>
{/each} -->
<div class="p-8 overflow-scroll h-1/2">
{#if $data.context.messages}
{#each $data.context.messages as message}
<p>{message.text}</p>
{/each}
{/if}
</div>
</div>

10
src/lib/components/refactor/ComposerWrap.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
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';
import { get } from 'svelte/store';
let composer = {
id: 'ComposerParent',
@ -39,12 +39,12 @@
},
states: {
LOADING: {
entry: assign({
messages: (context, event) => get(queryMessages)
}),
on: {
TOGGLE: {
target: 'READY',
actions: assign({
hello: (context, event) => 'this was updated from loading'
})
target: 'READY'
}
}
},

16
src/lib/core/refactor/coreServices.ts
View File

@ -2,14 +2,14 @@
import { getComposerStore } from './composerStores';
export const coreServices = {
mutateData: (storeID: string, value: any) => {
const store = getComposerStore(storeID);
console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
store.update(storeData => {
storeData.context = value;
return storeData;
});
},
// mutateData: (storeID: string, value: any) => {
// const store = getComposerStore(storeID);
// console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
// store.update(storeData => {
// storeData.context = value;
// return storeData;
// });
// },
subscribeData: (storeID: string) => {
const store = getComposerStore(storeID);
return store;