small refactoring
This commit is contained in:
parent
e85f0323ca
commit
1a8bb64ff2
@ -17,13 +17,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface IComposer {
|
interface IComposer {
|
||||||
layout?: IComposerLayout;
|
|
||||||
id: string;
|
id: string;
|
||||||
me?: { id: string; do: any; data: any };
|
layout?: IComposerLayout;
|
||||||
slot?: string;
|
|
||||||
component?: string;
|
component?: string;
|
||||||
data?: Record<string, any>;
|
slot?: string;
|
||||||
children?: IComposer[];
|
children?: IComposer[];
|
||||||
|
data?: Record<string, any>;
|
||||||
machine?: any;
|
machine?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -35,11 +34,11 @@
|
|||||||
$: {
|
$: {
|
||||||
layoutStyle = computeLayoutStyle(composer?.layout);
|
layoutStyle = computeLayoutStyle(composer?.layout);
|
||||||
|
|
||||||
initializeComposerState(composer);
|
loadComponentAndInitializeState(composer);
|
||||||
|
|
||||||
if (composer?.children) {
|
if (composer?.children) {
|
||||||
composer.children.forEach((child) => {
|
composer.children.forEach((child) => {
|
||||||
initializeComposerState(child);
|
loadComponentAndInitializeState(child);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,6 +51,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadComponentAndInitializeState(component: IComposer) {
|
||||||
|
if (!component) return;
|
||||||
|
|
||||||
|
if (component.id) {
|
||||||
|
component.store = createComposerStore(component.id, component.store || {});
|
||||||
|
if (component.data?.map) {
|
||||||
|
subscribeAndMapQueries(component.id, component.data.map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (component.children) {
|
||||||
|
component.children.forEach(loadComponentAndInitializeState);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load component and service
|
||||||
|
const componentName = component.component || 'FallBack';
|
||||||
|
component.me = {
|
||||||
|
id: component.id,
|
||||||
|
do: {
|
||||||
|
core: coreServices,
|
||||||
|
machine: component.machineService || null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return await getComponent(componentName);
|
||||||
|
}
|
||||||
|
|
||||||
function initializeAndStartMachine(composer: IComposer) {
|
function initializeAndStartMachine(composer: IComposer) {
|
||||||
if (composer?.machine) {
|
if (composer?.machine) {
|
||||||
const machine = Machine(
|
const machine = Machine(
|
||||||
@ -85,21 +110,6 @@
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function initializeComposerState(child: IComposer) {
|
|
||||||
if (!child) return;
|
|
||||||
|
|
||||||
if (child.id) {
|
|
||||||
child.store = createComposerStore(child.id, child.store || {});
|
|
||||||
if (child.data?.map) {
|
|
||||||
subscribeAndMapQueries(child.id, child.data.map);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (child.children) {
|
|
||||||
child.children.forEach(initializeComposerState);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
unsubscribers.forEach((unsub) => unsub());
|
unsubscribers.forEach((unsub) => unsub());
|
||||||
});
|
});
|
||||||
@ -111,30 +121,17 @@
|
|||||||
}
|
}
|
||||||
return FallBack;
|
return FallBack;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadComponentAndService(component: IComposer) {
|
|
||||||
const componentName = component.component || 'FallBack';
|
|
||||||
component.me = {
|
|
||||||
id: component.id,
|
|
||||||
do: {
|
|
||||||
core: coreServices,
|
|
||||||
machine: component.machineService || null
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return await getComponent(componentName);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={`grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}`}
|
class={`grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}`}
|
||||||
style={layoutStyle}
|
style={layoutStyle}
|
||||||
>
|
>
|
||||||
{#await loadComponentAndService(composer) then Component}
|
{#await loadComponentAndInitializeState(composer) then Component}
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={Component}
|
this={Component}
|
||||||
id={composer.id}
|
id={composer.id}
|
||||||
data={getComposerStore(composer.id)}
|
data={getComposerStore(composer.id)}
|
||||||
machine={composer.machine}
|
|
||||||
me={composer.me}
|
me={composer.me}
|
||||||
/>
|
/>
|
||||||
{/await}
|
{/await}
|
||||||
@ -144,12 +141,11 @@
|
|||||||
class="grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}"
|
class="grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}"
|
||||||
style={`grid-area: ${child.slot}`}
|
style={`grid-area: ${child.slot}`}
|
||||||
>
|
>
|
||||||
{#await loadComponentAndService(child) then ChildComponent}
|
{#await loadComponentAndInitializeState(child) then ChildComponent}
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={ChildComponent}
|
this={ChildComponent}
|
||||||
id={child.id}
|
id={child.id}
|
||||||
data={getComposerStore(child.id)}
|
data={getComposerStore(child.id)}
|
||||||
machine={child.machine}
|
|
||||||
me={child.me}
|
me={child.me}
|
||||||
/>
|
/>
|
||||||
{#if child.children && child.children.length}
|
{#if child.children && child.children.length}
|
||||||
|
Loading…
Reference in New Issue
Block a user