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

refactoring composer

Browse Source
This commit is contained in:
Samuel Andert 2023-08-03 15:55:44 +02:00
parent 73796c756f
commit 55b701a859
3 changed files with 33 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/components/refactor/ComposerAlice.svelte
View File

@ -13,8 +13,7 @@
$: { $: {
if ($childStore && $childStore.machine.state) { if ($childStore && $childStore.machine.state) {
console.log('learn color machine: ' + JSON.stringify(machineService)); me.do.machine.send($childStore.machine.state);
machineService.send($childStore.machine.state);
} }
} }
</script> </script>

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

@ -3,8 +3,6 @@
import Composer from './Composer.svelte'; import Composer from './Composer.svelte';
import FallBack from './FallBack.svelte'; import FallBack from './FallBack.svelte';
import components from '$lib/core/componentLoader'; import components from '$lib/core/componentLoader';
import services from '$lib/core/servicesLoader';
import { dataStore } from '$lib/core/dataLoader';
import { createComposerStore, getComposerStore } from './composerStores'; import { createComposerStore, getComposerStore } from './composerStores';
import { coreServices } from './coreServices'; import { coreServices } from './coreServices';
import { Machine, interpret } from 'xstate'; import { Machine, interpret } from 'xstate';
@ -23,11 +21,8 @@
me?: { id: string; do: any }; me?: { id: string; do: any };
slot?: string; slot?: string;
component?: string; component?: string;
services?: string[];
map?: Record<string, string>;
store?: Record<string, any>; store?: Record<string, any>;
children?: IComposer[]; children?: IComposer[];
servicesLoaded?: boolean;
machine?: any; machine?: any;
machineService?: any; machineService?: any;
} }
@ -43,15 +38,11 @@
$: { $: {
layoutStyle = computeLayoutStyle(composer?.layout); layoutStyle = computeLayoutStyle(composer?.layout);
initializeAndLoadServices(composer);
initializeComposerState(composer); initializeComposerState(composer);
mapAndSubscribe(composer);
if (composer?.children) { if (composer?.children) {
composer.children.forEach((child) => { composer.children.forEach((child) => {
initializeComposerState(child); initializeComposerState(child);
initializeAndLoadServices(child);
mapAndSubscribe(child);
}); });
} }
if (composer?.machine) { if (composer?.machine) {
@ -93,26 +84,6 @@
`; `;
} }
function initializeAndLoadServices(component: IComposer) {
if (!component) return;
if (component.services) {
let servicePromises = component.services.map((serviceName) =>
loadedServices[serviceName]
? Promise.resolve(loadedServices[serviceName])
: loadService(serviceName)
);
Promise.all(servicePromises).then((loaded) => {
loaded.forEach((service, index) => {
loadedServices[component.services[index]] = service;
});
component.servicesLoaded = true;
});
} else {
component.servicesLoaded = true;
}
}
function initializeComposerState(child: IComposer) { function initializeComposerState(child: IComposer) {
if (!child) return; // Add this line if (!child) return; // Add this line
@ -127,63 +98,6 @@
let unsubscribers = []; let unsubscribers = [];
function mapAndSubscribe(component: IComposer) {
if (!component) return;
if (component.map) {
const localStore = getComposerStore(component.id);
for (const [localKey, mapping] of Object.entries(component.map)) {
const isDataMapping = mapping.startsWith('@data:');
const isStoreMapping = mapping.startsWith('@');
if (isDataMapping) {
const externalKey = mapping.replace('@data:', '').trim();
const unsubscribe = dataStore.subscribe((store) => {
if (externalKey in store) {
if (store[externalKey] && typeof store[externalKey].subscribe === 'function') {
let innerUnsub = store[externalKey].subscribe((value) => {
localStore.update((storeValue) => ({ ...storeValue, [localKey]: value }));
});
unsubscribers.push(innerUnsub);
} else {
localStore.update((storeValue) => ({
...storeValue,
[localKey]: store[externalKey]
}));
}
}
});
unsubscribers.push(unsubscribe);
} else if (isStoreMapping) {
const [externalID, externalKey] = mapping
.replace('@', '')
.split(':')
.map((item) => item.trim());
const externalStore = getComposerStore(externalID);
if (externalStore) {
const unsubscribe = externalStore.subscribe((externalState) => {
if (externalState && externalKey in externalState) {
localStore.update((storeValue) => ({
...storeValue,
[localKey]: externalState[externalKey]
}));
}
});
unsubscribers.push(unsubscribe);
}
}
}
}
if (component.children) {
component.children.forEach(mapAndSubscribe);
}
}
onDestroy(() => { onDestroy(() => {
unsubscribers.forEach((unsub) => unsub()); unsubscribers.forEach((unsub) => unsub());
}); });
@ -196,17 +110,15 @@
return FallBack; return FallBack;
} }
async function loadService(serviceName: string) {
if (services[serviceName]) {
const module = await services[serviceName]();
return module.default || module;
}
return null;
}
async function loadComponentAndService(component: IComposer) { async function loadComponentAndService(component: IComposer) {
const componentName = component.component || 'FallBack'; const componentName = component.component || 'FallBack';
component.me = { id: component.id, do: loadedServices.core }; component.me = {
id: component.id,
do: {
...loadedServices.core,
machine: component.machineService || null
}
};
return await getComponent(componentName); return await getComponent(componentName);
} }
</script> </script>
@ -215,41 +127,37 @@
class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`} class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`}
style={layoutStyle} style={layoutStyle}
> >
{#if composer?.servicesLoaded} {#await loadComponentAndService(composer) then Component}
{#await loadComponentAndService(composer) then Component} <svelte:component
<svelte:component this={Component}
this={Component} id={composer.id}
id={composer.id} store={getComposerStore(composer.id)}
store={getComposerStore(composer.id)} machine={composer.machine}
machine={composer.machine} services={loadedServices}
services={loadedServices} machineService={child.machineService}
machineService={child.machineService} me={composer.me}
me={composer.me} />
/> {/await}
{/await}
{/if}
{#if composer?.children} {#if composer?.children}
{#each composer.children as child (child.id)} {#each composer.children as child (child.id)}
<div <div
class="grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}" class="grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}"
style={`grid-area: ${child.slot}`} style={`grid-area: ${child.slot}`}
> >
{#if child.servicesLoaded} {#await loadComponentAndService(child) then ChildComponent}
{#await loadComponentAndService(child) then ChildComponent} <svelte:component
<svelte:component this={ChildComponent}
this={ChildComponent} id={child.id}
id={child.id} store={getComposerStore(child.id)}
store={getComposerStore(child.id)} machine={child.machine}
machine={child.machine} services={loadedServices}
services={loadedServices} machineService={child.machineService}
machineService={child.machineService} me={child.me}
me={child.me} />
/> {#if child.children && child.children.length}
{#if child.children && child.children.length} <Composer composer={child} />
<Composer composer={child} /> {/if}
{/if} {/await}
{/await}
{/if}
</div> </div>
{/each} {/each}
{/if} {/if}

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

@ -1,16 +0,0 @@
<!-- 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}
/>