Only run the inert middleware when the properties have been changed (#888)

* only run inert for nodes when the options change

* cache the properties passed to inert

Author: agubler

src/core/middleware/inert.ts

@@ -1,11 +1,21 @@
 import { create, node, destroy } from '../vdom';
+import { createICacheMiddleware } from './icache';
 import { from as arrayFrom } from '../../shim/array';
 import Map from '../../shim/Map';
 import '../../shim/inert';
 
-const factory = create({ node, destroy });
+interface InertState {
+	[index: string]: {
+		enable: boolean;
+		invert: boolean;
+	};
+}
+
+const icache = createICacheMiddleware<InertState>();
+
+const factory = create({ node, destroy, icache });
 
-export const inert = factory(({ middleware: { node, destroy } }) => {
+export const inert = factory(({ middleware: { node, destroy, icache } }) => {
 	const inertInvertedNodeMap = new Map<string | number, any[]>();
 	destroy(() => {
 		inertInvertedNodeMap.forEach((nodes) => {
@@ -21,7 +31,11 @@ export const inert = factory(({ middleware: { node, destroy } }) => {
 			if (!domNode) {
 				return;
 			}
-
+			const previousSettings = icache.get(key);
+			if (previousSettings && enable === previousSettings.enable && invert === previousSettings.invert) {
+				return;
+			}
+			icache.set(key, { enable, invert });
 			if (invert) {
 				const inertNodes = inertInvertedNodeMap.get(key) || [];
 				if (enable) {

tests/core/unit/middleware/inert.ts

@@ -1,21 +1,37 @@
 import global from '../../../../src/shim/global';
-const { it } = intern.getInterface('bdd');
+const { it, beforeEach } = intern.getInterface('bdd');
 const { describe: jsdomDescribe } = intern.getPlugin('jsdom');
 const { assert } = intern.getPlugin('chai');
-import { sandbox } from 'sinon';
+import { stub } from 'sinon';
 
+import icacheMiddleware from '../../../../src/core/middleware/icache';
 import inertMiddleware from '../../../../src/core/middleware/inert';
 
-const sb = sandbox.create();
+let invalidatorStub = stub();
 
 jsdomDescribe('inert middleware', () => {
+	let icache = icacheMiddleware().callback({
+		properties: () => ({}),
+		children: () => [],
+		id: 'test-cache',
+		middleware: { invalidator: invalidatorStub, destroy: stub() }
+	});
+	beforeEach(() => {
+		icache = icacheMiddleware().callback({
+			properties: () => ({}),
+			children: () => [],
+			id: 'test-cache',
+			middleware: { invalidator: invalidatorStub, destroy: stub() }
+		});
+	});
 	it('should set node inert property', () => {
 		const node = global.document.createElement('div');
 
 		const inert = inertMiddleware().callback({
 			id: 'test',
 			middleware: {
-				destroy: sb.stub(),
+				icache,
+				destroy: stub(),
 				node: {
 					get() {
 						return node;
@@ -45,7 +61,8 @@ jsdomDescribe('inert middleware', () => {
 		const inert = inertMiddleware().callback({
 			id: 'test',
 			middleware: {
-				destroy: sb.stub(),
+				icache,
+				destroy: stub(),
 				node: {
 					get() {
 						return node;
@@ -77,11 +94,12 @@ jsdomDescribe('inert middleware', () => {
 		parent.appendChild(childTwo);
 		parent.appendChild(childThree);
 		parent.appendChild(node);
-		const destroyStub = sb.stub();
+		const destroyStub = stub();
 
 		const inert = inertMiddleware().callback({
 			id: 'test',
 			middleware: {
+				icache,
 				destroy: destroyStub,
 				node: {
 					get() {
@@ -103,4 +121,56 @@ jsdomDescribe('inert middleware', () => {
 		assert.strictEqual(childTwo.inert, false);
 		assert.strictEqual(childThree.inert, false);
 	});
+
+	it('should only set inert state when properties change', () => {
+		const parent = global.document.createElement('div');
+		const childOne = global.document.createElement('div');
+		const childTwo = global.document.createElement('div');
+		const childThree = global.document.createElement('div');
+		const childFour = global.document.createElement('div');
+		const node = global.document.createElement('div');
+		parent.appendChild(childOne);
+		parent.appendChild(childTwo);
+		parent.appendChild(childThree);
+		parent.appendChild(node);
+		let _inert = false;
+		const inertStub = stub();
+		Object.defineProperty(childFour, 'inert', {
+			get() {
+				return _inert;
+			},
+			set(value: boolean) {
+				_inert = value;
+				inertStub();
+			}
+		});
+		const destroyStub = stub();
+		const inert = inertMiddleware().callback({
+			id: 'test',
+			middleware: {
+				icache,
+				destroy: destroyStub,
+				node: {
+					get() {
+						return node;
+					}
+				}
+			},
+			properties: () => ({}),
+			children: () => []
+		});
+		inert.set('key', true, true);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, true);
+		assert.strictEqual(childTwo.inert, true);
+		assert.strictEqual(childThree.inert, true);
+		assert.strictEqual(inertStub.callCount, 0);
+		parent.appendChild(childFour);
+		inert.set('key', true, true);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, true);
+		assert.strictEqual(childTwo.inert, true);
+		assert.strictEqual(childThree.inert, true);
+		assert.strictEqual(inertStub.callCount, 0);
+	});
 });