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

refactor(Composite): add ICompositeLayout interface & enhance children area assignment

Browse Source
This commit is contained in:
Samuel Andert 2023-07-25 20:33:57 +02:00
parent 75d58eafea
commit a2fe8b136b
3 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/components/Composite.svelte
View File

@ -4,15 +4,28 @@
import services from '$lib/servicesLoader'; import services from '$lib/servicesLoader';
import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts'; import { createComponentStore, getComponentStore } from '$lib/stores/componentStores.ts';
export let componentsData = { interface ICompositeLayout {
layout: '', areas: string;
children: [] columns?: string;
rows?: string;
gap?: string;
tailwindClasses?: string;
}
export let componentsData: {
layout: ICompositeLayout;
children: Array<any>;
}; };
$: layoutStyle = ` $: layoutStyle = `
grid-template-areas: ${componentsData.layout.areas}; grid-template-areas: ${componentsData.layout.areas};
gap: ${componentsData.layout.gap || '0px'}; ${componentsData.layout.gap ? `gap: ${componentsData.layout.gap};` : ''}
grid-template-columns: ${componentsData.layout.columns || '1fr'}; ${
grid-template-rows: ${componentsData.layout.rows || 'auto'}; componentsData.layout.columns
? `grid-template-columns: ${componentsData.layout.columns};`
: ''
}
${componentsData.layout.rows ? `grid-template-rows: ${componentsData.layout.rows};` : ''}
`; `;
function initializeComponentState(child) { function initializeComponentState(child) {
@ -28,7 +41,7 @@
} }
function mapAndSubscribe(component) { function mapAndSubscribe(component) {
console.log('Mapping and subscribing for:', component.id); // Debug line console.log('Mapping and subscribing for:', component.id);
if (component.map) { if (component.map) {
const localStore = getComponentStore(component.id); const localStore = getComponentStore(component.id);
@ -38,7 +51,7 @@
const externalStore = getComponentStore(externalID); const externalStore = getComponentStore(externalID);
if (externalStore) { if (externalStore) {
externalStore.subscribe((externalState) => { externalStore.subscribe((externalState) => {
console.log('External state:', externalState); // Debug line console.log('External state:', externalState);
if (externalState && externalKey in externalState) { if (externalState && externalKey in externalState) {
localStore.update((storeValue) => { localStore.update((storeValue) => {
storeValue = storeValue || {}; storeValue = storeValue || {};
@ -78,6 +91,7 @@
} }
return null; return null;
} }
async function getServiceProps(component) { async function getServiceProps(component) {
const loadedServices = []; const loadedServices = [];
if (component.services) { if (component.services) {
@ -92,14 +106,11 @@
} }
</script> </script>
<div <div class={`grid w-full h-full ${componentsData.layout.tailwindClasses}`} style={layoutStyle}>
class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
style="display: grid; {layoutStyle}"
>
{#each componentsData.children as component (component.id)} {#each componentsData.children as component (component.id)}
{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]} <div class={`w-full h-full overflow-hidden`} style={`grid-area: ${component.slot}`}>
{#if Component} {#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
<div class="w-full h-full overflow-hidden {component.slot}"> {#if Component}
<svelte:component <svelte:component
this={Component} this={Component}
id={component.id} id={component.id}
@ -127,10 +138,10 @@
{#if component.children && component.children.length} {#if component.children && component.children.length}
<Composite componentsData={component} /> <Composite componentsData={component} />
{/if} {/if}
</div> {:else}
{:else} <p>Component {component.componentName} not found.</p>
<p>Component {component.componentName} not found.</p> {/if}
{/if} {/await}
{/await} </div>
{/each} {/each}
</div> </div>

1
src/lib/components/Wallet/Wallet.svelte
View File

@ -14,6 +14,7 @@
}); });
</script> </script>
PkpWallet
{#if pkpWallet} {#if pkpWallet}
<div class="mb-4 text-lg font-medium"> <div class="mb-4 text-lg font-medium">
PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span> PKP Wallet: <span class="text-blue-600">{pkpWallet.address}</span>

33
src/routes/+page.svelte
View File

@ -3,10 +3,13 @@
let componentsData = { let componentsData = {
layout: { layout: {
areas: `"nav", "main", "footer"`, areas: `
gap: '10px', "header header header"
columns: '1fr', "main main aside"
template: 'auto 1fr auto' "footer footer footer";
`,
columns: '1fr 1fr 1fr',
rows: 'auto 1fr auto'
}, },
children: [ children: [
{ {
@ -18,18 +21,18 @@
{ {
id: '2', id: '2',
componentName: 'Messages', componentName: 'Messages',
slot: 'Main' slot: 'main'
},
{
id: '4',
componentName: 'Wallet',
slot: 'aside',
state: {
rpcURL: 'https://rpc.gnosischain.com/',
pkpPubKey:
'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
}
}, },
// {
// id: '2',
// componentName: 'Wallet',
// slot: 'main',
// state: {
// rpcURL: 'https://rpc.gnosischain.com/',
// pkpPubKey:
// '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
// }
// },
{ {
id: '3', id: '3',
componentName: 'Terminal', componentName: 'Terminal',