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);
+});