feat(render): boolean attrs via Constant and applyBooleanAttr 🚗

- Add Render.applyBooleanAttr and toBoolean; remove attr when false
- Add Constant.booleanAttrKeys (checked, disabled, readonly, selected, inert, hidden)
- Extend disabled to fieldset, optgroup, option; add readonly, selected, inert, hidden
- Refactor applyAttrs to use booleanAttrKeys
- One-line tagAliases in Constant

Author: NeaByteLab

src/Constant.ts

@@ -21,6 +21,15 @@ export default class Constant {
       return key !== 'type' && key !== 'children'
     })
   )
+  /** Boolean attribute names; presence means true. */
+  static readonly booleanAttrKeys: Set<string> = new Set<string>([
+    'checked',
+    'disabled',
+    'readonly',
+    'selected',
+    'inert',
+    'hidden'
+  ])
   /** Container tag names for el.* (non-void). */
   static readonly containerTags: readonly string[] = [
     'div',
@@ -74,8 +83,5 @@ export default class Constant {
     'wbr'
   ])
   /** All tag names for el.* aliases (container + void). */
-  static readonly tagAliases: readonly string[] = [
-    ...Constant.containerTags,
-    ...Constant.voidTags
-  ]
+  static readonly tagAliases: readonly string[] = [...Constant.containerTags, ...Constant.voidTags]
 }

src/Render.ts

@@ -13,12 +13,17 @@ export default class Render {
 
   /**
    * Apply attrs map to element.
-   * @description Sets attributes, className, value, checked, disabled.
+   * @description Sets attributes, className, value, boolean and form attrs.
    * @param element - Target element
    * @param attrs - Attribute key-value map
    */
   static applyAttrs(element: Element, attrs: Types.Attrs): void {
     for (const [key, value] of Object.entries(attrs)) {
+      if (Constant.booleanAttrKeys.has(key)) {
+        if (Render.applyBooleanAttr(element, key, value)) {
+          continue
+        }
+      }
       if (value === undefined || value === null) {
         continue
       }
@@ -40,20 +45,6 @@ export default class Render {
         element.value = attrValueStr
         continue
       }
-      if (key === 'checked' && element instanceof HTMLInputElement) {
-        element.checked = value === true || value === 'true'
-        continue
-      }
-      if (
-        key === 'disabled' &&
-        (element instanceof HTMLInputElement ||
-          element instanceof HTMLButtonElement ||
-          element instanceof HTMLSelectElement ||
-          element instanceof HTMLTextAreaElement)
-      ) {
-        element.disabled = value === true || value === 'true'
-        continue
-      }
       try {
         element.setAttribute(key, attrValueStr)
       } catch {
@@ -285,4 +276,86 @@ export default class Render {
     }
     return String(layoutValue)
   }
+
+  /**
+   * Apply boolean attribute to element.
+   * @description Sets property and removes attribute when false.
+   * @param element - Target DOM element
+   * @param attrKey - Attribute name
+   * @param attrValue - Attribute value
+   * @returns True if attribute was applied
+   */
+  private static applyBooleanAttr(
+    element: Element,
+    attrKey: string,
+    attrValue: unknown
+  ): boolean {
+    const isAttrTruthy = attrValue !== undefined && attrValue !== null &&
+      Render.toBoolean(attrValue)
+    if (attrKey === 'checked' && element instanceof HTMLInputElement) {
+      element.checked = isAttrTruthy
+      if (!isAttrTruthy) {
+        element.removeAttribute('checked')
+      }
+      return true
+    }
+    if (attrKey === 'disabled') {
+      if (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLButtonElement ||
+        element instanceof HTMLSelectElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLFieldSetElement ||
+        element instanceof HTMLOptGroupElement ||
+        element instanceof HTMLOptionElement
+      ) {
+        element.disabled = isAttrTruthy
+        if (!isAttrTruthy) {
+          element.removeAttribute('disabled')
+        }
+        return true
+      }
+    }
+    if (attrKey === 'readonly') {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        element.readOnly = isAttrTruthy
+        if (!isAttrTruthy) {
+          element.removeAttribute('readonly')
+        }
+        return true
+      }
+    }
+    if (attrKey === 'selected' && element instanceof HTMLOptionElement) {
+      element.selected = isAttrTruthy
+      if (!isAttrTruthy) {
+        element.removeAttribute('selected')
+      }
+      return true
+    }
+    if (attrKey === 'inert' && element instanceof HTMLElement) {
+      element.inert = isAttrTruthy
+      if (!isAttrTruthy) {
+        element.removeAttribute('inert')
+      }
+      return true
+    }
+    if (attrKey === 'hidden' && element instanceof HTMLElement) {
+      element.hidden = isAttrTruthy
+      if (!isAttrTruthy) {
+        element.removeAttribute('hidden')
+      }
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Normalize attribute value to boolean.
+   * @description True for true or 'true' string; otherwise false.
+   * @param attrValue - Raw attribute value
+   * @returns True when value is true or 'true'
+   */
+  private static toBoolean(attrValue: unknown): boolean {
+    return attrValue === true || attrValue === 'true'
+  }
 }