Svelte 5: how to correctly change the target.filters here?

[frederikhors]

I'm trying to create a little helper but I don't understand how to set target.filters in the below code to be able to see it in body and to execute $effect():

Reproduction code

<script lang="ts">
    function newParamsPersister(_initialValues: Record<string, any | undefined>) {
        let target = $state(_initialValues);

        $inspect('target:', JSON.stringify(target));

        function changeItFromInside() {
            const url = new URL(window.location.toString());

            const paramFilters = url.searchParams.get('filters');

            target.filters = JSON.parse(paramFilters);
        }

        $effect(() => {
            console.log("effect()");
        });

        return {
            target,
            changeItFromInside
        };
    }

    const filtersParam = newParamsPersister({ filters: {} });

    let { filters = filtersParam.target.filters	} = $props();
</script>

condition: <pre>{JSON.stringify(filters)}</pre>

<button type="button" onclick={filtersParam.changeItFromInside}>change it from inside</button>

[7nik]

After you call the function, filters still references the old value.
I'm not sure what you want to get here to propose a solution other than

$effect(() => {
    filteters = filtersParam.target.filters;
});

which doesn't seem to be good.

[frederikhors]

I need to create a function which gets an object and monitor that object reactively such as I can detect external change to that object or change that object from inside, example:

• utils.svelte.js:

export const objectChangeLogger = (object) => {
  $effect(() => {
    // here I should detect any change to object and it's entries
    console.log("changed", JSON.stringify(object()));
  });

  setTimeout(() => {
    console.log("I'm the setTimeout and I'll update count now:");

    // here I should change object too
    // This doesn't work!
    object().count = 1000;
  }, 1000);
};

Is this that difficult?

Reproduction (doesn't work)

[7nik]

The problem is passing data back - object() creates a new object at each call, and object().count = 1000 just changes the copy of count. To propagate the changes back, in this case, you need to pass an object with a custom getter/setter:

  objectChangeLogger(()=>{
		return {
			get count() { return count },
			set count(v) { count = v },
			something
		}
	});

Here, you can even remove the object getter (() => { return {...} }) because now object.count will always refer to a fresh value of count, and something is an object (unless you will write there another instance - then you need to use getter/setter for it too).

[frederikhors]

Yeah, I know that, thanks.

But I'm trying to create an helper to reduce repetitive code from sveltejs/kit#12460. And if I have to pass get & set manually the code bloats up instead.

What do you think?

[Prinzhorn]

From the little Svelte 5 code I've seen here it appears using an object with a value prop is a common approach?

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA2VT0YrbMBD8FSEOIkNw3l3H0JeDK6U97mhf6lJ08jonqkhGWl8Irv-9K8txzjn8YEvamZ0ZrwbeagOBF78GbuUReME_dx3fcjx3cRHewCDQOrjeq7hTBuV1h8xIe9jXHEPNq9rW2PZWoXaWWTg9Si-P4RF80AHBiz_aatTS_JSmh1CwJ1DON2VAr-1hy6Q9s3-stw202kJTZWyIjDUaQIbSH-i1Z3cBJcINV_aJKqfaO21DBwrFJiGKzZZ9ef7-LU9ddHsW6SC7YhbN6pXcwAPee3d8sEE3IBYRNSpnA7LeG1JB7tiPp6_ipG3jTrlxSkaGHN3z1Eck-gm3xncxlHtNcfpARESXB5Bevaa0cpImNm0631w11phk5_NR_haNE8FkjkgDiPfUl_bjEgy0bcyFHO2rtSlngBwcRM3nmqzmC_4qwQP23l6hSdB2YfoQ3swwMc06Ugazh8lxCvN2VIZLTcEGNlmlj5HRc9ETh2KpIpL3nPk6K-oeB6fzrgsi4stdmt44sZYkNTr-vIKVnYdquBmXVeDZWO5iUQSWLz0iTU28I3QF0qrmzFlltPq7H1aSPsYzVmmPaUqEdpmetstdYqrouh1do1sNDS_Q9zD-Hv8DS_ZcHqkDAAA=

Or you need to update filters instead of setting it to a new object:

-target.filters = JSON.parse(paramFilters);
+Object.assign(target.filters, JSON.parse(paramFilters));

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA2VT0WrcMBD8FSECZ8Phe3d9hr4EUkoTEtqXuhRFXjub-CQjrXscrv-9K8v15S5PRtqd2ZnxapQNduBl_nOURh1A5vJz38utpFMfDv4PdAR89nZwOtwUXjvsSXTKtPtKkq9kWZmKmsFoQmuEgeODcurgH8B59AQu-Y0GCVX3Q3UD-Fw8grauLjw5NO1WKHMSf8VgamjQQF2mYgyMFXVAgpRr-bMXN54UwRVX-ok7594bNL4HTckmIvLNVnx5uv-WxSnYnJJYSM-YVbN-YTdwR7fOHu6MxxqSVURF2hpPYnAdq2B34vvj1-SIprbHrLNaBYaM7NM8J4n0M-4S34dQbpHjdJ6JmC7zoJx-iWllLC3ZNLG-OWus6P75lX1lyntszWIiWxoXj8ztIXk_YZUxrQFB04R82Nm-vDRnO2AnbVLJpSet5Io_S3FAgzNnaJSyXZk-hLgwzEyLjpjFon52HkO9Xpnxf08uxkmsIsJGrCVGvifKLqPhkWFremd7nwR8sYurG9bVsI4aw5_LRdE7KMerXVlI0qnYhXKAFM8DES9LeBq8-fFUSWGN7lC_7ccLMR_TmMp4J5AD4FuB83Wxi0wlv7KDrbFBqGVOboDp1_QPzCRFB6ADAAA=

Edit: the second approach has the benefit of not triggering updates when nothing changes, because assigning the same value to a property will not trigger reactivity. Whereas reassigning a new object to value will trigger the effect.

Edit2: Well I guess you also need to clear the old keys before doing Object.assign, but you get the idea

[frederikhors]

I need to create a function which gets an object and monitor that object reactively such as I can detect external change to that object or change that object from inside, example:

• utils.svelte.js:

export const objectChangeLogger = (object) => {
  $effect(() => {
    // here I should detect any change to object and it's entries
    console.log("changed", JSON.stringify(object()));
  });

  setTimeout(() => {
    console.log("I'm the setTimeout and I'll update count now:");

    // here I should change object too
    // This doesn't work!
    object().count = 1000;
  }, 1000);
};

Is this that difficult?

Reproduction (doesn't work)