Let's build browser engine! in typescript vol5 DOM Shortcut

#browser

Create DOM Shortcut. I'll "actually" parse this later.

// $ node_modules/.bin/ts-node example/dom-shortcut.ts
import { elem, text } from "../src/dom";

// <html><body>Hello, world!</body></html>
//
// let root = elem("html");
// let body = elem("body");
// root.children.push(body);
// body.children.push(text("Hello, world!"));

const root = elem("html", new Map([]), []);
const body = elem("body", new Map([]), []);
root.children.push(body);
body.children.push(text("Hello, world!"));
console.dir(root, { depth: null });

// DomNode {
//   children: [
//     DomNode {
//       children: [
//         DomNode {
//           children: [],
//           nodeType: Text { format: 1, text: 'Hello, world!' }
//     }
//   ],
//     nodeType: Element {
//     format: 0,
//       element: ElementData { tagName: 'body', attributes: Map {} }
//   }
// }
// ],
//   nodeType: Element {
//     format: 0,
//       element: ElementData { tagName: 'html', attributes: Map {} }
//   }
// }
//

test("node type text", () => {
  expect(() => new NodeType.Text("no mean")).not.toThrow();
});

test("node type element", () => {
  expect(() => new NodeType.Element(new ElementData("no mean", new Map([])))).not.toThrow();
});

export class DomNode {
  children: DomNode[];
  nodeType: NodeType;

  constructor(children: DomNode[], nodeType: NodeType) {
    this.children = children;
    this.nodeType = nodeType;
  }
}

export namespace NodeType {
  export enum Format {
    Element,
    Text
  }

  export class Element {
    readonly format = Format.Element;
    element: ElementData;

    constructor(element: ElementData) {
      this.element = element;
    }
  }

  export class Text {
    readonly format = Format.Text;
    text: string;

    constructor(text: string) {
      this.text = text;
    }
  }
}

export type NodeType = NodeType.Element | NodeType.Text;

type AttrMap = Map<string, string>;

export class ElementData {
  tagName: string;
  attributes: AttrMap;

  constructor(tagName: string, attributes: AttrMap) {
    this.tagName = tagName;
    this.attributes = attributes;
  }
}

Alias shortcut for node type text.

test("text", () => {
  expect(text("target")).toEqual(new DomNode([], new NodeType.Text("target")));
});

export function text(data: string): DomNode {
  return new DomNode([], new NodeType.Text(data));
}

Alias shortcut for node type element.

test("elem", () => {
  expect(elem("a", new Map([["b", "c"]]), [])).toEqual(
    new DomNode([], new NodeType.Element(new ElementData("a", new Map([["b", "c"]]))))
  );
});

export function elem(name: string, attrs: AttrMap, children: DomNode[]): DomNode {
  return new DomNode(children, new NodeType.Element(new ElementData(name, attrs)));
}

yeah!

DEV Community

Let's build browser engine! in typescript vol5 DOM Shortcut

references

series

Top comments (0)

Read next

Data integrity in Ably Pub/Sub

PWC 293 Similar Dominos Done Badly

Installing Python Dependencies on AWS Lambda Using EFS

Our team won 𝗙𝗶𝗿𝘀𝘁 𝗽𝗹𝗮𝗰𝗲 𝗶𝗻 𝘁𝗵𝗲 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗰𝗮𝘁𝗲𝗴𝗼𝗿𝘆 at the 𝗕𝘂𝗶𝗹𝗱 𝗳𝗼𝗿 𝗧𝗵𝗿𝗶𝘀𝘀𝘂𝗿 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗮𝘁𝗵𝗼𝗻 𝟮𝟬𝟮𝟰