Replace domdiff library with morphdom

We added domdiff to replace the DiffDOM library
here:

87f54d1e88

DiffDOM had updated its code to be written to the
ECMAScript 6 (ES6) standard and so needed extra
work to work with the older browsers in our
support matrix. This was recorded as an issue
here:

https://www.pivotaltracker.com/n/projects/1443052/stories/165380360

Domdiff didn't work (see below for more details)
so this replaces it with the morphdom library.
Morphdom supports the same browsers as us and is
relied on by a range of large open source
projects:

https://github.com/patrick-steele-idem/morphdom#what-projects-are-using-morphdom

It was tricky to find alternatives to DiffDOM so
if we have to source alternatives in future, other
options could be:
- https://github.com/choojs/nanomorph
- https://diffhtml.org/index.html (using its
  outerHTML method)

Why domdiff didn't work

Turns out that domdiff was replacing the page HTML
with the HTML from the AJAX response every time,
not just when they differed. This isn't a bug.
Domdiff is bare bones enough that it compares old
DOM nodes to new DOM nodes with ===. With our
code, this always results to false because our new
nodes are made from HTML strings from AJAX
response so are never the same node as the old
one.
This commit is contained in:
Tom Byers
2022-01-27 10:44:20 +00:00
parent 2224eacf6b
commit 77f7d1453c
5 changed files with 26 additions and 23 deletions

View File

@@ -31,13 +31,12 @@ beforeAll(() => {
$.ajax.mockImplementation(() => jqueryAJAXReturnObj);
// using require to execute the version we use in our our frontend build here can't add
// the domdiff variable to this scope like it does when executed in browsers because
// that version doesn't export it
// we use CommonJS version instead because it does (as the default property)
// see https://nodejs.org/en/knowledge/getting-started/what-is-require/ for more info
// also, we're not a browser so we need to manually attach domdiff to window
window.domdiff = require('domdiff/cjs').default;
// RollupJS assigns our bundled module code, including morphdom, to window.GOVUK.
// morphdom is assigned to its vendor property so we need to copy that here for the updateContent
// code to pick it up.
window.GOVUK.vendor = {
morphdom: require('morphdom')
};
require('../../app/assets/javascripts/updateContent.js');
});