refactoring composer
This commit is contained in:
Samuel Andert
parent
73796c756f
commit
55b701a859
@ -13,8 +13,7 @@
|
||||
|
||||
$: {
|
||||
if ($childStore && $childStore.machine.state) {
|
||||
console.log('learn color machine: ' + JSON.stringify(machineService));
|
||||
machineService.send($childStore.machine.state);
|
||||
me.do.machine.send($childStore.machine.state);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
import Composer from './Composer.svelte';
|
||||
import FallBack from './FallBack.svelte';
|
||||
import components from '$lib/core/componentLoader';
|
||||
import services from '$lib/core/servicesLoader';
|
||||
import { dataStore } from '$lib/core/dataLoader';
|
||||
import { createComposerStore, getComposerStore } from './composerStores';
|
||||
import { coreServices } from './coreServices';
|
||||
import { Machine, interpret } from 'xstate';
|
||||
@ -23,11 +21,8 @@
|
||||
me?: { id: string; do: any };
|
||||
slot?: string;
|
||||
component?: string;
|
||||
services?: string[];
|
||||
map?: Record<string, string>;
|
||||
store?: Record<string, any>;
|
||||
children?: IComposer[];
|
||||
servicesLoaded?: boolean;
|
||||
machine?: any;
|
||||
machineService?: any;
|
||||
}
|
||||
@ -43,15 +38,11 @@
|
||||
$: {
|
||||
layoutStyle = computeLayoutStyle(composer?.layout);
|
||||
|
||||
initializeAndLoadServices(composer);
|
||||
initializeComposerState(composer);
|
||||
mapAndSubscribe(composer);
|
||||
|
||||
if (composer?.children) {
|
||||
composer.children.forEach((child) => {
|
||||
initializeComposerState(child);
|
||||
initializeAndLoadServices(child);
|
||||
mapAndSubscribe(child);
|
||||
});
|
||||
}
|
||||
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) {
|
||||
if (!child) return; // Add this line
|
||||
|
||||
@ -127,63 +98,6 @@
|
||||
|
||||
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(() => {
|
||||
unsubscribers.forEach((unsub) => unsub());
|
||||
});
|
||||
@ -196,17 +110,15 @@
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
@ -215,41 +127,37 @@
|
||||
class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`}
|
||||
style={layoutStyle}
|
||||
>
|
||||
{#if composer?.servicesLoaded}
|
||||
{#await loadComponentAndService(composer) then Component}
|
||||
<svelte:component
|
||||
this={Component}
|
||||
id={composer.id}
|
||||
store={getComposerStore(composer.id)}
|
||||
machine={composer.machine}
|
||||
services={loadedServices}
|
||||
machineService={child.machineService}
|
||||
me={composer.me}
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
{#await loadComponentAndService(composer) then Component}
|
||||
<svelte:component
|
||||
this={Component}
|
||||
id={composer.id}
|
||||
store={getComposerStore(composer.id)}
|
||||
machine={composer.machine}
|
||||
services={loadedServices}
|
||||
machineService={child.machineService}
|
||||
me={composer.me}
|
||||
/>
|
||||
{/await}
|
||||
{#if composer?.children}
|
||||
{#each composer.children as child (child.id)}
|
||||
<div
|
||||
class="grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}"
|
||||
style={`grid-area: ${child.slot}`}
|
||||
>
|
||||
{#if child.servicesLoaded}
|
||||
{#await loadComponentAndService(child) then ChildComponent}
|
||||
<svelte:component
|
||||
this={ChildComponent}
|
||||
id={child.id}
|
||||
store={getComposerStore(child.id)}
|
||||
machine={child.machine}
|
||||
services={loadedServices}
|
||||
machineService={child.machineService}
|
||||
me={child.me}
|
||||
/>
|
||||
{#if child.children && child.children.length}
|
||||
<Composer composer={child} />
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
{#await loadComponentAndService(child) then ChildComponent}
|
||||
<svelte:component
|
||||
this={ChildComponent}
|
||||
id={child.id}
|
||||
store={getComposerStore(child.id)}
|
||||
machine={child.machine}
|
||||
services={loadedServices}
|
||||
machineService={child.machineService}
|
||||
me={child.me}
|
||||
/>
|
||||
{#if child.children && child.children.length}
|
||||
<Composer composer={child} />
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
Loading…
Reference in New Issue
Block a user