#isUpdated = new Set; #listeners = new Set;
    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));
    }

    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);
    }

//설명1
const ViewModelSubject = class extends ViewModelListener {
  #info = new Set()
  #listeners = new Set()
  //설명2 add, clear
  add(v, _ = type(v, ViewModelValue)) {
    this.#info.add(v)
  }
  clear() {
    this.#info.clear()
  }
  addListener(v, _ = type(v, ViewModelListener)) {
    this.#listeners.add(v)
    //설명3
    ViewModelSubject.watch(this)
  }
  removeListener(v, _ = type(v, ViewModelListener)) {
    this.#listeners.delete(v)
    //설명4
    if (!this.#listeners.size) ViewModelSubject.unwatch(this)
  }
  notify() {
    this.#listeners.forEach(v => v.viewmodelUpdated(this.#info))
  }
}

const ViewModelSubject = class extends ViewModelListener {
  #info = new Set()
  #listeners = new Set()
  add(v, _ = type(v, ViewModelValue)) {
    this.#info.add(v)
  }
  clear() {
    this.#info.clear()
  }
  addListener(v, _ = type(v, ViewModelListener)) {
    this.#listeners.add(v)
    ViewModelSubject.watch(this)
  }
  removeListener(v, _ = type(v, ViewModelListener)) {
    this.#listeners.delete(v)
    if (!this.#listeners.size) ViewModelSubject.unwatch(this)
  }
  notify() {
    this.#listeners.forEach(v => v.viewmodelUpdated(this.#info))
  }
}

    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);
    }

const ViewModelSubject = class extends ViewModelListener {
  //... 위 코드 참고

  static #subjects = new Set()
  static #inited = false
  static notify() {
    const f = _ => {
      this.#subjects.forEach(v => {
        if (v.#info.size) {
          v.notify()
          v.clear()
        }
      })
      //설명1
      if (this.#inited) requestAnimationFrame(f)
    }
    requestAnimationFrame(f)
  }

  //설명2
  static watch(vm, _ = type(vm, ViewModelListener)) {
    this.#subjects.add(vm) //set에 add해도 변화 x
    if (!this.#inited) {
      this.#inited = true
      this.notify()
    }
  }

  //설명3
  static unwatch(vm, _ = type(vm, ViewModelListener)) {
    this.#subjects.delete(vm)
    if (!this.#subjects.size) this.#inited = false
  }
}

