Experiment: split component lifecycle merge types

package.json

@@ -157,6 +157,7 @@
 					"varsIgnorePattern": "^h|React|_[0-9]?$"
 				}
 			],
+      "new-cap": 0,
 			"prefer-rest-params": 0,
 			"prefer-spread": 0,
 			"no-cond-assign": 0,

src/component.js

@@ -1,19 +1,8 @@
-import { commitRoot } from './diff/commit';
+import { commitRoot } from './diff/renderer';
 import options from './options';
 import { createVNode, Fragment } from './create-element';
 import { patch } from './diff/patch';
 import { DIRTY_BIT, FORCE_UPDATE, MODE_UNMOUNTING } from './constants';
-import { getParentContext, getParentDom } from './tree';
-
-/**
- * The render queue
- * @type {import('./internal').RendererState}
- */
-export const rendererState = {
-	_parentDom: null,
-	_context: {},
-	_commitQueue: []
-};
 
 /**
  * Base Component class. Provides `setState()` and `forceUpdate()`, which
@@ -108,9 +97,6 @@ function rerender(internal) {
 			0
 		);
 
-		rendererState._context = getParentContext(internal);
-		rendererState._commitQueue = [];
-		rendererState._parentDom = getParentDom(internal);
 		patch(internal, vnode);
 		commitRoot(internal);
 	}

src/create-root.js

@@ -4,13 +4,12 @@ import {
 	MODE_SVG,
 	UNDEFINED
 } from './constants';
-import { commitRoot } from './diff/commit';
+import { commitRoot } from './diff/renderer';
 import { createElement, Fragment } from './create-element';
 import options from './options';
 import { mount } from './diff/mount';
 import { patch } from './diff/patch';
 import { createInternal } from './tree';
-import { rendererState } from './component';
 
 /**
  *
@@ -30,11 +29,6 @@ export function createRoot(parentDom) {
 		firstChild =
 			/** @type {import('./internal').PreactElement} */ (parentDom.firstChild);
 
-		rendererState._context = {};
-		// List of effects that need to be called after diffing:
-		rendererState._commitQueue = [];
-		rendererState._parentDom = parentDom;
-
 		if (rootInternal) {
 			patch(rootInternal, vnode);
 		} else {

src/diff/children.js

@@ -11,21 +11,28 @@ import {
 import { mount } from './mount';
 import { patch } from './patch';
 import { unmount } from './unmount';
-import { createInternal, getDomSibling } from '../tree';
-import { rendererState } from '../component';
+import { createInternal, getDomSibling, getParentDom } from '../tree';
 
 /**
  * Update an internal with new children.
  * @param {import('../internal').Internal} internal The internal whose children should be patched
  * @param {import('../internal').ComponentChild[]} children The new children, represented as VNodes
  */
 export function patchChildren(internal, children) {
+	/** @type {import('../internal').Internal[]} */
 	let oldChildren =
 		(internal._children && internal._children.slice()) || EMPTY_ARR;
 
 	let oldChildrenLength = oldChildren.length;
 	let remainingOldChildren = oldChildrenLength;
 
+	/**
+	 * This is the result of `getParentDom(internal)`,
+	 * but lazily-computed only only on insertion.
+	 * @type {import('../internal').PreactElement}
+	 */
+	let parentDom;
+
 	let skew = 0;
 	let i;
 
@@ -72,11 +79,7 @@ export function patchChildren(internal, children) {
 			childInternal = createInternal(childVNode, internal);
 
 			// We are mounting a new VNode
-			mount(
-				childInternal,
-				childVNode,
-				getDomSibling(internal, skewedIndex)
-			);
+			mount(childInternal, childVNode, getDomSibling(internal, skewedIndex));
 		}
 		// If this node suspended during hydration, and no other flags are set:
 		// @TODO: might be better to explicitly check for MODE_ERRORED here.
@@ -85,11 +88,7 @@ export function patchChildren(internal, children) {
 			(MODE_HYDRATE | MODE_SUSPENDED)
 		) {
 			// We are resuming the hydration of a VNode
-			mount(
-				childInternal,
-				childVNode,
-				childInternal._dom
-			);
+			mount(childInternal, childVNode, childInternal._dom);
 		} else {
 			// Morph the old element into the new one, but don't append it to the dom yet
 			patch(childInternal, childVNode);
@@ -102,7 +101,7 @@ export function patchChildren(internal, children) {
 
 			// Perform insert of new dom
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(
+				(parentDom || (parentDom = getParentDom(internal))).insertBefore(
 					childInternal._dom,
 					getDomSibling(internal, skewedIndex)
 				);
@@ -136,12 +135,15 @@ export function patchChildren(internal, children) {
 
 			let nextSibling = getDomSibling(internal, skewedIndex + 1);
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(childInternal._dom, nextSibling);
+				(parentDom || (parentDom = getParentDom(internal))).insertBefore(
+					childInternal._dom,
+					nextSibling
+				);
 			} else {
 				insertComponentDom(
 					childInternal,
 					nextSibling,
-					rendererState._parentDom
+					parentDom || (parentDom = getParentDom(internal))
 				);
 			}
 		}
@@ -191,8 +193,12 @@ function findMatchingIndex(
 	skewedIndex,
 	remainingOldChildren
 ) {
-	const type = typeof childVNode === 'string' ? null : childVNode.type;
-	const key = type !== null ? childVNode.key : UNDEFINED;
+	let type = null;
+	let key;
+	if (typeof childVNode !== 'string') {
+		type = childVNode.type;
+		key = childVNode.key;
+	}
 	let match = -1;
 	let x = skewedIndex - 1; // i - 1;
 	let y = skewedIndex + 1; // i + 1;