add boolean value to attr

core/node.ts

@@ -1,7 +1,8 @@
 import { Nilable } from "./utils.ts";
 
-export type Attrs = Record<string, string>;
-export type AttrEntry = [key: string, value: string];
+export type Attrs = Record<string, AttrVal>;
+export type AttrEntry = [key: string, value: AttrVal];
+export type AttrVal = boolean | string;
 export type AnyNode = Fragment | FragmentNode;
 
 export function isTextNode(val: unknown): val is TextNode {

ren/str.test.ts

@@ -184,3 +184,33 @@ Deno.test({
     );
   },
 });
+
+Deno.test({
+  name: "should filter attr",
+  fn: () => {
+    const layout = E("input", { type: "number", disabled: false });
+
+    const ren = new StrRenderer();
+    const res = ren.render(layout);
+
+    assertEquals(
+      res,
+      '<input type="number">',
+    );
+  },
+});
+
+Deno.test({
+  name: "should render boolean attr",
+  fn: () => {
+    const layout = E("input", { type: "number", disabled: true });
+
+    const ren = new StrRenderer();
+    const res = ren.render(layout);
+
+    assertEquals(
+      res,
+      '<input type="number" disabled>',
+    );
+  },
+});

ren/str.ts

@@ -2,6 +2,7 @@ import {
   AnyNode,
   AttrEntry,
   Attrs,
+  AttrVal,
   Elem,
   Fragment,
   isElem,
@@ -103,7 +104,10 @@ function encodeAttrs(
   );
 }
 
-function encodeAttr(key: string, value: string): string {
+function encodeAttr(key: string, value: AttrVal): string {
+  if (typeof value === "boolean") {
+    return value ? key : "";
+  }
   return `${key}="${value}"`;
 }