DipolePlus1More.js

import { Theme } from './editor/Theme'
import { component, html, render, invalidate } from '1more'
import { computed, makeObservable, observable, reaction, utx } from 'dipole'
import { randomEmoji } from './functions/emojis'

const t0 = performance.now()

class React {
  constructor() {
    makeObservable(this)
  }

  invalidate = () => {
    this.runReaction()
  }

  run: any

  _reaction = reaction(
    () => {
      return this.run()
    },
    null,
    () => {
      return this.invalidate()
    },
  )

  notRun: boolean = true

  runReaction = () => {
    this.notRun = false
    return this._reaction.run()
  }
}

class View extends React {
  constructor() {
    super()
    makeObservable(this)
  }

  c: any

  invalidate = () => {
    invalidate(this.c)
  }

  style: any

  internalStyle = computed.prop<any>(() => {
    return JSON.parse(JSON.stringify(this.style))
  })

  _component: any
  component = () => {
    if (!this._component)
      this._component = component((c: any) => {
        this.c = c
        return () => {
          return this.runReaction()
        }
      })()
    return this._component
  }

  render() {
    return this.component()
  }
}

class HelloWorldModel {
  hello = observable.prop<string[]>(['Hello World'])
  chars = observable.prop<string[]>([])
  isEasterEgg = computed.prop(() => {
    return this.chars.length > 3
  })
  constructor() {
    makeObservable(this)
  }
}

const h = new HelloWorldModel()

class Style {
  display = 'flex'
  'align-items' = 'center'
  'justify-content' = 'center'
  'padding' = '20px'
  'height' = '100%'
  'width' = '100%'
  'color' = 'white'
  'outline' = 'none'
  'font-size' = computed.prop(() => (h.isEasterEgg ? '44px' : '22px'))

  constructor() {
    makeObservable(this)
  }
}

const style = new Style()

class AddEmoji extends React {
  run = () => {
    if (h.isEasterEgg) {
      utx(() => {
        h.hello.push(randomEmoji())
        h.hello = h.hello
      })
    }
  }
}

class HelloWorldView extends View {
  style = style

  addEmoji = new AddEmoji()

  run = () => {
    if (this.addEmoji.notRun) {
      this.addEmoji.runReaction()
    }
    return html`
      <div
        tabindex="-1"
        onkeydown=${(e: KeyboardEvent) => {
          h.chars.push(e.key)
          h.chars = h.chars
        }}
        style=${this.internalStyle}
      >
        ${h.hello.toString()}
      </div>
    `
  }
}

render(new HelloWorldView().render(), document.querySelector('.render1'))

const t1 = performance.now()
console.log(`Time to start systems ${t1 - t0}ms`)