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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import compile from '@core/compile';import { directives } from '@core/directive';import reactive from '@core/reactive';import render from '@core/render';import { COMPONENT_FLAG } from '@models/generics';import { ASTNode, State } from '@models/structs';
/** * Holds state and AST, runs directives and renders content * Do not instantiate this directly, rather use the `component` * function to generate a Component. * @property {State} state - The data that pertains to the Component * @property {ASTNode[]} ast - The Abstract Syntax Tree that models the HTML */export class Component {  state: State = Object.seal({});  ast: ASTNode[] = [];
  constructor(state: State) {    this.ast = [];    this.state = state;  }
  /**   * Initialize the component   * @param {HTMLElement|string} el - Component element root   * @returns {undefined}   */  mount(el: HTMLElement | string): void {    // Accepts both selector and element reference    const rootEl =      el instanceof HTMLElement ? el : document.querySelector<HTMLElement>(el) || document.body;    const finalState = { ...this.state, $render: this.render.bind(this) };
    this.ast = compile(rootEl, this.state);    this.state = reactive(finalState, this.render.bind(this));
    this.render();
    rootEl[COMPONENT_FLAG] = this;  }
  /**   * Force renders the DOM based on props   * @param {string[]=} props - Array of root level properties in state   * @returns {undefined}   */  render(props: string[] = Object.keys(this.state)): void {    render(this.ast, directives, this.state, props);  }}
/** * Instantiates and returns a Component class. NOTE: components may * only be mounted once on one element. * @param {State} state - The data that pertains to the Component * @returns {Component} */export const component = (state: State): Component => new Component(state);
export default component;