From 0e6a9565116cbe2be896c0e0f739850ca186d90a Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Mon, 24 Jul 2023 16:41:00 +0200 Subject: [PATCH] Optimize component state mapping and reduce unnecessary updates --- src/lib/components/Composite.svelte | 18 ++++++------------ src/routes/+page.svelte | 17 ++--------------- 2 files changed, 8 insertions(+), 27 deletions(-) diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte index 2e6a442..b2a6f03 100644 --- a/src/lib/components/Composite.svelte +++ b/src/lib/components/Composite.svelte @@ -27,11 +27,6 @@ if (component.map) { const localStore = getComponentStore(component.id); - // Use the subscribe method to log and work with the store's value - localStore.subscribe((localStoreValue) => { - console.log('Local store before mapping:', localStoreValue); - }); - for (const [localKey, external] of Object.entries(component.map)) { const [externalID, externalKey] = external.split('.').map((item) => item.trim()); const externalStore = getComponentStore(externalID); @@ -41,18 +36,17 @@ if (externalState && externalKey in externalState) { localStore.update((storeValue) => { storeValue = storeValue || {}; - storeValue[localKey] = externalState[externalKey]; - return storeValue; + if (storeValue[localKey] !== externalState[externalKey]) { + // Only update if there's a change + storeValue[localKey] = externalState[externalKey]; + return storeValue; + } + return storeValue; // Return existing state if no change }); } }); } } - - // Use the subscribe method again if you want to log after mapping - localStore.subscribe((localStoreValue) => { - console.log('Local store after mapping:', localStoreValue); - }); } if (component.children) { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7ccb60f..51bef6e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,14 +5,13 @@ layout: ` grid-template-areas: "login", - "main" - "footer"; - grid-template-rows: 1fr 1fr auto; + grid-template-rows: 1fr; `, children: [ { id: 'login1', componentName: 'Login', + slot: 'Login', children: [ { id: 'wallet1', @@ -31,18 +30,6 @@ ] } ] - }, - { - id: 2, - componentName: 'Messages', - props: {}, - slot: 'main' - }, - { - id: 3, - componentName: 'Terminal', - props: {}, - slot: 'footer' } ] };