[template-parser] Boolean attributes with invalid values throw inconsistent errors [should warn]

[nolanlawson]

This throws:

<button autofocus="false"></button>
<button autofocus="true"></button>

The errors are:

Error: LWC1037: To set a boolean attributes, try <button autofocus> instead of <button autofocus="true">. 
If the attribute is present, its value must either be the empty string or a value that is an ASCII
case -insensitive match for the attribute's canonical name with no leading or trailing whitespace.

Error: LWC1036: To not set a boolean attribute, try <button> instead of <button autofocus="false">. To 
represent a false value, the attribute has to be omitted altogether.

However, none of these throw:

<button autofocus="yolo"></button>
<button autofocus="FALSE"></button>
<button autofocus="TRUE"></button>

Instead, these just render the attribute value as-is.

We should probably at least warn in cases where the attribute value is anything other than 1) the empty string, i.e. autofocus="", or 2) boolean true, i.e. autofocus (with no =) (these two are equivalent at parse time).

Edit: or 3) the attribute name itself as mentioned in the error message, e.g. autofocus="autofocus".

Problematic code:

lwc/packages/@lwc/template-compiler/src/parser/attribute.ts

Lines 93 to 107 in 641b740

	if (isBooleanAttribute(name, tag)) {
	if (value === 'true') {
	ctx.throwAtLocation(ParserDiagnostics.BOOLEAN_ATTRIBUTE_TRUE, location, [
	tag,
	name,
	value,
	]);
	} else if (value === 'false') {
	ctx.throwAtLocation(ParserDiagnostics.BOOLEAN_ATTRIBUTE_FALSE, location, [
	tag,
	name,
	value,
	]);
	}
	}

[wjhsf]

Browsers (well, Chrome, at least) are perfectly happy to allow autofocus="STRING". We should allow, but warn that it's not necessary.

[nolanlawson]

Yes I don't think these are worth breaking changes. I would go for a warning rather than an error.

[git2gus]

This issue has been linked to a new work item: W-17406536