web/src/html.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

export type CreateElement<T extends HTMLElement> = {
  (...children: (Node | string)[]): T;
  (attrs: Partial<T>, ...children: (Node | string)[]): T;
};

type ElementCreator = {
  [K in keyof HTMLElementTagNameMap]: CreateElement<HTMLElementTagNameMap[K]>;
};

const h = new Proxy({} as ElementCreator, {
  get:
    (_, tag: string) =>
    (...args: any[]) => {
      const el = document.createElement(tag);

      if (args[0]?.constructor === Object) {
        const { dataset, ...attrs } = args.shift();

        Object.assign(el, attrs);

        if (dataset) {
          Object.assign(el.dataset, dataset);
        }
      }

      el.append(...args.flat());

      return el;
    },
});

export default h;