MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify client app component re-render keying

This commit is contained in:
Andrew Kingston 2021-09-20 15:41:20 +01:00
parent 392a1f05ee
commit cae514ca06
1 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/client/src/components/Component.svelte
View File

@ -65,6 +65,7 @@
$: inSelectedPath = $builderStore.selectedComponentPath?.includes(id) $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
$: evaluateConditions(enrichedSettings?._conditions) $: evaluateConditions(enrichedSettings?._conditions)
$: componentSettings = { ...enrichedSettings, ...conditionalSettings } $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
$: renderKey = `${propsHash}-${emptyState}`
// Update component context // Update component context
$: componentStore.set({ $: componentStore.set({
@ -176,32 +177,30 @@
$: droppable = interactive && !isLayout && !isScreen $: droppable = interactive && !isLayout && !isScreen
</script> </script>
{#key propsHash} {#key renderKey}
{#key empty} {#if constructor && componentSettings && (visible || inSelectedPath)}
{#if constructor && componentSettings && (visible || inSelectedPath)} <!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- The ID is used as a class because getElementsByClassName is O(1) --> <!-- and the performance matters for the selection indicators -->
<!-- and the performance matters for the selection indicators --> <div
<div class={`component ${id}`}
class={`component ${id}`} class:draggable
class:draggable class:droppable
class:droppable class:empty
class:empty class:interactive
class:interactive data-id={id}
data-id={id} data-name={name}
data-name={name} >
> <svelte:component this={constructor} {...componentSettings}>
<svelte:component this={constructor} {...componentSettings}> {#if children.length}
{#if children.length} {#each children as child (child._id)}
{#each children as child (child._id)} <svelte:self instance={child} />
<svelte:self instance={child} /> {/each}
{/each} {:else if emptyState}
{:else if emptyState} <Placeholder />
<Placeholder /> {/if}
{/if} </svelte:component>
</svelte:component> </div>
</div> {/if}
{/if}
{/key}
{/key} {/key}
<style> <style>