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

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

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import Composer from '$lib/core/refactor/Composer.svelte'; import Composer from '$lib/core/refactor/Composer.svelte';
import { assign } from 'xstate'; import { assign } from 'xstate';
import { coreServices } from '$lib/core/refactor/coreServices';
import { queryMessages } from '$lib/data/queryMessages'; import { queryMessages } from '$lib/data/queryMessages';
import { get } from 'svelte/store';
let composer = { let composer = {
id: 'ComposerParent', id: 'ComposerParent',
@ -39,12 +39,12 @@
}, },
states: { states: {
LOADING: { LOADING: {
entry: assign({
messages: (context, event) => get(queryMessages)
}),
on: { on: {
TOGGLE: { TOGGLE: {
target: 'READY', target: 'READY'
actions: assign({
hello: (context, event) => 'this was updated from loading'
})
} }
} }
}, },

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

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