How to better handle this case?

[frederikhors]

REPL: https://svelte.dev/repl/3a17fd5df4fc420c89361e70875f6eab?version=3.55.1

I'm using the code below to handle the case when I pass an existing value to Select.

Do you think is there a better way to handle this?

• app.svelte:

<script>
  import Select from "./Select.svelte";

  let team = {id: "1", name: "The selectors", player: {id: "5", firstname: "Rob"}};

  $: console.log("team re-assigned:", team);
</script>

team: {JSON.stringify(team)}
<br><br>

<Select
  bind:value={team.player}
>
</Select>

• Select.svelte:

<script>
  import Select from 'svelte-select@5.1.3';

  export let value;

  let items = [
    {id: "1", firstname: "john"},
    {id: "2", firstname: "sill"},
    {id: "3", firstname: "sick"}
  ];

  // FROM HERE This is repetitive and very inconvenient
  let initial_value;

  if (value) {
    initial_value = { label: value.firstname, value };
  }
  // TO HERE This is repetitive and very inconvenient
</script>

value: {JSON.stringify(value)}
<br><br>

<Select
  items={items.map(item => ({label: item.firstname, value: item}))}
  value={initial_value}
  bind:justValue={value}
>
</Select>

[rob-balfre]

More an overuse of bind really. Less about svelte-select more about just learning how to deal with data flow esp in Svelte.

https://svelte.dev/repl/c19e18e27b0d41a19111122cecc25b73?version=3.55.1

[frederikhors]

@rob-balfre I know I can use on:change but really?

So you are suggesting to switch from:

<Select
    bind:value={team.player}
>
</Select>

to:

<Select
  on:change={({ detail }) => (team.player = detail)}
  on:clear={() => (team.player = undefined)}
>
</Select>

This for 30+ components on the page and the development speed slow down from 10 to 5.

Using bind would be a huge plus.

Isn't it possible to just handle better the value in svelte-select code?

[rob-balfre]

@frederikhors just move the on: events into your wrapper component and expose one simple bind prop for the parent component...

https://svelte.dev/repl/ea34fc36ebda43aeaa1be408a87a596a?version=3.55.1

[frederikhors]

Yeah, I know this too.

But sometimes I need on:change on the parent component too. And how to dispatch that event again? createEventDispatcher? Really?

I think this is avoidable with a better value handling inside svelte-select, why not?

[rob-balfre]

@frederikhors by 'better' you mean what exactly?

[frederikhors]

@frederikhors by 'better' you mean what exactly?

By detecting that the value is the same and there is no need to change it.

For example: get your own example: https://svelte.dev/repl/ea34fc36ebda43aeaa1be408a87a596a?version=3.55.1.

Do you see the team object is assigned two times?

Why?

[rob-balfre]

You're misunderstanding how bind and svelte works.

Remove svelte-select completely... still fires twice.

https://svelte.dev/repl/4afc07bde1c74578b0b155d5cf93c1a2?version=3.55.1