Merge pull request #1123 from sveltejs/gh-1109

fix handling of boolean attributes in SSR (#1109)

Author: Rich-Harris

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

@@ -9,6 +9,9 @@ import { Node } from '../../../interfaces';
 import stringifyAttributeValue from './shared/stringifyAttributeValue';
 import { escape } from '../../../utils/stringify';
 
+// source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
+const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' '));
+
 export default function visitElement(
 	generator: SsrGenerator,
 	block: Block,
@@ -36,14 +39,18 @@ export default function visitElement(
 
 		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 {
-			let str = ` ${attribute.name}`;
-
-			if (attribute.value !== true) {
-				str += `="${stringifyAttributeValue(block, attribute.value)}"`;
-			}
-
-			openingTag += str;
+			openingTag += ` ${attribute.name}="${stringifyAttributeValue(block, attribute.value)}"`;
 		}
 	});
 

test/runtime/samples/attribute-boolean-false/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: `<textarea></textarea>`,
+	test (assert, component, target) {
+		const textarea = target.querySelector('textarea');
+		assert.ok(textarea.readOnly === false);
+	},
+};

test/runtime/samples/attribute-boolean-false/main.html

@@ -0,0 +1 @@
+<textarea readonly="{{false}}"></textarea>

test/runtime/samples/attribute-boolean-true/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: `<textarea readonly></textarea>`,
+	test (assert, component, target) {
+		const textarea = target.querySelector('textarea');
+		assert.ok(textarea.readOnly);
+	},
+};

test/runtime/samples/attribute-boolean-true/main.html

@@ -0,0 +1 @@
+<textarea readonly="{{true}}"></textarea>