@b9g/crank 0.6.1 → 0.7.0

package/umd.js

@@ -4,8 +4,252 @@
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Crank = {}));
 })(this, (function (exports) { 'use strict';
 
-	const NOOP = () => { };
-	const IDENTITY = (value) => value;
+	// 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;
+	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 });
+	}
+	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;
+	}
+	const _parent = Symbol.for("CustomEventTarget.parent");
+	const _listeners = Symbol.for("CustomEventTarget.listeners");
+	const _delegates = Symbol.for("CustomEventTarget.delegates");
+	const _dispatchEventOnSelf = Symbol.for("CustomEventTarget.dispatchSelf");
+	class CustomEventTarget {
+	    constructor(parent = null) {
+	        this[_parent] = parent;
+	        this[_listeners] = [];
+	        this[_delegates] = new Set();
+	    }
+	    addEventListener(type, listener, options) {
+	        if (!isListenerOrListenerObject(listener)) {
+	            return;
+	        }
+	        const listeners = this[_listeners];
+	        options = normalizeListenerOptions(options);
+	        let callback;
+	        if (typeof listener === "function") {
+	            callback = listener;
+	        }
+	        else {
+	            callback = (ev) => listener.handleEvent(ev);
+	        }
+	        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);
+	        for (const delegate of this[_delegates]) {
+	            delegate.addEventListener(type, record.callback, record.options);
+	        }
+	    }
+	    removeEventListener(type, listener, options) {
+	        const listeners = this[_listeners];
+	        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);
+	        for (const delegate of this[_delegates]) {
+	            delegate.removeEventListener(record.type, record.callback, record.options);
+	        }
+	    }
+	    dispatchEvent(ev) {
+	        const path = [];
+	        for (let parent = this[_parent]; parent; parent = parent[_parent]) {
+	            path.push(parent);
+	        }
+	        let cancelBubble = false;
+	        let immediateCancelBubble = false;
+	        const stopPropagation = ev.stopPropagation;
+	        setEventProperty(ev, "stopPropagation", () => {
+	            cancelBubble = true;
+	            return stopPropagation.call(ev);
+	        });
+	        const stopImmediatePropagation = ev.stopImmediatePropagation;
+	        setEventProperty(ev, "stopImmediatePropagation", () => {
+	            immediateCancelBubble = true;
+	            return stopImmediatePropagation.call(ev);
+	        });
+	        setEventProperty(ev, "target", this);
+	        // 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 = target[_listeners];
+	                setEventProperty(ev, "currentTarget", target);
+	                for (let i = 0; i < listeners.length; i++) {
+	                    const record = listeners[i];
+	                    if (record.type === ev.type && record.options.capture) {
+	                        try {
+	                            record.callback.call(target, ev);
+	                        }
+	                        catch (err) {
+	                            console.error(err);
+	                        }
+	                        if (immediateCancelBubble) {
+	                            return true;
+	                        }
+	                    }
+	                }
+	                if (cancelBubble) {
+	                    return true;
+	                }
+	            }
+	            {
+	                setEventProperty(ev, "eventPhase", AT_TARGET);
+	                setEventProperty(ev, "currentTarget", this);
+	                this[_dispatchEventOnSelf](ev);
+	                if (immediateCancelBubble) {
+	                    return true;
+	                }
+	                const listeners = this[_listeners];
+	                for (let i = 0; i < listeners.length; i++) {
+	                    const record = listeners[i];
+	                    if (record.type === ev.type) {
+	                        try {
+	                            record.callback.call(this, ev);
+	                        }
+	                        catch (err) {
+	                            console.error(err);
+	                        }
+	                        if (immediateCancelBubble) {
+	                            return true;
+	                        }
+	                    }
+	                }
+	                if (cancelBubble) {
+	                    return true;
+	                }
+	            }
+	            if (ev.bubbles) {
+	                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
+	                for (let i = 0; i < path.length; i++) {
+	                    const target = path[i];
+	                    setEventProperty(ev, "currentTarget", target);
+	                    const listeners = target[_listeners];
+	                    for (let i = 0; i < listeners.length; i++) {
+	                        const record = listeners[i];
+	                        if (record.type === ev.type && !record.options.capture) {
+	                            try {
+	                                record.callback.call(target, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
+	                            if (immediateCancelBubble) {
+	                                return true;
+	                            }
+	                        }
+	                    }
+	                    if (cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	            }
+	        }
+	        finally {
+	            setEventProperty(ev, "eventPhase", NONE);
+	            setEventProperty(ev, "currentTarget", null);
+	            // eslint-disable-next-line no-unsafe-finally
+	            return !ev.defaultPrevented;
+	        }
+	    }
+	    [_dispatchEventOnSelf](_ev) { }
+	}
+	CustomEventTarget.dispatchEventOnSelf = _dispatchEventOnSelf;
+	function addEventTargetDelegates(target, delegates, include = (target1) => target === target1) {
+	    const delegates1 = delegates.filter(isEventTarget);
+	    for (let target1 = target; target1 && include(target1); target1 = target1[_parent]) {
+	        for (let i = 0; i < delegates1.length; i++) {
+	            const delegate = delegates1[i];
+	            if (target1[_delegates].has(delegate)) {
+	                continue;
+	            }
+	            target1[_delegates].add(delegate);
+	            for (const record of target1[_listeners]) {
+	                delegate.addEventListener(record.type, record.callback, record.options);
+	            }
+	        }
+	    }
+	}
+	function removeEventTargetDelegates(target, delegates, include = (target1) => target === target1) {
+	    const delegates1 = delegates.filter(isEventTarget);
+	    for (let target1 = target; target1 && include(target1); target1 = target1[_parent]) {
+	        for (let i = 0; i < delegates1.length; i++) {
+	            const delegate = delegates1[i];
+	            if (!target1[_delegates].has(delegate)) {
+	                continue;
+	            }
+	            target1[_delegates].delete(delegate);
+	            for (const record of target1[_listeners]) {
+	                delegate.removeEventListener(record.type, record.callback, record.options);
+	            }
+	        }
+	    }
+	}
+	function clearEventListeners(target) {
+	    const listeners = target[_listeners];
+	    const delegates = target[_delegates];
+	    for (let i = 0; i < listeners.length; i++) {
+	        const record = listeners[i];
+	        for (const delegate of delegates) {
+	            delegate.removeEventListener(record.type, record.callback, record.options);
+	        }
+	    }
+	    listeners.length = 0;
+	    delegates.clear();
+	}
+
 	function wrap(value) {
 	    return value === undefined ? [] : Array.isArray(value) ? value : [value];
 	}
@@ -35,11 +279,84 @@
 	function isPromiseLike(value) {
 	    return value != null && typeof value.then === "function";
 	}
-	/***
-	 * SPECIAL TAGS
-	 *
-	 * Crank provides a couple tags which have special meaning for the renderer.
-	 ***/
+	function createRaceRecord(contender) {
+	    const deferreds = new Set();
+	    const record = { deferreds, settled: false };
+	    // This call to `then` happens once for the lifetime of the value.
+	    Promise.resolve(contender).then((value) => {
+	        for (const { resolve } of deferreds) {
+	            resolve(value);
+	        }
+	        deferreds.clear();
+	        record.settled = true;
+	    }, (err) => {
+	        for (const { reject } of deferreds) {
+	            reject(err);
+	        }
+	        deferreds.clear();
+	        record.settled = true;
+	    });
+	    return record;
+	}
+	// Promise.race is memory unsafe. This is alternative which is. See:
+	// https://github.com/nodejs/node/issues/17469#issuecomment-685235106
+	// Keys are the values passed to race.
+	// Values are a record of data containing a set of deferreds and whether the
+	// value has settled.
+	const wm = new WeakMap();
+	function safeRace(contenders) {
+	    let deferred;
+	    const result = new Promise((resolve, reject) => {
+	        deferred = { resolve, reject };
+	        for (const contender of contenders) {
+	            if (!isPromiseLike(contender)) {
+	                // If the contender is a not a then-able, attempting to use it as a key
+	                // in the weakmap would throw an error. Luckily, it is safe to call
+	                // `Promise.resolve(contender).then` on regular values multiple
+	                // times because the promise fulfills immediately.
+	                Promise.resolve(contender).then(resolve, reject);
+	                continue;
+	            }
+	            let record = wm.get(contender);
+	            if (record === undefined) {
+	                record = createRaceRecord(contender);
+	                record.deferreds.add(deferred);
+	                wm.set(contender, record);
+	            }
+	            else if (record.settled) {
+	                // If the value has settled, it is safe to call
+	                // `Promise.resolve(contender).then` on it.
+	                Promise.resolve(contender).then(resolve, reject);
+	            }
+	            else {
+	                record.deferreds.add(deferred);
+	            }
+	        }
+	    });
+	    // The finally callback executes when any value settles, preventing any of
+	    // the unresolved values from retaining a reference to the resolved value.
+	    return result.finally(() => {
+	        for (const contender of contenders) {
+	            if (isPromiseLike(contender)) {
+	                const record = wm.get(contender);
+	                if (record) {
+	                    record.deferreds.delete(deferred);
+	                }
+	            }
+	        }
+	    });
+	}
+
+	const NOOP = () => { };
+	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 ***/
 	/**
 	 * A special tag for grouping multiple children within the same parent.
 	 *
@@ -51,8 +368,8 @@
 	 * 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.
@@ -60,13 +377,13 @@
 	 * 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,
@@ -74,10 +391,13 @@
 	 */
 	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");
 	/**
@@ -105,15 +425,6 @@
 	        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;
@@ -121,34 +432,34 @@
 	    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];
 	            }
 	        }
 	    }
@@ -163,13 +474,13 @@
 	/** 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;
@@ -179,137 +490,203 @@
 	    }
 	    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.
@@ -317,125 +694,128 @@
 	 * @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);
-	        }
-	        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));
+	            renderer.cache.set(root, ret);
 	        }
-	        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
 	    }
-	}
-	/*** 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);
+	    else if (ret.ctx !== bridgeCtx) {
+	        throw new Error("A previous call to render() was passed a different context");
 	    }
-	    ret.cachedChildValues = unwrap(childValues);
-	    if (root == null) {
-	        unmount(renderer, ret, ctx, ret);
+	    else {
+	        ret.el = createElement(Portal, { children, root, hydrate });
+	        if (typeof root === "object" && root !== null && children == null) {
+	            renderer.cache.delete(root);
+	        }
 	    }
-	    return renderer.read(ret.cachedChildValues);
+	    return ret;
 	}
-	function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrationData) {
-	    const oldRetained = wrap(parent.children);
-	    const newRetained = [];
-	    const newChildren = arrayify(children);
-	    const values = [];
-	    let graveyard;
+	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)));
+	        });
+	    }
+	    if (typeof root !== "object" || root === null) {
+	        unmount(adapter, ret, ret.ctx, ret, false);
+	    }
+	    return adapter.read(unwrap(getChildValues(ret)));
+	}
+	function diffChildren(adapter, root, host, ctx, scope, parent, newChildren) {
+	    const oldRetained = wrap(parent.children);
+	    const newRetained = [];
+	    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) {
@@ -449,7 +829,7 @@
 	                    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++;
 	                }
@@ -462,405 +842,748 @@
 	                }
 	            }
 	        }
-	        // 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 {
-	                    value = hydrationBlock
-	                        ? hydrationBlock.then(() => updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData))
-	                        : updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData);
+	                    diff = diffHost(adapter, root, ctx, scope, ret);
 	                }
 	            }
-	            if (isPromiseLike(value)) {
+	            if (typeof ret === "object") {
+	                if (childCopied) {
+	                    setFlag(ret, IsCopied);
+	                    diff = getInflightDiff(ret);
+	                }
+	                else {
+	                    setFlag(ret, IsCopied, false);
+	                }
+	            }
+	            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);
+	        }
+	        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;
+	        }
+	    }
+	    if (skippedHydrationNodes) {
+	        skippedHydrationNodes.splice(0, wrap(value).length);
+	    }
+	    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));
+	        }
+	    }
+	    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;
+	                }
+	            }
+	        }
+	        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 (value) {
+	                values.push(value);
+	                index++;
+	            }
 	        }
 	    }
-	    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;
+	    if (parent.graveyard) {
+	        for (let i = 0; i < parent.graveyard.length; i++) {
+	            const child = parent.graveyard[i];
+	            unmount(adapter, host, ctx, child, false);
 	        }
+	        parent.graveyard = 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 (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 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,
+	        });
 	    }
-	    return commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue);
+	    ret.oldProps = stripSpecialProps(ret.el.props);
+	    return ret.value;
 	}
-	function commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue) {
+	function commitHost(adapter, ret, ctx, schedulePromises, hydrationNodes) {
+	    if (getFlag(ret, IsCopied) && getFlag(ret, DidCommit)) {
+	        return getValue(ret);
+	    }
 	    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);
+	    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");
 	        }
 	    }
-	    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);
+	    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,
+	                        });
+	                    }
+	                }
 	            }
 	        }
-	        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);
+	        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,
+	                        });
+	                    }
+	                }
 	            }
-	            else if (!SPECIAL_PROPS.has(propName)) {
-	                renderer.patch(tag, value, propName, propValue, oldProps && oldProps[propName], scope);
+	            // 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 (copied) {
-	        props = { ...ret.el.props };
-	        for (const name of copied) {
-	            props[name] = oldProps && oldProps[name];
-	        }
-	        ret.el = new Element(tag, props);
+	    if (tag !== Portal) {
+	        adapter.patch({
+	            tag,
+	            tagName: getTagName(tag),
+	            node,
+	            props,
+	            oldProps,
+	            scope,
+	            copyProps,
+	            isHydrating: !!childHydrationNodes,
+	            quietProps,
+	        });
 	    }
-	    renderer.arrange(tag, value, props, childValues, oldProps, wrap(ret.cachedChildValues));
-	    ret.cachedChildValues = unwrap(childValues);
+	    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(renderer, ret.value);
+	        flush(adapter, ret.value);
+	        // The root passed to Portal elements are opaque to parents so we return
+	        // undefined here.
 	        return;
 	    }
-	    return value;
+	    return node;
 	}
-	function flush(renderer, root, initiator) {
-	    renderer.flush(root);
-	    if (typeof root !== "object" || root === null) {
-	        return;
-	    }
-	    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);
-	                }
+	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;
 	            }
-	            if (flushMap1.size) {
-	                flushMaps.set(root, flushMap1);
+	            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;
-	/**
-	 * A flag which is true when the component is in a for...of loop.
-	 */
-	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();
+	const afterMapByRoot = new WeakMap();
+	// TODO: allow ContextState to be initialized for testing purposes
 	/**
 	 * @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.
@@ -868,17 +1591,18 @@
 	 * 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.
@@ -886,47 +1610,51 @@
 	     * @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;
@@ -938,7 +1666,7 @@
 	            }
 	        }
 	        finally {
-	            ctx.f &= -9;
+	            setFlag(ctx.ret, IsInForAwaitOfLoop, false);
 	            if (ctx.onPropsRequested) {
 	                ctx.onPropsRequested();
 	                ctx.onPropsRequested = undefined;
@@ -948,37 +1676,108 @@
 	    /**
 	     * 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));
+	                });
+	            }
+	        }
+	        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;
 	        }
-	        else if (ctx.f & IsSyncExecuting) {
-	            console.error("Component is already executing");
-	            return ctx.renderer.read(getValue(ctx.ret));
+	        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();
@@ -986,35 +1785,35 @@
 	        }
 	        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;
 	        }
@@ -1026,7 +1825,7 @@
 	        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);
@@ -1034,7 +1833,7 @@
 	        }
 	    }
 	    provide(key, value) {
-	        const ctx = this[_ContextImpl];
+	        const ctx = this[_ContextState];
 	        let provisions = provisionMaps.get(ctx);
 	        if (!provisions) {
 	            provisions = new Map();
@@ -1042,980 +1841,820 @@
 	        }
 	        provisions.set(key, value);
 	    }
-	    addEventListener(type, listener, options) {
-	        const ctx = this[_ContextImpl];
-	        let listeners;
-	        if (!isListenerOrListenerObject(listener)) {
-	            return;
+	    [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 {
-	            const listeners1 = listenersMap.get(ctx);
-	            if (listeners1) {
-	                listeners = listeners1;
-	            }
-	            else {
-	                listeners = [];
-	                listenersMap.set(ctx, listeners);
+	            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);
+	                    }
+	                }
 	            }
 	        }
-	        options = normalizeListenerOptions(options);
-	        let callback;
-	        if (typeof listener === "object") {
-	            callback = () => listener.handleEvent.apply(listener, arguments);
+	    }
+	}
+	function diffComponent(adapter, root, host, parent, scope, ret) {
+	    let ctx;
+	    if (ret.ctx) {
+	        ctx = ret.ctx;
+	        if (getFlag(ctx.ret, IsExecuting)) {
+	            console.error(`Component <${getTagName(ctx.ret.el.tag)}> is already executing`);
+	            return;
 	        }
-	        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;
-	                    }
-	                }
-	            }
-	            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) {
-	    let ctx;
-	    if (oldProps) {
-	        ctx = ret.ctx;
-	        if (ctx.f & IsSyncExecuting) {
-	            console.error("Component is already executing");
-	            return ret.cachedChildValues;
+	        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);
+	        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));
 	        }
-	        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);
-	        }
-	    }
-	    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);
 	}
 
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-	const impl$1 = {
-	    scope(xmlns, tag, props) {
+	function isWritableProperty(element, name) {
+	    // walk up the object's prototype chain to find the owner
+	    let propOwner = element;
+	    do {
+	        if (Object.prototype.hasOwnProperty.call(propOwner, name)) {
+	            break;
+	        }
+	    } while ((propOwner = Object.getPrototypeOf(propOwner)));
+	    if (propOwner === null) {
+	        return false;
+	    }
+	    // get the descriptor for the named property and check whether it implies
+	    // that the property is writable
+	    const descriptor = Object.getOwnPropertyDescriptor(propOwner, name);
+	    if (descriptor != null &&
+	        (descriptor.writable === true || descriptor.set !== undefined)) {
+	        return true;
+	    }
+	    return false;
+	}
+	function emitHydrationWarning(propName, quietProps, expectedValue, actualValue, element, displayName) {
+	    const checkName = propName;
+	    const showName = displayName || propName;
+	    if (!quietProps || !quietProps.has(checkName)) {
+	        if (expectedValue === null || expectedValue === false) {
+	            console.warn(`Expected "${showName}" to be missing but found ${String(actualValue)} while hydrating:`, element);
+	        }
+	        else if (expectedValue === true || expectedValue === "") {
+	            console.warn(`Expected "${showName}" to be ${expectedValue === true ? "present" : '""'} but found ${String(actualValue)} while hydrating:`, element);
+	        }
+	        else if (typeof window !== "undefined" &&
+	            window.location &&
+	            new URL(expectedValue, window.location.origin).href ===
+	                new URL(actualValue, window.location.origin).href) ;
+	        else {
+	            console.warn(`Expected "${showName}" to be "${String(expectedValue)}" but found ${String(actualValue)} while hydrating:`, element);
+	        }
+	    }
+	}
+	const adapter = {
+	    scope({ scope: xmlns, tag, props, }) {
 	        switch (tag) {
 	            case Portal:
+	                // TODO: read the namespace from the portal root element
 	                xmlns = undefined;
 	                break;
 	            case "svg":
@@ -2024,9 +2663,9 @@
 	        }
 	        return props.xmlns || xmlns;
 	    },
-	    create(tag, _props, xmlns) {
+	    create({ tag, tagName, scope: xmlns, }) {
 	        if (typeof tag !== "string") {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	            throw new Error(`Unknown tag: ${tagName}`);
 	        }
 	        else if (tag.toLowerCase() === "svg") {
 	            xmlns = SVG_NAMESPACE;
@@ -2035,286 +2674,362 @@
 	            ? document.createElementNS(xmlns, tag)
 	            : document.createElement(tag);
 	    },
-	    hydrate(tag, node, props) {
+	    adopt({ tag, tagName, node, }) {
 	        if (typeof tag !== "string" && tag !== Portal) {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	            throw new Error(`Unknown tag: ${tagName}`);
+	        }
+	        if (node === document.body ||
+	            node === document.head ||
+	            node === document.documentElement ||
+	            node === document) {
+	            console.warn(`Hydrating ${node.nodeName.toLowerCase()} is discouraged as it is destructive and may remove unknown nodes.`);
+	        }
+	        if (node == null ||
+	            (typeof tag === "string" &&
+	                (node.nodeType !== Node.ELEMENT_NODE ||
+	                    tag.toLowerCase() !== node.tagName.toLowerCase()))) {
+	            console.warn(`Expected <${tagName}> while hydrating but found: `, node);
+	            return;
 	        }
-	        if (typeof tag === "string" &&
-	            tag.toUpperCase() !== node.tagName) {
-	            // TODO: consider pros and cons of hydration warnings
-	            //console.error(`Expected <${tag}> while hydrating but found:`, node);
-	            return undefined;
+	        return Array.from(node.childNodes);
+	    },
+	    patch({ tagName, node, props, oldProps, scope: xmlns, copyProps, quietProps, isHydrating, }) {
+	        if (node.nodeType !== Node.ELEMENT_NODE) {
+	            throw new TypeError(`Cannot patch node: ${String(node)}`);
 	        }
-	        const children = [];
-	        for (let i = 0; i < node.childNodes.length; i++) {
-	            const child = node.childNodes[i];
-	            if (child.nodeType === Node.TEXT_NODE) {
-	                children.push(child.data);
-	            }
-	            else if (child.nodeType === Node.ELEMENT_NODE) {
-	                children.push(child);
-	            }
+	        else if (props.class && props.className) {
+	            console.error(`Both "class" and "className" set in props for <${tagName}>. Use one or the other.`);
 	        }
-	        // TODO: extract props from nodes
-	        return { props, children };
-	    },
-	    patch(_tag, 
-	    // TODO: Why does this assignment work?
-	    node, name, 
-	    // TODO: Stricter typings?
-	    value, oldValue, xmlns) {
+	        const element = node;
 	        const isSVG = xmlns === SVG_NAMESPACE;
-	        const colonIndex = name.indexOf(":");
-	        if (colonIndex !== -1) {
-	            const ns = name.slice(0, colonIndex);
-	            const name1 = name.slice(colonIndex + 1);
-	            switch (ns) {
-	                case "prop":
-	                    node[name1] = value;
-	                    return;
-	                case "attr":
+	        for (let name in { ...oldProps, ...props }) {
+	            let value = props[name];
+	            const oldValue = oldProps ? oldProps[name] : undefined;
+	            {
+	                if (copyProps != null && copyProps.has(name)) {
+	                    continue;
+	                }
+	                // handle prop:name or attr:name properties
+	                const colonIndex = name.indexOf(":");
+	                if (colonIndex !== -1) {
+	                    const [ns, name1] = [
+	                        name.slice(0, colonIndex),
+	                        name.slice(colonIndex + 1),
+	                    ];
+	                    switch (ns) {
+	                        case "prop":
+	                            node[name1] = value;
+	                            continue;
+	                        case "attr":
+	                            if (value == null || value === false) {
+	                                if (isHydrating && element.hasAttribute(name1)) {
+	                                    emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
+	                                }
+	                                element.removeAttribute(name1);
+	                            }
+	                            else if (value === true) {
+	                                if (isHydrating && !element.hasAttribute(name1)) {
+	                                    emitHydrationWarning(name, quietProps, value, null, element);
+	                                }
+	                                element.setAttribute(name1, "");
+	                            }
+	                            else if (typeof value !== "string") {
+	                                value = String(value);
+	                            }
+	                            if (isHydrating && element.getAttribute(name1) !== value) {
+	                                emitHydrationWarning(name, quietProps, value, element.getAttribute(name1), element);
+	                            }
+	                            element.setAttribute(name1, String(value));
+	                            continue;
+	                    }
+	                }
+	            }
+	            switch (name) {
+	                // TODO: fix hydration warnings for the style prop
+	                case "style": {
+	                    const style = element.style;
 	                    if (value == null || value === false) {
-	                        node.removeAttribute(name1);
+	                        if (isHydrating && style.cssText !== "") {
+	                            emitHydrationWarning(name, quietProps, value, style.cssText, element);
+	                        }
+	                        element.removeAttribute("style");
 	                    }
 	                    else if (value === true) {
-	                        node.setAttribute(name1, "");
+	                        if (isHydrating && style.cssText !== "") {
+	                            emitHydrationWarning(name, quietProps, "", style.cssText, element);
+	                        }
+	                        element.setAttribute("style", "");
 	                    }
 	                    else if (typeof value === "string") {
-	                        node.setAttribute(name1, value);
+	                        if (style.cssText !== value) {
+	                            // TODO: Fix hydration warnings for styles
+	                            //if (isHydrating) {
+	                            //	emitHydrationWarning(
+	                            //		name,
+	                            //		quietProps,
+	                            //		value,
+	                            //		style.cssText,
+	                            //		element,
+	                            //	);
+	                            //}
+	                            style.cssText = value;
+	                        }
 	                    }
 	                    else {
-	                        node.setAttribute(name, String(value));
+	                        if (typeof oldValue === "string") {
+	                            // if the old value was a string, we need to clear the style
+	                            // TODO: only clear the styles enumerated in the old value
+	                            style.cssText = "";
+	                        }
+	                        for (const styleName in { ...oldValue, ...value }) {
+	                            const styleValue = value && value[styleName];
+	                            if (styleValue == null) {
+	                                if (isHydrating && style.getPropertyValue(styleName) !== "") {
+	                                    emitHydrationWarning(name, quietProps, null, style.getPropertyValue(styleName), element, `style.${styleName}`);
+	                                }
+	                                style.removeProperty(styleName);
+	                            }
+	                            else if (style.getPropertyValue(styleName) !== styleValue) {
+	                                // TODO: hydration warnings for style props
+	                                //if (isHydrating) {
+	                                //	emitHydrationWarning(
+	                                //		name,
+	                                //		quietProps,
+	                                //		styleValue,
+	                                //		style.getPropertyValue(styleName),
+	                                //		element,
+	                                //		`style.${styleName}`,
+	                                //	);
+	                                //}
+	                                style.setProperty(styleName, styleValue);
+	                            }
+	                        }
 	                    }
-	                    return;
-	            }
-	        }
-	        switch (name) {
-	            case "style": {
-	                const style = node.style;
-	                if (style == null) {
-	                    node.setAttribute("style", value);
-	                }
-	                else if (value == null || value === false) {
-	                    node.removeAttribute("style");
-	                }
-	                else if (value === true) {
-	                    node.setAttribute("style", "");
+	                    break;
 	                }
-	                else if (typeof value === "string") {
-	                    if (style.cssText !== value) {
-	                        style.cssText = value;
+	                case "class":
+	                case "className":
+	                    if (value === true) {
+	                        if (isHydrating && element.getAttribute("class") !== "") {
+	                            emitHydrationWarning(name, quietProps, "", element.getAttribute("class"), element);
+	                        }
+	                        element.setAttribute("class", "");
 	                    }
-	                }
-	                else {
-	                    if (typeof oldValue === "string") {
-	                        style.cssText = "";
+	                    else if (value == null) {
+	                        if (isHydrating && element.hasAttribute("class")) {
+	                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
+	                        }
+	                        element.removeAttribute("class");
 	                    }
-	                    for (const styleName in { ...oldValue, ...value }) {
-	                        const styleValue = value && value[styleName];
-	                        if (styleValue == null) {
-	                            style.removeProperty(styleName);
+	                    else if (typeof value === "object") {
+	                        // class={{"included-class": true, "excluded-class": false}} syntax
+	                        if (typeof oldValue === "string") {
+	                            // if the old value was a string, we need to clear all classes
+	                            element.setAttribute("class", "");
+	                        }
+	                        let shouldIssueWarning = false;
+	                        const hydratingClasses = isHydrating
+	                            ? new Set(Array.from(element.classList))
+	                            : undefined;
+	                        const hydratingClassName = isHydrating
+	                            ? element.getAttribute("class")
+	                            : undefined;
+	                        for (const className in { ...oldValue, ...value }) {
+	                            const classValue = value && value[className];
+	                            if (classValue) {
+	                                element.classList.add(className);
+	                                if (hydratingClasses && hydratingClasses.has(className)) {
+	                                    hydratingClasses.delete(className);
+	                                }
+	                                else if (isHydrating) {
+	                                    shouldIssueWarning = true;
+	                                }
+	                            }
+	                            else {
+	                                element.classList.remove(className);
+	                            }
 	                        }
-	                        else if (style.getPropertyValue(styleName) !== styleValue) {
-	                            style.setProperty(styleName, styleValue);
+	                        if (shouldIssueWarning ||
+	                            (hydratingClasses && hydratingClasses.size > 0)) {
+	                            emitHydrationWarning(name, quietProps, Object.keys(value)
+	                                .filter((k) => value[k])
+	                                .join(" "), hydratingClassName || "", element);
 	                        }
 	                    }
-	                }
-	                break;
-	            }
-	            case "class":
-	            case "className":
-	                if (value === true) {
-	                    node.setAttribute("class", "");
-	                }
-	                else if (value == null) {
-	                    node.removeAttribute("class");
-	                }
-	                else if (!isSVG) {
-	                    if (node.className !== value) {
-	                        node["className"] = value;
+	                    else if (!isSVG) {
+	                        if (element.className !== value) {
+	                            if (isHydrating) {
+	                                emitHydrationWarning(name, quietProps, value, element.className, element);
+	                            }
+	                            element.className = value;
+	                        }
 	                    }
-	                }
-	                else if (node.getAttribute("class") !== value) {
-	                    node.setAttribute("class", value);
-	                }
-	                break;
-	            case "innerHTML":
-	                if (value !== oldValue) {
-	                    node.innerHTML = value;
-	                }
-	                break;
-	            default: {
-	                if (name[0] === "o" &&
-	                    name[1] === "n" &&
-	                    name[2] === name[2].toUpperCase() &&
-	                    typeof value === "function") {
-	                    // Support React-style event names (onClick, onChange, etc.)
-	                    name = name.toLowerCase();
-	                }
-	                if (name in node &&
-	                    // boolean properties will coerce strings, but sometimes they map to
-	                    // enumerated attributes, where truthy strings ("false", "no") map to
-	                    // falsy properties, so we use attributes in this case.
-	                    !(typeof value === "string" &&
-	                        typeof node[name] === "boolean")) {
-	                    // walk up the object's prototype chain to find the owner of the
-	                    // named property
-	                    let obj = node;
-	                    do {
-	                        if (Object.prototype.hasOwnProperty.call(obj, name)) {
-	                            break;
+	                    else if (element.getAttribute("class") !== value) {
+	                        if (isHydrating) {
+	                            emitHydrationWarning(name, quietProps, value, element.getAttribute("class"), element);
 	                        }
-	                    } while ((obj = Object.getPrototypeOf(obj)));
-	                    // get the descriptor for the named property and check whether it
-	                    // implies that the property is writable
-	                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
-	                    if (descriptor != null &&
-	                        (descriptor.writable === true || descriptor.set !== undefined)) {
-	                        if (node[name] !== value || oldValue === undefined) {
-	                            node[name] = value;
+	                        element.setAttribute("class", value);
+	                    }
+	                    break;
+	                case "innerHTML":
+	                    if (value !== oldValue) {
+	                        if (isHydrating) {
+	                            emitHydrationWarning(name, quietProps, value, element.innerHTML, element);
 	                        }
-	                        return;
+	                        element.innerHTML = value;
 	                    }
-	                    // if the property wasn't writable, fall through to the code below
-	                    // which uses setAttribute() instead of assigning directly.
-	                }
-	                if (value === true) {
-	                    value = "";
-	                }
-	                else if (value == null || value === false) {
-	                    node.removeAttribute(name);
-	                    return;
-	                }
-	                if (node.getAttribute(name) !== value) {
-	                    node.setAttribute(name, value);
-	                }
-	            }
-	        }
-	    },
-	    arrange(tag, node, props, children, _oldProps, oldChildren) {
-	        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
-	            throw new TypeError(`Portal root is not a node. Received: ${JSON.stringify(node && node.toString())}`);
-	        }
-	        if (!("innerHTML" in props) &&
-	            // We don’t want to update elements without explicit children (<div/>),
-	            // because these elements sometimes have child nodes added via raw
-	            // DOM manipulations.
-	            // However, if an element has previously rendered children, we clear the
-	            // them because it would be surprising not to clear Crank managed
-	            // children, even if the new element does not have explicit children.
-	            ("children" in props || (oldChildren && oldChildren.length))) {
-	            if (children.length === 0) {
-	                node.textContent = "";
-	            }
-	            else {
-	                let oldChild = node.firstChild;
-	                let i = 0;
-	                while (oldChild !== null && i < children.length) {
-	                    const newChild = children[i];
-	                    if (oldChild === newChild) {
-	                        oldChild = oldChild.nextSibling;
-	                        i++;
+	                    break;
+	                default: {
+	                    if (name[0] === "o" &&
+	                        name[1] === "n" &&
+	                        name[2] === name[2].toUpperCase() &&
+	                        typeof value === "function") {
+	                        // Support React-style event names (onClick, onChange, etc.)
+	                        name = name.toLowerCase();
 	                    }
-	                    else if (typeof newChild === "string") {
-	                        if (oldChild.nodeType === Node.TEXT_NODE) {
-	                            if (oldChild.data !== newChild) {
-	                                oldChild.data = newChild;
+	                    // try to set the property directly
+	                    if (name in element &&
+	                        // boolean properties will coerce strings, but sometimes they map to
+	                        // enumerated attributes, where truthy strings ("false", "no") map to
+	                        // falsy properties, so we force using setAttribute.
+	                        !(typeof value === "string" &&
+	                            typeof element[name] === "boolean") &&
+	                        isWritableProperty(element, name)) {
+	                        if (element[name] !== value || oldValue === undefined) {
+	                            if (isHydrating &&
+	                                typeof element[name] === "string" &&
+	                                element[name] !== value) {
+	                                emitHydrationWarning(name, quietProps, value, element[name], element);
 	                            }
-	                            oldChild = oldChild.nextSibling;
+	                            // if the property is writable, assign it directly
+	                            element[name] = value;
 	                        }
-	                        else {
-	                            node.insertBefore(document.createTextNode(newChild), oldChild);
+	                        continue;
+	                    }
+	                    if (value === true) {
+	                        value = "";
+	                    }
+	                    else if (value == null || value === false) {
+	                        if (isHydrating && element.hasAttribute(name)) {
+	                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
 	                        }
-	                        i++;
+	                        element.removeAttribute(name);
+	                        continue;
 	                    }
-	                    else if (oldChild.nodeType === Node.TEXT_NODE) {
-	                        const nextSibling = oldChild.nextSibling;
-	                        node.removeChild(oldChild);
-	                        oldChild = nextSibling;
+	                    else if (typeof value !== "string") {
+	                        value = String(value);
 	                    }
-	                    else {
-	                        node.insertBefore(newChild, oldChild);
-	                        i++;
-	                        // TODO: This is an optimization but we need to think a little more about other cases like prepending.
-	                        if (oldChild !== children[i]) {
-	                            const nextSibling = oldChild.nextSibling;
-	                            node.removeChild(oldChild);
-	                            oldChild = nextSibling;
+	                    if (element.getAttribute(name) !== value) {
+	                        if (isHydrating) {
+	                            emitHydrationWarning(name, quietProps, value, element.getAttribute(name), element);
 	                        }
+	                        element.setAttribute(name, value);
 	                    }
 	                }
-	                // remove excess DOM nodes
-	                while (oldChild !== null) {
-	                    const nextSibling = oldChild.nextSibling;
-	                    node.removeChild(oldChild);
-	                    oldChild = nextSibling;
+	            }
+	        }
+	    },
+	    arrange({ tag, node, props, children, }) {
+	        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
+	            throw new TypeError(`<Portal> root is not a node. Received: ${String(node)}`);
+	        }
+	        if (!("innerHTML" in props)) {
+	            let oldChild = node.firstChild;
+	            for (let i = 0; i < children.length; i++) {
+	                const newChild = children[i];
+	                if (oldChild === newChild) {
+	                    // the child is already in the right place, so we can skip it
+	                    oldChild = oldChild.nextSibling;
 	                }
-	                // append excess children
-	                for (; i < children.length; i++) {
-	                    const newChild = children[i];
-	                    node.appendChild(typeof newChild === "string"
-	                        ? document.createTextNode(newChild)
-	                        : newChild);
+	                else {
+	                    node.insertBefore(newChild, oldChild);
+	                    if (tag !== Portal &&
+	                        oldChild &&
+	                        i + 1 < children.length &&
+	                        oldChild !== children[i + 1]) {
+	                        oldChild = oldChild.nextSibling;
+	                    }
 	                }
 	            }
 	        }
 	    },
-	    text(text, _scope, hydrationData) {
-	        if (hydrationData != null) {
-	            let value = hydrationData.children.shift();
-	            if (typeof value !== "string" || !value.startsWith(text)) ;
-	            else if (text.length < value.length) {
-	                value = value.slice(text.length);
-	                hydrationData.children.unshift(value);
+	    remove({ node, parentNode, isNested, }) {
+	        if (!isNested && node.parentNode === parentNode) {
+	            parentNode.removeChild(node);
+	        }
+	    },
+	    text({ value, oldNode, hydrationNodes, }) {
+	        if (hydrationNodes != null) {
+	            let node = hydrationNodes.shift();
+	            if (!node || node.nodeType !== Node.TEXT_NODE) {
+	                console.warn(`Expected "${value}" while hydrating but found:`, node);
+	            }
+	            else {
+	                // value is a text node, check if it matches the expected text
+	                const textData = node.data;
+	                if (textData.length > value.length) {
+	                    if (textData.startsWith(value)) {
+	                        // the text node is longer than the expected text, so we
+	                        // reuse the existing text node, but truncate it and unshift the rest
+	                        node.data = value;
+	                        hydrationNodes.unshift(document.createTextNode(textData.slice(value.length)));
+	                        return node;
+	                    }
+	                }
+	                else if (textData === value) {
+	                    return node;
+	                }
+	                // We log textData and not node because node will be mutated
+	                console.warn(`Expected "${value}" while hydrating but found:`, textData);
+	                oldNode = node;
 	            }
 	        }
-	        return text;
+	        if (oldNode != null) {
+	            if (oldNode.data !== value) {
+	                oldNode.data = value;
+	            }
+	            return oldNode;
+	        }
+	        return document.createTextNode(value);
 	    },
-	    raw(value, xmlns, hydrationData) {
-	        let result;
+	    raw({ value, scope: xmlns, hydrationNodes, }) {
+	        let nodes;
 	        if (typeof value === "string") {
 	            const el = xmlns == null
 	                ? document.createElement("div")
 	                : document.createElementNS(xmlns, "svg");
 	            el.innerHTML = value;
-	            if (el.childNodes.length === 0) {
-	                result = undefined;
-	            }
-	            else if (el.childNodes.length === 1) {
-	                result = el.childNodes[0];
-	            }
-	            else {
-	                result = Array.from(el.childNodes);
-	            }
+	            nodes = Array.from(el.childNodes);
 	        }
 	        else {
-	            result = value;
-	        }
-	        if (hydrationData != null) {
-	            // TODO: maybe we should warn on incorrect values
-	            if (Array.isArray(result)) {
-	                for (let i = 0; i < result.length; i++) {
-	                    const node = result[i];
-	                    if (typeof node !== "string" &&
-	                        (node.nodeType === Node.ELEMENT_NODE ||
-	                            node.nodeType === Node.TEXT_NODE)) {
-	                        hydrationData.children.shift();
-	                    }
+	            nodes = value == null ? [] : Array.isArray(value) ? [...value] : [value];
+	        }
+	        if (hydrationNodes != null) {
+	            for (let i = 0; i < nodes.length; i++) {
+	                const node = nodes[i];
+	                // check if node is equal to the next node in the hydration array
+	                const hydrationNode = hydrationNodes.shift();
+	                if (hydrationNode &&
+	                    typeof hydrationNode === "object" &&
+	                    typeof hydrationNode.nodeType === "number" &&
+	                    node.isEqualNode(hydrationNode)) {
+	                    nodes[i] = hydrationNode;
 	                }
-	            }
-	            else if (result != null && typeof result !== "string") {
-	                if (result.nodeType === Node.ELEMENT_NODE ||
-	                    result.nodeType === Node.TEXT_NODE) {
-	                    hydrationData.children.shift();
+	                else {
+	                    console.warn(`Expected <Raw value="${String(value)}"> while hydrating but found:`, hydrationNode);
 	                }
 	            }
 	        }
-	        return result;
+	        return nodes.length === 0
+	            ? undefined
+	            : nodes.length === 1
+	                ? nodes[0]
+	                : nodes;
 	    },
 	};
 	class DOMRenderer extends Renderer {
 	    constructor() {
-	        super(impl$1);
+	        super(adapter);
 	    }
 	    render(children, root, ctx) {
 	        validateRoot(root);
@@ -2326,9 +3041,12 @@
 	    }
 	}
 	function validateRoot(root) {
-	    if (root === null ||
+	    if (root == null ||
 	        (typeof root === "object" && typeof root.nodeType !== "number")) {
-	        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
+	        throw new TypeError(`Render root is not a node. Received: ${String(root)}`);
+	    }
+	    else if (root.nodeType !== Node.ELEMENT_NODE) {
+	        throw new TypeError(`Render root must be an element node. Received: ${String(root)}`);
 	    }
 	}
 	const renderer$1 = new DOMRenderer();
@@ -2336,7 +3054,7 @@
 	var dom = /*#__PURE__*/Object.freeze({
 		__proto__: null,
 		DOMRenderer: DOMRenderer,
-		impl: impl$1,
+		adapter: adapter,
 		renderer: renderer$1
 	});
 
@@ -2388,24 +3106,7 @@
 	function printAttrs(props) {
 	    const attrs = [];
 	    for (let [name, value] of Object.entries(props)) {
-	        // TODO: Because printAttrs is called in arrange, special props are not filtered out.
-	        // This should be handled by the core library.
-	        if (name === "children" ||
-	            name === "innerHTML" ||
-	            name === "key" ||
-	            name === "ref" ||
-	            name === "copy" ||
-	            name.startsWith("prop:") ||
-	            // TODO: Remove deprecated special props
-	            name === "crank-key" ||
-	            name === "crank-ref" ||
-	            name === "crank-static" ||
-	            name === "c-key" ||
-	            name === "c-ref" ||
-	            name === "c-static" ||
-	            name === "$key" ||
-	            name === "$ref" ||
-	            name === "$static") {
+	        if (name === "innerHTML" || name.startsWith("prop:")) {
 	            continue;
 	        }
 	        else if (name === "style") {
@@ -2451,8 +3152,8 @@
 	    create() {
 	        return { value: "" };
 	    },
-	    text(text) {
-	        return escape(text);
+	    text({ value }) {
+	        return { value: escape(value) };
 	    },
 	    read(value) {
 	        if (Array.isArray(value)) {
@@ -2465,15 +3166,15 @@
 	            return value;
 	        }
 	        else {
-	            return value.value;
+	            return value.value || "";
 	        }
 	    },
-	    arrange(tag, node, props, children) {
+	    arrange({ tag, tagName, node, props, children, }) {
 	        if (tag === Portal) {
 	            return;
 	        }
 	        else if (typeof tag !== "string") {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	            throw new Error(`Unknown tag: ${tagName}`);
 	        }
 	        const attrs = printAttrs(props);
 	        const open = `<${tag}${attrs.length ? " " : ""}${attrs}>`;
@@ -2510,6 +3211,7 @@
 	exports.Portal = Portal;
 	exports.Raw = Raw;
 	exports.Renderer = Renderer;
+	exports.Text = Text;
 	exports.cloneElement = cloneElement;
 	exports.createElement = createElement;
 	exports.dom = dom;