Takes an AB test and replaces Custom HTML for JavaScript.

migrate.js

function migrate(param, value) {
  var css = document.createElement("style");
  css.innerHTML = `
.dt-el[data-rm-data-rm-friendly-name^="REPLACEMENT"] .dt-el-frame {background-color: yellow !important; color: black !important;}
.dt-el[data-rm-data-rm-friendly-name^="REPLACEMENT"][data-rm-data-rm-selected="true"] .dt-el-frame { background-color: gold !important; }
`;
  document.head.appendChild(css);
  var nameAttr = "data-rm-friendly-name";
  var doc = store.page.document;
  var abtest = doc.querySelector(
    `abtest[query-param="${param}"][query-value="${value}"]`
  );
  var userCodes = Array.from(abtest.querySelectorAll("user_code"));
  userCodes.forEach(node => {
    console.group("Replacing", node);
    const html = node.textContent.trim();
    const name = node.getAttribute(nameAttr) || "Untitled";
    const wrapper = document.createElement("div");
    wrapper.innerHTML = html;
    const children = Array.from(wrapper.childNodes);
    const replacements = children.map((child, i) => {
      const newNodeName =
        child.localName === "script" ? "javascript" : "user_code";
      const code =
        newNodeName === "javascript" ? child.innerHTML : child.outerHTML;
      const replacement = doc.createElement(newNodeName);
      if (newNodeName === "javascript") {
        replacement.setAttribute("priority", "low");
      }
      replacement.innerHTML = `<![CDATA[${code}]]>`;
      replacement.setAttribute(nameAttr, `REPLACEMENT ${i}: ${name}`);
      return replacement;
    });
    const fragment = doc.createDocumentFragment();
    replacements.forEach(r => fragment.appendChild(r));
    node.replaceWith(fragment);
    console.log("Replaements", fragment);
    console.groupEnd();
  });
}