Object passed into component.set is mutated by computed properties

[Conduitry]

REPL

<script>
	export default {
		computed: {
			b: a => a + 1
		},
		oncreate() {
			let obj = { a: 1 };
			this.set( obj );
			console.log( obj );
		}
	}
</script>

This logs { a: 1, b: 2 }.

I have an app where I have an array of different objects that I pass to component.set as appropriate. The computed property is getting assigned into the object that's passed in. Calling component.set again with a previously used (and mutated) object is a problem when dev mode is enabled, because attempting to set the read-only computed property throws an error.

[Conduitry]

It looks like this is consciously being done in the recompute builder

const statement = `state.${key} = newState.${key} = ${generator.alias( 'template' )}.computed.${key}( ${deps.map( dep => `state.${dep}` ).join( ', ' )} );`;

so that other computed properties that depend on this computed property will be recomputed. I wonder if there's another way we could handle this that wouldn't be too complicated. I suppose we could always assign( {}, newState ) before we start mutating it.

[Rich-Harris]

Best place to do that is probably inside set since this is presumably only ever going to be an issue with user-supplied objects, rather than ones generated for nested components:

function set( newState ) {
-  this._set( newState );
+  this._set( assign( {}, newState ) );
  ( this._root || this )._flush();
}

Though that raises an awkward problem — set then depends on assign. So I guess we need to get a bit more sophisticated about helpers depending on each other (which isn't the worst thing in the world). I'll open a separate issue for that.