From 1f3d2f7646190213e83936146e16ca2eb2f650b0 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Sun, 26 Feb 2023 23:35:00 +0900 Subject: [PATCH] fix: better handling of inert attribute (add tests) (#7944) * add inert to attribute_lookup * typed for preventing a repeat of the tragedy * add tests * revert unnecessary change * add more test --------- Co-authored-by: fcrozatier --- .../compile/render_dom/wrappers/Element/Attribute.ts | 7 +++++-- src/shared/boolean_attributes.ts | 8 ++++++-- .../attribute-boolean-indeterminate/_config.js | 4 ---- .../samples/attribute-boolean-inert/_config.js | 11 +++++++++++ .../samples/attribute-boolean-inert/main.svelte | 5 +++++ .../samples/attribute-boolean-itemscope/_config.js | 11 +++++++++++ .../samples/attribute-boolean-itemscope/main.svelte | 5 +++++ 7 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 test/runtime/samples/attribute-boolean-inert/_config.js create mode 100644 test/runtime/samples/attribute-boolean-inert/main.svelte create mode 100644 test/runtime/samples/attribute-boolean-itemscope/_config.js create mode 100644 test/runtime/samples/attribute-boolean-itemscope/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts index 81a1898331..ca35ea84db 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts @@ -9,7 +9,7 @@ import Text from '../../../nodes/Text'; import handle_select_value_binding from './handle_select_value_binding'; import { Identifier, Node } from 'estree'; import { namespaces } from '../../../../utils/namespaces'; -import { boolean_attributes } from '../../../../../shared/boolean_attributes'; +import { BooleanAttributes, boolean_attributes } from '../../../../../shared/boolean_attributes'; import { regex_double_quotes } from '../../../../utils/patterns'; const non_textlike_input_types = new Set([ @@ -324,7 +324,8 @@ export default class AttributeWrapper extends BaseAttributeWrapper { } // source: https://html.spec.whatwg.org/multipage/indices.html -const attribute_lookup = { +type AttributeMetadata = { property_name?: string, applies_to?: string[] }; +const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [key in string]: AttributeMetadata } = { allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] }, allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] }, async: { applies_to: ['script'] }, @@ -349,7 +350,9 @@ const attribute_lookup = { formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] }, hidden: {}, indeterminate: { applies_to: ['input'] }, + inert: {}, ismap: { property_name: 'isMap', applies_to: ['img'] }, + itemscope: {}, loop: { applies_to: ['audio', 'bgsound', 'video'] }, multiple: { applies_to: ['input', 'select'] }, muted: { applies_to: ['audio', 'video'] }, diff --git a/src/shared/boolean_attributes.ts b/src/shared/boolean_attributes.ts index e29f921e32..f6ec25c6e5 100644 --- a/src/shared/boolean_attributes.ts +++ b/src/shared/boolean_attributes.ts @@ -1,5 +1,5 @@ // source: https://html.spec.whatwg.org/multipage/indices.html -export const boolean_attributes = new Set([ +const _boolean_attributes = [ 'allowfullscreen', 'allowpaymentrequest', 'async', @@ -12,6 +12,7 @@ export const boolean_attributes = new Set([ 'disabled', 'formnovalidate', 'hidden', + 'indeterminate', 'inert', 'ismap', 'itemscope', @@ -26,4 +27,7 @@ export const boolean_attributes = new Set([ 'required', 'reversed', 'selected' -]); +] as const; + +export type BooleanAttributes = typeof _boolean_attributes[number]; +export const boolean_attributes: Set = new Set([..._boolean_attributes]); diff --git a/test/runtime/samples/attribute-boolean-indeterminate/_config.js b/test/runtime/samples/attribute-boolean-indeterminate/_config.js index d6e97ffc0e..aafb0ec164 100644 --- a/test/runtime/samples/attribute-boolean-indeterminate/_config.js +++ b/test/runtime/samples/attribute-boolean-indeterminate/_config.js @@ -1,8 +1,4 @@ export default { - // This is a bit of a funny one — there's no equivalent attribute, - // so it can't be server-rendered - skip_if_ssr: true, - props: { indeterminate: true }, diff --git a/test/runtime/samples/attribute-boolean-inert/_config.js b/test/runtime/samples/attribute-boolean-inert/_config.js new file mode 100644 index 0000000000..8f99b4ebd8 --- /dev/null +++ b/test/runtime/samples/attribute-boolean-inert/_config.js @@ -0,0 +1,11 @@ +export default { + props: { + inert: true + }, + test({ assert, target, component }) { + const div = target.querySelector('div'); + assert.ok(div.inert); + component.inert = false; + assert.ok(!div.inert); + } +}; diff --git a/test/runtime/samples/attribute-boolean-inert/main.svelte b/test/runtime/samples/attribute-boolean-inert/main.svelte new file mode 100644 index 0000000000..6c3df7e31e --- /dev/null +++ b/test/runtime/samples/attribute-boolean-inert/main.svelte @@ -0,0 +1,5 @@ + + +
some div
diff --git a/test/runtime/samples/attribute-boolean-itemscope/_config.js b/test/runtime/samples/attribute-boolean-itemscope/_config.js new file mode 100644 index 0000000000..b5b21cfc47 --- /dev/null +++ b/test/runtime/samples/attribute-boolean-itemscope/_config.js @@ -0,0 +1,11 @@ +export default { + props: { + itemscope: true + }, + test({ assert, target, component }) { + const div = target.querySelector('div'); + assert.ok(div.itemscope); + component.itemscope = false; + assert.ok(!div.itemscope); + } +}; diff --git a/test/runtime/samples/attribute-boolean-itemscope/main.svelte b/test/runtime/samples/attribute-boolean-itemscope/main.svelte new file mode 100644 index 0000000000..83265a983c --- /dev/null +++ b/test/runtime/samples/attribute-boolean-itemscope/main.svelte @@ -0,0 +1,5 @@ + + +