honnor empty attributes

Author: Elson Correia

docs/documentation/templating/html-attributes.md

@@ -44,6 +44,22 @@ html`
 // <input type="checkbox">
 ```
 
+Setting an attribute value to `false` (as string or boolean) or nil (`undefined` or `null`) will remove the attribute.
+
+```
+const disabled = false
+const checked = null
+
+html`
+    <p hidden="false">hidden text</p>
+    <button disabled="${disabled}">click me</button>
+    <input type="checkbox" checked="${checked}" />
+`.render(document.body)
+// <p>hidden text</p>
+// <button>click me</button>
+// <input type="checkbox">
+```
+
 ### Value attributes
 
 Markup is aware of value you inject in the template as attribute values and will track and update them accordingly. There is no extra syntax necessary to make this happen.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beforesemicolon/markup",
-    "version": "1.13.4",
+    "version": "1.14.0",
     "description": "Reactive HTML Templating System",
     "engines": {
         "node": ">=18.16.0"

src/helpers/element.spec.ts

@@ -88,7 +88,7 @@ describe('element', () => {
 
         expect(el).toBeInstanceOf(MyButton)
         expect(el.outerHTML).toBe(
-            '<my-button id="btn" disabled="false"><span>click me</span></my-button>'
+            '<my-button id="btn"><span>click me</span></my-button>'
         )
     })
 

src/html.spec.ts

@@ -713,6 +713,21 @@ describe('html', () => {
 			expect(document.body.innerHTML).toBe('<button style="background: red;">click me</button>');
 		})
 
+		it('any boolean attr without value', () => {
+			const [disabled, setDisabled] = state(true)
+			const btn = html`
+				<button disabled>click me</button>
+				<button disabled="">click me</button>
+			`
+			
+			btn.render(document.body)
+			
+			expect(document.body.innerHTML).toBe(
+				'<button disabled="">click me</button>\n' +
+				'\t\t\t\t<button disabled="">click me</button>'
+			)
+		})
+		
 		it('any boolean attr', () => {
 			const [disabled, setDisabled] = state(true)
 			const btn = html`
@@ -755,6 +770,12 @@ describe('html', () => {
 			setHidden('')
 			jest.advanceTimersToNextTimer()
 
+			expect(document.body.innerHTML).toBe('<button hidden="">click me</button>')
+			
+			// @ts-ignore
+			setHidden(false)
+			jest.advanceTimersToNextTimer()
+			
 			expect(document.body.innerHTML).toBe('<button>click me</button>')
 		})
 
@@ -893,6 +914,21 @@ describe('html', () => {
 			expect(inputField.getAttribute('value')).toBe('')
 			expect(inputField.value).toBe('')
 		})
+		
+		it('and not set false boolean or nil attributes', () => {
+			const disabled = false
+			const checked = null
+			
+			html`
+			    <p hidden="false" id="${undefined}">hidden text</p>
+			    <button disabled="${disabled}" type="${null}">click me</button>
+			    <input type="checkbox" checked="${checked}" />
+			`.render(document.body)
+			
+			expect(document.body.innerHTML).toBe('<p>hidden text</p>\n' +
+				'\t\t\t    <button>click me</button>\n' +
+				'\t\t\t    <input type="checkbox">')
+		})
 	})
 
 	it('should handle primitive attribute value', () => {

src/utils/set-element-attribute.ts

@@ -16,7 +16,7 @@ export const setElementAttribute = (
     if (
         value !== undefined &&
         value !== null &&
-        (!booleanAttributes[key] || value)
+        (!booleanAttributes[key] || !/false/.test(String(value).trim()))
     ) {
         const descriptor =
             Object.getOwnPropertyDescriptor(el, key) ??