checkpoint: renderer state refactor to accessors

Author: developit

src/component.js

@@ -1,20 +1,14 @@
-import { commitRoot } from './diff/commit';
+import {
+	commitRoot,
+	setCurrentContext,
+	setCurrentParentDom
+} 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
  * trigger rendering
@@ -108,9 +102,10 @@ function rerender(internal) {
 			0
 		);
 
-		rendererState._context = getParentContext(internal);
-		rendererState._commitQueue = [];
-		rendererState._parentDom = getParentDom(internal);
+		// set up renderer state
+		setCurrentContext(getParentContext(internal));
+		setCurrentParentDom(getParentDom(internal));
+
 		patch(internal, vnode);
 		commitRoot(internal);
 	}

src/create-root.js

@@ -4,13 +4,16 @@ import {
 	MODE_SVG,
 	UNDEFINED
 } from './constants';
-import { commitRoot } from './diff/commit';
+import {
+	commitRoot,
+	setCurrentContext,
+	setCurrentParentDom
+} 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,10 +33,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;
+		setCurrentContext({});
+		setCurrentParentDom(parentDom);
 
 		if (rootInternal) {
 			patch(rootInternal, vnode);

src/diff/children.js

@@ -12,7 +12,7 @@ import { mount } from './mount';
 import { patch } from './patch';
 import { unmount } from './unmount';
 import { createInternal, getDomSibling } from '../tree';
-import { rendererState } from '../component';
+import { getCurrentParentDom } from './renderer';
 
 /**
  * Update an internal with new children.
@@ -72,11 +72,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 +81,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 +94,7 @@ export function patchChildren(internal, children) {
 
 			// Perform insert of new dom
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(
+				getCurrentParentDom().insertBefore(
 					childInternal._dom,
 					getDomSibling(internal, skewedIndex)
 				);
@@ -136,13 +128,9 @@ export function patchChildren(internal, children) {
 
 			let nextSibling = getDomSibling(internal, skewedIndex + 1);
 			if (childInternal.flags & TYPE_DOM) {
-				rendererState._parentDom.insertBefore(childInternal._dom, nextSibling);
+				getCurrentParentDom().insertBefore(childInternal._dom, nextSibling);
 			} else {
-				insertComponentDom(
-					childInternal,
-					nextSibling,
-					rendererState._parentDom
-				);
+				insertComponentDom(childInternal, nextSibling, getCurrentParentDom());
 			}
 		}
 

src/diff/commit.js

@@ -1,18 +1,14 @@
 import options from '../options';
 import { DIRTY_BIT, FORCE_UPDATE, SKIP_CHILDREN } from '../constants';
-import { rendererState } from '../component';
+import { getCurrentContext, setCurrentContext } from './renderer';
 
 /**
  * Render a function component
  * @param {import('../internal').Internal} internal The component's backing Internal node
  * @param {import('../internal').VNode} newVNode The new virtual node
  * @returns {import('../internal').ComponentChildren} the component's children
  */
-export function renderFunctionComponent(
-	internal,
-	newVNode,
-	componentContext
-) {
+export function renderFunctionComponent(internal, newVNode, componentContext) {
 	/** @type {import('../internal').Component} */
 	let c;
 
@@ -53,10 +49,12 @@ export function renderFunctionComponent(
 	}
 	internal.flags &= ~DIRTY_BIT;
 	if (c.getChildContext != null) {
-		rendererState._context = internal._context = Object.assign(
-			{},
-			rendererState._context,
-			c.getChildContext()
+		setCurrentContext(
+			(internal._context = Object.assign(
+				{},
+				getCurrentContext(),
+				c.getChildContext()
+			))
 		);
 	}
 
@@ -69,11 +67,7 @@ export function renderFunctionComponent(
  * @param {import('../internal').VNode} newVNode The new virtual node
  * @returns {import('../internal').ComponentChildren} the component's children
  */
-export function renderClassComponent(
-	internal,
-	newVNode,
-	componentContext
-) {
+export function renderClassComponent(internal, newVNode, componentContext) {
 	/** @type {import('../internal').Component} */
 	let c;
 	let isNew, oldProps, oldState, snapshot;
@@ -163,10 +157,12 @@ export function renderClassComponent(
 	c.state = c._nextState;
 
 	if (c.getChildContext != null) {
-		rendererState._context = internal._context = Object.assign(
-			{},
-			rendererState._context,
-			c.getChildContext()
+		setCurrentContext(
+			(internal._context = Object.assign(
+				{},
+				getCurrentContext(),
+				c.getChildContext()
+			))
 		);
 	}
 

src/diff/component.js

@@ -17,7 +17,14 @@ import { setProperty } from './props';
 import { renderClassComponent, renderFunctionComponent } from './component';
 import { createInternal } from '../tree';
 import options from '../options';
-import { rendererState } from '../component';
+import {
+	commitQueue,
+	getCurrentContext,
+	getCurrentParentDom,
+	setCurrentContext,
+	setCurrentParentDom
+} from './renderer';
+
 /**
  * Diff two virtual nodes and apply proper changes to the DOM
  * @param {import('../internal').Internal} internal The Internal node to mount
@@ -37,37 +44,34 @@ export function mount(internal, newVNode, startDom) {
 			// the page. Root nodes can occur anywhere in the tree and not just at the
 			// top.
 			let prevStartDom = startDom;
-			let prevParentDom = rendererState._parentDom;
+			let prevParentDom = getCurrentParentDom();
 			if (internal.flags & TYPE_ROOT) {
-				rendererState._parentDom = newVNode.props._parentDom;
+				let newParentDom = newVNode.props._parentDom;
+				setCurrentParentDom(newParentDom);
 
 				// Note: this is likely always true because we are inside mount()
-				if (rendererState._parentDom !== prevParentDom) {
+				if (newParentDom !== prevParentDom) {
 					startDom = null;
 				}
 			}
 
-			let prevContext = rendererState._context;
+			let prevContext = getCurrentContext();
 			// Necessary for createContext api. Setting this property will pass
 			// the context value as `this.context` just for this component.
 			let tmp = newVNode.type.contextType;
-			let provider = tmp && rendererState._context[tmp._id];
+			let provider = tmp && prevContext[tmp._id];
 			let componentContext = tmp
 				? provider
 					? provider.props.value
 					: tmp._defaultValue
-				: rendererState._context;
+				: prevContext;
 
 			if (provider) provider._subs.add(internal);
 
 			let renderResult;
 
 			if (internal.flags & TYPE_CLASS) {
-				renderResult = renderClassComponent(
-					internal,
-					null,
-					componentContext
-				);
+				renderResult = renderClassComponent(internal, null, componentContext);
 			} else {
 				renderResult = renderFunctionComponent(
 					internal,
@@ -91,23 +95,19 @@ export function mount(internal, newVNode, startDom) {
 					renderResult = [renderResult];
 				}
 
-				nextDomSibling = mountChildren(
-					internal,
-					renderResult,
-					startDom
-				);
+				nextDomSibling = mountChildren(internal, renderResult, startDom);
 			}
 
 			if (
 				internal._commitCallbacks != null &&
 				internal._commitCallbacks.length
 			) {
-				rendererState._commitQueue.push(internal);
+				commitQueue.push(internal);
 			}
 
 			if (
 				internal.flags & TYPE_ROOT &&
-				prevParentDom !== rendererState._parentDom
+				prevParentDom !== getCurrentParentDom()
 			) {
 				// If we just mounted a root node/Portal, and it changed the parentDom
 				// of it's children, then we need to resume the diff from it's previous
@@ -117,10 +117,10 @@ export function mount(internal, newVNode, startDom) {
 				nextDomSibling = prevStartDom;
 			}
 
-			rendererState._parentDom = prevParentDom;
+			setCurrentParentDom(prevParentDom);
 			// In the event this subtree creates a new context for its children, restore
 			// the previous context for its siblings
-			rendererState._context = prevContext;
+			setCurrentContext(prevContext);
 		} else {
 			// @TODO: we could just assign this as internal.dom here
 			let hydrateDom =
@@ -269,14 +269,14 @@ function mountElement(internal, dom) {
 				dom.innerHTML = newHtml.__html;
 			}
 		} else if (newChildren != null) {
-			const prevParentDom = rendererState._parentDom;
-			rendererState._parentDom = dom;
+			const prevParentDom = getCurrentParentDom();
+			setCurrentParentDom(dom);
 			mountChildren(
 				internal,
 				Array.isArray(newChildren) ? newChildren : [newChildren],
 				isNew ? null : dom.firstChild
 			);
-			rendererState._parentDom = prevParentDom;
+			setCurrentParentDom(prevParentDom);
 		}
 
 		// (as above, don't diff props during hydration)
@@ -295,11 +295,7 @@ function mountElement(internal, dom) {
  * @param {import('../internal').ComponentChild[]} children
  * @param {import('../internal').PreactNode} startDom
  */
-export function mountChildren(
-	internal,
-	children,
-	startDom
-) {
+export function mountChildren(internal, children, startDom) {
 	let internalChildren = (internal._children = []),
 		i,
 		childVNode,
@@ -321,11 +317,7 @@ export function mountChildren(
 		internalChildren[i] = childInternal;
 
 		// Morph the old element into the new one, but don't append it to the dom yet
-		mountedNextChild = mount(
-			childInternal,
-			childVNode,
-			startDom
-		);
+		mountedNextChild = mount(childInternal, childVNode, startDom);
 
 		newDom = childInternal._dom;
 
@@ -338,7 +330,7 @@ export function mountChildren(
 			// The DOM the diff should begin with is now startDom (since we inserted
 			// newDom before startDom) so ignore mountedNextChild and continue with
 			// startDom
-			rendererState._parentDom.insertBefore(newDom, startDom);
+			getCurrentParentDom().insertBefore(newDom, startDom);
 		}
 
 		if (childInternal.ref) {