edge-extensions.js

var changeMap = {
  ".app-theme-item-wrapper .btn--primary": [
    function(el) { el.style.setProperty('background-color','rgba(252, 0, 0, 1)','important'); },function(el) { el.style.setProperty('border-color','rgba(252, 0, 0, 1)','important'); },
  ],
  ".banner-status": [
    function(el) { el.innerHTML = '88 viewed per hour'; },function(el) { el.style.setProperty('background-color','rgba(73, 214, 160, 1)','important'); },
  ],
  ".icon-image": [
    function(el) { el.style = 'display: block;'; },
  ],
  ".display-price": [
    function(el) { el.style.setProperty('font-size','80px','important'); },
  ],
  "#w4-w4-w0-atcBtn": [
    function(el) { if (el) el.remove() },
  ],
  ".icon-text-wrapper": [
    function(el) { el.insertAdjacentHTML('beforeend', '<p style="text-align: left; margin: 0.5em 0 1em;">Worry-free shopping. Get the item you ordered or your money back.</p>'); },
  ]
}

/**
 * Extensions
 */
var extensions = [
  function() {
    var config = {
      butterbarTitle: 'hello',
      butterbarContents: '<p>my butterbar</p>',
    }
    instanceId = 'uuid from change'

    extensionsRuntime.butterbar({config, instanceId})
  },
].forEach(fn => fn())

// several of these 1-1 with changes for experiment/view extension changes
// ExtensionChangeConfig
;(function() {
  var config = {
    butterbarTitle: 'hello',
    butterbarContents: '<p>my butterbar</p>',
  }
  instanceId = 'uuid from change'

  extensionsRuntime.butterbar({config, instanceId})
})()


// ExtensionRuntime
// includes Hogan
// polyfills - jquery, utils.waitForElement
var extensionsRuntime = {
  // this is apply_js + css
  butterbar: function({ config, instanceId }) {
    var $ = window.optimizely.get('jquery');
    var widget = config;
    // templateFn would be inlined as astring
    var _template = new Hogan(${templateFn})

    // this would all be edge built
    widget.$id = "${widget.plugin_id}";
    widget.$instance = instanceId
    widget.$render = _template.render.bind(_template)
    // defaults would be built on edge
    widget.$fieldDefaults = ${defaultsString};
    // also on edge - has to do with defaluts
    (${backFillerFn})(widget);
    widget.$html = _template.render({ widget: widget, extension: widget })
    var extension = widget;
    // built on edge
    ${cssString}
    // built on edge 
    ${widget.options.apply_js}
  }
}


















console.log('Running variation B');
var styleTag = document.createElement('style');
var css = 'body {  border: 10px solid goldenrod !important}'
styleTag.type = 'text/css';
styleTag.appendChild(document.createTextNode('body {  border: 10px solid goldenrod !important}'));
document.head.appendChild(styleTag)

var targetNode = document;
var config = {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: true,
};
var selectorsToObserve = [".app-theme-item-wrapper .btn--primary",".banner-status",".icon-image",".display-price","#w4-w4-w0-atcBtn",".icon-text-wrapper"]
function callback(mutationsList, observer) {
  this.disconnect();
  for (var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      for (var addedNode of mutation.addedNodes) {
        for (var selectorString of selectorsToObserve) {
          if (addedNode.nodeType === 1 && addedNode.matches(selectorString)) {
            changeMap[selectorString].forEach(function(changeApplier) {
              changeApplier(addedNode)
            })
          }
        }
      }
    }
    if (mutation.type === 'characterData') {
      for (var selectorString of selectorsToObserve) {
        if (mutation.target && mutation.target.parentNode && mutation.target.parentNode.matches(selectorString)) {
          changeMap[selectorString].forEach(function(changeApplier) {
            changeApplier(mutation.target.parentNode)
          })
        }
      }
    }
  }
  this.observe(targetNode, config);
}
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);