feat(core): introduce reactive services loading mechanism

This commit is contained in:
Samuel Andert 2023-07-26 16:36:08 +02:00
parent 979251bd6b
commit a3761140bd
2 changed files with 18 additions and 15 deletions

View File

@ -1,20 +1,12 @@
<script>
import { onMount } from 'svelte';
export let services;
export let store;
let isServicesLoaded = false;
let isStoreLoaded = false;
onMount(async () => {
// Check services loading
if (services.helloEarthAlert) {
// services.helloEarthAlert.alertMe();
isServicesLoaded = true;
} else {
console.error('helloEarthAlert not loaded');
}
});
$: if (services && services.helloEarthAlert) {
// services.helloEarthAlert.alertMe();
}
$: if ($store) isStoreLoaded = true;
</script>

View File

@ -27,6 +27,17 @@
export let composite: IComposite;
let loadedServices: Record<string, any> = {};
// Reactive loading mechanism for services based on composite changes
$: if (composite?.services) {
composite.services.forEach(async (serviceName) => {
if (!loadedServices[serviceName]) {
loadedServices[serviceName] = await loadService(serviceName);
}
});
}
$: layoutStyle = composite?.layout
? `
grid-template-areas: ${composite.layout.areas};
@ -141,13 +152,13 @@
<div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
{#if composite && 'component' in composite}
{#await loadComponentAndService(composite) then [Component, serviceProps]}
{#await loadComponentAndService(composite) then [Component]}
{#if Component}
<svelte:component
this={Component}
id={composite.id}
store={getCompositeStore(composite.id)}
services={serviceProps}
services={loadedServices}
/>
{:else if composite.component}
<p>Component {composite.component} not found.</p>
@ -158,13 +169,13 @@
{#if composite?.children}
{#each composite.children as child (child.id)}
<div class="w-full h-full overflow-hidden" style={`grid-area: ${child.slot}`}>
{#await loadComponentAndService(child) then [ChildComponent, childServiceProps]}
{#await loadComponentAndService(child) then [ChildComponent]}
{#if ChildComponent}
<svelte:component
this={ChildComponent}
id={child.id}
store={getCompositeStore(child.id)}
services={childServiceProps}
services={loadedServices}
/>
{#if child.children && child.children.length}
<Composite composite={child} />