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

refactoring composer part2

Browse Source
This commit is contained in:
Samuel Andert 2023-08-03 14:35:15 +02:00
parent dcb94e7c58
commit 02d068fef3
7 changed files with 189 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/lib/components/refactor/ComposerCharly.svelte Normal file
View File

@ -0,0 +1,52 @@
<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;
</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}

107
src/lib/components/refactor/ComposerWrap.svelte Normal file
View File

@ -0,0 +1,107 @@
<script>
import Composer from '$lib/core/refactor/Composer.svelte';
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: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
},
layout: {
columns: '1fr 1fr',
rows: '1fr 1fr',
areas: `
"top aside"
"bottom aside"
`
},
children: [
{
id: 'ComposerCharly',
component: 'ComposerCharly',
slot: 'aside',
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
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',
component: 'ComposerBob',
slot: 'top',
store: {
machine: { state: 'NOTREADY' }
},
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
}
},
{
id: 'ComposerAlice',
component: 'ComposerAlice',
slot: 'bottom',
machine: {
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
}
}
]
};
</script>
<Composer {composer} />

2
src/lib/core/refactor/Composer.svelte
View File

@ -2,7 +2,7 @@
import { onDestroy } from 'svelte';
import Composer from './Composer.svelte';
import FallBack from './FallBack.svelte';
import components from '$lib/core/componentLoader';
import components from './componentLoader';
import services from '$lib/core/servicesLoader';
import { dataStore } from '$lib/core/dataLoader';
import { createComposerStore, getComposerStore } from './composerStores';

16
src/lib/core/refactor/ComposerComponent.svelte Normal file
View File

@ -0,0 +1,16 @@
<!-- ComposerComponent.svelte -->
<script>
import { getComposerStore } from './composerStores';
export let Component;
export let composer;
export let loadedServices;
</script>
<svelte:component
this={Component}
id={composer.id}
store={getComposerStore(composer.id)}
machine={composer.machine}
services={loadedServices}
machineService={composer.machineService}
/>

10
src/lib/core/refactor/componentLoader.ts Normal file
View File

@ -0,0 +1,10 @@
import componentNames from 'virtual:components-list';
const components = {};
componentNames.forEach(path => {
const name = path.split('/').pop(); // Extract just the file name from the path
components[name] = () => import( /* @vite-ignore */ `/src/lib/components/${path}.svelte`);
});
export default components;

58
src/routes/composer/+page.svelte
View File

@ -1,59 +1,5 @@
<script>
import Composer from '$lib/core/refactor/Composer.svelte';
let composer = {
id: 'ComposerParent',
layout: {
columns: '1fr 1fr',
areas: `
"left right"
`
},
children: [
{
id: 'ComposerBob',
component: 'ComposerBob',
slot: 'left',
store: {
machine: { state: 'NOTREADY' }
},
machine: {
initial: 'NOTREADY',
states: {
NOTREADY: {
on: { TOGGLE: 'READY' }
},
READY: {
on: { TOGGLE: 'NOTREADY' }
}
}
}
},
{
id: 'ComposerAlice',
component: 'ComposerAlice',
slot: 'right',
machine: {
initial: 'RED',
states: {
GREEN: {
on: { SWITCH: 'YELLOW' }
},
YELLOW: {
on: { SWITCH: 'RED' }
},
RED: {
on: { SWITCH: 'GREEN' }
}
},
on: {
READY: 'GREEN',
NOTREADY: 'RED'
}
}
}
]
};
import ComposerWrap from '$lib/components/refactor/ComposerWrap.svelte';
</script>
<Composer {composer} />
<ComposerWrap />

3
src/routes/helloearth/+page.svelte
View File

@ -11,12 +11,11 @@
},
layout: {
areas: `
"main aside"
"main aside"
"footer footer";
`,
columns: '1fr 1fr',
rows: '1fr 1fr auto'
rows: '1fr auto'
},
children: [
{