const ViewModel = class extends ViewModelSubject {
  static get(data) {
    return new ViewModel(data)
  }
  styles = {}
  attributes = {}
  properties = {}
  events = {}

  //설명1 readonly
  #subKey = ""
  get subKey() {
    return this.#subKey
  }
  #parent = null
  get parent() {
    return this.#parent
  }

  //설명2 [설명6과 관련]Transaction 연산
  setParent(parent, subKey) {
    this.#parent = type(parent, ViewModel)
    this.#subKey = subKey
    this.addListener(parent)
  }

  constructor(data, _ = type(data, "object")) {
    super()
    Object.entries(data).forEach(([cat, obj]) => {
      if ("styles,attributes,properties".includes(cat)) {
        if (!obj || typeof obj != "object")
          throw `invalid object cat:${cat}, obj:${obj}`
        this[cat] = Object.defineProperties(
          {},
          Object.entries(obj).reduce((r, [k, v]) => {
            r[k] = {
              enumerable: true,
              get: _ => v,
              set: newV => {
                v = newV
                //설명3 update할 객체 세팅 방법 변경
                this.add(new ViewModelValue(this.#subKey, cat, k, v))
              },
            }
            return r
          }, {})
        )
      } else {
        Object.defineProperties(this, {
          [cat]: {
            enumerable: true,
            get: _ => obj,
            set: newV => {
              obj = newV
              //설명3 update할 객체 세팅 방법 변경
              this.add(new ViewModelValue(this.#subKey, "root", cat, obj))
            },
          },
        })
        //설명6 [설명2와 관련]트렌젝션으로 setParent로 한번에 처리
        if (obj instanceof ViewModel) obj.setParent(this, cat)
      }
    })
    //설명4 ViewModel.notify(this); 제거
    //ViewModel.notify(this);
    Object.seal(this)
  }
  //설명5 viewModel
  viewmodelUpdated(updated) {
    updated.forEach(v => this.add(v))
  }
}

const Scanner = class {
  scan(el, _ = type(el, HTMLElement)) {
    const binder = new Binder()
    this.checkItem(binder, el)

    //설명2 Visitor 패턴 적용 대상
    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)
    }
    //설명2-end

    return binder
  }
  checkItem(binder, el) {
    //설명1 스캐너 역할
    const vm = el.getAttribute("data-viewmodel")
    if (vm) binder.add(new BinderItem(el, vm))
  }
}

const Visitor = class {
  //설명1
  visit(action, target, _0 = type(action, "function")) {
    throw "override"
  }
}

const DomVisitor = class extends Visitor {
  //설명2 Generic
  visit(
    action,
    target,
    _0 = type(action, "function"),
    _1 = type(target, HTMLElement)
  ) {
    const stack = []
    let curr = target.firstElementChild
    do {
      action(curr)
      if (curr.firstElementChild) stack.push(curr.firstElementChild)
      if (curr.nextElementSibling) stack.push(curr.nextElementSibling)
    } while ((curr = stack.pop()))
  }
}

const Scanner = class {
  #visitor
  constructor(visitor, _ = type(visitor, DomVisitor)) {
    this.#visitor = visitor
  }
  scan(target, _ = type9target, HTMLElement) {
    const binder = new Binder()
    const f = el => {
      const vm = el.getAttribute("data-viewmodel")
      if (vm) binder.add(new BinderItem(el, vm))
    }
    f(target)
    this.#visitor.visit(f, target)
    return binder
  }
}

const ViewModelListener = class {}
const ViewModelSubject = class extends ViewModelListener {}
const ViewModel = class extends ViewModelSubject {}
const ViewModelValue = class {}

const BinderItem = class {}
const Binder = class extends ViewModelListener {}

const Processor = class {}

const Scanner = class {}
const DomScanner = class extends Scanner {}

const Visitor = class {}
const DomVisitor = class extends Visitor {}

const scanner = new DomScanner(new DomVisitor())

binder.addProcessor(new (class extends Processor {})())
binder.addProcessor(new (class extends Processor {})())
binder.addProcessor(new (class extends Processor {})())
binder.addProcessor(new (class extends Processor {})())

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MVVM 4회</title>
  </head>

  <body>
    <section id="target" data-viewmodel="wrapper">
      <h2 data-viewmodel="title"></h2>
      <section data-viewmodel="contents"></section>
    </section>

    <script></script>
  </body>
</html>

  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 ViewModelSubject = class extends ViewModelListener {
    static #subjects = new Set;
    static #inited = false;
    static notify() {
      const f = () => {
        this.#subjects.forEach(v => {
          if (v.#info.size) {
            v.notify();
            v.clear();
          }
        })
        if (this.#inited) requestAnimationFrame(f);
      }
      requestAnimationFrame(f);
    }
    static watch(vm, _ = type(vm, ViewModelListener)) {
      this.#subjects.add(vm);
      if (!this.#inited) {
        this.#inited = true;
        this.notify();
      }
    }
    static unwatch(vm, _ = type(vm, ViewModelListener)) {
      this.#subjects.delete(vm);
      if (!this.#subjects.size) this.#inited = false;
    }
    #info = new Set;
    #listeners = new Set;
    add(v, _ = type(v, ViewModelValue)) {
      this.#info.add(v);
    }
    clear() {
      this.#info.clear();
    }
    addListener(v, _ = type(v, ViewModelListener)) {
      this.#listeners.add(v);
      ViewModelSubject.watch(this);
    }
    removeListener(v, _ = type(v, ViewModelListener)) {
      this.#listeners.delete(v);
      if (!this.#listeners.size) ViewModelSubject.unwatch(this);
    }
    notify() {
      this.#listeners.forEach(v => v.viewmodelUpdated(this.#info));
    }
  }


  const ViewModel = class extends ViewModelSubject {
    static get(data) {
      return new ViewModel(data);
    }
    styles = {};
    attributes = {};
    properties = {};
    events = {};
    #subKey = '';
    #parent = null;

    get subKey() {
      return this.#subKey;
    }
    // read only
    get parent() {
      return this.#parent;
    }
    setParent(parent, subKey) {
      this.#parent = type(parent, ViewModel);
      this.#subKey = subKey;
      this.addListener(parent);
    }

    static descriptor = (vm, category, k, v) => ({
      enumerable: true,
      get: () => v,
      set(newV) {
        v = newV;
        vm.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), {})
      )
    )
    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.setParent(this, k);
          }
        }
      })
      Object.seal(this);
    }
    viewmodelUpdated(updated) {
      updated.forEach(v => this.add(v));
    }
  }

  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 {
    #visitor

    constructor(visitor, _ = type(visitor, Visitor)) {
      this.#visitor = visitor;
    }
    visit(f, target) {
      this.#visitor.visit(f, target);
    }
    scan(target) {
      throw `override`;
    }
  }

  const DomScanner = class extends Scanner {
    constructor(visitor, _ = type(visitor, DomVisitor)) {
      super(visitor);
    }
    scan(target, _ = type(target, HTMLElement)) {
      const binder = new Binder;
      const f = el => {
        const vm = el.getAttribute('data-viewmodel');
        if (vm) binder.add(new BinderItem(el, vm));
      }
      f(target);
      this.visit(f, target);
      return binder;
    }
  }

  const Visitor = class {
    visit(action, target, _ = type(action, 'function')) {
      throw 'override';
    }
  }
  const DomVisitor = class extends Visitor {
    visit(action, target, _0 = type(action, 'function'), _1 = type(target, HTMLElement)) {
      const stack = [];
      let curr = target.firstElementChild;
      do {
        action(curr);
        if (curr.firstElementChild) stack.push(curr.firstElementChild);
        if (curr.nextElementSibling) stack.push(curr.nextElementSibling);
      } while (curr = stack.pop());
    }
  }

  const scanner = new DomScanner(new DomVisitor);
  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);