Merge pull request #902 from sveltejs/gh-893

possible fix for #893

Author: Rich-Harris

src/generators/dom/visitors/Element/Binding.ts

@@ -61,7 +61,7 @@ export default function visitBinding(
 		type
 	);
 
-	let setter = getSetter(block, name, snippet, state.parentNode, attribute, dependencies, value);
+	let setter = getSetter(generator, block, name, snippet, state.parentNode, attribute, dependencies, value);
 	let updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
 
 	const needsLock = !isReadOnly && node.name !== 'input' || !/radio|checkbox|range|color/.test(type); // TODO others?
@@ -290,6 +290,7 @@ function getBindingGroup(generator: DomGenerator, value: Node) {
 }
 
 function getSetter(
+	generator: DomGenerator,
 	block: Block,
 	name: string,
 	snippet: string,
@@ -319,6 +320,15 @@ function getSetter(
 	}
 
 	if (attribute.value.type === 'MemberExpression') {
+		// This is a little confusing, and should probably be tidied up
+		// at some point. It addresses a tricky bug (#893), wherein
+		// Svelte tries to `set()` a computed property, which throws an
+		// error in dev mode. a) it's possible that we should be
+		// replacing computations with *their* dependencies, and b)
+		// we should probably populate `generator.readonly` sooner so
+		// that we don't have to do the `.some()` here
+		dependencies = dependencies.filter(prop => !generator.computations.some(computation => computation.key === prop));
+
 		return deindent`
 			var state = #component.get();
 			${snippet} = ${value};

test/runtime/samples/binding-indirect-computed/_config.js

@@ -0,0 +1,32 @@
+export default {
+	dev: true,
+
+	html: `
+		<select>
+			<option value='A'>A</option>
+			<option value='B'>B</option>
+			<option value='C'>C</option>
+		</select>
+	`,
+
+	test(assert, component, target, window) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		select.dispatchEvent(change);
+
+		assert.equal(component.get('selected').letter, 'B');
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='A'>A</option>
+				<option value='B'>B</option>
+				<option value='C'>C</option>
+			</select>
+
+			B
+		`);
+	}
+};

test/runtime/samples/binding-indirect-computed/main.html

@@ -0,0 +1,27 @@
+<select bind:value="selected.letter">
+	{{#each uppercase as letter}}
+		<option value="{{letter}}">{{letter}}</option>
+	{{/each}}
+</select>
+
+{{selected.letter}}
+
+<script>
+	export default {
+		data() {
+			return {
+				letters: [
+					'a',
+					'b',
+					'c'
+				],
+				selected: {
+					letter: ''
+				}
+			}
+		},
+		computed:{
+			uppercase: letters => letters.map(x => x.toUpperCase())
+		}
+	};
+</script>