server-render bindings

src/generators/server-side-rendering/visitors/Element.ts

@@ -35,22 +35,25 @@ export default function visitElement(
 	}
 
 	node.attributes.forEach((attribute: Node) => {
-		if (attribute.type !== 'Attribute') return;
-
-		if (attribute.name === 'value' && node.name === 'textarea') {
-			textareaContents = stringifyAttributeValue(block, attribute.value);
-		} else if (attribute.value === true) {
-			openingTag += ` ${attribute.name}`;
-		} else if (
-			booleanAttributes.has(attribute.name) &&
-			attribute.value.length === 1 &&
-			attribute.value[0].type !== 'Text'
-		) {
-			// a boolean attribute with one non-Text chunk
-			block.contextualise(attribute.value[0].expression);
-			openingTag += '${' + attribute.value[0].metadata.snippet + ' ? " ' + attribute.name + '" : "" }';
-		} else {
-			openingTag += ` ${attribute.name}="${stringifyAttributeValue(block, attribute.value)}"`;
+		if (attribute.type === 'Attribute') {
+			if (attribute.name === 'value' && node.name === 'textarea') {
+				textareaContents = stringifyAttributeValue(block, attribute.value);
+			} else if (attribute.value === true) {
+				openingTag += ` ${attribute.name}`;
+			} else if (
+				booleanAttributes.has(attribute.name) &&
+				attribute.value.length === 1 &&
+				attribute.value[0].type !== 'Text'
+			) {
+				// a boolean attribute with one non-Text chunk
+				block.contextualise(attribute.value[0].expression);
+				openingTag += '${' + attribute.value[0].metadata.snippet + ' ? " ' + attribute.name + '" : "" }';
+			} else {
+				openingTag += ` ${attribute.name}="${stringifyAttributeValue(block, attribute.value)}"`;
+			}
+		} else if (attribute.type === 'Binding') {
+			block.contextualise(attribute.value); // TODO gah this is hacky, contextualise everything upfront
+			openingTag += '${' + attribute.metadata.snippet + ' === false ? "" : " ' + attribute.name + '" + (' + attribute.metadata.snippet + ' === true ? "" : "=" + JSON.stringify(' + attribute.metadata.snippet + '))}';
 		}
 	});
 

test/server-side-rendering/samples/binding/_expected.html

@@ -0,0 +1 @@
+<input value='bar'>

test/server-side-rendering/samples/binding/main.html

@@ -0,0 +1,9 @@
+<input bind:value=foo >
+
+<script>
+	export default {
+		data() {
+			return { foo: 'bar' };
+		}
+	};
+</script>