@b9g/crank 0.6.1 → 0.7.1

package/crank.js

@@ -1,40 +1,17 @@
 /// <reference types="crank.d.ts" />
+import { removeEventTargetDelegates, addEventTargetDelegates, clearEventListeners, CustomEventTarget } from './event-target.js';
+import { isPromiseLike, unwrap, wrap, arrayify, safeRace, isIteratorLike } from './_utils.js';
+
 const NOOP = () => { };
-const IDENTITY = (value) => value;
-function wrap(value) {
-    return value === undefined ? [] : Array.isArray(value) ? value : [value];
-}
-function unwrap(arr) {
-    return arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;
-}
-/**
- * Ensures a value is an array.
- *
- * This function does the same thing as wrap() above except it handles nulls
- * and iterables, so it is appropriate for wrapping user-provided element
- * children.
- */
-function arrayify(value) {
-    return value == null
-        ? []
-        : Array.isArray(value)
-            ? value
-            : typeof value === "string" ||
-                typeof value[Symbol.iterator] !== "function"
-                ? [value]
-                : [...value];
-}
-function isIteratorLike(value) {
-    return value != null && typeof value.next === "function";
-}
-function isPromiseLike(value) {
-    return value != null && typeof value.then === "function";
+function getTagName(tag) {
+    return typeof tag === "function"
+        ? tag.name || "Anonymous"
+        : typeof tag === "string"
+            ? tag
+            : // tag is symbol, using else branch to avoid typeof tag === "symbol"
+                tag.description || "Anonymous";
 }
-/***
- * SPECIAL TAGS
- *
- * Crank provides a couple tags which have special meaning for the renderer.
- ***/
+/*** SPECIAL TAGS ***/
 /**
  * A special tag for grouping multiple children within the same parent.
  *
@@ -46,8 +23,8 @@ function isPromiseLike(value) {
  * reference this export.
  */
 const Fragment = "";
-// TODO: We assert the following symbol tags as any because TypeScript support
-// for symbol tags in JSX doesn’t exist yet.
+// TODO: We assert the following symbol tags as Components because TypeScript
+// support for symbol tags in JSX doesn't exist yet.
 // https://github.com/microsoft/TypeScript/issues/38367
 /**
  * A special tag for rendering into a new root node via a root prop.
@@ -55,13 +32,13 @@ const Fragment = "";
  * This tag is useful for creating element trees with multiple roots, for
  * things like modals or tooltips.
  *
- * Renderer.prototype.render() will implicitly wrap top-level element trees in
- * a Portal element.
+ * Renderer.prototype.render() implicitly wraps top-level in a Portal element
+ * with the root set to the second argument passed in.
  */
 const Portal = Symbol.for("crank.Portal");
 /**
  * A special tag which preserves whatever was previously rendered in the
- * element’s position.
+ * element's position.
  *
  * Copy elements are useful for when you want to prevent a subtree from
  * rerendering as a performance optimization. Copy elements can also be keyed,
@@ -69,10 +46,13 @@ const Portal = Symbol.for("crank.Portal");
  */
 const Copy = Symbol.for("crank.Copy");
 /**
- * A special tag for injecting raw nodes or strings via a value prop.
+ * A special tag for rendering text nodes.
  *
- * Renderer.prototype.raw() is called with the value prop.
+ * Strings in the element tree are implicitly wrapped in a Text element with
+ * value set to the string.
  */
+const Text = Symbol.for("crank.Text");
+/** A special tag for injecting raw nodes or strings via a value prop. */
 const Raw = Symbol.for("crank.Raw");
 const ElementSymbol = Symbol.for("crank.Element");
 /**
@@ -100,15 +80,6 @@ class Element {
         this.tag = tag;
         this.props = props;
     }
-    get key() {
-        return this.props.key;
-    }
-    get ref() {
-        return this.props.ref;
-    }
-    get copy() {
-        return !!this.props.copy;
-    }
 }
 // See Element interface
 Element.prototype.$$typeof = ElementSymbol;
@@ -116,34 +87,34 @@ function isElement(value) {
     return value != null && value.$$typeof === ElementSymbol;
 }
 const DEPRECATED_PROP_PREFIXES = ["crank-", "c-", "$"];
-const DEPRECATED_SPECIAL_PROP_BASES = ["key", "ref", "static"];
-const SPECIAL_PROPS = new Set(["children", "key", "ref", "copy"]);
-for (const propPrefix of DEPRECATED_PROP_PREFIXES) {
-    for (const propBase of DEPRECATED_SPECIAL_PROP_BASES) {
-        SPECIAL_PROPS.add(propPrefix + propBase);
-    }
-}
+const DEPRECATED_SPECIAL_PROP_BASES = ["key", "ref", "static", "copy"];
 /**
  * Creates an element with the specified tag, props and children.
  *
  * This function is usually used as a transpilation target for JSX transpilers,
  * but it can also be called directly. It additionally extracts special props so
- * they aren’t accessible to renderer methods or components, and assigns the
+ * they aren't accessible to renderer methods or components, and assigns the
  * children prop according to any additional arguments passed to the function.
  */
 function createElement(tag, props, ...children) {
     if (props == null) {
         props = {};
     }
+    if ("static" in props) {
+        console.error(`The \`static\` prop is deprecated. Use \`copy\` instead.`);
+        props["copy"] = props["static"];
+        delete props["static"];
+    }
     for (let i = 0; i < DEPRECATED_PROP_PREFIXES.length; i++) {
         const propPrefix = DEPRECATED_PROP_PREFIXES[i];
         for (let j = 0; j < DEPRECATED_SPECIAL_PROP_BASES.length; j++) {
             const propBase = DEPRECATED_SPECIAL_PROP_BASES[j];
             const deprecatedPropName = propPrefix + propBase;
-            const targetPropBase = propBase === "static" ? "copy" : propBase;
             if (deprecatedPropName in props) {
-                console.warn(`The \`${deprecatedPropName}\` prop is deprecated. Use \`${targetPropBase}\` instead.`);
+                const targetPropBase = propBase === "static" ? "copy" : propBase;
+                console.error(`The \`${deprecatedPropName}\` prop is deprecated. Use \`${targetPropBase}\` instead.`);
                 props[targetPropBase] = props[deprecatedPropName];
+                delete props[deprecatedPropName];
             }
         }
     }
@@ -158,13 +129,13 @@ function createElement(tag, props, ...children) {
 /** Clones a given element, shallowly copying the props object. */
 function cloneElement(el) {
     if (!isElement(el)) {
-        throw new TypeError("Cannot clone non-element");
+        throw new TypeError(`Cannot clone non-element: ${String(el)}`);
     }
     return new Element(el.tag, { ...el.props });
 }
 function narrow(value) {
     if (typeof value === "boolean" || value == null) {
-        return undefined;
+        return;
     }
     else if (typeof value === "string" || isElement(value)) {
         return value;
@@ -174,137 +145,203 @@ function narrow(value) {
     }
     return value.toString();
 }
-/**
- * Takes an array of element values and normalizes the output as an array of
- * nodes and strings.
- *
- * @returns Normalized array of nodes and/or strings.
- *
- * Normalize will flatten only one level of nested arrays, because it is
- * designed to be called once at each level of the tree. It will also
- * concatenate adjacent strings and remove all undefined values.
- */
-function normalize(values) {
-    const result = [];
-    let buffer;
-    for (let i = 0; i < values.length; i++) {
-        const value = values[i];
-        if (!value) ;
-        else if (typeof value === "string") {
-            buffer = (buffer || "") + value;
-        }
-        else if (!Array.isArray(value)) {
-            if (buffer) {
-                result.push(buffer);
-                buffer = undefined;
-            }
-            result.push(value);
-        }
-        else {
-            // We could use recursion here but it’s just easier to do it inline.
-            for (let j = 0; j < value.length; j++) {
-                const value1 = value[j];
-                if (!value1) ;
-                else if (typeof value1 === "string") {
-                    buffer = (buffer || "") + value1;
-                }
-                else {
-                    if (buffer) {
-                        result.push(buffer);
-                        buffer = undefined;
-                    }
-                    result.push(value1);
-                }
-            }
-        }
+/*** RETAINER FLAGS ***/
+const DidDiff = 1 << 0;
+const DidCommit = 1 << 1;
+const IsCopied = 1 << 2;
+const IsUpdating = 1 << 3;
+const IsExecuting = 1 << 4;
+const IsRefreshing = 1 << 5;
+const IsScheduling = 1 << 6;
+const IsSchedulingFallback = 1 << 7;
+const IsUnmounted = 1 << 8;
+// TODO: Is this flag still necessary or can we use IsUnmounted?
+const IsErrored = 1 << 9;
+const IsResurrecting = 1 << 10;
+// TODO: Maybe we can get rid of IsSyncGen and IsAsyncGen
+const IsSyncGen = 1 << 11;
+const IsAsyncGen = 1 << 12;
+const IsInForOfLoop = 1 << 13;
+const IsInForAwaitOfLoop = 1 << 14;
+const NeedsToYield = 1 << 15;
+const PropsAvailable = 1 << 16;
+function getFlag(ret, flag) {
+    return !!(ret.f & flag);
+}
+function setFlag(ret, flag, value = true) {
+    if (value) {
+        ret.f |= flag;
     }
-    if (buffer) {
-        result.push(buffer);
+    else {
+        ret.f &= ~flag;
     }
-    return result;
 }
 /**
  * @internal
- * The internal nodes which are cached and diffed against new elements when
- * rendering element trees.
+ * Retainers are objects which act as the internal representation of elements,
+ * mirroring the element tree.
  */
 class Retainer {
     constructor(el) {
+        this.f = 0;
         this.el = el;
         this.ctx = undefined;
         this.children = undefined;
+        this.fallback = undefined;
         this.value = undefined;
-        this.cachedChildValues = undefined;
-        this.fallbackValue = undefined;
-        this.inflightValue = undefined;
-        this.onNextValues = undefined;
+        this.oldProps = undefined;
+        this.pendingDiff = undefined;
+        this.onNextDiff = undefined;
+        this.graveyard = undefined;
+        this.lingerers = undefined;
     }
 }
+function cloneRetainer(ret) {
+    const clone = new Retainer(ret.el);
+    clone.f = ret.f;
+    clone.ctx = ret.ctx;
+    clone.children = ret.children;
+    clone.fallback = ret.fallback;
+    clone.value = ret.value;
+    clone.scope = ret.scope;
+    clone.oldProps = ret.oldProps;
+    clone.pendingDiff = ret.pendingDiff;
+    clone.onNextDiff = ret.onNextDiff;
+    clone.graveyard = ret.graveyard;
+    clone.lingerers = ret.lingerers;
+    return clone;
+}
 /**
  * Finds the value of the element according to its type.
  *
- * @returns The value of the element.
+ * @returns A node, an array of nodes or undefined.
  */
-function getValue(ret) {
-    if (typeof ret.fallbackValue !== "undefined") {
-        return typeof ret.fallbackValue === "object"
-            ? getValue(ret.fallbackValue)
-            : ret.fallbackValue;
+function getValue(ret, isNested = false, index) {
+    if (getFlag(ret, IsScheduling) && isNested) {
+        return ret.fallback ? getValue(ret.fallback, isNested, index) : undefined;
+    }
+    else if (ret.fallback && !getFlag(ret, DidDiff)) {
+        return ret.fallback
+            ? getValue(ret.fallback, isNested, index)
+            : ret.fallback;
     }
     else if (ret.el.tag === Portal) {
         return;
     }
-    else if (typeof ret.el.tag !== "function" && ret.el.tag !== Fragment) {
-        return ret.value;
+    else if (ret.el.tag === Fragment || typeof ret.el.tag === "function") {
+        if (index != null && ret.ctx) {
+            ret.ctx.index = index;
+        }
+        return unwrap(getChildValues(ret, index));
     }
-    return unwrap(getChildValues(ret));
+    return ret.value;
 }
 /**
- * Walks an element’s children to find its child values.
+ * Walks an element's children to find its child values.
  *
- * @returns A normalized array of nodes and strings.
+ * @param ret - The retainer whose child values we are reading.
+ * @param startIndex - Starting index to thread through for context index updates.
+ *
+ * @returns An array of nodes.
  */
-function getChildValues(ret) {
-    if (ret.cachedChildValues) {
-        return wrap(ret.cachedChildValues);
-    }
+function getChildValues(ret, startIndex) {
     const values = [];
+    const lingerers = ret.lingerers;
     const children = wrap(ret.children);
+    let currentIndex = startIndex;
     for (let i = 0; i < children.length; i++) {
+        if (lingerers != null && lingerers[i] != null) {
+            const rets = lingerers[i];
+            for (const ret of rets) {
+                const value = getValue(ret, true, currentIndex);
+                if (Array.isArray(value)) {
+                    for (let j = 0; j < value.length; j++) {
+                        values.push(value[j]);
+                    }
+                    if (currentIndex != null) {
+                        currentIndex += value.length;
+                    }
+                }
+                else if (value) {
+                    values.push(value);
+                    if (currentIndex != null) {
+                        currentIndex++;
+                    }
+                }
+            }
+        }
         const child = children[i];
         if (child) {
-            values.push(typeof child === "string" ? child : getValue(child));
+            const value = getValue(child, true, currentIndex);
+            if (Array.isArray(value)) {
+                for (let j = 0; j < value.length; j++) {
+                    values.push(value[j]);
+                }
+                if (currentIndex != null) {
+                    currentIndex += value.length;
+                }
+            }
+            else if (value) {
+                values.push(value);
+                if (currentIndex != null) {
+                    currentIndex++;
+                }
+            }
         }
     }
-    const values1 = normalize(values);
-    const tag = ret.el.tag;
-    if (typeof tag === "function" || (tag !== Fragment && tag !== Raw)) {
-        ret.cachedChildValues = unwrap(values1);
+    if (lingerers != null && lingerers.length > children.length) {
+        for (let i = children.length; i < lingerers.length; i++) {
+            const rets = lingerers[i];
+            if (rets != null) {
+                for (const ret of rets) {
+                    const value = getValue(ret, true, currentIndex);
+                    if (Array.isArray(value)) {
+                        for (let j = 0; j < value.length; j++) {
+                            values.push(value[j]);
+                        }
+                        if (currentIndex != null) {
+                            currentIndex += value.length;
+                        }
+                    }
+                    else if (value) {
+                        values.push(value);
+                        if (currentIndex != null) {
+                            currentIndex++;
+                        }
+                    }
+                }
+            }
+        }
     }
-    return values1;
+    return values;
+}
+function stripSpecialProps(props) {
+    let _;
+    let result;
+    ({ key: _, ref: _, copy: _, hydrate: _, children: _, ...result } = props);
+    return result;
 }
-const defaultRendererImpl = {
+const defaultAdapter = {
     create() {
-        throw new Error("Not implemented");
+        throw new Error("adapter must implement create");
     },
-    hydrate() {
-        throw new Error("Not implemented");
+    adopt() {
+        throw new Error("adapter must implement adopt() for hydration");
     },
-    scope: IDENTITY,
-    read: IDENTITY,
-    text: IDENTITY,
-    raw: IDENTITY,
+    scope: ({ scope }) => scope,
+    read: (value) => value,
+    text: ({ value }) => value,
+    raw: ({ value }) => value,
     patch: NOOP,
     arrange: NOOP,
-    dispose: NOOP,
-    flush: NOOP,
+    remove: NOOP,
+    finalize: NOOP,
 };
-const _RendererImpl = Symbol.for("crank.RendererImpl");
 /**
  * An abstract class which is subclassed to render to different target
- * environments. Subclasses will typically call super() with a custom
- * RendererImpl. This class is responsible for kicking off the rendering
- * process and caching previous trees by root.
+ * environments. Subclasses call super() with a custom RenderAdapter object.
+ * This class is responsible for kicking off the rendering process and caching
+ * previous trees by root.
  *
  * @template TNode - The type of the node for a rendering environment.
  * @template TScope - Data which is passed down the tree.
@@ -312,125 +349,128 @@ const _RendererImpl = Symbol.for("crank.RendererImpl");
  * @template TResult - The type of exposed values.
  */
 class Renderer {
-    constructor(impl) {
+    constructor(adapter) {
         this.cache = new WeakMap();
-        this[_RendererImpl] = {
-            ...defaultRendererImpl,
-            ...impl,
-        };
+        this.adapter = { ...defaultAdapter, ...adapter };
     }
     /**
      * Renders an element tree into a specific root.
      *
-     * @param children - An element tree. You can render null with a previously
-     * used root to delete the previously rendered element tree from the cache.
-     * @param root - The node to be rendered into. The renderer will cache
-     * element trees per root.
-     * @param bridge - An optional context that will be the ancestor context of all
-     * elements in the tree. Useful for connecting different renderers so that
-     * events/provisions properly propagate. The context for a given root must be
-     * the same or an error will be thrown.
+     * @param children - An element tree. Rendering null deletes cached renders.
+     * @param root - The root to be rendered into. The renderer caches renders
+     * per root.
+     * @param bridge - An optional context that will be the ancestor context of
+     * all elements in the tree. Useful for connecting different renderers so
+     * that events/provisions/errors properly propagate. The context for a given
+     * root must be the same between renders.
      *
      * @returns The result of rendering the children, or a possible promise of
      * the result if the element tree renders asynchronously.
      */
     render(children, root, bridge) {
-        let ret;
-        const ctx = bridge && bridge[_ContextImpl];
-        if (typeof root === "object" && root !== null) {
-            ret = this.cache.get(root);
-        }
-        let oldProps;
-        if (ret === undefined) {
-            ret = new Retainer(createElement(Portal, { children, root }));
-            ret.value = root;
-            ret.ctx = ctx;
-            if (typeof root === "object" && root !== null && children != null) {
-                this.cache.set(root, ret);
-            }
-        }
-        else if (ret.ctx !== ctx) {
-            throw new Error("Context mismatch");
-        }
-        else {
-            oldProps = ret.el.props;
-            ret.el = createElement(Portal, { children, root });
-            if (typeof root === "object" && root !== null && children == null) {
-                this.cache.delete(root);
-            }
-        }
-        const impl = this[_RendererImpl];
-        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children, undefined);
-        // We return the child values of the portal because portal elements
-        // themselves have no readable value.
-        if (isPromiseLike(childValues)) {
-            return childValues.then((childValues) => commitRootRender(impl, root, ctx, ret, childValues, oldProps));
-        }
-        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
+        const ret = getRootRetainer(this, bridge, { children, root });
+        return renderRoot(this.adapter, root, ret, children);
     }
     hydrate(children, root, bridge) {
-        const impl = this[_RendererImpl];
-        const ctx = bridge && bridge[_ContextImpl];
-        let ret;
-        ret = this.cache.get(root);
-        if (ret !== undefined) {
-            // If there is a retainer for the root, hydration is not necessary.
-            return this.render(children, root, bridge);
-        }
-        let oldProps;
-        ret = new Retainer(createElement(Portal, { children, root }));
+        const ret = getRootRetainer(this, bridge, {
+            children,
+            root,
+            hydrate: true,
+        });
+        return renderRoot(this.adapter, root, ret, children);
+    }
+}
+/*** PRIVATE RENDERER FUNCTIONS ***/
+function getRootRetainer(renderer, bridge, { children, root, hydrate, }) {
+    let ret;
+    const bridgeCtx = bridge && bridge[_ContextState];
+    if (typeof root === "object" && root !== null) {
+        ret = renderer.cache.get(root);
+    }
+    const adapter = renderer.adapter;
+    if (ret === undefined) {
+        ret = new Retainer(createElement(Portal, { children, root, hydrate }));
         ret.value = root;
+        ret.ctx = bridgeCtx;
+        ret.scope = adapter.scope({
+            tag: Portal,
+            tagName: getTagName(Portal),
+            props: stripSpecialProps(ret.el.props),
+            scope: undefined,
+        });
+        // remember that typeof null === "object"
         if (typeof root === "object" && root !== null && children != null) {
-            this.cache.set(root, ret);
+            renderer.cache.set(root, ret);
         }
-        const hydrationData = impl.hydrate(Portal, root, {});
-        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children, hydrationData);
-        // We return the child values of the portal because portal elements
-        // themselves have no readable value.
-        if (isPromiseLike(childValues)) {
-            return childValues.then((childValues) => commitRootRender(impl, root, ctx, ret, childValues, oldProps));
+    }
+    else if (ret.ctx !== bridgeCtx) {
+        throw new Error("A previous call to render() was passed a different context");
+    }
+    else {
+        ret.el = createElement(Portal, { children, root, hydrate });
+        if (typeof root === "object" && root !== null && children == null) {
+            renderer.cache.delete(root);
         }
-        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
     }
+    return ret;
 }
-/*** PRIVATE RENDERER FUNCTIONS ***/
-function commitRootRender(renderer, root, ctx, ret, childValues, oldProps) {
-    // element is a host or portal element
-    if (root != null) {
-        renderer.arrange(Portal, root, ret.el.props, childValues, oldProps, wrap(ret.cachedChildValues));
-        flush(renderer, root);
+function renderRoot(adapter, root, ret, children) {
+    const diff = diffChildren(adapter, root, ret, ret.ctx, ret.scope, ret, children);
+    const schedulePromises = [];
+    if (isPromiseLike(diff)) {
+        return diff.then(() => {
+            commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+            if (schedulePromises.length > 0) {
+                return Promise.all(schedulePromises).then(() => {
+                    if (typeof root !== "object" || root === null) {
+                        unmount(adapter, ret, ret.ctx, ret, false);
+                    }
+                    return adapter.read(unwrap(getChildValues(ret)));
+                });
+            }
+            if (typeof root !== "object" || root === null) {
+                unmount(adapter, ret, ret.ctx, ret, false);
+            }
+            return adapter.read(unwrap(getChildValues(ret)));
+        });
+    }
+    commit(adapter, ret, ret, ret.ctx, ret.scope, 0, schedulePromises, undefined);
+    if (schedulePromises.length > 0) {
+        return Promise.all(schedulePromises).then(() => {
+            if (typeof root !== "object" || root === null) {
+                unmount(adapter, ret, ret.ctx, ret, false);
+            }
+            return adapter.read(unwrap(getChildValues(ret)));
+        });
     }
-    ret.cachedChildValues = unwrap(childValues);
-    if (root == null) {
-        unmount(renderer, ret, ctx, ret);
+    if (typeof root !== "object" || root === null) {
+        unmount(adapter, ret, ret.ctx, ret, false);
     }
-    return renderer.read(ret.cachedChildValues);
+    return adapter.read(unwrap(getChildValues(ret)));
 }
-function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrationData) {
+function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
     const oldRetained = wrap(parent.children);
     const newRetained = [];
-    const newChildren = arrayify(children);
-    const values = [];
-    let graveyard;
+    const newChildren1 = arrayify(newChildren);
+    const diffs = [];
     let childrenByKey;
     let seenKeys;
     let isAsync = false;
-    // When hydrating, sibling element trees must be rendered in order, because
-    // we do not know how many DOM nodes an element will render.
-    let hydrationBlock;
     let oi = 0;
     let oldLength = oldRetained.length;
-    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
+    let graveyard;
+    for (let ni = 0, newLength = newChildren1.length; ni < newLength; ni++) {
         // length checks to prevent index out of bounds deoptimizations.
         let ret = oi >= oldLength ? undefined : oldRetained[oi];
-        let child = narrow(newChildren[ni]);
+        let child = narrow(newChildren1[ni]);
         {
             // aligning new children with old retainers
-            let oldKey = typeof ret === "object" ? ret.el.key : undefined;
-            let newKey = typeof child === "object" ? child.key : undefined;
+            let oldKey = typeof ret === "object" ? ret.el.props.key : undefined;
+            let newKey = typeof child === "object" ? child.props.key : undefined;
             if (newKey !== undefined && seenKeys && seenKeys.has(newKey)) {
-                console.error("Duplicate key", newKey);
-                newKey = undefined;
+                console.error(`Duplicate key found in <${getTagName(parent.el.tag)}>`, newKey);
+                child = cloneElement(child);
+                newKey = child.props.key = undefined;
             }
             if (oldKey === newKey) {
                 if (childrenByKey !== undefined && newKey !== undefined) {
@@ -444,7 +484,7 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrat
                     while (ret !== undefined && oldKey !== undefined) {
                         oi++;
                         ret = oldRetained[oi];
-                        oldKey = typeof ret === "object" ? ret.el.key : undefined;
+                        oldKey = typeof ret === "object" ? ret.el.props.key : undefined;
                     }
                     oi++;
                 }
@@ -457,405 +497,748 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrat
                 }
             }
         }
-        // Updating
-        let value;
+        let diff = undefined;
         if (typeof child === "object") {
-            if (child.tag === Copy || (typeof ret === "object" && ret.el === child)) {
-                value = getInflightValue(ret);
+            let childCopied = false;
+            if (child.tag === Copy) {
+                childCopied = true;
+            }
+            else if (typeof ret === "object" &&
+                ret.el === child &&
+                getFlag(ret, DidCommit)) {
+                // If the child is the same as the retained element, we skip
+                // re-rendering.
+                childCopied = true;
             }
             else {
-                let oldProps;
-                let copy = false;
-                if (typeof ret === "object" && ret.el.tag === child.tag) {
-                    oldProps = ret.el.props;
+                if (ret && ret.el.tag === child.tag) {
                     ret.el = child;
-                    if (child.copy) {
-                        value = getInflightValue(ret);
-                        copy = true;
+                    if (child.props.copy && typeof child.props.copy !== "string") {
+                        childCopied = true;
                     }
                 }
-                else {
-                    if (typeof ret === "object") {
-                        (graveyard = graveyard || []).push(ret);
+                else if (ret) {
+                    // we do not need to add the retainer to the graveyard if it is the
+                    // fallback of another retainer
+                    // search for the tag in fallback chain
+                    let candidateFound = false;
+                    for (let predecessor = ret, candidate = ret.fallback; candidate; predecessor = candidate, candidate = candidate.fallback) {
+                        if (candidate.el.tag === child.tag) {
+                            // If we find a retainer in the fallback chain with the same tag,
+                            // we reuse it rather than creating a new retainer to preserve
+                            // state. This behavior is useful for when a Suspense component
+                            // re-renders and the children are re-rendered quickly.
+                            const clone = cloneRetainer(candidate);
+                            setFlag(clone, IsResurrecting);
+                            predecessor.fallback = clone;
+                            const fallback = ret;
+                            ret = candidate;
+                            ret.el = child;
+                            ret.fallback = fallback;
+                            setFlag(ret, DidDiff, false);
+                            candidateFound = true;
+                            break;
+                        }
+                    }
+                    if (!candidateFound) {
+                        const fallback = ret;
+                        ret = new Retainer(child);
+                        ret.fallback = fallback;
                     }
-                    const fallback = ret;
-                    ret = new Retainer(child);
-                    ret.fallbackValue = fallback;
                 }
-                if (copy) ;
-                else if (child.tag === Raw) {
-                    value = hydrationBlock
-                        ? hydrationBlock.then(() => updateRaw(renderer, ret, scope, oldProps, hydrationData))
-                        : updateRaw(renderer, ret, scope, oldProps, hydrationData);
+                else {
+                    ret = new Retainer(child);
                 }
+                if (childCopied && getFlag(ret, DidCommit)) ;
+                else if (child.tag === Raw || child.tag === Text) ;
                 else if (child.tag === Fragment) {
-                    value = hydrationBlock
-                        ? hydrationBlock.then(() => updateFragment(renderer, root, host, ctx, scope, ret, hydrationData))
-                        : updateFragment(renderer, root, host, ctx, scope, ret, hydrationData);
+                    diff = diffChildren(adapter, root, host, ctx, scope, ret, ret.el.props.children);
                 }
                 else if (typeof child.tag === "function") {
-                    value = hydrationBlock
-                        ? hydrationBlock.then(() => updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData))
-                        : updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData);
+                    diff = diffComponent(adapter, root, host, ctx, scope, ret);
+                }
+                else {
+                    diff = diffHost(adapter, root, ctx, scope, ret);
+                }
+            }
+            if (typeof ret === "object") {
+                if (childCopied) {
+                    setFlag(ret, IsCopied);
+                    diff = getInflightDiff(ret);
                 }
                 else {
-                    value = hydrationBlock
-                        ? hydrationBlock.then(() => updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData))
-                        : updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData);
+                    setFlag(ret, IsCopied, false);
                 }
             }
-            if (isPromiseLike(value)) {
+            if (isPromiseLike(diff)) {
                 isAsync = true;
-                if (hydrationData !== undefined) {
-                    hydrationBlock = value;
+            }
+        }
+        else if (typeof child === "string") {
+            if (typeof ret === "object" && ret.el.tag === Text) {
+                ret.el.props.value = child;
+            }
+            else {
+                if (typeof ret === "object") {
+                    (graveyard = graveyard || []).push(ret);
                 }
+                ret = new Retainer(createElement(Text, { value: child }));
             }
         }
         else {
-            // child is a string or undefined
             if (typeof ret === "object") {
                 (graveyard = graveyard || []).push(ret);
             }
-            if (typeof child === "string") {
-                value = ret = renderer.text(child, scope, hydrationData);
-            }
-            else {
-                ret = undefined;
-            }
+            ret = undefined;
         }
-        values[ni] = value;
+        diffs[ni] = diff;
         newRetained[ni] = ret;
     }
     // cleanup remaining retainers
     for (; oi < oldLength; oi++) {
         const ret = oldRetained[oi];
         if (typeof ret === "object" &&
-            (typeof ret.el.key === "undefined" ||
+            (typeof ret.el.props.key === "undefined" ||
                 !seenKeys ||
-                !seenKeys.has(ret.el.key))) {
+                !seenKeys.has(ret.el.props.key))) {
             (graveyard = graveyard || []).push(ret);
         }
     }
     if (childrenByKey !== undefined && childrenByKey.size > 0) {
-        (graveyard = graveyard || []).push(...childrenByKey.values());
+        graveyard = graveyard || [];
+        for (const ret of childrenByKey.values()) {
+            graveyard.push(ret);
+        }
     }
     parent.children = unwrap(newRetained);
     if (isAsync) {
-        let childValues1 = Promise.all(values).finally(() => {
+        const diffs1 = Promise.all(diffs)
+            .then(() => undefined)
+            .finally(() => {
+            setFlag(parent, DidDiff);
             if (graveyard) {
-                for (let i = 0; i < graveyard.length; i++) {
-                    unmount(renderer, host, ctx, graveyard[i]);
+                if (parent.graveyard) {
+                    for (let i = 0; i < graveyard.length; i++) {
+                        parent.graveyard.push(graveyard[i]);
+                    }
+                }
+                else {
+                    parent.graveyard = graveyard;
                 }
             }
         });
-        let onChildValues;
-        childValues1 = Promise.race([
-            childValues1,
-            new Promise((resolve) => (onChildValues = resolve)),
-        ]);
-        if (parent.onNextValues) {
-            parent.onNextValues(childValues1);
-        }
-        parent.onNextValues = onChildValues;
-        return childValues1.then((childValues) => {
-            parent.inflightValue = parent.fallbackValue = undefined;
-            return normalize(childValues);
-        });
+        let onNextDiffs;
+        const diffs2 = (parent.pendingDiff = safeRace([
+            diffs1,
+            new Promise((resolve) => (onNextDiffs = resolve)),
+        ]));
+        if (parent.onNextDiff) {
+            parent.onNextDiff(diffs2);
+        }
+        parent.onNextDiff = onNextDiffs;
+        return diffs2;
     }
     else {
+        setFlag(parent, DidDiff);
         if (graveyard) {
-            for (let i = 0; i < graveyard.length; i++) {
-                unmount(renderer, host, ctx, graveyard[i]);
+            if (parent.graveyard) {
+                for (let i = 0; i < graveyard.length; i++) {
+                    parent.graveyard.push(graveyard[i]);
+                }
+            }
+            else {
+                parent.graveyard = graveyard;
             }
         }
-        if (parent.onNextValues) {
-            parent.onNextValues(values);
-            parent.onNextValues = undefined;
+        if (parent.onNextDiff) {
+            parent.onNextDiff(diffs);
+            parent.onNextDiff = undefined;
         }
-        parent.inflightValue = parent.fallbackValue = undefined;
-        // We can assert there are no promises in the array because isAsync is false
-        return normalize(values);
+        parent.pendingDiff = undefined;
+    }
+}
+function getInflightDiff(ret) {
+    // It is not enough to check pendingDiff because pendingDiff is the diff for
+    // children, but not the diff of an async component retainer's current run.
+    // For the latter we check ctx.inflight.
+    if (ret.ctx && ret.ctx.inflight) {
+        return ret.ctx.inflight[1];
+    }
+    else if (ret.pendingDiff) {
+        return ret.pendingDiff;
     }
 }
 function createChildrenByKey(children, offset) {
     const childrenByKey = new Map();
     for (let i = offset; i < children.length; i++) {
         const child = children[i];
-        if (typeof child === "object" && typeof child.el.key !== "undefined") {
-            childrenByKey.set(child.el.key, child);
+        if (typeof child === "object" &&
+            typeof child.el.props.key !== "undefined") {
+            childrenByKey.set(child.el.props.key, child);
         }
     }
     return childrenByKey;
 }
-function getInflightValue(child) {
-    if (typeof child !== "object") {
-        return child;
-    }
-    const ctx = typeof child.el.tag === "function" ? child.ctx : undefined;
-    if (ctx && ctx.f & IsUpdating && ctx.inflightValue) {
-        return ctx.inflightValue;
+function diffHost(adapter, root, ctx, scope, ret) {
+    const el = ret.el;
+    const tag = el.tag;
+    if (el.tag === Portal) {
+        root = ret.value = el.props.root;
     }
-    else if (child.inflightValue) {
-        return child.inflightValue;
+    if (getFlag(ret, DidCommit)) {
+        scope = ret.scope;
     }
-    return getValue(child);
-}
-function updateRaw(renderer, ret, scope, oldProps, hydrationData) {
-    const props = ret.el.props;
-    if (!oldProps || oldProps.value !== props.value) {
-        ret.value = renderer.raw(props.value, scope, hydrationData);
-        if (typeof ret.el.ref === "function") {
-            ret.el.ref(ret.value);
-        }
+    else {
+        scope = ret.scope = adapter.scope({
+            tag,
+            tagName: getTagName(tag),
+            props: el.props,
+            scope,
+        });
     }
-    return ret.value;
+    return diffChildren(adapter, root, ret, ctx, scope, ret, ret.el.props.children);
 }
-function updateFragment(renderer, root, host, ctx, scope, ret, hydrationData) {
-    const childValues = diffChildren(renderer, root, host, ctx, scope, ret, ret.el.props.children, hydrationData);
-    if (isPromiseLike(childValues)) {
-        ret.inflightValue = childValues.then((childValues) => unwrap(childValues));
-        return ret.inflightValue;
+function commit(adapter, host, ret, ctx, scope, index, schedulePromises, hydrationNodes) {
+    if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
+        return getValue(ret);
     }
-    return unwrap(childValues);
-}
-function updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData) {
     const el = ret.el;
     const tag = el.tag;
-    let hydrationValue;
-    if (el.tag === Portal) {
-        root = ret.value = el.props.root;
+    if (typeof tag === "function" ||
+        tag === Fragment ||
+        tag === Portal ||
+        tag === Raw ||
+        tag === Text) {
+        if (typeof el.props.copy === "string") {
+            console.error(`String copy prop ignored for <${getTagName(tag)}>. Use booleans instead.`);
+        }
+        if (typeof el.props.hydrate === "string") {
+            console.error(`String hydrate prop ignored for <${getTagName(tag)}>. Use booleans instead.`);
+        }
+    }
+    let value;
+    let skippedHydrationNodes;
+    if (hydrationNodes &&
+        el.props.hydrate != null &&
+        !el.props.hydrate &&
+        typeof el.props.hydrate !== "string") {
+        skippedHydrationNodes = hydrationNodes;
+        hydrationNodes = undefined;
+    }
+    if (typeof tag === "function") {
+        ret.ctx.index = index;
+        value = commitComponent(ret.ctx, schedulePromises, hydrationNodes);
     }
     else {
-        if (hydrationData !== undefined) {
-            const value = hydrationData.children.shift();
-            hydrationValue = value;
+        if (tag === Fragment) {
+            value = commitChildren(adapter, host, ctx, scope, ret, index, schedulePromises, hydrationNodes);
         }
-    }
-    scope = renderer.scope(scope, tag, el.props);
-    let childHydrationData;
-    if (hydrationValue != null && typeof hydrationValue !== "string") {
-        childHydrationData = renderer.hydrate(tag, hydrationValue, el.props);
-        if (childHydrationData === undefined) {
-            hydrationValue = undefined;
+        else if (tag === Text) {
+            value = commitText(adapter, ret, el, scope, hydrationNodes);
+        }
+        else if (tag === Raw) {
+            value = commitRaw(adapter, host, ret, scope, hydrationNodes);
+        }
+        else {
+            value = commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes);
+        }
+        if (ret.fallback) {
+            unmount(adapter, host, ctx, ret.fallback, false);
+            ret.fallback = undefined;
         }
     }
-    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children, childHydrationData);
-    if (isPromiseLike(childValues)) {
-        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue));
-        return ret.inflightValue;
+    if (skippedHydrationNodes) {
+        skippedHydrationNodes.splice(0, wrap(value).length);
     }
-    return commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue);
-}
-function commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue) {
-    const tag = ret.el.tag;
-    let value = ret.value;
-    if (hydrationValue != null) {
-        value = ret.value = hydrationValue;
-        if (typeof ret.el.ref === "function") {
-            ret.el.ref(value);
+    if (!getFlag(ret, DidCommit)) {
+        setFlag(ret, DidCommit);
+        if (typeof tag !== "function" &&
+            tag !== Fragment &&
+            tag !== Portal &&
+            typeof el.props.ref === "function") {
+            el.props.ref(adapter.read(value));
         }
     }
-    let props = ret.el.props;
-    let copied;
-    if (tag !== Portal) {
-        if (value == null) {
-            // This assumes that renderer.create does not return nullish values.
-            value = ret.value = renderer.create(tag, props, scope);
-            if (typeof ret.el.ref === "function") {
-                ret.el.ref(value);
+    return value;
+}
+function commitChildren(adapter, host, ctx, scope, parent, index, schedulePromises, hydrationNodes) {
+    let values = [];
+    for (let i = 0, children = wrap(parent.children); i < children.length; i++) {
+        let child = children[i];
+        let schedulePromises1;
+        let isSchedulingFallback = false;
+        while (child &&
+            ((!getFlag(child, DidDiff) && child.fallback) ||
+                getFlag(child, IsScheduling))) {
+            // If the child is scheduling, it is a component retainer so ctx will be
+            // defined.
+            if (getFlag(child, IsScheduling) && child.ctx.schedule) {
+                (schedulePromises1 = schedulePromises1 || []).push(child.ctx.schedule.promise);
+                isSchedulingFallback = true;
+            }
+            if (!getFlag(child, DidDiff) && getFlag(child, DidCommit)) {
+                // If this child has not diffed but has committed, it means it is a
+                // fallback that is being resurrected.
+                for (const node of getChildValues(child)) {
+                    adapter.remove({
+                        node,
+                        parentNode: host.value,
+                        isNested: false,
+                    });
+                }
+            }
+            child = child.fallback;
+            // When a scheduling component is mounting asynchronously but diffs
+            // immediately, it will cause previous async diffs to settle due to the
+            // chasing mechanism. This would cause earlier renders to resolve sooner
+            // than expected, because the render would be missing both its usual
+            // children and the children of the scheduling render. Therefore, we need
+            // to defer the settling of previous renders until either that render
+            // settles, or the scheduling component finally finishes scheduling.
+            //
+            // To do this, we take advantage of the fact that commits for aborted
+            // renders will still fire and walk the tree. During that commit walk,
+            // when we encounter a scheduling element, we push a race of the
+            // scheduling promise with the inflight diff of the async fallback
+            // fallback to schedulePromises to delay the initiator.
+            //
+            // However, we need to make sure we only use the inflight diffs for the
+            // fallback which we are trying to delay, in the case of multiple renders
+            // and fallbacks. To do this, we take advantage of the fact that when
+            // multiple renders race (e.g., render1->render2->render3->scheduling
+            // component), the chasing mechanism will call stale commits in reverse
+            // order.
+            //
+            // We can use this ordering to delay to find which fallbacks we need to
+            // add to the race. Each commit call progressively marks an additional
+            // fallback as a scheduling fallback, and does not contribute to the
+            // scheduling promises if it is further than the last seen level.
+            //
+            // This prevents promise contamination where newer renders settle early
+            // due to diffs from older renders.
+            if (schedulePromises1 && isSchedulingFallback && child) {
+                if (!getFlag(child, DidDiff)) {
+                    const inflightDiff = getInflightDiff(child);
+                    schedulePromises1.push(inflightDiff);
+                }
+                else {
+                    // If a scheduling component's fallback has already diffed, we do not
+                    // need delay the render.
+                    schedulePromises1 = undefined;
+                }
+                if (getFlag(child, IsSchedulingFallback)) {
+                    // This fallback was marked by a more recent commit - keep processing
+                    // deeper levels
+                    isSchedulingFallback = true;
+                }
+                else {
+                    // First unmarked fallback we've encountered - mark it and stop
+                    // contributing to schedulePromises1 for deeper levels.
+                    setFlag(child, IsSchedulingFallback, true);
+                    isSchedulingFallback = false;
+                }
             }
         }
-        for (const propName in { ...oldProps, ...props }) {
-            const propValue = props[propName];
-            if (propValue === Copy) {
-                // TODO: The Copy tag doubles as a way to skip the patching of a prop.
-                // Not sure about this feature. Should probably be removed.
-                (copied = copied || new Set()).add(propName);
+        if (schedulePromises1 && schedulePromises1.length > 1) {
+            schedulePromises.push(safeRace(schedulePromises1));
+        }
+        if (child) {
+            const value = commit(adapter, host, child, ctx, scope, index, schedulePromises, hydrationNodes);
+            if (Array.isArray(value)) {
+                for (let j = 0; j < value.length; j++) {
+                    values.push(value[j]);
+                }
+                index += value.length;
             }
-            else if (!SPECIAL_PROPS.has(propName)) {
-                renderer.patch(tag, value, propName, propValue, oldProps && oldProps[propName], scope);
+            else if (value) {
+                values.push(value);
+                index++;
             }
         }
     }
-    if (copied) {
-        props = { ...ret.el.props };
-        for (const name of copied) {
-            props[name] = oldProps && oldProps[name];
+    if (parent.graveyard) {
+        for (let i = 0; i < parent.graveyard.length; i++) {
+            const child = parent.graveyard[i];
+            unmount(adapter, host, ctx, child, false);
         }
-        ret.el = new Element(tag, props);
+        parent.graveyard = undefined;
     }
-    renderer.arrange(tag, value, props, childValues, oldProps, wrap(ret.cachedChildValues));
-    ret.cachedChildValues = unwrap(childValues);
-    if (tag === Portal) {
-        flush(renderer, ret.value);
-        return;
+    if (parent.lingerers) {
+        // if parent.lingerers is set, a descendant component is unmounting
+        // asynchronously, so we overwrite values to include lingerering DOM nodes.
+        values = getChildValues(parent);
     }
+    return values;
+}
+function commitText(adapter, ret, el, scope, hydrationNodes) {
+    const value = adapter.text({
+        value: el.props.value,
+        scope,
+        oldNode: ret.value,
+        hydrationNodes,
+    });
+    ret.value = value;
     return value;
 }
-function flush(renderer, root, initiator) {
-    renderer.flush(root);
-    if (typeof root !== "object" || root === null) {
-        return;
+function commitRaw(adapter, host, ret, scope, hydrationNodes) {
+    if (!ret.oldProps || ret.oldProps.value !== ret.el.props.value) {
+        const oldNodes = wrap(ret.value);
+        for (let i = 0; i < oldNodes.length; i++) {
+            const oldNode = oldNodes[i];
+            adapter.remove({
+                node: oldNode,
+                parentNode: host.value,
+                isNested: false,
+            });
+        }
+        ret.value = adapter.raw({
+            value: ret.el.props.value,
+            scope,
+            hydrationNodes,
+        });
+    }
+    ret.oldProps = stripSpecialProps(ret.el.props);
+    return ret.value;
+}
+function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
+    if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
+        return getValue(ret);
     }
-    const flushMap = flushMaps.get(root);
-    if (flushMap) {
-        if (initiator) {
-            const flushMap1 = new Map();
-            for (let [ctx, callbacks] of flushMap) {
-                if (!ctxContains(initiator, ctx)) {
-                    flushMap.delete(ctx);
-                    flushMap1.set(ctx, callbacks);
+    const tag = ret.el.tag;
+    const props = stripSpecialProps(ret.el.props);
+    const oldProps = ret.oldProps;
+    let node = ret.value;
+    let copyProps;
+    let copyChildren = false;
+    if (oldProps) {
+        for (const propName in props) {
+            if (props[propName] === Copy) {
+                // The Copy tag can be used to skip the patching of a prop.
+                //   <div class={shouldPatchClass ? "class-name" : Copy} />
+                props[propName] = oldProps[propName];
+                (copyProps = copyProps || new Set()).add(propName);
+            }
+        }
+        if (typeof ret.el.props.copy === "string") {
+            const copyMetaProp = new MetaProp("copy", ret.el.props.copy);
+            if (copyMetaProp.include) {
+                for (const propName of copyMetaProp.props) {
+                    if (propName in oldProps) {
+                        props[propName] = oldProps[propName];
+                        (copyProps = copyProps || new Set()).add(propName);
+                    }
+                }
+            }
+            else {
+                for (const propName in oldProps) {
+                    if (!copyMetaProp.props.has(propName)) {
+                        props[propName] = oldProps[propName];
+                        (copyProps = copyProps || new Set()).add(propName);
+                    }
+                }
+            }
+            copyChildren = copyMetaProp.includes("children");
+        }
+    }
+    const scope = ret.scope;
+    let childHydrationNodes;
+    let quietProps;
+    let hydrationMetaProp;
+    if (!getFlag(ret, DidCommit)) {
+        if (tag === Portal) {
+            if (ret.el.props.hydrate && typeof ret.el.props.hydrate !== "string") {
+                childHydrationNodes = adapter.adopt({
+                    tag,
+                    tagName: getTagName(tag),
+                    node,
+                    props,
+                    scope,
+                });
+                if (childHydrationNodes) {
+                    for (let i = 0; i < childHydrationNodes.length; i++) {
+                        adapter.remove({
+                            node: childHydrationNodes[i],
+                            parentNode: node,
+                            isNested: false,
+                        });
+                    }
+                }
+            }
+        }
+        else {
+            if (!node && hydrationNodes) {
+                const nextChild = hydrationNodes.shift();
+                if (typeof ret.el.props.hydrate === "string") {
+                    hydrationMetaProp = new MetaProp("hydration", ret.el.props.hydrate);
+                    if (hydrationMetaProp.include) {
+                        // if we're in inclusive mode, we add all props to quietProps and
+                        // remove props specified in the metaprop
+                        quietProps = new Set(Object.keys(props));
+                        for (const propName of hydrationMetaProp.props) {
+                            quietProps.delete(propName);
+                        }
+                    }
+                    else {
+                        quietProps = hydrationMetaProp.props;
+                    }
+                }
+                childHydrationNodes = adapter.adopt({
+                    tag,
+                    tagName: getTagName(tag),
+                    node: nextChild,
+                    props,
+                    scope,
+                });
+                if (childHydrationNodes) {
+                    node = nextChild;
+                    for (let i = 0; i < childHydrationNodes.length; i++) {
+                        adapter.remove({
+                            node: childHydrationNodes[i],
+                            parentNode: node,
+                            isNested: false,
+                        });
+                    }
                 }
             }
-            if (flushMap1.size) {
-                flushMaps.set(root, flushMap1);
+            // TODO: For some reason, there are cases where the node is already set
+            // and the DidCommit flag is false. Not checking for node fails a test
+            // where a child dispatches an event in a schedule callback, the parent
+            // listens for this event and refreshes.
+            if (!node) {
+                node = adapter.create({
+                    tag,
+                    tagName: getTagName(tag),
+                    props,
+                    scope,
+                });
+            }
+            ret.value = node;
+        }
+    }
+    if (tag !== Portal) {
+        adapter.patch({
+            tag,
+            tagName: getTagName(tag),
+            node,
+            props,
+            oldProps,
+            scope,
+            copyProps,
+            isHydrating: !!childHydrationNodes,
+            quietProps,
+        });
+    }
+    if (!copyChildren) {
+        const children = commitChildren(adapter, ret, ctx, scope, ret, 0, schedulePromises, hydrationMetaProp && !hydrationMetaProp.includes("children")
+            ? undefined
+            : childHydrationNodes);
+        adapter.arrange({
+            tag,
+            tagName: getTagName(tag),
+            node: node,
+            props,
+            children,
+            oldProps,
+        });
+    }
+    ret.oldProps = props;
+    if (tag === Portal) {
+        flush(adapter, ret.value);
+        // The root passed to Portal elements are opaque to parents so we return
+        // undefined here.
+        return;
+    }
+    return node;
+}
+class MetaProp {
+    constructor(propName, propValue) {
+        this.include = true;
+        this.props = new Set();
+        let noBangs = true;
+        let allBangs = true;
+        const tokens = propValue.split(/[,\s]+/);
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i].trim();
+            if (!token) {
+                continue;
+            }
+            else if (token.startsWith("!")) {
+                noBangs = false;
+                this.props.add(token.slice(1));
             }
             else {
-                flushMaps.delete(root);
+                allBangs = false;
+                this.props.add(token);
             }
         }
+        if (!allBangs && !noBangs) {
+            console.error(`Invalid ${propName} prop "${propValue}".\nUse prop or !prop but not both.`);
+            this.include = true;
+            this.props.clear();
+        }
+        else {
+            this.include = noBangs;
+        }
+    }
+    includes(propName) {
+        if (this.include) {
+            return this.props.has(propName);
+        }
+        else {
+            return !this.props.has(propName);
+        }
+    }
+}
+function contextContains(parent, child) {
+    for (let current = child; current !== undefined; current = current.parent) {
+        if (current === parent) {
+            return true;
+        }
+    }
+    return false;
+}
+// When rendering is done without a root, we use this special anonymous root to
+// make sure after callbacks are still called.
+const ANONYMOUS_ROOT = {};
+function flush(adapter, root, initiator) {
+    if (root != null) {
+        adapter.finalize(root);
+    }
+    if (typeof root !== "object" || root === null) {
+        root = ANONYMOUS_ROOT;
+    }
+    // The initiator is the context which initiated the rendering process. If
+    // initiator is defined we call and clear all flush callbacks which are
+    // registered with the initiator or with a child context of the initiator,
+    // because they are fully rendered.
+    //
+    // If no initiator is provided, we can call and clear all flush callbacks
+    // which are not scheduling.
+    const afterMap = afterMapByRoot.get(root);
+    if (afterMap) {
+        const afterMap1 = new Map();
+        for (const [ctx, callbacks] of afterMap) {
+            if (getFlag(ctx.ret, IsScheduling) ||
+                (initiator && !contextContains(initiator, ctx))) {
+                // copy over callbacks to the new map (defer them)
+                afterMap.delete(ctx);
+                afterMap1.set(ctx, callbacks);
+            }
+        }
+        if (afterMap1.size) {
+            afterMapByRoot.set(root, afterMap1);
+        }
         else {
-            flushMaps.delete(root);
+            afterMapByRoot.delete(root);
         }
-        for (const [ctx, callbacks] of flushMap) {
-            const value = renderer.read(getValue(ctx.ret));
+        for (const [ctx, callbacks] of afterMap) {
+            const value = adapter.read(getValue(ctx.ret));
             for (const callback of callbacks) {
                 callback(value);
             }
         }
     }
 }
-function unmount(renderer, host, ctx, ret) {
+function unmount(adapter, host, ctx, ret, isNested) {
+    // TODO: set the IsUnmounted flag consistently for all retainers
+    if (ret.fallback) {
+        unmount(adapter, host, ctx, ret.fallback, isNested);
+        ret.fallback = undefined;
+    }
+    if (getFlag(ret, IsResurrecting)) {
+        return;
+    }
+    if (ret.lingerers) {
+        for (let i = 0; i < ret.lingerers.length; i++) {
+            const lingerers = ret.lingerers[i];
+            if (lingerers) {
+                for (const lingerer of lingerers) {
+                    unmount(adapter, host, ctx, lingerer, isNested);
+                }
+            }
+        }
+        ret.lingerers = undefined;
+    }
     if (typeof ret.el.tag === "function") {
-        ctx = ret.ctx;
-        unmountComponent(ctx);
+        unmountComponent(ret.ctx, isNested);
+    }
+    else if (ret.el.tag === Fragment) {
+        unmountChildren(adapter, host, ctx, ret, isNested);
     }
     else if (ret.el.tag === Portal) {
-        host = ret;
-        renderer.arrange(Portal, host.value, host.el.props, [], host.el.props, wrap(host.cachedChildValues));
-        flush(renderer, host.value);
+        unmountChildren(adapter, ret, ctx, ret, false);
+        if (ret.value != null) {
+            adapter.finalize(ret.value);
+        }
     }
-    else if (ret.el.tag !== Fragment) {
-        if (isEventTarget(ret.value)) {
-            const records = getListenerRecords(ctx, host);
-            for (let i = 0; i < records.length; i++) {
-                const record = records[i];
-                ret.value.removeEventListener(record.type, record.callback, record.options);
-            }
+    else {
+        unmountChildren(adapter, ret, ctx, ret, true);
+        if (getFlag(ret, DidCommit)) {
+            if (ctx) {
+                // Remove the value from every context which shares the same host.
+                removeEventTargetDelegates(ctx.ctx, [ret.value], (ctx1) => ctx1[_ContextState].host === host);
+            }
+            adapter.remove({
+                node: ret.value,
+                parentNode: host.value,
+                isNested,
+            });
         }
-        renderer.dispose(ret.el.tag, ret.value, ret.el.props);
-        host = ret;
     }
-    const children = wrap(ret.children);
-    for (let i = 0; i < children.length; i++) {
+}
+function unmountChildren(adapter, host, ctx, ret, isNested) {
+    if (ret.graveyard) {
+        for (let i = 0; i < ret.graveyard.length; i++) {
+            const child = ret.graveyard[i];
+            unmount(adapter, host, ctx, child, isNested);
+        }
+        ret.graveyard = undefined;
+    }
+    for (let i = 0, children = wrap(ret.children); i < children.length; i++) {
         const child = children[i];
         if (typeof child === "object") {
-            unmount(renderer, host, ctx, child);
+            unmount(adapter, host, ctx, child, isNested);
         }
     }
 }
-/*** CONTEXT FLAGS ***/
-/**
- * A flag which is true when the component is initialized or updated by an
- * ancestor component or the root render call.
- *
- * Used to determine things like whether the nearest host ancestor needs to be
- * rearranged.
- */
-const IsUpdating = 1 << 0;
-/**
- * A flag which is true when the component is synchronously executing.
- *
- * Used to guard against components triggering stack overflow or generator error.
- */
-const IsSyncExecuting = 1 << 1;
+const provisionMaps = new WeakMap();
+const scheduleMap = new WeakMap();
+const cleanupMap = new WeakMap();
+// keys are roots
+const afterMapByRoot = new WeakMap();
+// TODO: allow ContextState to be initialized for testing purposes
 /**
- * A flag which is true when the component is in a for...of loop.
+ * @internal
+ * The internal class which holds context data.
  */
-const IsInForOfLoop = 1 << 2;
-/**
- * A flag which is true when the component is in a for await...of loop.
- */
-const IsInForAwaitOfLoop = 1 << 3;
-/**
- * A flag which is true when the component starts the render loop but has not
- * yielded yet.
- *
- * Used to make sure that components yield at least once per loop.
- */
-const NeedsToYield = 1 << 4;
-/**
- * A flag used by async generator components in conjunction with the
- * onAvailable callback to mark whether new props can be pulled via the context
- * async iterator. See the Symbol.asyncIterator method and the
- * resumeCtxIterator function.
- */
-const PropsAvailable = 1 << 5;
-/**
- * A flag which is set when a component errors.
- *
- * This is mainly used to prevent some false positives in "component yields or
- * returns undefined" warnings. The reason we’re using this versus IsUnmounted
- * is a very troubling test (cascades sync generator parent and sync generator
- * child) where synchronous code causes a stack overflow error in a
- * non-deterministic way. Deeply disturbing stuff.
- */
-const IsErrored = 1 << 6;
-/**
- * A flag which is set when the component is unmounted. Unmounted components
- * are no longer in the element tree and cannot refresh or rerender.
- */
-const IsUnmounted = 1 << 7;
-/**
- * A flag which indicates that the component is a sync generator component.
- */
-const IsSyncGen = 1 << 8;
-/**
- * A flag which indicates that the component is an async generator component.
- */
-const IsAsyncGen = 1 << 9;
-/**
- * A flag which is set while schedule callbacks are called.
- */
-const IsScheduling = 1 << 10;
-/**
- * A flag which is set when a schedule callback calls refresh.
- */
-const IsSchedulingRefresh = 1 << 11;
-const provisionMaps = new WeakMap();
-const scheduleMap = new WeakMap();
-const cleanupMap = new WeakMap();
-// keys are roots
-const flushMaps = new WeakMap();
-/**
- * @internal
- * The internal class which holds context data.
- */
-class ContextImpl {
-    constructor(renderer, root, host, parent, scope, ret) {
-        this.f = 0;
-        this.owner = new Context(this);
-        this.renderer = renderer;
+class ContextState {
+    constructor(adapter, root, host, parent, scope, ret) {
+        this.adapter = adapter;
         this.root = root;
         this.host = host;
         this.parent = parent;
+        // This property must be set after this.parent is set because the Context
+        // constructor reads this.parent.
+        this.ctx = new Context(this);
         this.scope = scope;
         this.ret = ret;
         this.iterator = undefined;
-        this.inflightBlock = undefined;
-        this.inflightValue = undefined;
-        this.enqueuedBlock = undefined;
-        this.enqueuedValue = undefined;
-        this.onProps = undefined;
+        this.inflight = undefined;
+        this.enqueued = undefined;
+        this.onPropsProvided = undefined;
         this.onPropsRequested = undefined;
+        this.pull = undefined;
+        this.index = 0;
+        this.schedule = undefined;
     }
 }
-const _ContextImpl = Symbol.for("crank.ContextImpl");
+const _ContextState = Symbol.for("crank.ContextState");
 /**
  * A class which is instantiated and passed to every component as its this
- * value. Contexts form a tree just like elements and all components in the
- * element tree are connected via contexts. Components can use this tree to
- * communicate data upwards via events and downwards via provisions.
+ * value/second parameter. Contexts form a tree just like elements and all
+ * components in the element tree are connected via contexts. Components can
+ * use this tree to communicate data upwards via events and downwards via
+ * provisions.
  *
  * @template [T=*] - The expected shape of the props passed to the component,
  * or a component function. Used to strongly type the Context iterator methods.
@@ -863,17 +1246,18 @@ const _ContextImpl = Symbol.for("crank.ContextImpl");
  * places such as the return value of refresh and the argument passed to
  * schedule and cleanup callbacks.
  */
-class Context {
+class Context extends CustomEventTarget {
     // TODO: If we could make the constructor function take a nicer value, it
     // would be useful for testing purposes.
-    constructor(impl) {
-        this[_ContextImpl] = impl;
+    constructor(state) {
+        super(state.parent ? state.parent.ctx : null);
+        this[_ContextState] = state;
     }
     /**
      * The current props of the associated element.
      */
     get props() {
-        return this[_ContextImpl].ret.el.props;
+        return this[_ContextState].ret.el.props;
     }
     /**
      * The current value of the associated element.
@@ -881,47 +1265,51 @@ class Context {
      * @deprecated
      */
     get value() {
-        return this[_ContextImpl].renderer.read(getValue(this[_ContextImpl].ret));
+        console.warn("Context.value is deprecated.");
+        return this[_ContextState].adapter.read(getValue(this[_ContextState].ret));
+    }
+    get isExecuting() {
+        return getFlag(this[_ContextState].ret, IsExecuting);
+    }
+    get isUnmounted() {
+        return getFlag(this[_ContextState].ret, IsUnmounted);
     }
     *[Symbol.iterator]() {
-        const ctx = this[_ContextImpl];
+        const ctx = this[_ContextState];
+        setFlag(ctx.ret, IsInForOfLoop);
         try {
-            ctx.f |= IsInForOfLoop;
-            while (!(ctx.f & IsUnmounted)) {
-                if (ctx.f & NeedsToYield) {
-                    throw new Error("Context iterated twice without a yield");
+            while (!getFlag(ctx.ret, IsUnmounted) && !getFlag(ctx.ret, IsErrored)) {
+                if (getFlag(ctx.ret, NeedsToYield)) {
+                    throw new Error(`<${getTagName(ctx.ret.el.tag)}> context iterated twice without a yield`);
                 }
                 else {
-                    ctx.f |= NeedsToYield;
+                    setFlag(ctx.ret, NeedsToYield);
                 }
                 yield ctx.ret.el.props;
             }
         }
         finally {
-            ctx.f &= -5;
+            setFlag(ctx.ret, IsInForOfLoop, false);
         }
     }
     async *[Symbol.asyncIterator]() {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsSyncGen) {
-            throw new Error("Use for...of in sync generator components");
-        }
+        const ctx = this[_ContextState];
+        setFlag(ctx.ret, IsInForAwaitOfLoop);
         try {
-            ctx.f |= IsInForAwaitOfLoop;
-            while (!(ctx.f & IsUnmounted)) {
-                if (ctx.f & NeedsToYield) {
-                    throw new Error("Context iterated twice without a yield");
+            while (!getFlag(ctx.ret, IsUnmounted) && !getFlag(ctx.ret, IsErrored)) {
+                if (getFlag(ctx.ret, NeedsToYield)) {
+                    throw new Error(`<${getTagName(ctx.ret.el.tag)}> context iterated twice without a yield`);
                 }
                 else {
-                    ctx.f |= NeedsToYield;
+                    setFlag(ctx.ret, NeedsToYield);
                 }
-                if (ctx.f & PropsAvailable) {
-                    ctx.f &= ~PropsAvailable;
+                if (getFlag(ctx.ret, PropsAvailable)) {
+                    setFlag(ctx.ret, PropsAvailable, false);
                     yield ctx.ret.el.props;
                 }
                 else {
-                    const props = await new Promise((resolve) => (ctx.onProps = resolve));
-                    if (ctx.f & IsUnmounted) {
+                    const props = await new Promise((resolve) => (ctx.onPropsProvided = resolve));
+                    if (getFlag(ctx.ret, IsUnmounted) || getFlag(ctx.ret, IsErrored)) {
                         break;
                     }
                     yield props;
@@ -933,7 +1321,7 @@ class Context {
             }
         }
         finally {
-            ctx.f &= -9;
+            setFlag(ctx.ret, IsInForAwaitOfLoop, false);
             if (ctx.onPropsRequested) {
                 ctx.onPropsRequested();
                 ctx.onPropsRequested = undefined;
@@ -943,37 +1331,108 @@ class Context {
     /**
      * Re-executes a component.
      *
-     * @returns The rendered value of the component or a promise thereof if the
+     * @param callback - Optional callback to execute before refresh
+     * @returns The rendered result of the component or a promise thereof if the
      * component or its children execute asynchronously.
-     *
-     * The refresh method works a little differently for async generator
-     * components, in that it will resume the Context’s props async iterator
-     * rather than resuming execution. This is because async generator components
-     * are perpetually resumed independent of updates, and rely on the props
-     * async iterator to suspend.
      */
-    refresh() {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsUnmounted) {
-            console.error("Component is unmounted");
-            return ctx.renderer.read(undefined);
+    refresh(callback) {
+        const ctx = this[_ContextState];
+        if (getFlag(ctx.ret, IsUnmounted)) {
+            console.error(`Component <${getTagName(ctx.ret.el.tag)}> is unmounted. Check the isUnmounted property if necessary.`);
+            return ctx.adapter.read(getValue(ctx.ret));
+        }
+        else if (getFlag(ctx.ret, IsExecuting)) {
+            console.error(`Component <${getTagName(ctx.ret.el.tag)}> is already executing Check the isExecuting property if necessary.`);
+            return ctx.adapter.read(getValue(ctx.ret));
+        }
+        if (callback) {
+            const result = callback();
+            if (isPromiseLike(result)) {
+                return Promise.resolve(result).then(() => {
+                    if (!getFlag(ctx.ret, IsUnmounted)) {
+                        return this.refresh();
+                    }
+                    return ctx.adapter.read(getValue(ctx.ret));
+                });
+            }
         }
-        else if (ctx.f & IsSyncExecuting) {
-            console.error("Component is already executing");
-            return ctx.renderer.read(getValue(ctx.ret));
+        let diff;
+        const schedulePromises = [];
+        try {
+            setFlag(ctx.ret, IsRefreshing);
+            diff = enqueueComponent(ctx);
+            if (isPromiseLike(diff)) {
+                return diff
+                    .then(() => ctx.adapter.read(commitComponent(ctx, schedulePromises)))
+                    .then((result) => {
+                    if (schedulePromises.length) {
+                        return Promise.all(schedulePromises).then(() => {
+                            return ctx.adapter.read(getValue(ctx.ret));
+                        });
+                    }
+                    return result;
+                })
+                    .catch((err) => {
+                    const diff = propagateError(ctx, err, schedulePromises);
+                    if (diff) {
+                        return diff.then(() => {
+                            if (schedulePromises.length) {
+                                return Promise.all(schedulePromises).then(() => {
+                                    return ctx.adapter.read(getValue(ctx.ret));
+                                });
+                            }
+                            return ctx.adapter.read(getValue(ctx.ret));
+                        });
+                    }
+                    if (schedulePromises.length) {
+                        return Promise.all(schedulePromises).then(() => {
+                            return ctx.adapter.read(getValue(ctx.ret));
+                        });
+                    }
+                    return ctx.adapter.read(getValue(ctx.ret));
+                })
+                    .finally(() => setFlag(ctx.ret, IsRefreshing, false));
+            }
+            const result = ctx.adapter.read(commitComponent(ctx, schedulePromises));
+            if (schedulePromises.length) {
+                return Promise.all(schedulePromises).then(() => {
+                    return ctx.adapter.read(getValue(ctx.ret));
+                });
+            }
+            return result;
+        }
+        catch (err) {
+            // TODO: await schedulePromises
+            const diff = propagateError(ctx, err, schedulePromises);
+            if (diff) {
+                return diff
+                    .then(() => {
+                    if (schedulePromises.length) {
+                        return Promise.all(schedulePromises).then(() => {
+                            return ctx.adapter.read(getValue(ctx.ret));
+                        });
+                    }
+                })
+                    .then(() => ctx.adapter.read(getValue(ctx.ret)));
+            }
+            if (schedulePromises.length) {
+                return Promise.all(schedulePromises).then(() => {
+                    return ctx.adapter.read(getValue(ctx.ret));
+                });
+            }
+            return ctx.adapter.read(getValue(ctx.ret));
         }
-        const value = enqueueComponentRun(ctx);
-        if (isPromiseLike(value)) {
-            return value.then((value) => ctx.renderer.read(value));
+        finally {
+            if (!isPromiseLike(diff)) {
+                setFlag(ctx.ret, IsRefreshing, false);
+            }
         }
-        return ctx.renderer.read(value);
     }
-    /**
-     * Registers a callback which fires when the component commits. Will only
-     * fire once per callback and update.
-     */
     schedule(callback) {
-        const ctx = this[_ContextImpl];
+        if (!callback) {
+            return new Promise((resolve) => this.schedule(resolve));
+        }
+        const ctx = this[_ContextState];
         let callbacks = scheduleMap.get(ctx);
         if (!callbacks) {
             callbacks = new Set();
@@ -981,35 +1440,35 @@ class Context {
         }
         callbacks.add(callback);
     }
-    /**
-     * Registers a callback which fires when the component’s children are
-     * rendered into the root. Will only fire once per callback and render.
-     */
-    flush(callback) {
-        const ctx = this[_ContextImpl];
-        if (typeof ctx.root !== "object" || ctx.root === null) {
-            return;
+    after(callback) {
+        if (!callback) {
+            return new Promise((resolve) => this.after(resolve));
         }
-        let flushMap = flushMaps.get(ctx.root);
-        if (!flushMap) {
-            flushMap = new Map();
-            flushMaps.set(ctx.root, flushMap);
+        const ctx = this[_ContextState];
+        const root = ctx.root || ANONYMOUS_ROOT;
+        let afterMap = afterMapByRoot.get(root);
+        if (!afterMap) {
+            afterMap = new Map();
+            afterMapByRoot.set(root, afterMap);
         }
-        let callbacks = flushMap.get(ctx);
+        let callbacks = afterMap.get(ctx);
         if (!callbacks) {
             callbacks = new Set();
-            flushMap.set(ctx, callbacks);
+            afterMap.set(ctx, callbacks);
         }
         callbacks.add(callback);
     }
-    /**
-     * Registers a callback which fires when the component unmounts. Will only
-     * fire once per callback.
-     */
+    flush(callback) {
+        console.error("Context.flush() method has been renamed to after()");
+        this.after(callback);
+    }
     cleanup(callback) {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsUnmounted) {
-            const value = ctx.renderer.read(getValue(ctx.ret));
+        if (!callback) {
+            return new Promise((resolve) => this.cleanup(resolve));
+        }
+        const ctx = this[_ContextState];
+        if (getFlag(ctx.ret, IsUnmounted)) {
+            const value = ctx.adapter.read(getValue(ctx.ret));
             callback(value);
             return;
         }
@@ -1021,7 +1480,7 @@ class Context {
         callbacks.add(callback);
     }
     consume(key) {
-        for (let ctx = this[_ContextImpl].parent; ctx !== undefined; ctx = ctx.parent) {
+        for (let ctx = this[_ContextState].parent; ctx !== undefined; ctx = ctx.parent) {
             const provisions = provisionMaps.get(ctx);
             if (provisions && provisions.has(key)) {
                 return provisions.get(key);
@@ -1029,7 +1488,7 @@ class Context {
         }
     }
     provide(key, value) {
-        const ctx = this[_ContextImpl];
+        const ctx = this[_ContextState];
         let provisions = provisionMaps.get(ctx);
         if (!provisions) {
             provisions = new Map();
@@ -1037,977 +1496,781 @@ class Context {
         }
         provisions.set(key, value);
     }
-    addEventListener(type, listener, options) {
-        const ctx = this[_ContextImpl];
-        let listeners;
-        if (!isListenerOrListenerObject(listener)) {
-            return;
-        }
-        else {
-            const listeners1 = listenersMap.get(ctx);
-            if (listeners1) {
-                listeners = listeners1;
-            }
-            else {
-                listeners = [];
-                listenersMap.set(ctx, listeners);
-            }
-        }
-        options = normalizeListenerOptions(options);
-        let callback;
-        if (typeof listener === "object") {
-            callback = () => listener.handleEvent.apply(listener, arguments);
+    [CustomEventTarget.dispatchEventOnSelf](ev) {
+        const ctx = this[_ContextState];
+        // dispatchEvent calls the prop callback if it exists
+        let propCallback = ctx.ret.el.props["on" + ev.type];
+        if (typeof propCallback === "function") {
+            propCallback(ev);
         }
         else {
-            callback = listener;
-        }
-        const record = { type, listener, callback, options };
-        if (options.once) {
-            record.callback = function () {
-                const i = listeners.indexOf(record);
-                if (i !== -1) {
-                    listeners.splice(i, 1);
-                }
-                return callback.apply(this, arguments);
-            };
-        }
-        if (listeners.some((record1) => record.type === record1.type &&
-            record.listener === record1.listener &&
-            !record.options.capture === !record1.options.capture)) {
-            return;
-        }
-        listeners.push(record);
-        // TODO: is it possible to separate out the EventTarget delegation logic
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                value.addEventListener(record.type, record.callback, record.options);
-            }
-        }
-    }
-    removeEventListener(type, listener, options) {
-        const ctx = this[_ContextImpl];
-        const listeners = listenersMap.get(ctx);
-        if (listeners == null || !isListenerOrListenerObject(listener)) {
-            return;
-        }
-        const options1 = normalizeListenerOptions(options);
-        const i = listeners.findIndex((record) => record.type === type &&
-            record.listener === listener &&
-            !record.options.capture === !options1.capture);
-        if (i === -1) {
-            return;
-        }
-        const record = listeners[i];
-        listeners.splice(i, 1);
-        // TODO: is it possible to separate out the EventTarget delegation logic
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                value.removeEventListener(record.type, record.callback, record.options);
-            }
-        }
-    }
-    dispatchEvent(ev) {
-        const ctx = this[_ContextImpl];
-        const path = [];
-        for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
-            path.push(parent);
-        }
-        // We patch the stopImmediatePropagation method because ev.cancelBubble
-        // only informs us if stopPropagation was called and there are no
-        // properties which inform us if stopImmediatePropagation was called.
-        let immediateCancelBubble = false;
-        const stopImmediatePropagation = ev.stopImmediatePropagation;
-        setEventProperty(ev, "stopImmediatePropagation", () => {
-            immediateCancelBubble = true;
-            return stopImmediatePropagation.call(ev);
-        });
-        setEventProperty(ev, "target", ctx.owner);
-        // The only possible errors in this block are errors thrown by callbacks,
-        // and dispatchEvent will only log these errors rather than throwing
-        // them. Therefore, we place all code in a try block, log errors in the
-        // catch block, and use an unsafe return statement in the finally block.
-        //
-        // Each early return within the try block returns true because while the
-        // return value is overridden in the finally block, TypeScript
-        // (justifiably) does not recognize the unsafe return statement.
-        try {
-            setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
-            for (let i = path.length - 1; i >= 0; i--) {
-                const target = path[i];
-                const listeners = listenersMap.get(target);
-                if (listeners) {
-                    setEventProperty(ev, "currentTarget", target.owner);
-                    for (const record of listeners) {
-                        if (record.type === ev.type && record.options.capture) {
-                            try {
-                                record.callback.call(target.owner, ev);
-                            }
-                            catch (err) {
-                                console.error(err);
-                            }
-                            if (immediateCancelBubble) {
-                                return true;
-                            }
-                        }
-                    }
-                }
-                if (ev.cancelBubble) {
-                    return true;
-                }
-            }
-            {
-                setEventProperty(ev, "eventPhase", AT_TARGET);
-                setEventProperty(ev, "currentTarget", ctx.owner);
-                // dispatchEvent calls the prop callback if it exists
-                let propCallback = ctx.ret.el.props["on" + ev.type];
-                if (typeof propCallback === "function") {
-                    propCallback(ev);
-                    if (immediateCancelBubble || ev.cancelBubble) {
-                        return true;
-                    }
-                }
-                else {
-                    // Checks for camel-cased event props
-                    for (const propName in ctx.ret.el.props) {
-                        if (propName.toLowerCase() === "on" + ev.type.toLowerCase()) {
-                            propCallback = ctx.ret.el.props[propName];
-                            if (typeof propCallback === "function") {
-                                propCallback(ev);
-                                if (immediateCancelBubble || ev.cancelBubble) {
-                                    return true;
-                                }
-                            }
-                        }
-                    }
-                }
-                const listeners = listenersMap.get(ctx);
-                if (listeners) {
-                    for (const record of listeners) {
-                        if (record.type === ev.type) {
-                            try {
-                                record.callback.call(ctx.owner, ev);
-                            }
-                            catch (err) {
-                                console.error(err);
-                            }
-                            if (immediateCancelBubble) {
-                                return true;
-                            }
-                        }
-                    }
-                    if (ev.cancelBubble) {
-                        return true;
+            for (const propName in ctx.ret.el.props) {
+                if (propName.toLowerCase() === "on" + ev.type.toLowerCase()) {
+                    propCallback = ctx.ret.el.props[propName];
+                    if (typeof propCallback === "function") {
+                        propCallback(ev);
                     }
                 }
             }
-            if (ev.bubbles) {
-                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
-                for (let i = 0; i < path.length; i++) {
-                    const target = path[i];
-                    const listeners = listenersMap.get(target);
-                    if (listeners) {
-                        setEventProperty(ev, "currentTarget", target.owner);
-                        for (const record of listeners) {
-                            if (record.type === ev.type && !record.options.capture) {
-                                try {
-                                    record.callback.call(target.owner, ev);
-                                }
-                                catch (err) {
-                                    console.error(err);
-                                }
-                                if (immediateCancelBubble) {
-                                    return true;
-                                }
-                            }
-                        }
-                    }
-                    if (ev.cancelBubble) {
-                        return true;
-                    }
-                }
-            }
-        }
-        finally {
-            setEventProperty(ev, "eventPhase", NONE);
-            setEventProperty(ev, "currentTarget", null);
-            // eslint-disable-next-line no-unsafe-finally
-            return !ev.defaultPrevented;
-        }
-    }
-}
-/*** PRIVATE CONTEXT FUNCTIONS ***/
-function ctxContains(parent, child) {
-    for (let current = child; current !== undefined; current = current.parent) {
-        if (current === parent) {
-            return true;
         }
     }
-    return false;
 }
-function updateComponent(renderer, root, host, parent, scope, ret, oldProps, hydrationData) {
+function diffComponent(adapter, root, host, parent, scope, ret) {
     let ctx;
-    if (oldProps) {
+    if (ret.ctx) {
         ctx = ret.ctx;
-        if (ctx.f & IsSyncExecuting) {
-            console.error("Component is already executing");
-            return ret.cachedChildValues;
+        if (getFlag(ctx.ret, IsExecuting)) {
+            console.error(`Component <${getTagName(ctx.ret.el.tag)}> is already executing`);
+            return;
+        }
+        else if (ctx.schedule) {
+            return ctx.schedule.promise.then(() => {
+                return diffComponent(adapter, root, host, parent, scope, ret);
+            });
         }
     }
     else {
-        ctx = ret.ctx = new ContextImpl(renderer, root, host, parent, scope, ret);
+        ctx = ret.ctx = new ContextState(adapter, root, host, parent, scope, ret);
     }
-    ctx.f |= IsUpdating;
-    return enqueueComponentRun(ctx, hydrationData);
+    setFlag(ctx.ret, IsUpdating);
+    return enqueueComponent(ctx);
 }
-function updateComponentChildren(ctx, children, hydrationData) {
-    if (ctx.f & IsUnmounted) {
-        return;
-    }
-    else if (ctx.f & IsErrored) {
-        // This branch is necessary for some race conditions where this function is
-        // called after iterator.throw() in async generator components.
+function diffComponentChildren(ctx, children, isYield) {
+    if (getFlag(ctx.ret, IsUnmounted) || getFlag(ctx.ret, IsErrored)) {
         return;
     }
     else if (children === undefined) {
-        console.error("A component has returned or yielded undefined. If this was intentional, return or yield null instead.");
+        console.error(`Component <${getTagName(ctx.ret.el.tag)}> has ${isYield ? "yielded" : "returned"} undefined. If this was intentional, ${isYield ? "yield" : "return"} null instead.`);
     }
-    let childValues;
+    let diff;
     try {
-        // TODO: WAT
+        // TODO: Use a different flag here to indicate the component is
+        // synchronously rendering children
         // We set the isExecuting flag in case a child component dispatches an event
         // which bubbles to this component and causes a synchronous refresh().
-        ctx.f |= IsSyncExecuting;
-        childValues = diffChildren(ctx.renderer, ctx.root, ctx.host, ctx, ctx.scope, ctx.ret, narrow(children), hydrationData);
-    }
-    finally {
-        ctx.f &= -3;
-    }
-    if (isPromiseLike(childValues)) {
-        ctx.ret.inflightValue = childValues.then((childValues) => commitComponent(ctx, childValues));
-        return ctx.ret.inflightValue;
-    }
-    return commitComponent(ctx, childValues);
-}
-function commitComponent(ctx, values) {
-    if (ctx.f & IsUnmounted) {
-        return;
-    }
-    const listeners = listenersMap.get(ctx);
-    if (listeners && listeners.length) {
-        for (let i = 0; i < values.length; i++) {
-            const value = values[i];
-            if (isEventTarget(value)) {
-                for (let j = 0; j < listeners.length; j++) {
-                    const record = listeners[j];
-                    value.addEventListener(record.type, record.callback, record.options);
-                }
-            }
-        }
-    }
-    const oldValues = wrap(ctx.ret.cachedChildValues);
-    let value = (ctx.ret.cachedChildValues = unwrap(values));
-    if (ctx.f & IsScheduling) {
-        ctx.f |= IsSchedulingRefresh;
-    }
-    else if (!(ctx.f & IsUpdating)) {
-        // If we’re not updating the component, which happens when components are
-        // refreshed, or when async generator components iterate, we have to do a
-        // little bit housekeeping when a component’s child values have changed.
-        if (!arrayEqual(oldValues, values)) {
-            const records = getListenerRecords(ctx.parent, ctx.host);
-            if (records.length) {
-                for (let i = 0; i < values.length; i++) {
-                    const value = values[i];
-                    if (isEventTarget(value)) {
-                        for (let j = 0; j < records.length; j++) {
-                            const record = records[j];
-                            value.addEventListener(record.type, record.callback, record.options);
-                        }
-                    }
-                }
-            }
-            // rearranging the nearest ancestor host element
-            const host = ctx.host;
-            const oldHostValues = wrap(host.cachedChildValues);
-            invalidate(ctx, host);
-            const hostValues = getChildValues(host);
-            ctx.renderer.arrange(host.el.tag, host.value, host.el.props, hostValues, 
-            // props and oldProps are the same because the host isn’t updated.
-            host.el.props, oldHostValues);
-        }
-        flush(ctx.renderer, ctx.root, ctx);
-    }
-    const callbacks = scheduleMap.get(ctx);
-    if (callbacks) {
-        scheduleMap.delete(ctx);
-        ctx.f |= IsScheduling;
-        const value1 = ctx.renderer.read(value);
-        for (const callback of callbacks) {
-            callback(value1);
-        }
-        ctx.f &= -1025;
-        // Handles an edge case where refresh() is called during a schedule().
-        if (ctx.f & IsSchedulingRefresh) {
-            ctx.f &= -2049;
-            value = getValue(ctx.ret);
+        setFlag(ctx.ret, IsExecuting);
+        diff = diffChildren(ctx.adapter, ctx.root, ctx.host, ctx, ctx.scope, ctx.ret, narrow(children));
+        if (diff) {
+            diff = diff.catch((err) => handleChildError(ctx, err));
         }
     }
-    ctx.f &= -2;
-    return value;
-}
-function invalidate(ctx, host) {
-    for (let parent = ctx.parent; parent !== undefined && parent.host === host; parent = parent.parent) {
-        parent.ret.cachedChildValues = undefined;
-    }
-    host.cachedChildValues = undefined;
-}
-function arrayEqual(arr1, arr2) {
-    if (arr1.length !== arr2.length) {
-        return false;
+    catch (err) {
+        diff = handleChildError(ctx, err);
     }
-    for (let i = 0; i < arr1.length; i++) {
-        const value1 = arr1[i];
-        const value2 = arr2[i];
-        if (value1 !== value2) {
-            return false;
-        }
+    finally {
+        setFlag(ctx.ret, IsExecuting, false);
     }
-    return true;
+    return diff;
 }
 /** Enqueues and executes the component associated with the context. */
-function enqueueComponentRun(ctx, hydrationData) {
-    if (ctx.f & IsAsyncGen && !(ctx.f & IsInForOfLoop)) {
-        if (hydrationData !== undefined) {
-            throw new Error("Hydration error");
-        }
-        // This branch will run for non-initial renders of async generator
-        // components when they are not in for...of loops. When in a for...of loop,
-        // async generator components will behave normally.
-        //
-        // Async gen componennts can be in one of three states:
-        //
-        // 1. propsAvailable flag is true: "available"
-        //
-        //   The component is suspended somewhere in the loop. When the component
-        //   reaches the bottom of the loop, it will run again with the next props.
-        //
-        // 2. onAvailable callback is defined: "suspended"
-        //
-        //   The component has suspended at the bottom of the loop and is waiting
-        //   for new props.
-        //
-        // 3. neither 1 or 2: "Running"
-        //
-        //   The component is suspended somewhere in the loop. When the component
-        //   reaches the bottom of the loop, it will suspend.
-        //
-        // Components will never be both available and suspended at
-        // the same time.
-        //
-        // If the component is at the loop bottom, this means that the next value
-        // produced by the component will have the most up to date props, so we can
-        // simply return the current inflight value. Otherwise, we have to wait for
-        // the bottom of the loop to be reached before returning the inflight
-        // value.
-        const isAtLoopbottom = ctx.f & IsInForAwaitOfLoop && !ctx.onProps;
-        resumePropsAsyncIterator(ctx);
-        if (isAtLoopbottom) {
-            if (ctx.inflightBlock == null) {
-                ctx.inflightBlock = new Promise((resolve) => (ctx.onPropsRequested = resolve));
-            }
-            return ctx.inflightBlock.then(() => {
-                ctx.inflightBlock = undefined;
-                return ctx.inflightValue;
-            });
-        }
-        return ctx.inflightValue;
-    }
-    else if (!ctx.inflightBlock) {
-        try {
-            const [block, value] = runComponent(ctx, hydrationData);
-            if (block) {
-                ctx.inflightBlock = block
-                    // TODO: there is some fuckery going on here related to async
-                    // generator components resuming when they’re meant to be returned.
-                    .then((v) => v)
-                    .finally(() => advanceComponent(ctx));
-                // stepComponent will only return a block if the value is asynchronous
-                ctx.inflightValue = value;
-            }
-            return value;
-        }
-        catch (err) {
-            if (!(ctx.f & IsUpdating)) {
-                if (!ctx.parent) {
-                    throw err;
-                }
-                return propagateError(ctx.parent, err);
-            }
-            throw err;
-        }
-    }
-    else if (!ctx.enqueuedBlock) {
-        if (hydrationData !== undefined) {
-            throw new Error("Hydration error");
-        }
-        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
-        // the Promise constructor call here.
-        let resolveEnqueuedBlock;
-        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
-        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
-            try {
-                const [block, value] = runComponent(ctx);
-                if (block) {
-                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
-                }
-                return value;
-            }
-            catch (err) {
-                if (!(ctx.f & IsUpdating)) {
-                    if (!ctx.parent) {
-                        throw err;
-                    }
-                    return propagateError(ctx.parent, err);
-                }
-                throw err;
-            }
-        });
-    }
-    return ctx.enqueuedValue;
+function enqueueComponent(ctx) {
+    if (!ctx.inflight) {
+        const [block, diff] = runComponent(ctx);
+        if (block) {
+            // if block is a promise, diff is a promise
+            ctx.inflight = [block.finally(() => advanceComponent(ctx)), diff];
+        }
+        return diff;
+    }
+    else if (!ctx.enqueued) {
+        // The enqueuedBlock and enqueuedDiff properties must be set
+        // simultaneously, hence the usage of the Promise constructor.
+        let resolve;
+        ctx.enqueued = [
+            new Promise((resolve1) => (resolve = resolve1)).finally(() => advanceComponent(ctx)),
+            ctx.inflight[0].finally(() => {
+                const [block, diff] = runComponent(ctx);
+                resolve(block);
+                return diff;
+            }),
+        ];
+    }
+    return ctx.enqueued[1];
 }
 /** Called when the inflight block promise settles. */
 function advanceComponent(ctx) {
-    if (ctx.f & IsAsyncGen && !(ctx.f & IsInForOfLoop)) {
-        return;
-    }
-    ctx.inflightBlock = ctx.enqueuedBlock;
-    ctx.inflightValue = ctx.enqueuedValue;
-    ctx.enqueuedBlock = undefined;
-    ctx.enqueuedValue = undefined;
+    ctx.inflight = ctx.enqueued;
+    ctx.enqueued = undefined;
 }
 /**
- * This function is responsible for executing the component and handling all
- * the different component types. We cannot identify whether a component is a
- * generator or async without calling it and inspecting the return value.
+ * This function is responsible for executing components, and handling the
+ * different component types.
  *
- * @returns {[block, value]} A tuple where
- * block - A possible promise which represents the duration during which the
- * component is blocked from updating.
- * value - A possible promise resolving to the rendered value of children.
+ * @returns {[block, diff]} A tuple where:
+ * - block is a promise or undefined which represents the duration during which
+ *   the component is blocked.
+ * - diff is a promise or undefined which represents the duration for diffing
+ *   of children.
  *
- * Each component type will block according to the type of the component.
- * - Sync function components never block and will transparently pass updates
- * to children.
- * - Async function components and async generator components block while
- * executing itself, but will not block for async children.
- * - Sync generator components block while any children are executing, because
- * they are expected to only resume when they’ve actually rendered.
+ * While a component is blocked, further updates to the component are enqueued.
+ *
+ * Each component type blocks according to its implementation:
+ * - Sync function components never block; when props or state change,
+ *   updates are immediately passed to children.
+ * - Async function components block only while awaiting their own async work
+ *   (e.g., during an await), but do not block while their async children are rendering.
+ * - Sync generator components block while their children are rendering;
+ *   they only resume once their children have finished.
+ * - Async generator components can block in two different ways:
+ *   - By default, they behave like sync generator components, blocking while
+ *     the component or its children are rendering.
+ *   - Within a for await...of loop, they block only while waiting for new
+ *     props to be requested, and not while children are rendering.
  */
-function runComponent(ctx, hydrationData) {
+function runComponent(ctx) {
+    if (getFlag(ctx.ret, IsUnmounted)) {
+        return [undefined, undefined];
+    }
     const ret = ctx.ret;
     const initial = !ctx.iterator;
     if (initial) {
-        resumePropsAsyncIterator(ctx);
-        ctx.f |= IsSyncExecuting;
-        clearEventListeners(ctx);
-        let result;
+        setFlag(ctx.ret, IsExecuting);
+        clearEventListeners(ctx.ctx);
+        let returned;
         try {
-            result = ret.el.tag.call(ctx.owner, ret.el.props, ctx.owner);
+            returned = ret.el.tag.call(ctx.ctx, ret.el.props, ctx.ctx);
         }
         catch (err) {
-            ctx.f |= IsErrored;
+            setFlag(ctx.ret, IsErrored);
             throw err;
         }
         finally {
-            ctx.f &= -3;
+            setFlag(ctx.ret, IsExecuting, false);
         }
-        if (isIteratorLike(result)) {
-            ctx.iterator = result;
+        if (isIteratorLike(returned)) {
+            ctx.iterator = returned;
         }
-        else if (isPromiseLike(result)) {
-            // async function component
-            const result1 = result instanceof Promise ? result : Promise.resolve(result);
-            const value = result1.then((result) => updateComponentChildren(ctx, result, hydrationData), (err) => {
-                ctx.f |= IsErrored;
-                throw err;
-            });
-            return [result1.catch(NOOP), value];
-        }
-        else {
+        else if (!isPromiseLike(returned)) {
             // sync function component
             return [
                 undefined,
-                updateComponentChildren(ctx, result, hydrationData),
+                diffComponentChildren(ctx, returned, false),
+            ];
+        }
+        else {
+            // async function component
+            const returned1 = returned instanceof Promise ? returned : Promise.resolve(returned);
+            return [
+                returned1.catch(NOOP),
+                returned1.then((returned) => diffComponentChildren(ctx, returned, false), (err) => {
+                    setFlag(ctx.ret, IsErrored);
+                    throw err;
+                }),
             ];
         }
-    }
-    else if (hydrationData !== undefined) {
-        // hydration data should only be passed on the initial render
-        throw new Error("Hydration error");
     }
     let iteration;
     if (initial) {
         try {
-            ctx.f |= IsSyncExecuting;
+            setFlag(ctx.ret, IsExecuting);
             iteration = ctx.iterator.next();
         }
         catch (err) {
-            ctx.f |= IsErrored;
+            setFlag(ctx.ret, IsErrored);
             throw err;
         }
         finally {
-            ctx.f &= -3;
+            setFlag(ctx.ret, IsExecuting, false);
         }
         if (isPromiseLike(iteration)) {
-            ctx.f |= IsAsyncGen;
+            setFlag(ctx.ret, IsAsyncGen);
         }
         else {
-            ctx.f |= IsSyncGen;
+            setFlag(ctx.ret, IsSyncGen);
         }
     }
-    if (ctx.f & IsSyncGen) {
+    if (getFlag(ctx.ret, IsSyncGen)) {
         // sync generator component
         if (!initial) {
             try {
-                ctx.f |= IsSyncExecuting;
-                iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+                setFlag(ctx.ret, IsExecuting);
+                const oldResult = ctx.adapter.read(getValue(ctx.ret));
+                iteration = ctx.iterator.next(oldResult);
             }
             catch (err) {
-                ctx.f |= IsErrored;
+                setFlag(ctx.ret, IsErrored);
                 throw err;
             }
             finally {
-                ctx.f &= -3;
+                setFlag(ctx.ret, IsExecuting, false);
             }
         }
         if (isPromiseLike(iteration)) {
             throw new Error("Mixed generator component");
         }
-        if (ctx.f & IsInForOfLoop &&
-            !(ctx.f & NeedsToYield) &&
-            !(ctx.f & IsUnmounted)) {
-            console.error("Component yielded more than once in for...of loop");
+        if (getFlag(ctx.ret, IsInForOfLoop) &&
+            !getFlag(ctx.ret, NeedsToYield) &&
+            !getFlag(ctx.ret, IsUnmounted) &&
+            !getFlag(ctx.ret, IsScheduling)) {
+            console.error(`Component <${getTagName(ctx.ret.el.tag)}> yielded/returned more than once in for...of loop`);
         }
-        ctx.f &= -17;
+        setFlag(ctx.ret, NeedsToYield, false);
         if (iteration.done) {
-            ctx.f &= -257;
+            setFlag(ctx.ret, IsSyncGen, false);
             ctx.iterator = undefined;
         }
-        let value;
-        try {
-            value = updateComponentChildren(ctx, 
-            // Children can be void so we eliminate that here
-            iteration.value, hydrationData);
-            if (isPromiseLike(value)) {
-                value = value.catch((err) => handleChildError(ctx, err));
-            }
-        }
-        catch (err) {
-            value = handleChildError(ctx, err);
-        }
-        const block = isPromiseLike(value) ? value.catch(NOOP) : undefined;
-        return [block, value];
+        const diff = diffComponentChildren(ctx, iteration.value, !iteration.done);
+        const block = isPromiseLike(diff) ? diff.catch(NOOP) : undefined;
+        return [block, diff];
     }
     else {
-        if (ctx.f & IsInForOfLoop) {
-            // Async generator component using for...of loops behave similar to sync
-            // generator components. This allows for easier refactoring of sync to
-            // async generator components.
+        if (getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+            // initializes the async generator loop
+            pullComponent(ctx, iteration);
+            const block = resumePropsAsyncIterator(ctx);
+            return [block, ctx.pull && ctx.pull.diff];
+        }
+        else {
+            // We call resumePropsAsyncIterator in case the component exits the
+            // for...of loop
+            resumePropsAsyncIterator(ctx);
             if (!initial) {
                 try {
-                    ctx.f |= IsSyncExecuting;
-                    iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+                    setFlag(ctx.ret, IsExecuting);
+                    const oldResult = ctx.adapter.read(getValue(ctx.ret));
+                    iteration = ctx.iterator.next(oldResult);
                 }
                 catch (err) {
-                    ctx.f |= IsErrored;
+                    setFlag(ctx.ret, IsErrored);
                     throw err;
                 }
                 finally {
-                    ctx.f &= -3;
+                    setFlag(ctx.ret, IsExecuting, false);
                 }
             }
             if (!isPromiseLike(iteration)) {
                 throw new Error("Mixed generator component");
             }
-            const block = iteration.catch(NOOP);
-            const value = iteration.then((iteration) => {
-                let value;
-                if (!(ctx.f & IsInForOfLoop)) {
-                    runAsyncGenComponent(ctx, Promise.resolve(iteration), hydrationData);
+            const diff = iteration.then((iteration) => {
+                if (getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+                    // We have entered a for await...of loop, so we start pulling
+                    pullComponent(ctx, iteration);
                 }
                 else {
-                    if (!(ctx.f & NeedsToYield) && !(ctx.f & IsUnmounted)) {
-                        console.error("Component yielded more than once in for...of loop");
-                    }
-                }
-                ctx.f &= -17;
-                try {
-                    value = updateComponentChildren(ctx, 
-                    // Children can be void so we eliminate that here
-                    iteration.value, hydrationData);
-                    if (isPromiseLike(value)) {
-                        value = value.catch((err) => handleChildError(ctx, err));
+                    if (getFlag(ctx.ret, IsInForOfLoop) &&
+                        !getFlag(ctx.ret, NeedsToYield) &&
+                        !getFlag(ctx.ret, IsUnmounted) &&
+                        !getFlag(ctx.ret, IsScheduling)) {
+                        console.error(`Component <${getTagName(ctx.ret.el.tag)}> yielded/returned more than once in for...of loop`);
                     }
                 }
-                catch (err) {
-                    value = handleChildError(ctx, err);
+                setFlag(ctx.ret, NeedsToYield, false);
+                if (iteration.done) {
+                    setFlag(ctx.ret, IsAsyncGen, false);
+                    ctx.iterator = undefined;
                 }
-                return value;
+                return diffComponentChildren(ctx, 
+                // Children can be void so we eliminate that here
+                iteration.value, !iteration.done);
             }, (err) => {
-                ctx.f |= IsErrored;
+                setFlag(ctx.ret, IsErrored);
                 throw err;
             });
-            return [block, value];
+            return [diff.catch(NOOP), diff];
         }
-        else {
-            runAsyncGenComponent(ctx, iteration, hydrationData, initial);
-            return [ctx.inflightBlock, ctx.inflightValue];
+    }
+}
+/**
+ * Called to resume the props async iterator for async generator components.
+ *
+ * @returns {Promise<undefined> | undefined} A possible promise which
+ * represents the duration during which the component is blocked.
+ */
+function resumePropsAsyncIterator(ctx) {
+    if (ctx.onPropsProvided) {
+        ctx.onPropsProvided(ctx.ret.el.props);
+        ctx.onPropsProvided = undefined;
+        setFlag(ctx.ret, PropsAvailable, false);
+    }
+    else {
+        setFlag(ctx.ret, PropsAvailable);
+        if (getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+            return new Promise((resolve) => (ctx.onPropsRequested = resolve));
         }
     }
+    return (ctx.pull && ctx.pull.iterationP && ctx.pull.iterationP.then(NOOP, NOOP));
 }
-async function runAsyncGenComponent(ctx, iterationP, hydrationData, initial = false) {
+/**
+ * The logic for pulling from async generator components when they are in a for
+ * await...of loop is implemented here.
+ *
+ * It makes sense to group this logic in a single async loop to prevent race
+ * conditions caused by calling next(), throw() and return() concurrently.
+ */
+async function pullComponent(ctx, iterationP) {
+    if (!iterationP || ctx.pull) {
+        return;
+    }
+    ctx.pull = { iterationP: undefined, diff: undefined, onChildError: undefined };
+    // TODO: replace done with iteration
+    //let iteration: ChildrenIteratorResult | undefined;
     let done = false;
     try {
+        let childError;
         while (!done) {
-            if (ctx.f & IsInForOfLoop) {
-                break;
-            }
-            // inflightValue must be set synchronously.
-            let onValue;
-            ctx.inflightValue = new Promise((resolve) => (onValue = resolve));
-            if (ctx.f & IsUpdating) {
-                // We should not swallow unhandled promise rejections if the component is
-                // updating independently.
-                // TODO: Does this handle this.refresh() calls?
-                ctx.inflightValue.catch(NOOP);
+            if (isPromiseLike(iterationP)) {
+                ctx.pull.iterationP = iterationP;
             }
+            let onDiff;
+            ctx.pull.diff = new Promise((resolve) => (onDiff = resolve)).then(() => {
+                if (!(getFlag(ctx.ret, IsUpdating) || getFlag(ctx.ret, IsRefreshing))) {
+                    commitComponent(ctx, []);
+                }
+            }, (err) => {
+                if (!(getFlag(ctx.ret, IsUpdating) || getFlag(ctx.ret, IsRefreshing)) ||
+                    // TODO: is this flag necessary?
+                    !getFlag(ctx.ret, NeedsToYield)) {
+                    return propagateError(ctx, err, []);
+                }
+                throw err;
+            });
             let iteration;
             try {
                 iteration = await iterationP;
             }
             catch (err) {
                 done = true;
-                ctx.f |= IsErrored;
-                onValue(Promise.reject(err));
+                setFlag(ctx.ret, IsErrored);
+                setFlag(ctx.ret, NeedsToYield, false);
+                onDiff(Promise.reject(err));
                 break;
             }
-            if (!(ctx.f & IsInForAwaitOfLoop)) {
-                ctx.f &= ~PropsAvailable;
+            // this must be set after iterationP is awaited
+            let oldResult;
+            {
+                // The 'floating' flag tracks whether the promise passed to the generator
+                // is handled (via await, then, or catch). If handled, we reject the
+                // promise so the user can catch errors. If not, we inject the error back
+                // into the generator using throw, like for sync generator components.
+                let floating = true;
+                const oldResult1 = new Promise((resolve, reject) => {
+                    ctx.ctx.schedule(resolve);
+                    ctx.pull.onChildError = (err) => {
+                        reject(err);
+                        if (floating) {
+                            childError = err;
+                            resumePropsAsyncIterator(ctx);
+                            return ctx.pull.diff;
+                        }
+                    };
+                });
+                oldResult1.catch(NOOP);
+                // We use Object.create() to clone the promise for float detection
+                // because modern JS engines skip calling .then() on promises awaited
+                // with await.
+                oldResult = Object.create(oldResult1);
+                oldResult.then = function (onfulfilled, onrejected) {
+                    floating = false;
+                    return oldResult1.then(onfulfilled, onrejected);
+                };
+                oldResult.catch = function (onrejected) {
+                    floating = false;
+                    return oldResult1.catch(onrejected);
+                };
+            }
+            if (childError != null) {
+                try {
+                    setFlag(ctx.ret, IsExecuting);
+                    if (typeof ctx.iterator.throw !== "function") {
+                        throw childError;
+                    }
+                    iteration = await ctx.iterator.throw(childError);
+                }
+                catch (err) {
+                    done = true;
+                    setFlag(ctx.ret, IsErrored);
+                    setFlag(ctx.ret, NeedsToYield, false);
+                    onDiff(Promise.reject(err));
+                    break;
+                }
+                finally {
+                    childError = undefined;
+                    setFlag(ctx.ret, IsExecuting, false);
+                }
+            }
+            // this makes sure we pause before entering a loop if we yield before it
+            if (!getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+                setFlag(ctx.ret, PropsAvailable, false);
             }
             done = !!iteration.done;
-            let value;
+            let diff;
             try {
-                if (!(ctx.f & NeedsToYield) &&
-                    ctx.f & PropsAvailable &&
-                    ctx.f & IsInForAwaitOfLoop &&
-                    !initial &&
-                    !done) {
-                    // We skip stale iterations in for await...of loops.
-                    value = ctx.ret.inflightValue || getValue(ctx.ret);
+                if (!isPromiseLike(iterationP)) {
+                    // if iterationP is an iteration and not a promise, the component was
+                    // not in a for await...of loop when the iteration started, so we can
+                    // skip the diffing of children as it is handled elsewhere.
+                    diff = undefined;
+                }
+                else if (!getFlag(ctx.ret, NeedsToYield) &&
+                    getFlag(ctx.ret, PropsAvailable) &&
+                    getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+                    // logic to skip yielded children in a stale for await of iteration.
+                    diff = undefined;
                 }
                 else {
-                    value = updateComponentChildren(ctx, iteration.value, hydrationData);
-                    hydrationData = undefined;
-                    if (isPromiseLike(value)) {
-                        value = value.catch((err) => handleChildError(ctx, err));
-                    }
+                    diff = diffComponentChildren(ctx, iteration.value, !iteration.done);
                 }
-                ctx.f &= ~NeedsToYield;
             }
             catch (err) {
-                // Do we need to catch potential errors here in the case of unhandled
-                // promise rejections?
-                value = handleChildError(ctx, err);
+                onDiff(Promise.reject(err));
             }
             finally {
-                onValue(value);
-            }
-            let oldResult;
-            if (ctx.ret.inflightValue) {
-                // The value passed back into the generator as the argument to the next
-                // method is a promise if an async generator component has async
-                // children. Sync generator components only resume when their children
-                // have fulfilled so the element’s inflight child values will never be
-                // defined.
-                oldResult = ctx.ret.inflightValue.then((value) => ctx.renderer.read(value));
-                oldResult.catch((err) => {
-                    if (ctx.f & IsUpdating) {
-                        return;
+                onDiff(diff);
+                setFlag(ctx.ret, NeedsToYield, false);
+            }
+            if (getFlag(ctx.ret, IsUnmounted)) {
+                // TODO: move this unmounted branch outside the loop
+                while ((!iteration || !iteration.done) &&
+                    ctx.iterator &&
+                    getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+                    try {
+                        setFlag(ctx.ret, IsExecuting);
+                        iteration = await ctx.iterator.next(oldResult);
                     }
-                    if (!ctx.parent) {
+                    catch (err) {
+                        setFlag(ctx.ret, IsErrored);
+                        // we throw the error here to cause an unhandled rejection because
+                        // the promise returned from pullComponent is never awaited
                         throw err;
                     }
-                    return propagateError(ctx.parent, err);
-                });
-            }
-            else {
-                oldResult = ctx.renderer.read(getValue(ctx.ret));
-            }
-            if (ctx.f & IsUnmounted) {
-                if (ctx.f & IsInForAwaitOfLoop) {
+                    finally {
+                        setFlag(ctx.ret, IsExecuting, false);
+                    }
+                }
+                if ((!iteration || !iteration.done) &&
+                    ctx.iterator &&
+                    typeof ctx.iterator.return === "function") {
                     try {
-                        ctx.f |= IsSyncExecuting;
-                        iterationP = ctx.iterator.next(oldResult);
+                        setFlag(ctx.ret, IsExecuting);
+                        await ctx.iterator.return();
+                    }
+                    catch (err) {
+                        setFlag(ctx.ret, IsErrored);
+                        throw err;
                     }
                     finally {
-                        ctx.f &= ~IsSyncExecuting;
+                        setFlag(ctx.ret, IsExecuting, false);
                     }
                 }
-                else {
-                    returnComponent(ctx);
-                    break;
-                }
+                break;
+            }
+            else if (!getFlag(ctx.ret, IsInForAwaitOfLoop)) {
+                // we have exited the for...await of, so updates will be handled by the
+                // regular runComponent/enqueueComponent logic.
+                break;
             }
-            else if (!done && !(ctx.f & IsInForOfLoop)) {
+            else if (!iteration.done) {
                 try {
-                    ctx.f |= IsSyncExecuting;
+                    setFlag(ctx.ret, IsExecuting);
                     iterationP = ctx.iterator.next(oldResult);
                 }
                 finally {
-                    ctx.f &= ~IsSyncExecuting;
+                    setFlag(ctx.ret, IsExecuting, false);
                 }
             }
-            initial = false;
         }
     }
     finally {
         if (done) {
-            ctx.f &= -513;
+            setFlag(ctx.ret, IsAsyncGen, false);
             ctx.iterator = undefined;
         }
+        ctx.pull = undefined;
     }
 }
-/**
- * Called to resume the props async iterator for async generator components.
- */
-function resumePropsAsyncIterator(ctx) {
-    if (ctx.onProps) {
-        ctx.onProps(ctx.ret.el.props);
-        ctx.onProps = undefined;
-        ctx.f &= -33;
+function commitComponent(ctx, schedulePromises, hydrationNodes) {
+    if (ctx.schedule) {
+        ctx.schedule.promise.then(() => {
+            commitComponent(ctx, []);
+            propagateComponent(ctx);
+        });
+        return getValue(ctx.ret);
+    }
+    const wasScheduling = getFlag(ctx.ret, IsScheduling);
+    const values = commitChildren(ctx.adapter, ctx.host, ctx, ctx.scope, ctx.ret, ctx.index, schedulePromises, hydrationNodes);
+    if (getFlag(ctx.ret, IsUnmounted)) {
+        return;
+    }
+    addEventTargetDelegates(ctx.ctx, values);
+    // Execute schedule callbacks early to check for async deferral
+    const callbacks = scheduleMap.get(ctx);
+    let schedulePromises1;
+    if (callbacks) {
+        scheduleMap.delete(ctx);
+        // TODO: think about error handling for schedule callbacks
+        setFlag(ctx.ret, IsScheduling);
+        const result = ctx.adapter.read(unwrap(values));
+        for (const callback of callbacks) {
+            const scheduleResult = callback(result);
+            if (isPromiseLike(scheduleResult)) {
+                (schedulePromises1 = schedulePromises1 || []).push(scheduleResult);
+            }
+        }
+        if (schedulePromises1 && !getFlag(ctx.ret, DidCommit)) {
+            const scheduleCallbacksP = Promise.all(schedulePromises1).then(() => {
+                setFlag(ctx.ret, IsScheduling, false);
+                propagateComponent(ctx);
+                if (ctx.ret.fallback) {
+                    unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+                }
+                ctx.ret.fallback = undefined;
+            });
+            let onAbort;
+            const scheduleP = safeRace([
+                scheduleCallbacksP,
+                new Promise((resolve) => (onAbort = resolve)),
+            ]).finally(() => {
+                ctx.schedule = undefined;
+            });
+            ctx.schedule = { promise: scheduleP, onAbort };
+            schedulePromises.push(scheduleP);
+        }
+        else {
+            setFlag(ctx.ret, IsScheduling, wasScheduling);
+        }
     }
     else {
-        ctx.f |= PropsAvailable;
+        setFlag(ctx.ret, IsScheduling, wasScheduling);
     }
+    if (!getFlag(ctx.ret, IsScheduling)) {
+        if (!getFlag(ctx.ret, IsUpdating)) {
+            propagateComponent(ctx);
+        }
+        if (ctx.ret.fallback) {
+            unmount(ctx.adapter, ctx.host, ctx.parent, ctx.ret.fallback, false);
+        }
+        ctx.ret.fallback = undefined;
+        setFlag(ctx.ret, IsUpdating, false);
+    }
+    setFlag(ctx.ret, DidCommit);
+    // We always use getValue() instead of the unwrapping values because there
+    // are various ways in which the values could have been updated, especially
+    // if schedule callbacks call refresh() or async mounting is happening.
+    return getValue(ctx.ret, true);
+}
+/**
+ * Propagates component changes up to ancestors when rendering starts from a
+ * component via refresh() or multiple for await...of renders. This handles
+ * event listeners and DOM arrangement that would normally happen during
+ * top-down rendering.
+ */
+function propagateComponent(ctx) {
+    const values = getChildValues(ctx.ret, ctx.index);
+    addEventTargetDelegates(ctx.ctx, values, (ctx1) => ctx1[_ContextState].host === ctx.host);
+    const host = ctx.host;
+    const props = stripSpecialProps(host.el.props);
+    ctx.adapter.arrange({
+        tag: host.el.tag,
+        tagName: getTagName(host.el.tag),
+        node: host.value,
+        props,
+        oldProps: props,
+        children: getChildValues(host, 0),
+    });
+    flush(ctx.adapter, ctx.root, ctx);
 }
-// TODO: async unmounting
-function unmountComponent(ctx) {
-    if (ctx.f & IsUnmounted) {
+async function unmountComponent(ctx, isNested) {
+    if (getFlag(ctx.ret, IsUnmounted)) {
         return;
     }
-    clearEventListeners(ctx);
+    let cleanupPromises;
+    // TODO: think about errror handling for callbacks
     const callbacks = cleanupMap.get(ctx);
     if (callbacks) {
+        const oldResult = ctx.adapter.read(getValue(ctx.ret));
         cleanupMap.delete(ctx);
-        const value = ctx.renderer.read(getValue(ctx.ret));
         for (const callback of callbacks) {
-            callback(value);
+            const cleanup = callback(oldResult);
+            if (isPromiseLike(cleanup)) {
+                (cleanupPromises = cleanupPromises || []).push(cleanup);
+            }
+        }
+    }
+    let didLinger = false;
+    if (!isNested && cleanupPromises && getChildValues(ctx.ret).length > 0) {
+        didLinger = true;
+        const index = ctx.index;
+        const lingerers = ctx.host.lingerers || (ctx.host.lingerers = []);
+        let set = lingerers[index];
+        if (set == null) {
+            set = new Set();
+            lingerers[index] = set;
+        }
+        set.add(ctx.ret);
+        await Promise.all(cleanupPromises);
+        set.delete(ctx.ret);
+        if (set.size === 0) {
+            lingerers[index] = undefined;
+        }
+        if (!lingerers.some(Boolean)) {
+            // If there are no lingerers remaining, we can remove the lingerers array
+            ctx.host.lingerers = undefined;
+        }
+    }
+    if (getFlag(ctx.ret, IsUnmounted)) {
+        // If the component was unmounted while awaiting the cleanup callbacks,
+        // we do not need to continue unmounting.
+        return;
+    }
+    setFlag(ctx.ret, IsUnmounted);
+    // If component has pending schedule promises, resolve them since component
+    // is unmounting
+    if (ctx.schedule) {
+        ctx.schedule.onAbort();
+        ctx.schedule = undefined;
+    }
+    clearEventListeners(ctx.ctx);
+    unmountChildren(ctx.adapter, ctx.host, ctx, ctx.ret, isNested);
+    if (didLinger) {
+        // If we lingered, we call finalize to ensure rendering is finalized
+        if (ctx.root != null) {
+            ctx.adapter.finalize(ctx.root);
         }
     }
-    ctx.f |= IsUnmounted;
     if (ctx.iterator) {
-        if (ctx.f & IsSyncGen) {
-            let value;
-            if (ctx.f & IsInForOfLoop) {
-                value = enqueueComponentRun(ctx);
-            }
-            if (isPromiseLike(value)) {
-                value.then(() => {
-                    if (ctx.f & IsInForOfLoop) {
-                        unmountComponent(ctx);
-                    }
-                    else {
-                        returnComponent(ctx);
-                    }
-                }, (err) => {
-                    if (!ctx.parent) {
-                        throw err;
+        if (ctx.pull) {
+            // we let pullComponent handle unmounting
+            resumePropsAsyncIterator(ctx);
+            return;
+        }
+        // we wait for inflight value so yields resume with the most up to date
+        // props
+        if (ctx.inflight) {
+            await ctx.inflight[1];
+        }
+        let iteration;
+        if (getFlag(ctx.ret, IsInForOfLoop)) {
+            try {
+                setFlag(ctx.ret, IsExecuting);
+                const oldResult = ctx.adapter.read(getValue(ctx.ret));
+                const iterationP = ctx.iterator.next(oldResult);
+                if (isPromiseLike(iterationP)) {
+                    if (!getFlag(ctx.ret, IsAsyncGen)) {
+                        throw new Error("Mixed generator component");
                     }
-                    return propagateError(ctx.parent, err);
-                });
-            }
-            else {
-                if (ctx.f & IsInForOfLoop) {
-                    unmountComponent(ctx);
+                    iteration = await iterationP;
                 }
                 else {
-                    returnComponent(ctx);
+                    if (!getFlag(ctx.ret, IsSyncGen)) {
+                        throw new Error("Mixed generator component");
+                    }
+                    iteration = iterationP;
                 }
             }
-        }
-        else if (ctx.f & IsAsyncGen) {
-            if (ctx.f & IsInForOfLoop) {
-                const value = enqueueComponentRun(ctx);
-                value.then(() => {
-                    if (ctx.f & IsInForOfLoop) {
-                        unmountComponent(ctx);
-                    }
-                    else {
-                        returnComponent(ctx);
-                    }
-                }, (err) => {
-                    if (!ctx.parent) {
-                        throw err;
-                    }
-                    return propagateError(ctx.parent, err);
-                });
+            catch (err) {
+                setFlag(ctx.ret, IsErrored);
+                throw err;
             }
-            else {
-                // The logic for unmounting async generator components is in the
-                // runAsyncGenComponent function.
-                resumePropsAsyncIterator(ctx);
+            finally {
+                setFlag(ctx.ret, IsExecuting, false);
             }
         }
-    }
-}
-function returnComponent(ctx) {
-    resumePropsAsyncIterator(ctx);
-    if (ctx.iterator && typeof ctx.iterator.return === "function") {
-        try {
-            ctx.f |= IsSyncExecuting;
-            const iteration = ctx.iterator.return();
-            if (isPromiseLike(iteration)) {
-                iteration.catch((err) => {
-                    if (!ctx.parent) {
-                        throw err;
+        if ((!iteration || !iteration.done) &&
+            ctx.iterator &&
+            typeof ctx.iterator.return === "function") {
+            try {
+                setFlag(ctx.ret, IsExecuting);
+                const iterationP = ctx.iterator.return();
+                if (isPromiseLike(iterationP)) {
+                    if (!getFlag(ctx.ret, IsAsyncGen)) {
+                        throw new Error("Mixed generator component");
                     }
-                    return propagateError(ctx.parent, err);
-                });
-            }
-        }
-        finally {
-            ctx.f &= -3;
-        }
-    }
-}
-/*** EVENT TARGET UTILITIES ***/
-// EVENT PHASE CONSTANTS
-// https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
-const NONE = 0;
-const CAPTURING_PHASE = 1;
-const AT_TARGET = 2;
-const BUBBLING_PHASE = 3;
-const listenersMap = new WeakMap();
-function isListenerOrListenerObject(value) {
-    return (typeof value === "function" ||
-        (value !== null &&
-            typeof value === "object" &&
-            typeof value.handleEvent === "function"));
-}
-function normalizeListenerOptions(options) {
-    if (typeof options === "boolean") {
-        return { capture: options };
-    }
-    else if (options == null) {
-        return {};
-    }
-    return options;
-}
-function isEventTarget(value) {
-    return (value != null &&
-        typeof value.addEventListener === "function" &&
-        typeof value.removeEventListener === "function" &&
-        typeof value.dispatchEvent === "function");
-}
-function setEventProperty(ev, key, value) {
-    Object.defineProperty(ev, key, { value, writable: false, configurable: true });
-}
-// TODO: Maybe we can pass in the current context directly, rather than
-// starting from the parent?
-/**
- * A function to reconstruct an array of every listener given a context and a
- * host element.
- *
- * This function exploits the fact that contexts retain their nearest ancestor
- * host element. We can determine all the contexts which are directly listening
- * to an element by traversing up the context tree and checking that the host
- * element passed in matches the parent context’s host element.
- */
-function getListenerRecords(ctx, ret) {
-    let listeners = [];
-    while (ctx !== undefined && ctx.host === ret) {
-        const listeners1 = listenersMap.get(ctx);
-        if (listeners1) {
-            listeners = listeners.concat(listeners1);
-        }
-        ctx = ctx.parent;
-    }
-    return listeners;
-}
-function clearEventListeners(ctx) {
-    const listeners = listenersMap.get(ctx);
-    if (listeners && listeners.length) {
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                for (const record of listeners) {
-                    value.removeEventListener(record.type, record.callback, record.options);
+                    iteration = await iterationP;
+                }
+                else {
+                    if (!getFlag(ctx.ret, IsSyncGen)) {
+                        throw new Error("Mixed generator component");
+                    }
+                    iteration = iterationP;
                 }
             }
+            catch (err) {
+                setFlag(ctx.ret, IsErrored);
+                throw err;
+            }
+            finally {
+                setFlag(ctx.ret, IsExecuting, false);
+            }
         }
-        listeners.length = 0;
     }
 }
 /*** ERROR HANDLING UTILITIES ***/
 function handleChildError(ctx, err) {
-    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
+    if (!ctx.iterator) {
+        throw err;
+    }
+    if (ctx.pull) {
+        // we let pullComponent handle child errors
+        ctx.pull.onChildError(err);
+        return ctx.pull.diff;
+    }
+    if (!ctx.iterator.throw) {
         throw err;
     }
     resumePropsAsyncIterator(ctx);
     let iteration;
     try {
-        ctx.f |= IsSyncExecuting;
+        setFlag(ctx.ret, IsExecuting);
         iteration = ctx.iterator.throw(err);
     }
     catch (err) {
-        ctx.f |= IsErrored;
+        setFlag(ctx.ret, IsErrored);
         throw err;
     }
     finally {
-        ctx.f &= -3;
+        setFlag(ctx.ret, IsExecuting, false);
     }
     if (isPromiseLike(iteration)) {
         return iteration.then((iteration) => {
             if (iteration.done) {
-                ctx.f &= -513;
+                setFlag(ctx.ret, IsSyncGen, false);
+                setFlag(ctx.ret, IsAsyncGen, false);
                 ctx.iterator = undefined;
             }
-            return updateComponentChildren(ctx, iteration.value);
+            return diffComponentChildren(ctx, iteration.value, !iteration.done);
         }, (err) => {
-            ctx.f |= IsErrored;
+            setFlag(ctx.ret, IsErrored);
             throw err;
         });
     }
     if (iteration.done) {
-        ctx.f &= -257;
-        ctx.f &= -513;
+        setFlag(ctx.ret, IsSyncGen, false);
+        setFlag(ctx.ret, IsAsyncGen, false);
         ctx.iterator = undefined;
     }
-    return updateComponentChildren(ctx, iteration.value);
+    return diffComponentChildren(ctx, iteration.value, !iteration.done);
 }
-function propagateError(ctx, err) {
-    let result;
+/**
+ * Propagates an error up the context tree by calling handleChildError with
+ * each parent.
+ *
+ * @returns A promise which resolves to undefined when the error has been
+ * handled, or undefined if the error was handled synchronously.
+ */
+function propagateError(ctx, err, schedulePromises) {
+    const parent = ctx.parent;
+    if (!parent) {
+        throw err;
+    }
+    let diff;
     try {
-        result = handleChildError(ctx, err);
+        diff = handleChildError(parent, err);
     }
     catch (err) {
-        if (!ctx.parent) {
-            throw err;
-        }
-        return propagateError(ctx.parent, err);
+        return propagateError(parent, err, schedulePromises);
     }
-    if (isPromiseLike(result)) {
-        return result.catch((err) => {
-            if (!ctx.parent) {
-                throw err;
-            }
-            return propagateError(ctx.parent, err);
-        });
+    if (isPromiseLike(diff)) {
+        return diff.then(() => void commitComponent(parent, schedulePromises), (err) => propagateError(parent, err, schedulePromises));
     }
-    return result;
+    commitComponent(parent, schedulePromises);
 }
-// Some JSX transpilation tools expect these functions to be defined on the
-// default export. Prefer named exports when importing directly.
+/**
+ * A re-export of some Crank exports as the default export.
+ *
+ * Some JSX tools expect things like createElement/Fragment to be defined on
+ * the default export. Prefer using the named exports directly.
+ */
 var crank = { createElement, Fragment };
 
-export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, crank as default, isElement };
+export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, Text, cloneElement, createElement, crank as default, isElement };
 //# sourceMappingURL=crank.js.map