Try constant for undefined (#4552)

Author: JoviDeCroock

src/clone-element.js

@@ -1,5 +1,6 @@
 import { assign, slice } from './util';
 import { createVNode } from './create-element';
+import { UNDEFINED } from './constants';
 
 /**
  * Clones the given VNode, optionally adding attributes/props and replacing its
@@ -25,7 +26,7 @@ export function cloneElement(vnode, props, children) {
 	for (i in props) {
 		if (i == 'key') key = props[i];
 		else if (i == 'ref') ref = props[i];
-		else if (props[i] === undefined && defaultProps !== undefined) {
+		else if (props[i] === UNDEFINED && defaultProps !== UNDEFINED) {
 			normalizedProps[i] = defaultProps[i];
 		} else {
 			normalizedProps[i] = props[i];

src/constants.js

@@ -10,6 +10,7 @@ export const MATCHED = 1 << 17;
 /** Reset all mode flags */
 export const RESET_MODE = ~(MODE_HYDRATE | MODE_SUSPENDED);
 
+export const UNDEFINED = undefined;
 export const EMPTY_OBJ = /** @type {any} */ ({});
 export const EMPTY_ARR = [];
 export const IS_NON_DIMENSIONAL =

src/create-element.js

@@ -1,5 +1,6 @@
 import { slice } from './util';
 import options from './options';
+import { UNDEFINED } from './constants';
 
 let vnodeId = 0;
 
@@ -32,7 +33,7 @@ export function createElement(type, props, children) {
 	// Note: type may be undefined in development, must never error here.
 	if (typeof type == 'function' && type.defaultProps != null) {
 		for (i in type.defaultProps) {
-			if (normalizedProps[i] === undefined) {
+			if (normalizedProps[i] === UNDEFINED) {
 				normalizedProps[i] = type.defaultProps[i];
 			}
 		}
@@ -70,9 +71,9 @@ export function createVNode(type, props, key, ref, original) {
 		// be set to dom.nextSibling which can return `null` and it is important
 		// to be able to distinguish between an uninitialized _nextDom and
 		// a _nextDom that has been set to `null`
-		_nextDom: undefined,
+		_nextDom: UNDEFINED,
 		_component: null,
-		constructor: undefined,
+		constructor: UNDEFINED,
 		_original: original == null ? ++vnodeId : original,
 		_index: -1,
 		_flags: 0
@@ -98,4 +99,4 @@ export function Fragment(props) {
  * @returns {vnode is VNode}
  */
 export const isValidElement = vnode =>
-	vnode != null && vnode.constructor == undefined;
+	vnode != null && vnode.constructor == UNDEFINED;

src/diff/children.js

@@ -1,6 +1,12 @@
 import { diff, unmount, applyRef } from './index';
 import { createVNode, Fragment } from '../create-element';
-import { EMPTY_OBJ, EMPTY_ARR, INSERT_VNODE, MATCHED } from '../constants';
+import {
+	EMPTY_OBJ,
+	EMPTY_ARR,
+	INSERT_VNODE,
+	MATCHED,
+	UNDEFINED
+} from '../constants';
 import { isArray } from '../util';
 import { getDomSibling } from '../component';
 
@@ -113,7 +119,7 @@ export function diffChildren(
 			oldDom = insert(childVNode, oldDom, parentDom);
 		} else if (
 			typeof childVNode.type == 'function' &&
-			childVNode._nextDom !== undefined
+			childVNode._nextDom !== UNDEFINED
 		) {
 			// Since Fragments or components that return Fragment like VNodes can
 			// contain multiple DOM nodes as the same level, continue the diff from
@@ -128,7 +134,7 @@ export function diffChildren(
 		// after diffing Components and Fragments. Once we store it the nextDOM
 		// local var, we can clean up the property. Also prevents us hanging on to
 		// DOM nodes that may have been unmounted.
-		childVNode._nextDom = undefined;
+		childVNode._nextDom = UNDEFINED;
 
 		// Unset diffing flags
 		childVNode._flags &= ~(INSERT_VNODE | MATCHED);
@@ -206,7 +212,7 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) {
 				null,
 				null
 			);
-		} else if (childVNode.constructor === undefined && childVNode._depth > 0) {
+		} else if (childVNode.constructor === UNDEFINED && childVNode._depth > 0) {
 			// VNode is already in use, clone it. This can happen in the following
 			// scenario:
 			//   const reuse = <div />

src/diff/index.js

@@ -2,7 +2,8 @@ import {
 	EMPTY_OBJ,
 	MODE_HYDRATE,
 	MODE_SUSPENDED,
-	RESET_MODE
+	RESET_MODE,
+	UNDEFINED
 } from '../constants';
 import { BaseComponent, getDomSibling } from '../component';
 import { Fragment } from '../create-element';
@@ -47,7 +48,7 @@ export function diff(
 
 	// When passing through createElement it assigns the object
 	// constructor as undefined. This to prevent JSON-injection.
-	if (newVNode.constructor !== undefined) return null;
+	if (newVNode.constructor !== UNDEFINED) return null;
 
 	// If the previous diff bailed out, resume creating/hydrating.
 	if (oldVNode._flags & MODE_SUSPENDED) {
@@ -317,7 +318,7 @@ export function diff(
  * @param {VNode} root
  */
 export function commitRoot(commitQueue, root, refQueue) {
-	root._nextDom = undefined;
+	root._nextDom = UNDEFINED;
 
 	for (let i = 0; i < refQueue.length; i++) {
 		applyRef(refQueue[i], refQueue[++i], refQueue[++i]);
@@ -534,7 +535,7 @@ function diffElementNodes(
 			if (nodeType === 'progress' && inputValue == null) {
 				dom.removeAttribute('value');
 			} else if (
-				inputValue !== undefined &&
+				inputValue !== UNDEFINED &&
 				// #2756 For the <progress>-element the initial value is 0,
 				// despite the attribute not being present. When the attribute
 				// is missing the progress bar is treated as indeterminate.
@@ -550,7 +551,7 @@ function diffElementNodes(
 			}
 
 			i = 'checked';
-			if (checked !== undefined && checked !== dom[i]) {
+			if (checked !== UNDEFINED && checked !== dom[i]) {
 				setProperty(dom, i, checked, oldProps[i], namespace);
 			}
 		}
@@ -633,7 +634,7 @@ export function unmount(vnode, parentVNode, skipRemove) {
 
 	// Must be set to `undefined` to properly clean up `_nextDom`
 	// for which `null` is a valid value. See comment in `create-element.js`
-	vnode._component = vnode._parent = vnode._dom = vnode._nextDom = undefined;
+	vnode._component = vnode._parent = vnode._dom = vnode._nextDom = UNDEFINED;
 }
 
 /** The `.render()` method for a PFC backing instance. */