mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-05 08:31:00 -04:00
Replace diffDOM library with domdiff
A while ago diffDOM moved its code to use ES6 modules and started using various language features specific to ES6. These two things happened independently btw. The result of this is that the version of diffDOM suitable for our build pipeline, structured as an immediately invoked function evocation (IIFE), now requires polyfills of some ES6 features to work in the older browsers we support, like IE11. It's also worth noting that in the move to ES6 the maintainers of diffDOM have adopted a process whereby users who need to support older browsers now have to add polyfill code for any ES6 features they choose to use. This commmit proposes a move to the domdiff library instead because: - it runs on all javascript runtimes with no polyfills - it is 2KB instead of diffDOM's 25KB Domdiff takes a different approach to diffDOM, in that it compares existing nodes and new nodes and replaces the existing ones with the new ones if there are differences. By contrast, diffDOM will make in-place changes to nodes if there are enough similarities. In other words, in most situations, diffDOM won't change the node in $component whereas domdiff will. Because of this, I've had to change the updateContent.js code to cache the data-key attribute's value so we don't lose access to it by overwrite the $component variable with a different jQuery selection.
This commit is contained in:
@@ -31,9 +31,11 @@ beforeAll(() => {
|
||||
|
||||
$.ajax.mockImplementation(() => jqueryAJAXReturnObj);
|
||||
|
||||
// because we're running in node, diffDOM executes as a module
|
||||
// in the normal browser environment it will attach to window so we replicate that here
|
||||
window.diffDOM = require('../../node_modules/diff-dom/diffDOM.js');
|
||||
// because we're running in node, we can't execute the normal domdiff code like a browser because
|
||||
// its variables (actually only one: domdiff) stay local to it
|
||||
// in the normal browser environment it will attach to window so we replicate that here by using
|
||||
// the CommonJS module version and assigning it to window
|
||||
window.domdiff = require('domdiff/cjs').default;
|
||||
require('../../app/assets/javascripts/updateContent.js');
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user