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

feat(core): introduce reactive services loading mechanism

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/HelloEarth/HelloEarth.svelte
View File

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

19
src/lib/core/Composite.svelte
View File

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