consolidate callbacks and dom on data (#3829)

* consolidate callbacks and dom on data

* remove base template

Author: JoviDeCroock

hooks/src/index.js

@@ -42,7 +42,7 @@ options._render = internal => {
 	if (currentInternal.data && currentInternal.data.__hooks) {
 		if (previousInternal === currentInternal) {
 			currentInternal.data.__hooks._pendingEffects = [];
-			currentInternal._commitCallbacks = [];
+			currentInternal.data._commitCallbacks = [];
 			currentInternal.data.__hooks._list.forEach(hookItem => {
 				if (hookItem._nextValue) {
 					hookItem._value = hookItem._nextValue;
@@ -83,13 +83,13 @@ options.diffed = internal => {
 options._commit = (internal, commitQueue) => {
 	commitQueue.some(internal => {
 		try {
-			internal._commitCallbacks.forEach(invokeCleanup);
-			internal._commitCallbacks = internal._commitCallbacks.filter(cb =>
-				cb._value ? invokeEffect(cb) : true
+			internal.data._commitCallbacks.forEach(invokeCleanup);
+			internal.data._commitCallbacks = internal.data._commitCallbacks.filter(
+				cb => (cb._value ? invokeEffect(cb) : true)
 			);
 		} catch (e) {
 			commitQueue.some(i => {
-				if (i._commitCallbacks) i._commitCallbacks = [];
+				if (i.data._commitCallbacks) i.data._commitCallbacks = [];
 			});
 			commitQueue = [];
 			options._catchError(e, internal);
@@ -254,10 +254,10 @@ export function useLayoutEffect(callback, args) {
 		state._value = callback;
 		state._pendingArgs = args;
 
-		if (currentInternal._commitCallbacks == null) {
-			currentInternal._commitCallbacks = [];
+		if (currentInternal.data._commitCallbacks == null) {
+			currentInternal.data._commitCallbacks = [];
 		}
-		currentInternal._commitCallbacks.push(state);
+		currentInternal.data._commitCallbacks.push(state);
 	}
 }
 

src/component.js

@@ -53,7 +53,7 @@ Component.prototype.setState = function(update, callback) {
 
 	const internal = this._internal;
 	if (update != null && internal) {
-		if (callback) internal._stateCallbacks.push(callback.bind(this));
+		if (callback) internal.data._stateCallbacks.push(callback.bind(this));
 		internal.rerender(internal);
 	}
 };
@@ -71,7 +71,7 @@ Component.prototype.forceUpdate = function(callback) {
 		// is coming from. We need this because forceUpdate should never call
 		// shouldComponentUpdate
 		internal.flags |= FORCE_UPDATE;
-		if (callback) internal._commitCallbacks.push(callback.bind(this));
+		if (callback) internal.data._commitCallbacks.push(callback.bind(this));
 		internal.rerender(internal);
 	}
 };

src/diff/children.js

@@ -86,7 +86,7 @@ export function patchChildren(internal, children, parentDom) {
 			(MODE_HYDRATE | MODE_SUSPENDED)
 		) {
 			// We are resuming the hydration of a VNode
-			mount(childInternal, childVNode, parentDom, childInternal._dom);
+			mount(childInternal, childVNode, parentDom, childInternal.data);
 		} else {
 			// Morph the old element into the new one, but don't append it to the dom yet
 			patch(childInternal, childVNode, parentDom);
@@ -100,7 +100,7 @@ export function patchChildren(internal, children, parentDom) {
 			// Perform insert of new dom
 			if (childInternal.flags & TYPE_DOM) {
 				parentDom.insertBefore(
-					childInternal._dom,
+					childInternal.data,
 					getDomSibling(internal, skewedIndex)
 				);
 			}
@@ -133,7 +133,7 @@ export function patchChildren(internal, children, parentDom) {
 
 			let nextSibling = getDomSibling(internal, skewedIndex + 1);
 			if (childInternal.flags & TYPE_DOM) {
-				parentDom.insertBefore(childInternal._dom, nextSibling);
+				parentDom.insertBefore(childInternal.data, nextSibling);
 			} else {
 				insertComponentDom(childInternal, nextSibling, parentDom);
 			}
@@ -163,7 +163,7 @@ export function patchChildren(internal, children, parentDom) {
 				if (childInternal.ref)
 					applyRef(
 						childInternal.ref,
-						childInternal._component || childInternal._dom,
+						childInternal._component || childInternal.data,
 						childInternal
 					);
 			}
@@ -243,8 +243,8 @@ export function insertComponentDom(internal, nextSibling, parentDom) {
 
 			if (childInternal.flags & TYPE_COMPONENT) {
 				insertComponentDom(childInternal, nextSibling, parentDom);
-			} else if (childInternal._dom != nextSibling) {
-				parentDom.insertBefore(childInternal._dom, nextSibling);
+			} else if (childInternal.data != nextSibling) {
+				parentDom.insertBefore(childInternal.data, nextSibling);
 			}
 		}
 	}

src/diff/commit.js

@@ -18,10 +18,10 @@ export function commitRoot(rootInternal) {
 	currentQueue.some(internal => {
 		try {
 			// @ts-ignore Reuse the root variable here so the type changes
-			currentQueue = internal._commitCallbacks.length;
+			currentQueue = internal.data._commitCallbacks.length;
 			// @ts-ignore See above ts-ignore comment
 			while (currentQueue--) {
-				internal._commitCallbacks.shift()();
+				internal.data._commitCallbacks.shift()();
 			}
 		} catch (e) {
 			options._catchError(e, internal);

src/diff/mount.js

@@ -59,7 +59,10 @@ export function mount(internal, newVNode, parentDom, startDom) {
 				);
 			}
 
-			if (internal._commitCallbacks.length) {
+			if (
+				internal.data._commitCallbacks &&
+				internal.data._commitCallbacks.length
+			) {
 				commitQueue.push(internal);
 			}
 		} else {
@@ -83,7 +86,7 @@ export function mount(internal, newVNode, parentDom, startDom) {
 		if (internal.flags & MODE_HYDRATE) {
 			// @ts-ignore Trust me TS, nextSibling is a PreactElement
 			nextDomSibling = startDom && startDom.nextSibling;
-			internal._dom = startDom; // Save our current DOM position to resume later
+			internal.data = startDom; // Save our current DOM position to resume later
 		}
 		options._catchError(e, internal);
 	}
@@ -131,7 +134,7 @@ function mountElement(internal, dom) {
 			dom.data = newProps;
 		}
 
-		internal._dom = dom;
+		internal.data = dom;
 	} else {
 		// Tracks entering and exiting SVG namespace when descending through the tree.
 		// if (nodeType === 'svg') internal.flags |= MODE_SVG;
@@ -187,7 +190,7 @@ function mountElement(internal, dom) {
 			}
 		}
 
-		internal._dom = dom;
+		internal.data = dom;
 
 		// If the new vnode didn't have dangerouslySetInnerHTML, diff its children
 		if (newHtml) {
@@ -244,7 +247,7 @@ export function mountChildren(internal, children, parentDom, startDom) {
 		// Morph the old element into the new one, but don't append it to the dom yet
 		mountedNextChild = mount(childInternal, childVNode, parentDom, startDom);
 
-		newDom = childInternal._dom;
+		newDom = childInternal.data;
 
 		if (childInternal.flags & TYPE_COMPONENT || newDom == startDom) {
 			// If the child is a Fragment-like or if it is DOM VNode and its _dom
@@ -348,7 +351,7 @@ function mountComponent(internal, startDom) {
 			// If the component was constructed, queue up componentDidMount so the
 			// first time this internal commits (regardless of suspense or not) it
 			// will be called
-			internal._commitCallbacks.push(c.componentDidMount.bind(c));
+			internal.data._commitCallbacks.push(c.componentDidMount.bind(c));
 		}
 	}
 
@@ -367,10 +370,10 @@ function mountComponent(internal, startDom) {
 		if (renderHook) renderHook(internal);
 		if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
 			renderResult = c.render(c.props, c.state, c.context);
-			for (let i = 0; i < internal._stateCallbacks.length; i++) {
-				internal._commitCallbacks.push(internal._stateCallbacks[i]);
+			for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
+				internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
 			}
-			internal._stateCallbacks = [];
+			internal.data._stateCallbacks = [];
 			// note: disable repeat render invocation for class components
 			break;
 		} else {

src/diff/patch.js

@@ -35,8 +35,8 @@ export function patch(internal, vnode, parentDom) {
 
 	if (flags & TYPE_TEXT) {
 		if (vnode !== internal.props) {
-			// @ts-ignore We know that newVNode is string/number/bigint, and internal._dom is Text
-			internal._dom.data = vnode;
+			// @ts-ignore We know that newVNode is string/number/bigint, and internal.data is Text
+			internal.data.data = vnode;
 			internal.props = vnode;
 		}
 
@@ -94,7 +94,7 @@ export function patch(internal, vnode, parentDom) {
 				let siblingDom =
 					(internal.flags & (MODE_HYDRATE | MODE_SUSPENDED)) ===
 					(MODE_HYDRATE | MODE_SUSPENDED)
-						? internal._dom
+						? internal.data
 						: internal.flags & MODE_HYDRATE
 						? null
 						: getDomSibling(internal);
@@ -104,7 +104,12 @@ export function patch(internal, vnode, parentDom) {
 				patchChildren(internal, renderResult, parentDom);
 			}
 
-			if (internal._commitCallbacks.length) {
+			// TODO: for some reason lazy-hydration stops working as .data is assigned a DOM-node
+			// for Preact.lazy
+			if (
+				internal.data._commitCallbacks &&
+				internal.data._commitCallbacks.length
+			) {
 				commitQueue.push(internal);
 			}
 		} catch (e) {
@@ -133,7 +138,7 @@ export function patch(internal, vnode, parentDom) {
  * @param {import('../internal').VNode} vnode A VNode with props to compare and apply
  */
 function patchElement(internal, vnode) {
-	let dom = /** @type {import('../internal').PreactElement} */ (internal._dom),
+	let dom = /** @type {import('../internal').PreactElement} */ (internal.data),
 		oldProps = internal.props,
 		newProps = vnode.props,
 		isSvg = internal.flags & MODE_SVG,
@@ -244,10 +249,10 @@ function patchComponent(internal, newVNode) {
 		c.props = newProps;
 		c.state = c._nextState;
 		internal.flags |= SKIP_CHILDREN;
-		for (let i = 0; i < internal._stateCallbacks.length; i++) {
-			internal._commitCallbacks.push(internal._stateCallbacks[i]);
+		for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
+			internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
 		}
-		internal._stateCallbacks = [];
+		internal.data._stateCallbacks = [];
 		return;
 	}
 
@@ -269,10 +274,10 @@ function patchComponent(internal, newVNode) {
 		if (renderHook) renderHook(internal);
 		if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
 			renderResult = c.render(c.props, c.state, c.context);
-			for (let i = 0; i < internal._stateCallbacks.length; i++) {
-				internal._commitCallbacks.push(internal._stateCallbacks[i]);
+			for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
+				internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
 			}
-			internal._stateCallbacks = [];
+			internal.data._stateCallbacks = [];
 			// note: disable repeat render invocation for class components
 			break;
 		} else {
@@ -297,7 +302,7 @@ function patchComponent(internal, newVNode) {
 
 		// Only schedule componentDidUpdate if the component successfully rendered
 		if (c.componentDidUpdate != null) {
-			internal._commitCallbacks.push(() => {
+			internal.data._commitCallbacks.push(() => {
 				c.componentDidUpdate(oldProps, oldState, snapshot);
 			});
 		}

src/diff/unmount.js

@@ -47,8 +47,7 @@ export function unmount(internal, parentInternal, skipRemove) {
 	}
 
 	if (!skipRemove && internal.flags & TYPE_DOM) {
-		internal._dom.remove();
+		internal.data.remove();
+		internal.data = null;
 	}
-
-	internal._dom = null;
 }

src/internal.d.ts

@@ -141,7 +141,7 @@ export interface Internal<P = {}> {
 	/** Bitfield containing information about the Internal or its component. */
 	flags: number;
 	/** Polymorphic property to store extensions like hooks on */
-	data: object;
+	data: object | PreactNode;
 	/** The function that triggers in-place re-renders for an internal */
 	rerender: (internal: Internal) => void;
 
@@ -155,7 +155,6 @@ export interface Internal<P = {}> {
 	 * Associated DOM element for the Internal, or its nearest realized descendant.
 	 * For Fragments, this is the first DOM child.
 	 */
-	_dom: PreactNode;
 	/** The component instance for which this is a backing Internal node */
 	_component: Component | null;
 	/** most recent context object passed down to this Internal from its parent */

src/tree.js

@@ -87,15 +87,15 @@ export function createInternal(vnode, parentInternal) {
 		key,
 		ref,
 		_prevRef: null,
-		data: flags & TYPE_COMPONENT ? {} : null,
-		_commitCallbacks: flags & TYPE_COMPONENT ? [] : null,
-		_stateCallbacks: flags & TYPE_COMPONENT ? [] : null,
+		data:
+			flags & TYPE_COMPONENT
+				? { _commitCallbacks: [], _stateCallbacks: [] }
+				: null,
 		rerender: enqueueRender,
 		flags,
 		_children: null,
 		_parent: parentInternal,
 		_vnodeId: vnodeId,
-		_dom: null,
 		_component: null,
 		_context: null,
 		_depth: parentInternal ? parentInternal._depth + 1 : 0
@@ -155,7 +155,7 @@ export function getChildDom(internal, offset) {
 		let child = internal._children[offset];
 		if (child != null) {
 			if (child.flags & TYPE_DOM) {
-				return child._dom;
+				return child.data;
 			}
 
 			if (shouldSearchComponent(child)) {
@@ -200,7 +200,7 @@ export function getParentDom(internal) {
 		if (parent.flags & TYPE_ROOT) {
 			return parent.props._parentDom;
 		} else if (parent.flags & TYPE_ELEMENT) {
-			return parent._dom;
+			return parent.data;
 		}
 	}
 }