Use single flag field for matched and insert (+28 B)

preactjs · Oct 30, 2023 · fd710b8 · fd710b8
1 parent bd51a73
commit fd710b8
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/jsx-runtime/src/index.js b/jsx-runtime/src/index.js
@@ -54,8 +54,7 @@ function createVNode(type, props, key, isStaticChildren, __source, __self) {
 		constructor: undefined,
 		_original: --vnodeId,
 		_index: -1,
-		_insert: false,
-		_matched: false,
+		_flags: 0,
 		__source,
 		__self
 	};

diff --git a/src/constants.js b/src/constants.js
@@ -1,3 +1,11 @@
+/** Indicates that this node needs to be inserted while patching children */
+export const INSERT_VNODE = 1 << 16;
+/** Indicates a VNode has been matched with another VNode in the diff */
+export const MATCHED = 1 << 17;
+
+/** Reset all mode flags */
+export const RESET_MODE = ~(INSERT_VNODE | MATCHED);
+
 export const EMPTY_OBJ = /** @type {any} */ ({});
 export const EMPTY_ARR = [];
 export const IS_NON_DIMENSIONAL =

diff --git a/src/create-element.js b/src/create-element.js
@@ -76,8 +76,7 @@ export function createVNode(type, props, key, ref, original) {
 		constructor: undefined,
 		_original: original == null ? ++vnodeId : original,
 		_index: -1,
-		_insert: false,
-		_matched: false
+		_flags: 0
 	};
 
 	// Only invoke the vnode hook if this was *not* a direct copy:

diff --git a/src/diff/children.js b/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 } from '../constants';
+import {
+	EMPTY_OBJ,
+	EMPTY_ARR,
+	INSERT_VNODE,
+	MATCHED,
+	RESET_MODE
+} from '../constants';
 import { isArray } from '../util';
 import { getDomSibling } from '../component';
 
@@ -77,7 +83,7 @@ export function diffChildren(
 	// unmounted.
 	for (i = 0; i < oldChildrenLength; i++) {
 		oldVNode = oldChildren[i];
-		if (oldVNode != null && !oldVNode._matched) {
+		if (oldVNode != null && (oldVNode._flags & MATCHED) === 0) {
 			if (oldDom == oldVNode._dom) {
 				oldDom = getDomSibling(oldVNode);
 
@@ -147,7 +153,10 @@ export function diffChildren(
 		}
 
 		if (typeof childVNode.type == 'function') {
-			if (childVNode._insert || oldVNode._children === childVNode._children) {
+			if (
+				childVNode._flags & INSERT_VNODE ||
+				oldVNode._children === childVNode._children
+			) {
 				oldDom = reorderChildren(childVNode, oldDom, parentDom);
 			} else if (childVNode._nextDom !== undefined) {
 				// Only Fragments or components that return Fragment like VNodes will
@@ -164,7 +173,7 @@ export function diffChildren(
 			// can clean up the property
 			childVNode._nextDom = undefined;
 		} else if (newDom) {
-			if (childVNode._insert) {
+			if (childVNode._flags & INSERT_VNODE) {
 				oldDom = placeChild(parentDom, newDom, oldDom);
 			} else {
 				oldDom = newDom.nextSibling;
@@ -185,7 +194,7 @@ export function diffChildren(
 		}
 
 		// Unset diffing flags
-		childVNode._insert = false;
+		childVNode._flags &= RESET_MODE;
 	}
 
 	newParentVNode._dom = firstChildDom;
@@ -322,7 +331,7 @@ function constructNewChildrenArray(
 				// property? We need it now so we can pull off the matchingIndex in
 				// diffChildren and when unmounting we can get the next DOM element by
 				// calling getDomSibling, which needs a complete oldTree
-				oldChildren[matchingIndex]._matched = true;
+				oldChildren[matchingIndex]._flags |= MATCHED;
 			}
 		}
 
@@ -365,7 +374,7 @@ function constructNewChildrenArray(
 			matchingIndex !== i + skew ||
 			(typeof childVNode.type != 'function' && isMounting)
 		) {
-			childVNode._insert = true;
+			childVNode._flags |= INSERT_VNODE;
 		}
 	}
 
@@ -464,7 +473,8 @@ function findMatchingIndex(
 	// if the oldVNode was null or matched, then there could needs to be at least
 	// 1 (aka `remainingOldChildren > 0`) children to find and compare against.
 	let shouldSearch =
-		remainingOldChildren > (oldVNode != null && !oldVNode._matched ? 1 : 0);
+		remainingOldChildren >
+		(oldVNode != null && (oldVNode._flags & MATCHED) === 0 ? 1 : 0);
 
 	if (
 		oldVNode === null ||
@@ -477,7 +487,7 @@ function findMatchingIndex(
 				oldVNode = oldChildren[x];
 				if (
 					oldVNode &&
-					!oldVNode._matched &&
+					(oldVNode._flags & MATCHED) === 0 &&
 					key == oldVNode.key &&
 					type === oldVNode.type
 				) {
@@ -490,7 +500,7 @@ function findMatchingIndex(
 				oldVNode = oldChildren[y];
 				if (
 					oldVNode &&
-					!oldVNode._matched &&
+					(oldVNode._flags & MATCHED) === 0 &&
 					key == oldVNode.key &&
 					type === oldVNode.type
 				) {

diff --git a/src/internal.d.ts b/src/internal.d.ts
@@ -151,8 +151,7 @@ declare global {
 		constructor: undefined;
 		_original: number;
 		_index: number;
-		_insert: boolean;
-		_matched: boolean;
+		_flags: number;
 	}
 
 	export interface Component<P = {}, S = {}> extends preact.Component<P, S> {