feat(Composite): Enhance root and child rendering with error differentiation

- Adjusted Composite to conditionally check for both direct root and child rendering.
- Differentiated error states: omitting an error when `component` prop is absent but showing an error when it's undefined.
- Fixed rendering of @app in the messages stream.
This commit is contained in:
Samuel Andert 2023-07-26 09:40:28 +02:00
parent 0161f4ba4f
commit e3f2dbacc8
4 changed files with 29 additions and 13 deletions

View File

@ -40,7 +40,7 @@
<!-- Render Composite Component -->
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite componentsData={message.composite} />
<Composite composite={message.composite} />
</div>
{/if}
{/each}

View File

@ -13,11 +13,8 @@
const match = text.match(appCommandPattern);
if (match && match[1]) {
message.composite = {
children: [
{
component: match[1] // Matched component name
}
]
id: match[1],
component: match[1]
};
}
console.log(message);

View File

@ -112,6 +112,10 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
}
return loadedServices;
}
// Additional utility function to get component and service props
async function loadComponentAndService(component: IComposite) {
return await Promise.all([getComponent(component.component), getServiceProps(component)]);
}
</script>
<div
@ -120,21 +124,36 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
: 'grid w-full h-full'}
style={layoutStyle}
>
{#if composite && composite.children}
{#if composite && 'component' in composite}
{#await loadComponentAndService(composite) then [Component, serviceProps]}
{#if Component}
<svelte:component
this={Component}
id={composite.id}
{...composite.store}
services={serviceProps}
/>
{:else if composite.component}
<p>Component {composite.component} not found.</p>
{/if}
{/await}
{/if}
{#if composite?.children}
{#each composite.children as child (child.id)}
<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${child.slot}`}>
{#await Promise.all( [getComponent(child.component), getServiceProps(child)] ) then [Component, serviceProps]}
{#if Component}
{#await loadComponentAndService(child) then [ChildComponent, childServiceProps]}
{#if ChildComponent}
<svelte:component
this={Component}
this={ChildComponent}
id={child.id}
{...child.store}
services={serviceProps}
services={childServiceProps}
/>
{#if child.children && child.children.length}
<Composite composite={child} />
{/if}
{:else}
{:else if child.component}
<p>Component {child.component} not found.</p>
{/if}
{/await}

View File

@ -6,7 +6,7 @@
let composite = {
id: 'composite',
layout: {
areas: `
areas: `
"top top top"
"main main main"
"footer footer footer";