Remove IE11 unmount hack

Author: JoviDeCroock

src/diff/index.js

@@ -9,7 +9,7 @@ import { BaseComponent, getDomSibling } from '../component';
 import { Fragment } from '../create-element';
 import { diffChildren } from './children';
 import { setProperty } from './props';
-import { assign, isArray, removeNode, slice } from '../util';
+import { assign, isArray, slice } from '../util';
 import options from '../options';
 
 /**
@@ -531,7 +531,7 @@ function diffElementNodes(
 			// Remove children that are not part of any vnode.
 			if (excessDomChildren != null) {
 				for (i = excessDomChildren.length; i--; ) {
-					removeNode(excessDomChildren[i]);
+					if (excessDomChildren[i]) excessDomChildren[i].remove();
 				}
 			}
 		}
@@ -635,8 +635,8 @@ export function unmount(vnode, parentVNode, skipRemove) {
 		}
 	}
 
-	if (!skipRemove) {
-		removeNode(vnode._dom);
+	if (!skipRemove && vnode._dom != null && typeof vnode.type != 'function') {
+		vnode._dom.remove();
 	}
 
 	vnode._component = vnode._parent = vnode._dom = UNDEFINED;

src/internal.d.ts

@@ -99,6 +99,7 @@ declare global {
 		readonly attributes?: Element['attributes'];
 		setAttribute?: Element['setAttribute'];
 		removeAttribute?: Element['removeAttribute'];
+		remove?: Element['remove'];
 
 		// Event listeners
 		addEventListener?: Element['addEventListener'];

src/util.js

@@ -3,13 +3,3 @@ import { EMPTY_ARR } from './constants';
 export const isArray = Array.isArray;
 export const assign = Object.assign;
 export const slice = EMPTY_ARR.slice;
-
-/**
- * Remove a child node from its parent if attached. This is a workaround for
- * IE11 which doesn't support `Element.prototype.remove()`. Using this function
- * is smaller than including a dedicated polyfill.
- * @param {preact.ContainerNode} node The node to remove
- */
-export function removeNode(node) {
-	if (node && node.parentNode) node.parentNode.removeChild(node);
-}

test/_util/logCall.js

@@ -31,10 +31,6 @@ export function logCall(obj, method) {
 
 		let operation;
 		switch (method) {
-			case 'removeChild': {
-				operation = `${serialize(c)}.remove()`;
-				break;
-			}
 			case 'insertBefore': {
 				if (args[1] === null && args.length === 2) {
 					operation = `${serialize(this)}.appendChild(${serialize(args[0])})`;

test/browser/fragments.test.js

@@ -31,12 +31,14 @@ describe('Fragment', () => {
 
 	let resetInsertBefore;
 	let resetAppendChild;
-	let resetRemoveChild;
+	let resetRemove;
+	let resetRemoveText;
 
 	before(() => {
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
-		resetRemoveChild = logCall(Element.prototype, 'removeChild');
+		resetRemove = logCall(Element.prototype, 'remove');
+		resetRemoveText = logCall(Text.prototype, 'remove');
 		// logCall(CharacterData.prototype, 'remove');
 		// TODO: Consider logging setting set data
 		// ```
@@ -52,7 +54,8 @@ describe('Fragment', () => {
 	after(() => {
 		resetInsertBefore();
 		resetAppendChild();
-		resetRemoveChild();
+		resetRemove();
+		resetRemoveText();
 	});
 
 	beforeEach(() => {

test/browser/hydrate.test.js

@@ -25,28 +25,31 @@ describe('hydrate()', () => {
 
 	let resetAppendChild;
 	let resetInsertBefore;
-	let resetRemoveChild;
 	let resetRemove;
+	let resetRemoveText;
+	let resetRemoveComment;
 	let resetSetAttribute;
 	let resetRemoveAttribute;
 	let rerender;
 
 	before(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
-		resetRemoveChild = logCall(Element.prototype, 'removeChild');
 		resetRemove = logCall(Element.prototype, 'remove');
+		resetRemoveComment = logCall(Comment.prototype, 'remove');
+		resetRemoveText = logCall(Text.prototype, 'remove');
 		resetSetAttribute = logCall(Element.prototype, 'setAttribute');
 		resetRemoveAttribute = logCall(Element.prototype, 'removeAttribute');
 	});
 
 	after(() => {
 		resetAppendChild();
 		resetInsertBefore();
-		resetRemoveChild();
 		resetRemove();
+		resetRemoveText();
 		resetSetAttribute();
 		resetRemoveAttribute();
+		resetRemoveComment();
 	});
 
 	beforeEach(() => {

test/browser/keys.test.js

@@ -57,19 +57,22 @@ describe('keys', () => {
 	let resetInsertBefore;
 	let resetRemoveChild;
 	let resetRemove;
+	let resetRemoveText;
 
 	before(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
 		resetRemoveChild = logCall(Element.prototype, 'removeChild');
 		resetRemove = logCall(Element.prototype, 'remove');
+		resetRemoveText = logCall(Text.prototype, 'remove');
 	});
 
 	after(() => {
 		resetAppendChild();
 		resetInsertBefore();
 		resetRemoveChild();
 		resetRemove();
+		resetRemoveText();
 	});
 
 	beforeEach(() => {

test/browser/placeholders.test.js

@@ -56,20 +56,20 @@ describe('null placeholders', () => {
 
 	let resetAppendChild;
 	let resetInsertBefore;
-	let resetRemoveChild;
+	let resetRemoveText;
 	let resetRemove;
 
 	before(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
-		resetRemoveChild = logCall(Element.prototype, 'removeChild');
 		resetRemove = logCall(Element.prototype, 'remove');
+		resetRemoveText = logCall(Text.prototype, 'remove');
 	});
 
 	after(() => {
 		resetAppendChild();
 		resetInsertBefore();
-		resetRemoveChild();
+		resetRemoveText();
 		resetRemove();
 	});
 

test/browser/render.test.js

@@ -31,7 +31,7 @@ describe('render()', () => {
 
 	let resetAppendChild;
 	let resetInsertBefore;
-	let resetRemoveChild;
+	let resetRemoveText;
 	let resetRemove;
 
 	beforeEach(() => {
@@ -46,14 +46,14 @@ describe('render()', () => {
 	before(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
-		resetRemoveChild = logCall(Element.prototype, 'removeChild');
+		resetRemoveText = logCall(Text.prototype, 'remove');
 		resetRemove = logCall(Element.prototype, 'remove');
 	});
 
 	after(() => {
 		resetAppendChild();
 		resetInsertBefore();
-		resetRemoveChild();
+		resetRemoveText();
 		resetRemove();
 	});