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) {