Svelte 5: Is there a way to avoid this $effect using $derived instead?

[frederikhors]

I have the below code:

interface Props {
  condition?: Condition;
  customerId?: string;
  kind?: string;
  status?: string;
}

let { condition = {}, customerId, kind, status }: Props = $props();

let dateRange = $state({ from: undefined, to: undefined });

let teamState: TeamState | undefined = $state();

$effect.pre(() => {
  condition.kind = kind;
  condition.status = status;
  condition.customerId = customerId;
  condition.dateGte = dateRange.from;
  condition.dateLte = dateRange.to;
  condition.teamState = teamState;
});

let input = $derived({
  condition,
  // others...
});

// use input here

As you can see I'm forced to use $effect.pre() because I cannot use:

let condition = $derived(() => {
    condition.kind = kind;
    // and others...
});

nor

condition = $derived(() => {
    condition.kind = kind;
    // and others...
});

Since $effect is "denigrated" in docs I would like to avoid it.

Am I right?

[7nik]

1. Why cannot you pass in customerId, kind, and status as props of condition?
2. You can do

let dataRange = {
  get from() { return condition.dateGte },
  set from(v) { condition.dateGre = v },
  get to() { return condition.dateLte },
  set to(v) { condition.dateLre = v },
};

[frederikhors]

1. Why cannot you pass in customerId, kind, and status as props of condition?

What do yo mean?

[7nik]

Why do you need to pass prop kind and then assign it to condition.kind, which is also a prop, instead of passing condition={ { kind: ... } }?

[frederikhors]

@7nik I created a small reproduction for this in #12107, can you spot the issue?