vertcitron

import Button from "./components/Button"

const appElement = document.getElementById('app')

const button = new Button('My Button')
// click handler assignation :
button.onClick = () => {
  alert('My Button was clicked !')
}

vertcitron

import Component from './Component'

export default class Button extends Component {
  readonly element: HTMLButtonElement

  public onClick: () => void = () => {
    throw new Error('The click handler has not been defined in a Button component.')
  }

  constructor (text: string) {

vertcitron

$primary: #6699ff

button
  border: none
  border-radius: 0.33rem
  padding: 0.5rem 1rem
  background-color: $primary
  color: white
  &:hover
    background-color: lighten($primary, 10%)

vertcitron

import Button from "./components/Button"

const appElement = document.getElementById('app')

const button = new Button('My Button')

function renderApp() {
  if (appElement !== null) {
    appElement.innerHTML = ''
    button.render(appElement)

vertcitron

import Component from './Component'

export default class Button extends Component {
  readonly element: HTMLButtonElement

  constructor (text: string) {
    super()
    this.element = document.createElement('button')
    this.element.textContent = text
  }

vertcitron

import Component from './Component'

export default class Button extends Component {

}

vertcitron

export default abstract class Component {
  abstract element: HTMLElement

  public render (parent: HTMLElement | Component): void {
    if (parent instanceof Component) {
      parent.element.appendChild(this.element)
    } else {
      parent.appendChild(this.element)
    }
  }

vertcitron

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "lib": [ "dom", "es2019"],
    "sourceMap": true,
    "strict": true
  }
}

vertcitron

document.getElementById('app').textContent = 'My Application'

vertcitron

html
  width: 80%
  height: 100%
  margin: 0 auto
  padding: 0
  font-family: sans-serif
  background-color: #eeeee9
  color: #333344

body