CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 21:10:43 +12:00
Code Issues Projects Releases Wiki Activity

Simplify client app component re-render keying

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