Merge pull request #4143 from alphagov/swap-domdiff-for-morphdom

Replace domdiff library with morphdom

app/assets/javascripts/modules/all.mjs

@@ -6,11 +6,16 @@
 //
 // Exported items will be added to the window.GOVUK namespace.
 // For example, `export { Frontend }` will assign `Frontend` to `window.Frontend`
+
+// GOVUK Frontend modules
 import Header from 'govuk-frontend/components/header/header';
 import Details from 'govuk-frontend/components/details/details';
 import Button from 'govuk-frontend/components/button/button';
 import Radios from 'govuk-frontend/components/radios/radios';
 
+// Modules from 3rd party vendors
+import morphdom from 'morphdom';
+
 /**
  * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
  * This seems to fail in IE8, requires more investigation.
@@ -62,6 +67,13 @@ var Frontend = {
   "initAll": initAll
 }
 
-export {
-  Frontend
+var vendor = {
+  "morphdom": morphdom
+}
+
+// The exported object will be assigned to window.GOVUK in our production code
+// (bundled into an IIFE by RollupJS)
+export {
+  Frontend,
+  vendor
 }

app/assets/javascripts/updateContent.js

@@ -2,6 +2,7 @@
   "use strict";
 
   var queues = {};
+  var morphdom = global.GOVUK.vendor.morphdom;
   var defaultInterval = 2000;
   var interval = 0;
 
@@ -10,18 +11,10 @@
       1000
   ));
 
-  var getRenderer = $component => {
-    var key = $component.data('key'); // use closure to retain key when component is replaced
-    return response => {
-      $component = $(
-        global.domdiff(
-          $component.parent().get(0),
-          [$component.get(0)],
-          [$(response[key]).get(0)]
-        )[0]
-      );
-    };
-  };
+  var getRenderer = $component => response => morphdom(
+    $component.get(0),
+    $(response[$component.data('key')]).get(0)
+  );
 
   var getQueue = resource => (
     queues[resource] = queues[resource] || []