Untitled

const html = `<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document: A-FRAME</title>
</head>

<body>

<script src="main.bundle.js"></script><script src="vendor.bundle.js"></script></body>

</html>`;

// Initial inject HTML into document. Only run once.
document.addEventListener('DOMContentLoaded', append);

function append () {
  let container = document.getElementById('app');
  if (!container) {
    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'));
    });
  }

  // Store HTML for next module to diff.
  module.hot.dispose(data => {
    data.oldHtml = html;
  });
}