CodeSpitz/Object-Oriented-Javascript/03-Strategy-Observer/example.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MVVM</title>
</head>
<body>
<section id="target" data-viewmodel="wrapper">
  <h2 data-viewmodel="title"></h2>
  <section data-viewmodel="contents"></section>
</section>
<script>

const type = (target, type) => {
  if (typeof type == "string") {
    if (typeof target != type) throw `invalid type ${target} : ${type}`
  } else if (!(target instanceof type)) {
    throw `invalid type ${target} : ${type}`
  }
  return target;
}

const ViewModelListener = class {
  viewmodelUpdated(updated){throw 'override'}
}

const ViewModel = class extends ViewModelListener {
  static get = data => new ViewModel(data)
  static #subjects = new Set
  static #inited = false
  static notify (vm) {
    this.#subjects.add(vm)
    if (this.#inited) return
    this.#inited = true
    const f = () => {
      this.#subjects.forEach(vm => {
        if (vm.#isUpdated.size) {
          vm.notify()
          vm.#isUpdated.clear()
        }
      })
      requestAnimationFrame(f)
    }
    requestAnimationFrame(f)
  }
  static descriptor = (vm, category, k, v) => ({
    enumerable: true,
    get: () => v,
    set (newV) {
      v = newV
      vm.#isUpdated.add(new ViewModelValue(vm.subKey, category, k, v))
    }
  })

  static define = (vm, category, obj) => (
    Object.defineProperties(
      obj,
      Object.entries(obj)
            .reduce((r, [k, v]) => (r[k] = ViewModel.descriptor(vm, category, k, v), r), {})
    )
  )

  subKey = ''; parent = null
  styles = {}; attributes = {}; properties = {}; events = {}
  #isUpdated = new Set; #listeners = new Set

  constructor(data, _ = type(data, 'object')) {
    super();
    Object.entries(data).forEach(([k, v]) => {
      if('styles,attributes,properties'.includes(k)) {
        if(!v || typeof v != 'object') throw `invalid object k: ${k}, v:${v}`
        this[k] = ViewModel.define(this, k, v)
      } else {
        Object.defineProperty(this, k, ViewModel.descriptor(this, '', k, v))
        if (v instanceof ViewModel) {
          v.parent = this
          v.subKey = k
          v.addListener(this)
        }
      }
    })
    ViewModel.notify(this)
    Object.seal(this)
  }

  viewmodelUpdated (updated) { updated.forEach(v => this.#isUpdated.add(v)) }
  addListener (v, _ = type(v, ViewModelListener)) { this.#listeners.add(v) }
  removeListener (v, _ = type(v, ViewModelListener)) { this.#listeners.delete(v) }
  notify () { this.#listeners.forEach(v => v.viewmodelUpdated(this.#isUpdated)) }
}

const ViewModelValue = class {
  subKey; category; k; v;
  constructor (subKey, category, k, v) {
    Object.assign(this, { subKey, category, k, v })
    Object.freeze(this)
  }
}

const BinderItem = class {
  el; vmName;
  constructor (el, vmName, _0 = type(el, HTMLElement), _1 = type(vmName, 'string')) {
    this.el = el
    this.vmName = vmName
    Object.freeze(this)
  }
}

const Binder = class extends ViewModelListener {
  #items = new Set;
  #processors = {};
  add (v, _ = type(v, BinderItem)) { this.#items.add(v) }
  addProcessor (v, _ = type(v, Processor)) { this.#processors[v.category] = v }
  render (viewmodel, _ = type(viewmodel, ViewModel)) {
    const processores = Object.entries(this.#processors)
    this.#items.forEach(({ vmName, el }) => {
      const vm = type(viewmodel[vmName], ViewModel)
      processores.forEach(([pk, processor]) => {
        Object.entries(vm[pk]).forEach(([k, v]) => {
          processor.process(vm, el, k, v)
        })
      })
    })
  }

  watch(viewmodel, _ = type(viewmodel, ViewModel)){
    viewmodel.addListener(this)
    this.render(viewmodel)
  }

  unwatch(viewmodel, _ = type(viewmodel, ViewModel)){
    viewmodel.removeListener(this)
  }

  viewmodelUpdated (updated) {
    const items = {}
    this.#items.forEach(({ vmName, el }) => {
      items[vmName] = [type(rootViewModel[vmName], ViewModel), el]
    })
    updated.forEach(({ subKey, category, k, v }) => {
      if (!items[subKey]) return
      const [vm, el] = items[subKey], processor = this.#processors[category]
      if (!el || !processor) return
      processor.process(vm, el, k, v)
    })
  }
}

const Processor = class {
  category;
  constructor (category) {
    this.category = category
    Object.freeze(this)
  }
  process (vm, el, k, v, _0 = type(vm, ViewModel),
                         _1 = type(el, HTMLElement),
                         _2 = type(k, "string")) {
    this._process(vm, el, k, v)
  }
  _process (vm, el, k, v) { throw 'override' }
}

const Scanner = class {
  scan (el, _ = type(el, HTMLElement)) {
    const binder = new Binder();
    this.checkItem(binder, el)
    const stack = [el.firstElementChild]
    let target
    while (target = stack.pop()) {
      this.checkItem(binder, target)
      if (target.firstElementChild) stack.push(target.firstElementChild)
      if (target.nextElementSibling) stack.push(target.nextElementSibling)
    }
    return binder;
  }
  checkItem (binder, el) {
    const vmName = el.getAttribute('data-viewmodel')
    if (vmName) binder.add(new BinderItem(el, vmName))
  }
}

const scanner = new Scanner()
const binder = scanner.scan(document.querySelector('#target'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el.style[k] = v }
}('styles'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el.setAttribute(k, v) }
}('attributes'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el[k] = v }
}('properties'))
binder.addProcessor(new class extends Processor {
  _process (vm, el, k, v) { el[`on${k}`] = e => v.call(el, e, vm) }
}('events'))

const getRandom = () => parseInt(Math.random() * 150) + 100
const wrapper = ViewModel.get({
  styles: { width: '50%', background: '#ffa', cursor: 'pointer' },
  events: {
    click(e, vm) {
      vm.parent.isStop = true
    }
  }
})
const title = ViewModel.get({ properties: { innerHTML: 'Title' } })
const contents = ViewModel.get({ properties: { innerHTML: 'Contents' } })
const rootViewModel = ViewModel.get({
  isStop: false,
  changeContents () {
    this.wrapper.styles.background = `rgb(${getRandom()},${getRandom()},${getRandom()})`
    this.contents.properties.innerHTML = Math.random().toString(16).replace('.', '')
  },
  wrapper, title, contents
})
binder.watch(rootViewModel)
const f = () => {
  rootViewModel.changeContents()
  if (!rootViewModel.isStop) requestAnimationFrame(f)
}
requestAnimationFrame(f)
</script>
</body>
</html>