Testing out renderer state + alternatives

src/component.js

@@ -1,19 +1,9 @@
-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: []
-};
+import { getParentDom } from './tree';
 
 /**
  * Base Component class. Provides `setState()` and `forceUpdate()`, which
@@ -108,10 +98,7 @@ function rerender(internal) {
 			0
 		);
 
-		rendererState._context = getParentContext(internal);
-		rendererState._commitQueue = [];
-		rendererState._parentDom = getParentDom(internal);
-		patch(internal, vnode);
+		patch(internal, vnode, getParentDom(internal));
 		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,13 +29,8 @@ 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);
+			patch(rootInternal, vnode, parentDom);
 		} else {
 			rootInternal = createInternal(vnode);
 
@@ -55,7 +49,7 @@ export function createRoot(parentDom) {
 
 			rootInternal._context = {};
 
-			mount(rootInternal, vnode, firstChild);
+			mount(rootInternal, vnode, parentDom, firstChild);
 		}
 
 		// Flush all queued effects

src/diff/children.js

@@ -12,14 +12,14 @@ import { mount } from './mount';
 import { patch } from './patch';
 import { unmount } from './unmount';
 import { createInternal, getDomSibling } from '../tree';
-import { rendererState } from '../component';
 
 /**
  * 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
+ * @param {import('../internal').PreactElement} parentDom The element into which this subtree is rendered
  */
-export function patchChildren(internal, children) {
+export function patchChildren(internal, children, parentDom) {
 	let oldChildren =
 		(internal._children && internal._children.slice()) || EMPTY_ARR;
 
@@ -75,6 +75,7 @@ export function patchChildren(internal, children) {
 			mount(
 				childInternal,
 				childVNode,
+				parentDom,
 				getDomSibling(internal, skewedIndex)
 			);
 		}
@@ -85,14 +86,10 @@ 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, parentDom, childInternal._dom);
 		} else {
 			// Morph the old element into the new one, but don't append it to the dom yet
-			patch(childInternal, childVNode);
+			patch(childInternal, childVNode, parentDom);
 		}
 
 		go: if (mountingChild) {
@@ -102,7 +99,7 @@ export function patchChildren(internal, children) {
 
 			// Perform insert of new dom
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(
+				parentDom.insertBefore(
 					childInternal._dom,
 					getDomSibling(internal, skewedIndex)
 				);
@@ -136,13 +133,9 @@ export function patchChildren(internal, children) {
 
 			let nextSibling = getDomSibling(internal, skewedIndex + 1);
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(childInternal._dom, nextSibling);
+				parentDom.insertBefore(childInternal._dom, nextSibling);
 			} else {
-				insertComponentDom(
-					childInternal,
-					nextSibling,
-					rendererState._parentDom
-				);
+				insertComponentDom(childInternal, nextSibling, parentDom);
 			}
 		}
 

src/diff/component.js

@@ -1,14 +1,20 @@
 import options from '../options';
 import { DIRTY_BIT, FORCE_UPDATE, SKIP_CHILDREN } from '../constants';
-import { rendererState } from '../component';
 
 /**
  * Render a function component
  * @param {import('../internal').Internal} internal The component's backing Internal node
  * @param {import('../internal').VNode} newVNode The new virtual node
+ * @param {any} context Full context object from the nearest ancestor component Internal
+ * @param {any} componentContext Scoped/selected context for this component
  * @returns {import('../internal').ComponentChildren} the component's children
  */
-export function renderFunctionComponent(internal, newVNode, componentContext) {
+export function renderFunctionComponent(
+	internal,
+	newVNode,
+	context,
+	componentContext
+) {
 	/** @type {import('../internal').Component} */
 	let c;
 
@@ -43,11 +49,7 @@ export function renderFunctionComponent(internal, newVNode, componentContext) {
 	}
 	internal.flags &= ~DIRTY_BIT;
 	if (c.getChildContext != null) {
-		rendererState._context = internal._context = Object.assign(
-			{},
-			rendererState._context,
-			c.getChildContext()
-		);
+		internal._context = Object.assign({}, context, c.getChildContext());
 	}
 
 	return renderResult;
@@ -57,9 +59,16 @@ export function renderFunctionComponent(internal, newVNode, componentContext) {
  * Render a class component
  * @param {import('../internal').Internal} internal The component's backing Internal node
  * @param {import('../internal').VNode} newVNode The new virtual node
+ * @param {any} context Full context object from the nearest ancestor component Internal
+ * @param {any} componentContext Scoped/selected context for this component
  * @returns {import('../internal').ComponentChildren} the component's children
  */
-export function renderClassComponent(internal, newVNode, componentContext) {
+export function renderClassComponent(
+	internal,
+	newVNode,
+	context,
+	componentContext
+) {
 	/** @type {import('../internal').Component} */
 	let c;
 	let isNew, oldProps, oldState, snapshot;
@@ -124,6 +133,7 @@ export function renderClassComponent(internal, newVNode, componentContext) {
 		) {
 			c.state = c._nextState;
 			internal.flags |= SKIP_CHILDREN;
+			internal.flags &= ~DIRTY_BIT;
 			return;
 		}
 
@@ -147,11 +157,7 @@ export function renderClassComponent(internal, newVNode, componentContext) {
 	c.state = c._nextState;
 
 	if (c.getChildContext != null) {
-		rendererState._context = internal._context = Object.assign(
-			{},
-			rendererState._context,
-			c.getChildContext()
-		);
+		internal._context = Object.assign({}, context, c.getChildContext());
 	}
 
 	if (!isNew) {