How to use diff-dom - 3 common examples

constructor() {
        // elements
        this._setupUI();

        // states
        this.click = 'click.cms.structure';
        this.keyUpAndDown = 'keyup.cms.structure keydown.cms.structure';
        this.pointerUp = 'pointerup.cms';
        this.state = false;
        this.dragging = false;
        this.latestAction = [];
        ls.remove(storageKey);

        dd = new DiffDOM();

        // setup initial stuff
        const setup = this._setup();

        // istanbul ignore if
        if (typeof setup === 'undefined' && CMS.config.mode === 'draft') {
            this._preloadOppositeMode();
        }
        this._setupModeSwitcher();
        this._events();
        StructureBoard.actualizePlaceholders();

        setTimeout(() => this.highlightPluginFromUrl(), 0);
        this._listenToExternalUpdates();
    }

// istanbul ignore next: function is always reassigned
        this.timer = function() {};
        this.lockToolbar = false;

        // setup initial stuff
        if (!this.ui.toolbar.data('ready')) {
            this._events();
        }

        this._initialStates();

        // set a state to determine if we need to reinitialize this._events();
        this.ui.toolbar.data('ready', true);

        dd = new DiffDOM({
            preDiffApply(info) {
                if (
                    (info.diff.action === 'removeAttribute' || info.diff.action === 'modifyAttribute') &&
                    info.diff.name === 'style' &&
                    $('.cms-toolbar').is(info.node)
                ) {
                    return true;
                }
            }
        });
    },

container = document.createElement('div');
    container.id = 'app';
    document.body.appendChild(container);
  }
  container.innerHTML = html;
}

if (module.hot) {
  const DiffDom = require('diff-dom').DiffDOM;

  module.hot.accept();

  // HTML changed, diff.
  if (module.hot.data && module.hot.data.oldHtml) {
    const oldHtml = module.hot.data.oldHtml;
    const diffdom = new DiffDom();

    const oldScene = document.createElement('div');
    oldScene.innerHTML = oldHtml;

    const newScene = document.createElement('div');
    newScene.innerHTML = html;

    const diff = diffdom.diff(oldScene, newScene);
    diffdom.apply(document.getElementById('app'), diff);

    Array.from(newScene.querySelectorAll('template')).forEach(template => {
      const liveTemplate = document.getElementById(template.id);
      if (liveTemplate.innerHTML === template.innerHTML) { return; }
      liveTemplate.innerHTML = template.innerHTML;
      liveTemplate.dispatchEvent(new CustomEvent('templatemutate'));
    });