Let's build browser engine! in typescript vol5 DOM Shortcut
Tags: browser
Published: 2019-05-02 13:45:25

---
title: Let's build browser engine! in typescript vol5 DOM Shortcut
published: true
description: Understand browser step by step. Let's build browser engine! in typescript vol5 DOM Shortcut.
tags: browser
---
Create DOM Shortcut. I'll "actually" parse this later.

```typescript
// $ 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 {} }
//   }
// }
//
```

```typescript
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();
});
```

```typescript
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.

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

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

Alias shortcut for node type element.

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

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

yeah!

## references

- [Let's build a browser engine! Part 1: Getting started](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
- [mbrubeck/robinson](https://github.com/mbrubeck/robinson)
- [sanemat/js-toy-engine](https://github.com/sanemat/js-toy-engine)
- [sanemat/ts-toy-engine](https://github.com/sanemat/ts-toy-engine)

## series

- [Let's build browser engine! in typescript vol0 Toy browser engine](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol0-toy-browser-engine-egm)
- [Let's build browser engine! in typescript vol1 Canvas with Color](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol1-canvas-with-color-2nd7)
- [Let's build browser engine! in typescript vol2 Display Command](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol2-display-command-3466)
- [Let's build browser engine! in typescript vol3 Layout Box, Dimensions](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol3-layout-box-dimensions-4613)
- [Let's build browser engine! in typescript vol4 Layout Tree to Display List](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol4-layout-tree-to-display-list-c54)
- [Let's build browser engine! in typescript vol5 DOM Shortcut](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol5-dom-shortcut-2l81)