prevent double editing of synthetic attributes

src/generators/nodes/Attribute.ts

@@ -26,6 +26,7 @@ export default class Attribute extends Node {
 	isSpread: boolean;
 	isTrue: boolean;
 	isDynamic: boolean;
+	isSynthetic: boolean;
 	expression?: Expression;
 	chunks: (Text | Expression)[];
 	dependencies: Set<string>;
@@ -37,6 +38,7 @@ export default class Attribute extends Node {
 			this.name = null;
 			this.isSpread = true;
 			this.isTrue = false;
+			this.isSynthetic = false;
 
 			this.expression = new Expression(compiler, this, scope, info.expression);
 			this.dependencies = this.expression.dependencies;
@@ -48,6 +50,7 @@ export default class Attribute extends Node {
 		else {
 			this.name = info.name;
 			this.isTrue = info.value === true;
+			this.isSynthetic = info.synthetic;
 
 			this.dependencies = new Set();
 

src/generators/nodes/Element.ts

@@ -68,14 +68,15 @@ export default class Element extends Node {
 		if (this.name === 'option') {
 			// Special case — treat these the same way:
 			//   <option>{foo}</option>
-			//   <option value='{foo}'>{foo}</option>
+			//   <option value={foo}>{foo}</option>
 			const valueAttribute = info.attributes.find((attribute: Node) => attribute.name === 'value');
 
 			if (!valueAttribute) {
 				info.attributes.push({
 					type: 'Attribute',
 					name: 'value',
-					value: info.children
+					value: info.children,
+					synthetic: true
 				});
 			}
 		}

src/generators/nodes/shared/Expression.ts

@@ -42,6 +42,7 @@ export default class Expression {
 
 		const isEventHandler = parent.type === 'EventHandler';
 		const expression = this;
+		const isSynthetic = parent.isSynthetic;
 
 		walk(info, {
 			enter(node: any, parent: any, key: string) {
@@ -76,9 +77,12 @@ export default class Expression {
 
 					expression.usesContext = true;
 
-					code.prependRight(node.start, key === 'key' && parent.shorthand
-						? `${name}: ctx.`
-						: 'ctx.');
+					if (!isSynthetic) {
+						// <option> value attribute could be synthetic — avoid double editing
+						code.prependRight(node.start, key === 'key' && parent.shorthand
+							? `${name}: ctx.`
+							: 'ctx.');
+					}
 
 					if (scope.names.has(name)) {
 						scope.dependenciesForName.get(name).forEach(dependency => {