fix: HTML/SVG boolean attributes (withastro#2538)

* fix: HTML/SVG boolean attributes * fix: update case-sensitivity of attributes * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <[email protected]> Co-authored-by: Jonathan Neal <[email protected]>
SiriousHunter · Feb 4, 2022 · a2f5535 · a2f5535
1 parent 3dbf654
commit a2f5535
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/runtime/server/index.ts b/src/runtime/server/index.ts
@@ -11,6 +11,10 @@ export { createMetadata } from './metadata.js';
 export { escapeHTML, unescapeHTML } from './escape.js';
 
 const voidElementNames = /^(area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
+const htmlBooleanAttributes = /^(allowfullscreen|async|autofocus|autoplay|controls|default|defer|disabled|disablepictureinpicture|disableremoteplayback|formnovalidate|hidden|loop|nomodule|novalidate|open|playsinline|readonly|required|reversed|scoped|seamless|itemscope)$/i;
+const htmlEnumAttributes = /^(contenteditable|draggable|spellcheck|value)$/i;
+// Note: SVG is case-sensitive!
+const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i;
 
 // INVESTIGATE:
 // 2. Less anys when possible and make it well known when they are needed.
@@ -327,10 +331,17 @@ const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
 
 // A helper used to turn expressions into attribute key/value
 export function addAttribute(value: any, key: string) {
-	if (value == null || value === false) {
+	if (value == null) {
 		return '';
 	}
 
+	if (value === false) {
+		if (htmlEnumAttributes.test(key) || svgEnumAttributes.test(key)) {
+			return unescapeHTML(` ${key}="false"`);
+		}
+		return ''
+	}
+
 	// compiler directives cannot be applied dynamically, log a warning and ignore.
 	if (STATIC_DIRECTIVES.has(key)) {
 		// eslint-disable-next-line no-console
@@ -345,8 +356,8 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 		return unescapeHTML(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`);
 	}
 
-	// Boolean only needs the key
-	if (value === true && key.startsWith('data-')) {
+	// Boolean values only need the key
+	if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
 		return unescapeHTML(` ${key}`);
 	} else {
 		return unescapeHTML(` ${key}="${toAttributeString(value)}"`);