Bug ? [ Builder ] - Custom Components Refresh when a component is selected

[poirazis]

While in the builder, hovering a component works nicely without causing a refresh, but when a component ( any component ) is selected a refresh happens. This only seems to happen to custom components, maybe a store update ?

Can someone please double check to verify this is happening or is this my own code's fault ?

[linear[bot]]

BUDI-8070 [ Builder ] - Custom Components Refresh when a component is selected

[poirazis]

Hey @melohagan , can you confirm its BB causing the refreshes ?

[ConorWebb96]

Hey @poirazis,

I'm not seeing this behaviour for other custom plugins. I am seeing it on your super table component each its clicked or another component is clicked it refreshes.

[poirazis]

Hey @ConorWebb96 it happens only with non-pimitive property types.

To replicate, create an empty custom component set a propery of type "datasource" do a $: console.log( datasource ) you will see the component will refresh

it wont happen with primitive props we have double checked with Andrew Kingston

[aptkingston]

Just an update on this - the issue is that the error boundary wrapper we wrap all custom components in spreads all props ({...$$props}) which breaks svelte's reactivity for any non-primitive types.

Worth nothing that this isn't really a bug as such, and an additional render/reactivity trigger is not typically a problem, but if you configure custom components to do things like API requests reactively based on prop changes then additional API calls will be made when selecting new components.

This won't have any effect in real apps - it's exclusively while working in the builder.

I'll see if there's a quick fix (will probably involved similar hacks to what we do in our core Component.svelte to alleviate this), but in the meantime I would encourage just ignoring this as a harmless side effect of working inside the preview.

[poirazis]

Hey @aptkingston I have used some local checks in the component to not refetch using lodash.isEqual to deep compare data related props circumvent unceseccasy API calls. Maybe its a way other component devs can take.

[aptkingston]

Just adding this here for reference, but as @poirazis and I discussed offline - I've added the memo and derivedMemo utils into the client SDK for plugin authors to use. These utils help ensure reactivity works as expected. https://github.com/Budibase/budibase/pull/13327 for that PR.