View is not updated after change Array inside Object

[NikolayMakhonin]

(version: 3.0.0-beta.20)

This is not update the view:

obj.arr = obj.arr.sort();
obj.arr[0]++
obj.arr[0] += 1
obj.arr[0] = 2
obj.arr2[0][0]++
obj.arr2[0][0] = 3

See repl

How can I update the view manually?

[Panya]

I think this is related to #2243.

[Conduitry]

If there's an actual assignment, this should work. It looks like the compiler is inserting the correct calls to $$invalidate. I'm not sure what's going on here but I do think there is a bug.

[Panya]

Yep, the $$invalidate calls are correct. But the template is not updated because of these generated conditions:

if ((changed.obj) && t15_value !== (t15_value = ctx.obj.arr2)) {
  set_data(t15, t15_value);
}

From the code:

svelte/src/compile/render-dom/wrappers/shared/Tag.ts

Lines 35 to 39 in d637211

	const update_cached_value = `${value} !== (${value} = ${snippet})`;
	const condition =this.node.should_cache
	? `(${changed_check}) && ${update_cached_value}`
	: changed_check;

The t15_value !== (t15_value = ctx.obj.arr2) part is false for object values (arrays and objects).
Not sure where the right place to fix it. We could fix it by adding a check to the generated code or we can change the node.should_cache property for objects and arrays here:

svelte/src/compile/nodes/shared/Tag.ts

Lines 12 to 15 in d637211

	this.should_cache = (
	info.expression.type !== 'Identifier' ||
	(this.expression.dependencies.size && scope.names.has(info.expression.name))
	);

[jimmywarting]

I used an array myself that i needed to know whenever it was changed by an external non-svelte lib and i did not want to allocate a new copy of the huge array for performance reason.

so i came up with a own proxy observer that dose something like this

function observer(target, fn) {
  return new Proxy(target, {
    apply: (...args) => Reflect.apply(...args, fn()),
    deleteProperty: (...args) => Reflect.deleteProperty(...args, fn()),
    set: (...args) => Reflect.set(...args, fn()),
  })
}

let dataset = observer(
  [], // the source, could be a object also
  () => dataset = dataset // override \w same to let svelte know
);

This will still let ju use push, slice, etc...