feat: implement HTMLInputElement

deno.jsonc

@@ -28,6 +28,7 @@
   },
   "imports": {
     "assert": "jsr:@std/[email protected]",
+    "expect": "jsr:@std/[email protected]",
     "fs": "jsr:@std/[email protected]",
     "path": "jsr:@std/[email protected]"
   },

src/deserialize.ts

@@ -5,6 +5,7 @@ import { DocumentType } from "./dom/document.ts";
 import { DocumentFragment } from "./dom/document-fragment.ts";
 import { HTMLTemplateElement } from "./dom/elements/html-template-element.ts";
 import { Element } from "./dom/element.ts";
+import { HTMLInputElement } from "./dom/elements/html-input-element.ts";
 
 export function nodesFromString(html: string): Node {
   const parsed = JSON.parse(parse(html));
@@ -47,6 +48,13 @@ function nodeFromArray(data: any, parentNode: Node | null): Node {
       contentFrag,
     );
   }
+  if (data[1] === "input") {
+    return new HTMLInputElement(
+      parentNode,
+      data[2],
+      CTOR_KEY,
+    );
+  }
 
   const elm = new Element(data[1], parentNode, data[2], CTOR_KEY);
   const childNodes = elm._getChildNodesMutator();

src/dom/document.ts

@@ -7,6 +7,7 @@ import { HTMLTemplateElement } from "./elements/html-template-element.ts";
 import { getSelectorEngine, SelectorApi } from "./selectors/selectors.ts";
 import { getElementsByClassName } from "./utils.ts";
 import UtilTypes from "./utils-types.ts";
+import { HTMLInputElement } from "./elements/html-input-element.ts";
 
 export class DOMImplementation {
   constructor(key: typeof CTOR_KEY) {
@@ -224,6 +225,11 @@ export class Document extends Node {
         elm._setOwnerDocument(this);
         return elm;
       }
+      case "INPUT": {
+        const elm = new HTMLInputElement(null, [], CTOR_KEY);
+        elm._setOwnerDocument(this);
+        return elm;
+      }
 
       default: {
         const elm = new Element(tagName, null, [], CTOR_KEY);

src/dom/elements/html-input-element.ts

@@ -0,0 +1,34 @@
+import type { Node } from "../node.ts";
+import type { CTOR_KEY } from "../../constructor-lock.ts";
+import { Element } from "../element.ts";
+
+export class HTMLInputElement extends Element {
+  constructor(
+    parentNode: Node | null,
+    attributes: [string, string][],
+    key: typeof CTOR_KEY,
+  ) {
+    super(
+      "INPUT",
+      parentNode,
+      attributes,
+      key,
+    );
+  }
+
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(value: any) {
+    this.setAttribute("value", value);
+    this.dispatchEvent(new Event("input"));
+  }
+
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(value: boolean) {
+    this.toggleAttribute("checked", value);
+    this.dispatchEvent(new Event("input"));
+  }
+}

test/units/HTMLElement-input.ts

@@ -0,0 +1,32 @@
+import { DOMParser } from "../../deno-dom-wasm.ts";
+import { expect, fn } from "expect";
+import type { HTMLInputElement } from "../../src/dom/elements/html-input-element.ts";
+
+Deno.test("HTMLInputElement reacts to value and checked properties changes", () => {
+  const doc = new DOMParser().parseFromString(
+    `<input value="foo" type="checkbox">`,
+    "text/html",
+  );
+  const listener = fn() as unknown as EventListenerObject;
+  const input = doc.querySelector<HTMLInputElement>("input")!;
+
+  expect(input.value).toBe("foo");
+  expect(input.checked).toBe(false);
+
+  input.addEventListener("input", listener);
+
+  input.value = "bar";
+  expect(input.value).toBe("bar");
+  expect(input.getAttribute("value")).toBe("bar");
+  expect(listener).toBeCalledTimes(1);
+
+  input.checked = true;
+  expect(input.checked).toBe(true);
+  expect(input.hasAttribute("checked")).toBe(true);
+  expect(listener).toBeCalledTimes(2);
+
+  input.checked = false;
+  expect(input.checked).toBe(false);
+  expect(input.hasAttribute("checked")).toBe(false);
+  expect(listener).toBeCalledTimes(3);
+});