Is this the idiomatic Svelte 5 way of create a condition object for this list?

[frederikhors]

In this reproduction I'm trying to understand if it's possible and if this is the idiomatic way to create a condition filter for a list merging variables from parents too...

But it doesn't work.

As you can see, when you open the project the condition is empty {}.

Instead I need it to be:

{
  "or": [
    {
      "withPlayer": {
        "name": "testMe"
      }
    }
  ]
}

Is there a way?

UPDATE:

I can add facade.searchText = searchText; to the end of the script, but in this example I only have searchText but in real code I have many of them and is not easy to remember to add all of them at the end of the script when I add or remove props.

Any idea?

[7nik]

The code adds items to condition. ' or only when facade.searchText is set. It doesn't happen on mounting, only when you change the text in the input field.
Simplest - add facade.searchText = searchText; at the end of the script.

[7nik]

It's any object created with the $state or $derived rune. Or a proxy object:

let params = {
  get searchText() { return searchText },
};

In general, you need to bypass reactivity in the second approach somehow.

[frederikhors]

Ok. Now I'm starting to understand.

The last issue I think: in this reproduction I don't understand why it doesn't work if I change the text.

I chose this way because I can't use the facade as condition directly.

[7nik]

It's because the entire condition object is re-created at each change, but you copy only the first instance.
If you want to be able to pass the condition object from and to the parent, I'd create the facade in the parent and pass it down.

[frederikhors]

Thanks.

I'd create the facade in the parent and pass it down.

Do you mean in App.svelte? What do you mean? The thing is I have many child (and many parents).

Is there a way to make this last example work without using $effect...?

[7nik]

You need to use $effect because you need to sync the states (parent's and child's). You can avoid it only by using the same state: either re-use parent's or re-use child's.

Technically, you can not sync and take condition on demand.