How to use the diff-dom.DiffDOM function in diff-dom

To help you get started, we’ve selected a few diff-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github supermedium / aframe-super-hot-loader / html / hot.template.js View on Github external
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'));
    });

diff-dom

A diff for DOM elements, as client-side JavaScript code. Gets all modifications, insertions and removals between two DOM fragments.

LGPL-3.0
Latest version published 5 months ago

Package Health Score

67 / 100
Full package analysis

Popular diff-dom functions