How to use somedom - 5 common examples

export function mountOverlay(overlay) {
  let w;
  let h;
  let clicked;

  const slider = mount(overlay.parentNode, ['div', { class: 'slider' }], tag);

  function sync() {
    w = overlay.parentNode.offsetWidth;
    h = overlay.parentNode.offsetHeight;

    overlay.style.width = `${w / 2}px`;

    slider.style.left = `${(w / 2) - (slider.offsetWidth / 2)}px`;
    slider.style.top = `${(h / 2) - (slider.offsetHeight / 2)}px`;
  }

  function slide(x) {
    overlay.style.width = `${x}px`;
    slider.style.left = `${overlay.offsetWidth - (slider.offsetWidth / 2)}px`;
  }

['button.noop', { onclick: () => openModal(key, true, images) }, 'Open diff'],
        ['button.noop', { onclick: () => openModal(key, false, images) }, 'Compare'],
      ]],
    ]],
  ]];
}

function ImageList() {
  if (!images.length) {
    return ['ul', [['li', 'No differences to report']]];
  }

  return ['ul', images.map((x, key) => ImageItem(x, key))];
}

mount([ImageList], tag);

import {
  bind, view, mount, unmount, render, listeners, attributes, classes,
} from 'somedom';

export const tag = bind(render, listeners(), attributes({
  class: classes,
}));

export function mountOverlay(overlay) {
  let w;
  let h;
  let clicked;

  const slider = mount(overlay.parentNode, ['div', { class: 'slider' }], tag);

  function sync() {
    w = overlay.parentNode.offsetWidth;
    h = overlay.parentNode.offsetHeight;

    overlay.style.width = `${w / 2}px`;

teardown() {
      slider.removeEventListener('mousedown', slideReady);
      slider.removeEventListener('touchstart', slideReady);
      window.removeEventListener('mouseup', slideFinish);
      window.removeEventListener('touchstop', slideFinish);
      window.removeEventListener('mousemove', slideMove);
      window.removeEventListener('touchmove', slideMove);
      unmount(slider);
    },
  };

}
  }

  function addOverlay() {
    return mountOverlay(document.querySelector('.overlay'));
  }

  function syncOverlay() {
    if (overlay) {
      overlay.update();
    }
  }

  window.addEventListener('keyup', testKeys);

  const app = view(({ key, diff }) => ['.noop.modal', { onclick: closeModal }, [
    ['.container', { style: `width:${images[key].width}px;height:${images[key].height}px`, onupdate: syncOverlay },
      (diff
        ? [
          ['img', { src: images[key].images.out }],
        ] : [
          ['.layer', [
            ['img.a', { src: images[key].images.actual }],
          ]],
          ['.layer.overlay', [
            ['img.b', { src: images[key].images.base }],
          ]],
        ])
        .concat([
          ['button.close', { onclick: () => closeModal() }, '×'],
        ]),
    ],