minor fix

This commit is contained in:
Samuel Andert 2023-07-26 11:30:05 +02:00
parent 5c2f7afa5f
commit 14aad071f4
2 changed files with 21 additions and 24 deletions

View File

@ -1,6 +1,5 @@
<script>
import { onMount } from 'svelte';
export let services;
export let store;
@ -13,6 +12,10 @@
});
</script>
{#if $store && $store.pkpWallet.address}
<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store.pkpWallet.address)}</div>
<!-- Only render the div when $store.pkpWallet is defined -->
{#if $store}
<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
{:else}
<!-- You can display a loader or placeholder content here -->
<div>Loading...</div>
{/if}

View File

@ -27,13 +27,20 @@
$: layoutStyle = composite?.layout
? `
grid-template-areas: ${composite.layout.areas};
${composite.layout.gap ? `gap: ${composite.layout.gap};` : ''}
${composite.layout.columns ? `grid-template-columns: ${composite.layout.columns};` : ''}
${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
`
grid-template-areas: ${composite.layout.areas};
${composite.layout.gap ? `gap: ${composite.layout.gap};` : ''}
${composite.layout.columns ? `grid-template-columns: ${composite.layout.columns};` : ''}
${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
`
: '';
$: if (composite?.children) {
composite.children.forEach((child) => {
initializeCompositeState(child);
mapAndSubscribe(child);
});
}
function initializeCompositeState(child: IComposite) {
if (child.id) {
child.store = createCompositeStore(child.id, child.store || {});
@ -44,10 +51,6 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
}
}
$: if (composite && composite.children) {
composite.children.forEach(initializeCompositeState);
}
function mapAndSubscribe(component: IComposite) {
console.log('Mapping and subscribing for:', component.id);
@ -80,10 +83,6 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
}
}
$: if (composite && composite.children) {
composite.children.forEach(mapAndSubscribe);
}
async function getComponent(componentName: string) {
if (components[componentName]) {
const module = await components[componentName]();
@ -112,18 +111,13 @@ ${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
class={composite?.layout
? `grid w-full h-full ${composite.layout.tailwindClasses}`
: 'grid w-full h-full'}
style={layoutStyle}
>
<div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
{#if composite && 'component' in composite}
{#await loadComponentAndService(composite) then [Component, serviceProps]}
{#if Component}
@ -141,7 +135,7 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
{#if composite?.children}
{#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]}
{#if ChildComponent}
<svelte:component