Any way to force reactivity like in Svelte 4?

[raythurnvoid]

I have something like this

const domMatrix = $state(new DOMMatrix('translate3d(100px, 200px, 0)'));

Is there any way to force Svelte to trigger reactivity in the places where domMatrix is being used? (i don't care about nested reactivity or checking equality of the old/new values).

Imagine this code in Svelte 4

<script>
    let matrix = new DOMMatrix('translate3d(100px, 200px, 0)');

    $: resultingTranslate3d = `translate3d(${matrix.m41}px, ${matrix.m42}px, ${matrix.m43}px)`;

    function multiplyMatrices() {
        matrix.multiplySelf(new DOMMatrix('translate3d(10cm, 20cm, 0)'));
        matrix = matrix // force reactivity
    }
</script>

<div>
    <button on:click={multiplyMatrices}>Multiply Matrices</button>

    <div>
        Result: {resultingTranslate3d}
    </div>
</div>

I tried to use $state.raw and $state but it seems not possible to force svelte to trigger the reactivity unless the instance changes

<script>
    let matrix = $state.raw(new DOMMatrix('translate3d(100px, 200px, 0)'));

    let resultingTranslate3d = $derived(`translate3d(${matrix.m41}px, ${matrix.m42}px, ${matrix.m43}px)`);

    function multiplyMatrices() {
        matrix.multiplySelf(new DOMMatrix('translate3d(10cm, 20cm, 0)'));
        matrix = matrix // force reactivity not working
    }
</script>

<div>
    <button on:click={multiplyMatrices}>Multiply Matrices</button>

    <div>
        Result: {resultingTranslate3d}
    </div>
</div>

[brunnerh]

You should be able to wrap it in an object to cause updates.

let matrix = $state.raw({ value: new DOMMatrix(...) });
// ...
function multiplyMatrices() {
  matrix.value.multiplySelf(/* ... */);
  matrix = { ...matrix };
}

Related issue:

• Proposal: a way to make non-POJOs reactive #10560

[raythurnvoid]

Thanks for pointing out that issue!