Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: HTML/SVG boolean attributes #2538

Merged
merged 3 commits into from
Feb 4, 2022
+21 −3
Merged

fix: HTML/SVG boolean attributes #2538

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a9d0a9
fix: HTML/SVG boolean attributes
Feb 4, 2022
570147c
fix: update case-sensitivity of attributes
Feb 4, 2022
5ecb303
Update packages/astro/src/runtime/server/index.ts
natemoo-re Feb 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/shy-brooms-tell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'astro': patch
---

Fix rendering of HTML boolean attributes like `open` and `async`.

Fix rendering of HTML and SVG enumerated attributes like `contenteditable` and `spellcheck`.
16 changes: 13 additions & 3 deletions packages/astro/src/runtime/server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ 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)$/;
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved
const htmlEnumAttributes = /^(contenteditable|draggable|spellcheck|value)$/;
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved
const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/;
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved
natemoo-re marked this conversation as resolved.
Show resolved Hide resolved

// INVESTIGATE:
// 2. Less anys when possible and make it well known when they are needed.
Expand Down Expand Up @@ -327,10 +330,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
Expand All @@ -345,8 +355,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)}"`);
Expand Down