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 <frederic.crozatier@protonmail.com>

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'] },

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<string> = new Set([..._boolean_attributes]);

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
 	},

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);
+	}
+};

test/runtime/samples/attribute-boolean-inert/main.svelte

@@ -0,0 +1,5 @@
+<script>
+export let inert;
+</script>
+
+<div {inert}>some div <button>click</button></div>

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);
+	}
+};

test/runtime/samples/attribute-boolean-itemscope/main.svelte

@@ -0,0 +1,5 @@
+<script>
+export let itemscope;
+</script>
+
+<div {itemscope}  />