bindings

src/compile/render-dom/wrappers/Element/Binding.ts

@@ -105,11 +105,11 @@ export default class BindingWrapper {
 			const bindingGroup = getBindingGroup(renderer, this.node.value.node);
 
 			block.builders.hydrate.addLine(
-				`#component._bindingGroups[${bindingGroup}].push(${parent.var});`
+				`(#component.$$bindingGroups[${bindingGroup}] || (#component.$$bindingGroups[${bindingGroup}] = [])).push(${parent.var});`
 			);
 
 			block.builders.destroy.addLine(
-				`#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${parent.var}), 1);`
+				`#component.$$bindingGroups[${bindingGroup}].splice(#component.$$bindingGroups[${bindingGroup}].indexOf(${parent.var}), 1);`
 			);
 		}
 
@@ -295,7 +295,7 @@ function getValueFromDom(
 	if (name === 'group') {
 		const bindingGroup = getBindingGroup(renderer, binding.node.value.node);
 		if (type === 'checkbox') {
-			return `@getBindingGroupValue(#component._bindingGroups[${bindingGroup}])`;
+			return `@getBindingGroupValue(#component.$$bindingGroups[${bindingGroup}])`;
 		}
 
 		return `${element.var}.__value`;

src/internal/SvelteComponent.js

@@ -9,6 +9,7 @@ export class SvelteComponent {
 		);
 
 		this.$$dirty = null;
+		this.$$bindingGroups = []; // TODO find a way to not have this here?
 
 		if (options.props) {
 			this.$$inject_props(options.props);

src/parse/state/tag.ts

@@ -384,12 +384,29 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
 
 	parser.allowWhitespace();
 
-	let value = parser.eat('=') ? readAttributeValue(parser) : true;
-	const end = parser.index;
-
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== 1 && get_directive_type(name.slice(0, colon_index));
 
+	let value;
+
+	if (parser.eat('=')) {
+		if (type === 'Binding') {
+			// TODO should this be a special case? tbh this whole thing
+			// could use a lil refactoring probably
+			const quote = parser.read(/['"']/);
+			const expression = readExpression(parser);
+			value = [{ type: 'MustacheTag', start: expression.start, end: expression.end, expression }];
+
+			if (quote) parser.eat(quote, true);
+		} else {
+			value = readAttributeValue(parser);
+		}
+	} else {
+		value = true;
+	}
+
+	const end = parser.index;
+
 	if (type) {
 		name = name.slice(colon_index + 1);
 
@@ -398,7 +415,7 @@ function readAttribute(parser: Parser, uniqueNames: Set<string>) {
 			end,
 			type,
 			name,
-			expression: value[0] && value[0].expression
+			[type === 'Binding' ? 'value' : 'expression']: value[0] && value[0].expression
 		};
 	}
 

test/runtime/samples/action/_config.js

@@ -3,20 +3,20 @@ export default {
 		<button>action</button>
 	`,
 
-	test ( assert, component, target, window ) {
-		const button = target.querySelector( 'button' );
-		const eventEnter = new window.MouseEvent( 'mouseenter' );
-		const eventLeave = new window.MouseEvent( 'mouseleave' );
+	test(assert, component, target, window) {
+		const button = target.querySelector('button');
+		const eventEnter = new window.MouseEvent('mouseenter');
+		const eventLeave = new window.MouseEvent('mouseleave');
 
-		button.dispatchEvent( eventEnter );
-		assert.htmlEqual( target.innerHTML, `
+		button.dispatchEvent(eventEnter);
+		assert.htmlEqual(target.innerHTML, `
 			<button>action</button>
 			<div class="tooltip">Perform an Action</div>
-		` );
+		`);
 
-		button.dispatchEvent( eventLeave );
-		assert.htmlEqual( target.innerHTML, `
+		button.dispatchEvent(eventLeave);
+		assert.htmlEqual(target.innerHTML, `
 			<button>action</button>
-		` );
+		`);
 	}
 };

test/runtime/samples/attribute-prefer-expression/_config.js

@@ -2,18 +2,18 @@ export default {
 	'skip-ssr': true,
 
 	props: {
-		foo: false
+		foo: false,
 	},
 
-	test ( assert, component, target ) {
-		const inputs = target.querySelectorAll( 'input' );
+	test(assert, component, target) {
+		const inputs = target.querySelectorAll('input');
 
-		assert.ok( inputs[0].checked );
-		assert.ok( !inputs[1].checked );
+		assert.ok(inputs[0].checked);
+		assert.ok(!inputs[1].checked);
 
 		component.foo = true;
 
-		assert.ok( !inputs[0].checked );
-		assert.ok( inputs[1].checked );
-	}
+		assert.ok(!inputs[0].checked);
+		assert.ok(inputs[1].checked);
+	},
 };