@b9g/crank 0.5.0-debug.0 → 0.5.1

package/umd.js

@@ -27,7 +27,8 @@
 	            : typeof value === "string" ||
 	                typeof value[Symbol.iterator] !== "function"
 	                ? [value]
-	                : [...value];
+	                : // TODO: inference broke in TypeScript 3.9.
+	                    [...value];
 	}
 	function isIteratorLike(value) {
 	    return value != null && typeof value.next === "function";
@@ -76,8 +77,7 @@
 	/**
 	 * A special tag for injecting raw nodes or strings via a value prop.
 	 *
-	 * If the value prop is a string, Renderer.prototype.parse() will be called on
-	 * the string and the result will be set as the element’s value.
+	 * Renderer.prototype.raw() is called with the value prop.
 	 */
 	const Raw = Symbol.for("crank.Raw");
 	const ElementSymbol = Symbol.for("crank.Element");
@@ -163,22 +163,6 @@
 	    else if (children.length === 1) {
 	        props1.children = children[0];
 	    }
-	    // string aliases for the special tags
-	    // TODO: Does this logic belong here, or in the Element constructor
-	    switch (tag) {
-	        case "$FRAGMENT":
-	            tag = Fragment;
-	            break;
-	        case "$PORTAL":
-	            tag = Portal;
-	            break;
-	        case "$COPY":
-	            tag = Copy;
-	            break;
-	        case "$RAW":
-	            tag = Raw;
-	            break;
-	    }
 	    return new Element(tag, props1, key, ref, static_);
 	}
 	/** Clones a given element, shallowly copying the props object. */
@@ -257,13 +241,13 @@
 	class Retainer {
 	    constructor(el) {
 	        this.el = el;
-	        this.value = undefined;
 	        this.ctx = undefined;
 	        this.children = undefined;
-	        this.cached = undefined;
-	        this.fallback = undefined;
-	        this.inflight = undefined;
-	        this.onCommit = undefined;
+	        this.value = undefined;
+	        this.cachedChildValues = undefined;
+	        this.fallbackValue = undefined;
+	        this.inflightValue = undefined;
+	        this.onNextValues = undefined;
 	    }
 	}
 	/**
@@ -272,10 +256,10 @@
 	 * @returns The value of the element.
 	 */
 	function getValue(ret) {
-	    if (typeof ret.fallback !== "undefined") {
-	        return typeof ret.fallback === "object"
-	            ? getValue(ret.fallback)
-	            : ret.fallback;
+	    if (typeof ret.fallbackValue !== "undefined") {
+	        return typeof ret.fallbackValue === "object"
+	            ? getValue(ret.fallbackValue)
+	            : ret.fallbackValue;
 	    }
 	    else if (ret.el.tag === Portal) {
 	        return;
@@ -291,8 +275,8 @@
 	 * @returns A normalized array of nodes and strings.
 	 */
 	function getChildValues(ret) {
-	    if (ret.cached) {
-	        return wrap(ret.cached);
+	    if (ret.cachedChildValues) {
+	        return wrap(ret.cachedChildValues);
 	    }
 	    const values = [];
 	    const children = wrap(ret.children);
@@ -305,7 +289,7 @@
 	    const values1 = normalize(values);
 	    const tag = ret.el.tag;
 	    if (typeof tag === "function" || (tag !== Fragment && tag !== Raw)) {
-	        ret.cached = unwrap(values1);
+	        ret.cachedChildValues = unwrap(values1);
 	    }
 	    return values1;
 	}
@@ -313,16 +297,19 @@
 	    create() {
 	        throw new Error("Not implemented");
 	    },
+	    hydrate() {
+	        throw new Error("Not implemented");
+	    },
 	    scope: IDENTITY,
 	    read: IDENTITY,
-	    escape: IDENTITY,
-	    parse: IDENTITY,
+	    text: IDENTITY,
+	    raw: IDENTITY,
 	    patch: NOOP,
 	    arrange: NOOP,
 	    dispose: NOOP,
 	    flush: NOOP,
 	};
-	const $RendererImpl = Symbol.for("crank.RendererImpl");
+	const _RendererImpl = Symbol.for("crank.RendererImpl");
 	/**
 	 * An abstract class which is subclassed to render to different target
 	 * environments. This class is responsible for kicking off the rendering
@@ -336,7 +323,7 @@
 	class Renderer {
 	    constructor(impl) {
 	        this.cache = new WeakMap();
-	        this[$RendererImpl] = {
+	        this[_RendererImpl] = {
 	            ...defaultRendererImpl,
 	            ...impl,
 	        };
@@ -348,7 +335,7 @@
 	     * 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 ctx - An optional context that will be the ancestor context of all
+	     * @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.
@@ -358,7 +345,7 @@
 	     */
 	    render(children, root, bridge) {
 	        let ret;
-	        const ctx = bridge && bridge[$ContextImpl];
+	        const ctx = bridge && bridge[_ContextImpl];
 	        if (typeof root === "object" && root !== null) {
 	            ret = this.cache.get(root);
 	        }
@@ -381,8 +368,32 @@
 	                this.cache.delete(root);
 	            }
 	        }
-	        const impl = this[$RendererImpl];
-	        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children);
+	        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);
+	    }
+	    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 }));
+	        ret.value = root;
+	        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)) {
@@ -394,17 +405,17 @@
 	/*** PRIVATE RENDERER FUNCTIONS ***/
 	function commitRootRender(renderer, root, ctx, ret, childValues, oldProps) {
 	    // element is a host or portal element
-	    if (root !== undefined) {
-	        renderer.arrange(Portal, root, ret.el.props, childValues, oldProps, wrap(ret.cached));
+	    if (root != null) {
+	        renderer.arrange(Portal, root, ret.el.props, childValues, oldProps, wrap(ret.cachedChildValues));
 	        flush(renderer, root);
 	    }
-	    ret.cached = unwrap(childValues);
+	    ret.cachedChildValues = unwrap(childValues);
 	    if (root == null) {
 	        unmount(renderer, ret, ctx, ret);
 	    }
-	    return renderer.read(ret.cached);
+	    return renderer.read(ret.cachedChildValues);
 	}
-	function diffChildren(renderer, root, host, ctx, scope, parent, children) {
+	function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrationData) {
 	    const oldRetained = wrap(parent.children);
 	    const newRetained = [];
 	    const newChildren = arrayify(children);
@@ -413,14 +424,15 @@
 	    let childrenByKey;
 	    let seenKeys;
 	    let isAsync = false;
-	    let oi = 0, oldLength = oldRetained.length;
+	    let hydrationBlock;
+	    let oi = 0;
+	    let oldLength = oldRetained.length;
 	    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
-	        // We make sure we don’t access indices out of bounds to prevent
-	        // deoptimizations.
+	        // length checks to prevent index out of bounds deoptimizations.
 	        let ret = oi >= oldLength ? undefined : oldRetained[oi];
 	        let child = narrow(newChildren[ni]);
 	        {
-	            // Aligning new children with old retainers
+	            // aligning new children with old retainers
 	            let oldKey = typeof ret === "object" ? ret.el.key : undefined;
 	            let newKey = typeof child === "object" ? child.key : undefined;
 	            if (newKey !== undefined && seenKeys && seenKeys.has(newKey)) {
@@ -455,18 +467,19 @@
 	        // Updating
 	        let value;
 	        if (typeof child === "object") {
-	            if (typeof ret === "object" && child.static_) {
-	                ret.el = child;
-	                value = getInflightValue(ret);
-	            }
-	            else if (child.tag === Copy) {
+	            if (child.tag === Copy) {
 	                value = getInflightValue(ret);
 	            }
 	            else {
 	                let oldProps;
+	                let static_ = false;
 	                if (typeof ret === "object" && ret.el.tag === child.tag) {
 	                    oldProps = ret.el.props;
 	                    ret.el = child;
+	                    if (child.static_) {
+	                        value = getInflightValue(ret);
+	                        static_ = true;
+	                    }
 	                }
 	                else {
 	                    if (typeof ret === "object") {
@@ -474,19 +487,28 @@
 	                    }
 	                    const fallback = ret;
 	                    ret = new Retainer(child);
-	                    ret.fallback = fallback;
+	                    ret.fallbackValue = fallback;
 	                }
-	                if (child.tag === Raw) {
-	                    value = updateRaw(renderer, ret, scope, oldProps);
+	                if (static_) ;
+	                else if (child.tag === Raw) {
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateRaw(renderer, ret, scope, oldProps, hydrationData))
+	                        : updateRaw(renderer, ret, scope, oldProps, hydrationData);
 	                }
 	                else if (child.tag === Fragment) {
-	                    value = updateFragment(renderer, root, host, ctx, scope, ret);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateFragment(renderer, root, host, ctx, scope, ret, hydrationData))
+	                        : updateFragment(renderer, root, host, ctx, scope, ret, hydrationData);
 	                }
 	                else if (typeof child.tag === "function") {
-	                    value = updateComponent(renderer, root, host, ctx, scope, ret, oldProps);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData))
+	                        : updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData);
 	                }
 	                else {
-	                    value = updateHost(renderer, root, ctx, scope, ret, oldProps);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData))
+	                        : updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData);
 	                }
 	            }
 	            const ref = child.ref;
@@ -498,9 +520,14 @@
 	                        return value;
 	                    });
 	                }
+	                if (hydrationData !== undefined) {
+	                    hydrationBlock = value;
+	                }
 	            }
-	            else if (typeof ref === "function") {
-	                ref(renderer.read(value));
+	            else {
+	                if (typeof ref === "function") {
+	                    ref(renderer.read(value));
+	                }
 	            }
 	        }
 	        else {
@@ -509,7 +536,7 @@
 	                (graveyard = graveyard || []).push(ret);
 	            }
 	            if (typeof child === "string") {
-	                value = ret = renderer.escape(child, scope);
+	                value = ret = renderer.text(child, scope, hydrationData);
 	            }
 	            else {
 	                ret = undefined;
@@ -542,27 +569,29 @@
 	            childValues1,
 	            new Promise((resolve) => (onChildValues = resolve)),
 	        ]);
-	        if (parent.onCommit) {
-	            parent.onCommit(childValues1);
+	        if (parent.onNextValues) {
+	            parent.onNextValues(childValues1);
 	        }
-	        parent.onCommit = onChildValues;
+	        parent.onNextValues = onChildValues;
 	        return childValues1.then((childValues) => {
-	            parent.inflight = parent.fallback = undefined;
+	            parent.inflightValue = parent.fallbackValue = undefined;
 	            return normalize(childValues);
 	        });
 	    }
-	    if (graveyard) {
-	        for (let i = 0; i < graveyard.length; i++) {
-	            unmount(renderer, host, ctx, graveyard[i]);
+	    else {
+	        if (graveyard) {
+	            for (let i = 0; i < graveyard.length; i++) {
+	                unmount(renderer, host, ctx, graveyard[i]);
+	            }
 	        }
+	        if (parent.onNextValues) {
+	            parent.onNextValues(values);
+	            parent.onNextValues = undefined;
+	        }
+	        parent.inflightValue = parent.fallbackValue = undefined;
+	        // We can assert there are no promises in the array because isAsync is false
+	        return normalize(values);
 	    }
-	    if (parent.onCommit) {
-	        parent.onCommit(values);
-	        parent.onCommit = undefined;
-	    }
-	    parent.inflight = parent.fallback = undefined;
-	    // We can assert there are no promises in the array because isAsync is false
-	    return normalize(values);
 	}
 	function createChildrenByKey(children, offset) {
 	    const childrenByKey = new Map();
@@ -582,58 +611,72 @@
 	    if (ctx && ctx.f & IsUpdating && ctx.inflightValue) {
 	        return ctx.inflightValue;
 	    }
-	    else if (child.inflight) {
-	        return child.inflight;
+	    else if (child.inflightValue) {
+	        return child.inflightValue;
 	    }
 	    return getValue(child);
 	}
-	function updateRaw(renderer, ret, scope, oldProps) {
+	function updateRaw(renderer, ret, scope, oldProps, hydrationData) {
 	    const props = ret.el.props;
-	    if (typeof props.value === "string") {
-	        if (!oldProps || oldProps.value !== props.value) {
-	            ret.value = renderer.parse(props.value, scope);
-	        }
-	    }
-	    else {
-	        ret.value = props.value;
+	    if (!oldProps || oldProps.value !== props.value) {
+	        ret.value = renderer.raw(props.value, scope, hydrationData);
 	    }
 	    return ret.value;
 	}
-	function updateFragment(renderer, root, host, ctx, scope, ret) {
-	    const childValues = diffChildren(renderer, root, host, 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.inflight = childValues.then((childValues) => unwrap(childValues));
-	        return ret.inflight;
+	        ret.inflightValue = childValues.then((childValues) => unwrap(childValues));
+	        return ret.inflightValue;
 	    }
 	    return unwrap(childValues);
 	}
-	function updateHost(renderer, root, ctx, scope, ret, oldProps) {
+	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;
 	    }
-	    else if (!oldProps) {
-	        // We use the truthiness of oldProps to determine if this the first render.
-	        ret.value = renderer.create(tag, el.props, scope);
+	    else {
+	        if (hydrationData !== undefined) {
+	            const value = hydrationData.children.shift();
+	            hydrationValue = value;
+	        }
 	    }
 	    scope = renderer.scope(scope, tag, el.props);
-	    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children);
+	    let childHydrationData;
+	    if (hydrationValue != null && typeof hydrationValue !== "string") {
+	        childHydrationData = renderer.hydrate(tag, hydrationValue, el.props);
+	        if (childHydrationData === undefined) {
+	            hydrationValue = undefined;
+	        }
+	    }
+	    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children, childHydrationData);
 	    if (isPromiseLike(childValues)) {
-	        ret.inflight = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps));
-	        return ret.inflight;
+	        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue));
+	        return ret.inflightValue;
 	    }
-	    return commitHost(renderer, scope, ret, childValues, oldProps);
+	    return commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue);
 	}
-	function commitHost(renderer, scope, ret, childValues, oldProps) {
+	function commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue) {
 	    const tag = ret.el.tag;
-	    const value = ret.value;
+	    let value = ret.value;
+	    if (hydrationValue != null) {
+	        value = ret.value = hydrationValue;
+	    }
 	    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);
+	        }
 	        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 (propName !== "children") {
@@ -648,8 +691,8 @@
 	        }
 	        ret.el = new Element(tag, props, ret.el.key, ret.el.ref);
 	    }
-	    renderer.arrange(tag, value, props, childValues, oldProps, wrap(ret.cached));
-	    ret.cached = unwrap(childValues);
+	    renderer.arrange(tag, value, props, childValues, oldProps, wrap(ret.cachedChildValues));
+	    ret.cachedChildValues = unwrap(childValues);
 	    if (tag === Portal) {
 	        flush(renderer, ret.value);
 	        return;
@@ -696,7 +739,7 @@
 	    }
 	    else if (ret.el.tag === Portal) {
 	        host = ret;
-	        renderer.arrange(Portal, host.value, host.el.props, [], host.el.props, wrap(host.cached));
+	        renderer.arrange(Portal, host.value, host.el.props, [], host.el.props, wrap(host.cachedChildValues));
 	        flush(renderer, host.value);
 	    }
 	    else if (ret.el.tag !== Fragment) {
@@ -720,38 +763,43 @@
 	}
 	/*** CONTEXT FLAGS ***/
 	/**
-	 * A flag which is set when the component is being updated by the parent and
-	 * cleared when the component has committed. Used to determine things like
-	 * whether the nearest host ancestor needs to be rearranged.
+	 * 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 set when the component function or generator is
-	 * synchronously executing. This flags is used to ensure that a component which
-	 * triggers a second update in the course of rendering does not cause a stack
-	 * overflow or a generator error.
+	 * A flag which is true when the component is synchronously executing.
+	 *
+	 * Used to guard against components triggering stack overflow or generator error.
 	 */
-	const IsExecuting = 1 << 1;
+	const IsSyncExecuting = 1 << 1;
 	/**
-	 * A flag used to make sure multiple values are not pulled from context prop
-	 * iterators without a yield.
+	 * A flag which is true when the component is in a for...of loop.
 	 */
-	const IsIterating = 1 << 2;
+	const IsInForOfLoop = 1 << 2;
 	/**
-	 * A flag used by async generator components in conjunction with the
-	 * onavailable (_oa) callback to mark whether new props can be pulled via the
-	 * context async iterator. See the Symbol.asyncIterator method and the
-	 * resumeCtxIterator function.
+	 * 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 IsAvailable = 1 << 3;
+	const NeedsToYield = 1 << 4;
 	/**
-	 * A flag which is set when a generator components returns, i.e. the done
-	 * property on the iteration is set to true. Generator components will stick to
-	 * their last rendered value and ignore further updates.
+	 * 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 IsDone = 1 << 4;
+	const PropsAvailable = 1 << 5;
 	/**
-	 * A flag which is set when a generator component errors.
+	 * A flag which is set when a component errors.
 	 *
 	 * NOTE: This is mainly used to prevent some false positives in component
 	 * yields or returns undefined warnings. The reason we’re using this versus
@@ -759,28 +807,28 @@
 	 * sync generator child) where synchronous code causes a stack overflow error
 	 * in a non-deterministic way. Deeply disturbing stuff.
 	 */
-	const IsErrored = 1 << 5;
+	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 << 6;
+	const IsUnmounted = 1 << 7;
 	/**
 	 * A flag which indicates that the component is a sync generator component.
 	 */
-	const IsSyncGen = 1 << 7;
+	const IsSyncGen = 1 << 8;
 	/**
 	 * A flag which indicates that the component is an async generator component.
 	 */
-	const IsAsyncGen = 1 << 8;
+	const IsAsyncGen = 1 << 9;
 	/**
 	 * A flag which is set while schedule callbacks are called.
 	 */
-	const IsScheduling = 1 << 9;
+	const IsScheduling = 1 << 10;
 	/**
 	 * A flag which is set when a schedule callback calls refresh.
 	 */
-	const IsSchedulingRefresh = 1 << 10;
+	const IsSchedulingRefresh = 1 << 11;
 	const provisionMaps = new WeakMap();
 	const scheduleMap = new WeakMap();
 	const cleanupMap = new WeakMap();
@@ -788,12 +836,12 @@
 	const flushMaps = new WeakMap();
 	/**
 	 * @internal
-	 * The internal class which holds all context data.
+	 * The internal class which holds context data.
 	 */
 	class ContextImpl {
 	    constructor(renderer, root, host, parent, scope, ret) {
 	        this.f = 0;
-	        this.ctx = new Context(this);
+	        this.owner = new Context(this);
 	        this.renderer = renderer;
 	        this.root = root;
 	        this.host = host;
@@ -805,10 +853,11 @@
 	        this.inflightValue = undefined;
 	        this.enqueuedBlock = undefined;
 	        this.enqueuedValue = undefined;
-	        this.onAvailable = undefined;
+	        this.onProps = undefined;
+	        this.onPropsRequested = undefined;
 	    }
 	}
-	const $ContextImpl = Symbol.for("crank.ContextImpl");
+	const _ContextImpl = Symbol.for("crank.ContextImpl");
 	/**
 	 * 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
@@ -822,8 +871,10 @@
 	 * schedule and cleanup callbacks.
 	 */
 	class Context {
+	    // TODO: If we could make the constructor function take a nicer value, it
+	    // would be useful for testing purposes.
 	    constructor(impl) {
-	        this[$ContextImpl] = impl;
+	        this[_ContextImpl] = impl;
 	    }
 	    /**
 	     * The current props of the associated element.
@@ -833,7 +884,7 @@
 	     * plugins or utilities which wrap contexts.
 	     */
 	    get props() {
-	        return this[$ContextImpl].ret.el.props;
+	        return this[_ContextImpl].ret.el.props;
 	    }
 	    // TODO: Should we rename this???
 	    /**
@@ -844,45 +895,64 @@
 	     * mainly for plugins or utilities which wrap contexts.
 	     */
 	    get value() {
-	        return this[$ContextImpl].renderer.read(getValue(this[$ContextImpl].ret));
+	        return this[_ContextImpl].renderer.read(getValue(this[_ContextImpl].ret));
 	    }
 	    *[Symbol.iterator]() {
-	        const impl = this[$ContextImpl];
-	        while (!(impl.f & IsDone)) {
-	            if (impl.f & IsIterating) {
-	                throw new Error("Context iterated twice without a yield");
-	            }
-	            else if (impl.f & IsAsyncGen) {
-	                throw new Error("Use for await…of in async generator components");
+	        const ctx = this[_ContextImpl];
+	        try {
+	            ctx.f |= IsInForOfLoop;
+	            while (!(ctx.f & IsUnmounted)) {
+	                if (ctx.f & NeedsToYield) {
+	                    throw new Error("Context iterated twice without a yield");
+	                }
+	                else {
+	                    ctx.f |= NeedsToYield;
+	                }
+	                yield ctx.ret.el.props;
 	            }
-	            impl.f |= IsIterating;
-	            yield impl.ret.el.props;
+	        }
+	        finally {
+	            ctx.f &= ~IsInForOfLoop;
 	        }
 	    }
 	    async *[Symbol.asyncIterator]() {
-	        // We use a do while loop rather than a while loop to handle an edge case
-	        // where an async generator component is unmounted synchronously and
-	        // therefore “done” before it starts iterating over the context.
-	        const impl = this[$ContextImpl];
-	        do {
-	            if (impl.f & IsIterating) {
-	                throw new Error("Context iterated twice without a yield");
-	            }
-	            else if (impl.f & IsSyncGen) {
-	                throw new Error("Use for…of in sync generator components");
-	            }
-	            impl.f |= IsIterating;
-	            if (impl.f & IsAvailable) {
-	                impl.f &= ~IsAvailable;
-	            }
-	            else {
-	                await new Promise((resolve) => (impl.onAvailable = resolve));
-	                if (impl.f & IsDone) {
-	                    break;
+	        const ctx = this[_ContextImpl];
+	        if (ctx.f & IsSyncGen) {
+	            throw new Error("Use for...of in sync generator components");
+	        }
+	        try {
+	            ctx.f |= IsInForAwaitOfLoop;
+	            while (!(ctx.f & IsUnmounted)) {
+	                if (ctx.f & NeedsToYield) {
+	                    throw new Error("Context iterated twice without a yield");
+	                }
+	                else {
+	                    ctx.f |= NeedsToYield;
+	                }
+	                if (ctx.f & PropsAvailable) {
+	                    ctx.f &= ~PropsAvailable;
+	                    yield ctx.ret.el.props;
+	                }
+	                else {
+	                    const props = await new Promise((resolve) => (ctx.onProps = resolve));
+	                    if (ctx.f & IsUnmounted) {
+	                        break;
+	                    }
+	                    yield props;
+	                }
+	                if (ctx.onPropsRequested) {
+	                    ctx.onPropsRequested();
+	                    ctx.onPropsRequested = undefined;
 	                }
 	            }
-	            yield impl.ret.el.props;
-	        } while (!(impl.f & IsDone));
+	        }
+	        finally {
+	            ctx.f &= ~IsInForAwaitOfLoop;
+	            if (ctx.onPropsRequested) {
+	                ctx.onPropsRequested();
+	                ctx.onPropsRequested = undefined;
+	            }
+	        }
 	    }
 	    /**
 	     * Re-executes a component.
@@ -897,32 +967,31 @@
 	     * async iterator to suspend.
 	     */
 	    refresh() {
-	        const impl = this[$ContextImpl];
-	        if (impl.f & IsUnmounted) {
+	        const ctx = this[_ContextImpl];
+	        if (ctx.f & IsUnmounted) {
 	            console.error("Component is unmounted");
-	            return impl.renderer.read(undefined);
+	            return ctx.renderer.read(undefined);
 	        }
-	        else if (impl.f & IsExecuting) {
+	        else if (ctx.f & IsSyncExecuting) {
 	            console.error("Component is already executing");
 	            return this.value;
 	        }
-	        resumeCtxIterator(impl);
-	        const value = runComponent(impl);
+	        const value = enqueueComponentRun(ctx);
 	        if (isPromiseLike(value)) {
-	            return value.then((value) => impl.renderer.read(value));
+	            return value.then((value) => ctx.renderer.read(value));
 	        }
-	        return impl.renderer.read(value);
+	        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 impl = this[$ContextImpl];
-	        let callbacks = scheduleMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let callbacks = scheduleMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            scheduleMap.set(impl, callbacks);
+	            scheduleMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
@@ -931,19 +1000,19 @@
 	     * rendered into the root. Will only fire once per callback and render.
 	     */
 	    flush(callback) {
-	        const impl = this[$ContextImpl];
-	        if (typeof impl.root !== "object" || impl.root === null) {
+	        const ctx = this[_ContextImpl];
+	        if (typeof ctx.root !== "object" || ctx.root === null) {
 	            return;
 	        }
-	        let flushMap = flushMaps.get(impl.root);
+	        let flushMap = flushMaps.get(ctx.root);
 	        if (!flushMap) {
 	            flushMap = new Map();
-	            flushMaps.set(impl.root, flushMap);
+	            flushMaps.set(ctx.root, flushMap);
 	        }
-	        let callbacks = flushMap.get(impl);
+	        let callbacks = flushMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            flushMap.set(impl, callbacks);
+	            flushMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
@@ -952,45 +1021,45 @@
 	     * fire once per callback.
 	     */
 	    cleanup(callback) {
-	        const impl = this[$ContextImpl];
-	        let callbacks = cleanupMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let callbacks = cleanupMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            cleanupMap.set(impl, callbacks);
+	            cleanupMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
 	    consume(key) {
-	        for (let parent = this[$ContextImpl].parent; parent !== undefined; parent = parent.parent) {
-	            const provisions = provisionMaps.get(parent);
+	        for (let ctx = this[_ContextImpl].parent; ctx !== undefined; ctx = ctx.parent) {
+	            const provisions = provisionMaps.get(ctx);
 	            if (provisions && provisions.has(key)) {
 	                return provisions.get(key);
 	            }
 	        }
 	    }
 	    provide(key, value) {
-	        const impl = this[$ContextImpl];
-	        let provisions = provisionMaps.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let provisions = provisionMaps.get(ctx);
 	        if (!provisions) {
 	            provisions = new Map();
-	            provisionMaps.set(impl, provisions);
+	            provisionMaps.set(ctx, provisions);
 	        }
 	        provisions.set(key, value);
 	    }
 	    addEventListener(type, listener, options) {
-	        const impl = this[$ContextImpl];
+	        const ctx = this[_ContextImpl];
 	        let listeners;
 	        if (!isListenerOrListenerObject(listener)) {
 	            return;
 	        }
 	        else {
-	            const listeners1 = listenersMap.get(impl);
+	            const listeners1 = listenersMap.get(ctx);
 	            if (listeners1) {
 	                listeners = listeners1;
 	            }
 	            else {
 	                listeners = [];
-	                listenersMap.set(impl, listeners);
+	                listenersMap.set(ctx, listeners);
 	            }
 	        }
 	        options = normalizeListenerOptions(options);
@@ -1001,7 +1070,7 @@
 	        else {
 	            callback = listener;
 	        }
-	        const record = { type, callback, listener, options };
+	        const record = { type, listener, callback, options };
 	        if (options.once) {
 	            record.callback = function () {
 	                const i = listeners.indexOf(record);
@@ -1018,15 +1087,15 @@
 	        }
 	        listeners.push(record);
 	        // TODO: is it possible to separate out the EventTarget delegation logic
-	        for (const value of getChildValues(impl.ret)) {
+	        for (const value of getChildValues(ctx.ret)) {
 	            if (isEventTarget(value)) {
 	                value.addEventListener(record.type, record.callback, record.options);
 	            }
 	        }
 	    }
 	    removeEventListener(type, listener, options) {
-	        const impl = this[$ContextImpl];
-	        const listeners = listenersMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        const listeners = listenersMap.get(ctx);
 	        if (listeners == null || !isListenerOrListenerObject(listener)) {
 	            return;
 	        }
@@ -1040,16 +1109,16 @@
 	        const record = listeners[i];
 	        listeners.splice(i, 1);
 	        // TODO: is it possible to separate out the EventTarget delegation logic
-	        for (const value of getChildValues(impl.ret)) {
+	        for (const value of getChildValues(ctx.ret)) {
 	            if (isEventTarget(value)) {
 	                value.removeEventListener(record.type, record.callback, record.options);
 	            }
 	        }
 	    }
 	    dispatchEvent(ev) {
-	        const impl = this[$ContextImpl];
+	        const ctx = this[_ContextImpl];
 	        const path = [];
-	        for (let parent = impl.parent; parent !== undefined; parent = parent.parent) {
+	        for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
 	            path.push(parent);
 	        }
 	        // We patch the stopImmediatePropagation method because ev.cancelBubble
@@ -1061,7 +1130,7 @@
 	            immediateCancelBubble = true;
 	            return stopImmediatePropagation.call(ev);
 	        });
-	        setEventProperty(ev, "target", impl.ctx);
+	        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
@@ -1070,18 +1139,21 @@
 	        // 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.
-	        //
-	        // TODO: Run all callbacks even if one of them errors
 	        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.ctx);
+	                    setEventProperty(ev, "currentTarget", target.owner);
 	                    for (const record of listeners) {
 	                        if (record.type === ev.type && record.options.capture) {
-	                            record.callback.call(target.ctx, ev);
+	                            try {
+	                                record.callback.call(target.owner, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
 	                            if (immediateCancelBubble) {
 	                                return true;
 	                            }
@@ -1093,13 +1165,25 @@
 	                }
 	            }
 	            {
-	                const listeners = listenersMap.get(impl);
+	                setEventProperty(ev, "eventPhase", AT_TARGET);
+	                setEventProperty(ev, "currentTarget", ctx.owner);
+	                const propCallback = ctx.ret.el.props["on" + ev.type];
+	                if (propCallback != null) {
+	                    propCallback(ev);
+	                    if (immediateCancelBubble || ev.cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	                const listeners = listenersMap.get(ctx);
 	                if (listeners) {
-	                    setEventProperty(ev, "eventPhase", AT_TARGET);
-	                    setEventProperty(ev, "currentTarget", impl.ctx);
 	                    for (const record of listeners) {
 	                        if (record.type === ev.type) {
-	                            record.callback.call(impl.ctx, ev);
+	                            try {
+	                                record.callback.call(ctx.owner, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
 	                            if (immediateCancelBubble) {
 	                                return true;
 	                            }
@@ -1116,10 +1200,15 @@
 	                    const target = path[i];
 	                    const listeners = listenersMap.get(target);
 	                    if (listeners) {
-	                        setEventProperty(ev, "currentTarget", target.ctx);
+	                        setEventProperty(ev, "currentTarget", target.owner);
 	                        for (const record of listeners) {
 	                            if (record.type === ev.type && !record.options.capture) {
-	                                record.callback.call(target.ctx, ev);
+	                                try {
+	                                    record.callback.call(target.owner, ev);
+	                                }
+	                                catch (err) {
+	                                    console.error(err);
+	                                }
 	                                if (immediateCancelBubble) {
 	                                    return true;
 	                                }
@@ -1132,10 +1221,6 @@
 	                }
 	            }
 	        }
-	        catch (err) {
-	            // TODO: Use setTimeout to rethrow the error.
-	            console.error(err);
-	        }
 	        finally {
 	            setEventProperty(ev, "eventPhase", NONE);
 	            setEventProperty(ev, "currentTarget", null);
@@ -1153,42 +1238,47 @@
 	    }
 	    return false;
 	}
-	function updateComponent(renderer, root, host, parent, scope, ret, oldProps) {
+	function updateComponent(renderer, root, host, parent, scope, ret, oldProps, hydrationData) {
 	    let ctx;
 	    if (oldProps) {
 	        ctx = ret.ctx;
-	        if (ctx.f & IsExecuting) {
+	        if (ctx.f & IsSyncExecuting) {
 	            console.error("Component is already executing");
-	            return ret.cached;
+	            return ret.cachedChildValues;
 	        }
 	    }
 	    else {
 	        ctx = ret.ctx = new ContextImpl(renderer, root, host, parent, scope, ret);
 	    }
 	    ctx.f |= IsUpdating;
-	    resumeCtxIterator(ctx);
-	    return runComponent(ctx);
+	    return enqueueComponentRun(ctx, hydrationData);
 	}
-	function updateComponentChildren(ctx, children) {
-	    if (ctx.f & IsUnmounted || ctx.f & IsErrored) {
+	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.
 	        return;
 	    }
 	    else if (children === undefined) {
 	        console.error("A component has returned or yielded undefined. If this was intentional, return or yield null instead.");
 	    }
 	    let childValues;
-	    // 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 |= IsExecuting;
 	    try {
-	        childValues = diffChildren(ctx.renderer, ctx.root, ctx.host, ctx, ctx.scope, ctx.ret, narrow(children));
+	        // TODO: WAT
+	        // 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 &= ~IsExecuting;
+	        ctx.f &= ~IsSyncExecuting;
 	    }
 	    if (isPromiseLike(childValues)) {
-	        ctx.ret.inflight = childValues.then((childValues) => commitComponent(ctx, childValues));
-	        return ctx.ret.inflight;
+	        ctx.ret.inflightValue = childValues.then((childValues) => commitComponent(ctx, childValues));
+	        return ctx.ret.inflightValue;
 	    }
 	    return commitComponent(ctx, childValues);
 	}
@@ -1208,8 +1298,8 @@
 	            }
 	        }
 	    }
-	    const oldValues = wrap(ctx.ret.cached);
-	    let value = (ctx.ret.cached = unwrap(values));
+	    const oldValues = wrap(ctx.ret.cachedChildValues);
+	    let value = (ctx.ret.cachedChildValues = unwrap(values));
 	    if (ctx.f & IsScheduling) {
 	        ctx.f |= IsSchedulingRefresh;
 	    }
@@ -1217,7 +1307,7 @@
 	        // 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 (!valuesEqual(oldValues, values)) {
+	        if (!arrayEqual(oldValues, values)) {
 	            const records = getListenerRecords(ctx.parent, ctx.host);
 	            if (records.length) {
 	                for (let i = 0; i < values.length; i++) {
@@ -1232,7 +1322,7 @@
 	            }
 	            // rearranging the nearest ancestor host element
 	            const host = ctx.host;
-	            const oldHostValues = wrap(host.cached);
+	            const oldHostValues = wrap(host.cachedChildValues);
 	            invalidate(ctx, host);
 	            const hostValues = getChildValues(host);
 	            ctx.renderer.arrange(host.el.tag, host.value, host.el.props, hostValues, 
@@ -1261,50 +1351,79 @@
 	}
 	function invalidate(ctx, host) {
 	    for (let parent = ctx.parent; parent !== undefined && parent.host === host; parent = parent.parent) {
-	        parent.ret.cached = undefined;
+	        parent.ret.cachedChildValues = undefined;
 	    }
-	    host.cached = undefined;
+	    host.cachedChildValues = undefined;
 	}
-	function valuesEqual(values1, values2) {
-	    if (values1.length !== values2.length) {
+	function arrayEqual(arr1, arr2) {
+	    if (arr1.length !== arr2.length) {
 	        return false;
 	    }
-	    for (let i = 0; i < values1.length; i++) {
-	        const value1 = values1[i];
-	        const value2 = values2[i];
+	    for (let i = 0; i < arr1.length; i++) {
+	        const value1 = arr1[i];
+	        const value2 = arr2[i];
 	        if (value1 !== value2) {
 	            return false;
 	        }
 	    }
 	    return true;
 	}
-	/**
-	 * Enqueues and executes the component associated with the context.
-	 *
-	 * The functions stepComponent and runComponent work together
-	 * to implement the async queueing behavior of components. The runComponent
-	 * function calls the stepComponent function, which returns two results in a
-	 * tuple. The first result, called the “block,” is a possible promise which
-	 * represents the duration for which the component is blocked from accepting
-	 * new updates. The second result, called the “value,” is the actual result of
-	 * the update. The runComponent function caches block/value from the
-	 * stepComponent function on the context, according to whether the component
-	 * blocks. The “inflight” block/value properties are the currently executing
-	 * update, and the “enqueued” block/value properties represent an enqueued next
-	 * stepComponent. Enqueued steps are dequeued every time the current block
-	 * promise settles.
-	 */
-	function runComponent(ctx) {
-	    if (!ctx.inflightBlock) {
+	/** 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;
+	        resumePropsIterator(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] = stepComponent(ctx);
+	            const [block, value] = runComponent(ctx, hydrationData);
 	            if (block) {
 	                ctx.inflightBlock = block
-	                    .catch((err) => {
-	                    if (!(ctx.f & IsUpdating)) {
-	                        return propagateError(ctx.parent, err);
-	                    }
-	                })
+	                    // 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;
@@ -1318,38 +1437,46 @@
 	            throw err;
 	        }
 	    }
-	    else if (ctx.f & IsAsyncGen) {
-	        return ctx.inflightValue;
-	    }
 	    else if (!ctx.enqueuedBlock) {
-	        let resolve;
-	        ctx.enqueuedBlock = ctx.inflightBlock
-	            .then(() => {
+	        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] = stepComponent(ctx);
-	                resolve(value);
+	                const [block, value] = runComponent(ctx);
 	                if (block) {
-	                    return block.catch((err) => {
-	                        if (!(ctx.f & IsUpdating)) {
-	                            return propagateError(ctx.parent, err);
-	                        }
-	                    });
+	                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
 	                }
+	                return value;
 	            }
 	            catch (err) {
 	                if (!(ctx.f & IsUpdating)) {
 	                    return propagateError(ctx.parent, err);
 	                }
+	                throw err;
 	            }
-	        })
-	            .finally(() => advanceComponent(ctx));
-	        ctx.enqueuedValue = new Promise((resolve1) => (resolve = resolve1));
+	        });
 	    }
 	    return ctx.enqueuedValue;
 	}
+	/** 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;
+	}
 	/**
 	 * This function is responsible for executing the component and handling all
-	 * the different component types.
+	 * the different component types. We cannot identify whether a component is a
+	 * generator or async without calling it and inspecting the return value.
 	 *
 	 * @returns {[block, value]} A tuple where
 	 * block - A possible promise which represents the duration during which the
@@ -1364,25 +1491,23 @@
 	 * - Sync generator components block while any children are executing, because
 	 * they are expected to only resume when they’ve actually rendered.
 	 */
-	function stepComponent(ctx) {
+	function runComponent(ctx, hydrationData) {
 	    const ret = ctx.ret;
-	    if (ctx.f & IsDone) {
-	        return [undefined, getValue(ret)];
-	    }
 	    const initial = !ctx.iterator;
 	    if (initial) {
-	        ctx.f |= IsExecuting;
+	        resumePropsIterator(ctx);
+	        ctx.f |= IsSyncExecuting;
 	        clearEventListeners(ctx);
 	        let result;
 	        try {
-	            result = ret.el.tag.call(ctx.ctx, ret.el.props);
+	            result = ret.el.tag.call(ctx.owner, ret.el.props);
 	        }
 	        catch (err) {
 	            ctx.f |= IsErrored;
 	            throw err;
 	        }
 	        finally {
-	            ctx.f &= ~IsExecuting;
+	            ctx.f &= ~IsSyncExecuting;
 	        }
 	        if (isIteratorLike(result)) {
 	            ctx.iterator = result;
@@ -1390,124 +1515,241 @@
 	        else if (isPromiseLike(result)) {
 	            // async function component
 	            const result1 = result instanceof Promise ? result : Promise.resolve(result);
-	            const value = result1.then((result) => updateComponentChildren(ctx, result), (err) => {
+	            const value = result1.then((result) => updateComponentChildren(ctx, result, hydrationData), (err) => {
 	                ctx.f |= IsErrored;
 	                throw err;
 	            });
-	            return [result1, value];
+	            return [result1.catch(NOOP), value];
 	        }
 	        else {
 	            // sync function component
-	            return [undefined, updateComponentChildren(ctx, result)];
+	            return [
+	                undefined,
+	                updateComponentChildren(ctx, result, hydrationData),
+	            ];
 	        }
 	    }
-	    let oldValue;
-	    if (initial) {
-	        // The argument passed to the first call to next is ignored.
-	        oldValue = undefined;
-	    }
-	    else if (ctx.ret.inflight) {
-	        // 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.
-	        oldValue = ctx.ret.inflight.then((value) => ctx.renderer.read(value), () => ctx.renderer.read(undefined));
-	    }
-	    else {
-	        oldValue = ctx.renderer.read(getValue(ret));
+	    else if (hydrationData !== undefined) {
+	        throw new Error("Hydration error");
 	    }
 	    let iteration;
-	    ctx.f |= IsExecuting;
-	    try {
-	        iteration = ctx.iterator.next(oldValue);
-	    }
-	    catch (err) {
-	        ctx.f |= IsDone | IsErrored;
-	        throw err;
+	    if (initial) {
+	        try {
+	            ctx.f |= IsSyncExecuting;
+	            iteration = ctx.iterator.next();
+	        }
+	        catch (err) {
+	            ctx.f |= IsErrored;
+	            throw err;
+	        }
+	        finally {
+	            ctx.f &= ~IsSyncExecuting;
+	        }
+	        if (isPromiseLike(iteration)) {
+	            ctx.f |= IsAsyncGen;
+	        }
+	        else {
+	            ctx.f |= IsSyncGen;
+	        }
 	    }
-	    finally {
-	        ctx.f &= ~IsExecuting;
+	    if (ctx.f & IsSyncGen) {
+	        ctx.f &= ~NeedsToYield;
+	        // sync generator component
+	        if (!initial) {
+	            try {
+	                ctx.f |= IsSyncExecuting;
+	                iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+	            }
+	            catch (err) {
+	                ctx.f |= IsErrored;
+	                throw err;
+	            }
+	            finally {
+	                ctx.f &= ~IsSyncExecuting;
+	            }
+	        }
+	        if (isPromiseLike(iteration)) {
+	            throw new Error("Mixed generator component");
+	        }
+	        if (iteration.done) {
+	            ctx.f &= ~IsSyncGen;
+	            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];
 	    }
-	    if (isPromiseLike(iteration)) {
-	        // async generator component
-	        if (initial) {
-	            ctx.f |= IsAsyncGen;
+	    else if (ctx.f & IsInForOfLoop) {
+	        // TODO: does this need to be done async?
+	        ctx.f &= ~NeedsToYield;
+	        // we are in a for...of loop for async generator
+	        if (!initial) {
+	            try {
+	                ctx.f |= IsSyncExecuting;
+	                iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+	            }
+	            catch (err) {
+	                ctx.f |= IsErrored;
+	                throw err;
+	            }
+	            finally {
+	                ctx.f &= ~IsSyncExecuting;
+	            }
 	        }
+	        if (!isPromiseLike(iteration)) {
+	            throw new Error("Mixed generator component");
+	        }
+	        const block = iteration.catch(NOOP);
 	        const value = iteration.then((iteration) => {
-	            if (!(ctx.f & IsIterating)) {
-	                ctx.f &= ~IsAvailable;
-	            }
-	            ctx.f &= ~IsIterating;
-	            if (iteration.done) {
-	                ctx.f |= IsDone;
+	            let value;
+	            if (!(ctx.f & IsInForOfLoop)) {
+	                runAsyncGenComponent(ctx, Promise.resolve(iteration), hydrationData);
 	            }
 	            try {
-	                const value = updateComponentChildren(ctx, iteration.value);
+	                value = updateComponentChildren(ctx, 
+	                // Children can be void so we eliminate that here
+	                iteration.value, hydrationData);
 	                if (isPromiseLike(value)) {
-	                    return value.catch((err) => handleChildError(ctx, err));
+	                    value = value.catch((err) => handleChildError(ctx, err));
 	                }
-	                return value;
 	            }
 	            catch (err) {
-	                return handleChildError(ctx, err);
+	                value = handleChildError(ctx, err);
 	            }
+	            return value;
 	        }, (err) => {
-	            ctx.f |= IsDone | IsErrored;
+	            ctx.f |= IsErrored;
 	            throw err;
 	        });
-	        return [iteration, value];
+	        return [block, value];
 	    }
-	    // sync generator component
-	    if (initial) {
-	        ctx.f |= IsSyncGen;
-	    }
-	    ctx.f &= ~IsIterating;
-	    if (iteration.done) {
-	        ctx.f |= IsDone;
+	    else {
+	        runAsyncGenComponent(ctx, iteration, hydrationData);
+	        // async generator component
+	        return [ctx.inflightBlock, ctx.inflightValue];
 	    }
-	    let value;
+	}
+	async function runAsyncGenComponent(ctx, iterationP, hydrationData) {
+	    let done = false;
 	    try {
-	        value = updateComponentChildren(ctx, iteration.value);
-	        if (isPromiseLike(value)) {
-	            value = value.catch((err) => handleChildError(ctx, err));
+	        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);
+	            }
+	            let iteration;
+	            try {
+	                iteration = await iterationP;
+	            }
+	            catch (err) {
+	                done = true;
+	                ctx.f |= IsErrored;
+	                onValue(Promise.reject(err));
+	                break;
+	            }
+	            finally {
+	                ctx.f &= ~NeedsToYield;
+	                if (!(ctx.f & IsInForAwaitOfLoop)) {
+	                    ctx.f &= ~PropsAvailable;
+	                }
+	            }
+	            done = !!iteration.done;
+	            let value;
+	            try {
+	                value = updateComponentChildren(ctx, iteration.value, hydrationData);
+	                hydrationData = undefined;
+	                if (isPromiseLike(value)) {
+	                    value = value.catch((err) => handleChildError(ctx, err));
+	                }
+	            }
+	            catch (err) {
+	                // Do we need to catch potential errors here in the case of unhandled
+	                // promise rejections?
+	                value = handleChildError(ctx, err);
+	            }
+	            finally {
+	                onValue(value);
+	            }
+	            // TODO: this can be done more elegantly
+	            let oldValue;
+	            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.
+	                oldValue = ctx.ret.inflightValue.then((value) => ctx.renderer.read(value), () => ctx.renderer.read(undefined));
+	            }
+	            else {
+	                oldValue = ctx.renderer.read(getValue(ctx.ret));
+	            }
+	            if (ctx.f & IsUnmounted) {
+	                if (ctx.f & IsInForAwaitOfLoop) {
+	                    try {
+	                        ctx.f |= IsSyncExecuting;
+	                        iterationP = ctx.iterator.next(oldValue);
+	                    }
+	                    finally {
+	                        ctx.f &= ~IsSyncExecuting;
+	                    }
+	                }
+	                else {
+	                    returnComponent(ctx);
+	                    break;
+	                }
+	            }
+	            else if (!done && !(ctx.f & IsInForOfLoop)) {
+	                try {
+	                    ctx.f |= IsSyncExecuting;
+	                    iterationP = ctx.iterator.next(oldValue);
+	                }
+	                finally {
+	                    ctx.f &= ~IsSyncExecuting;
+	                }
+	            }
 	        }
 	    }
-	    catch (err) {
-	        value = handleChildError(ctx, err);
-	    }
-	    if (isPromiseLike(value)) {
-	        return [value.catch(NOOP), value];
-	    }
-	    return [undefined, value];
-	}
-	/**
-	 * Called when the inflight block promise settles.
-	 */
-	function advanceComponent(ctx) {
-	    ctx.inflightBlock = ctx.enqueuedBlock;
-	    ctx.inflightValue = ctx.enqueuedValue;
-	    ctx.enqueuedBlock = undefined;
-	    ctx.enqueuedValue = undefined;
-	    if (ctx.f & IsAsyncGen && !(ctx.f & IsDone) && !(ctx.f & IsUnmounted)) {
-	        runComponent(ctx);
+	    finally {
+	        if (done) {
+	            ctx.f &= ~IsAsyncGen;
+	            ctx.iterator = undefined;
+	        }
 	    }
 	}
 	/**
-	 * Called to make props available to the props async iterator for async
-	 * generator components.
+	 * Called to resume the props async iterator for async generator components.
 	 */
-	function resumeCtxIterator(ctx) {
-	    if (ctx.onAvailable) {
-	        ctx.onAvailable();
-	        ctx.onAvailable = undefined;
+	function resumePropsIterator(ctx) {
+	    if (ctx.onProps) {
+	        ctx.onProps(ctx.ret.el.props);
+	        ctx.onProps = undefined;
+	        ctx.f &= ~PropsAvailable;
 	    }
 	    else {
-	        ctx.f |= IsAvailable;
+	        ctx.f |= PropsAvailable;
 	    }
 	}
 	// TODO: async unmounting
 	function unmountComponent(ctx) {
-	    ctx.f |= IsUnmounted;
 	    clearEventListeners(ctx);
 	    const callbacks = cleanupMap.get(ctx);
 	    if (callbacks) {
@@ -1517,23 +1759,71 @@
 	            callback(value);
 	        }
 	    }
-	    if (!(ctx.f & IsDone)) {
-	        ctx.f |= IsDone;
-	        resumeCtxIterator(ctx);
-	        if (ctx.iterator && typeof ctx.iterator.return === "function") {
-	            ctx.f |= IsExecuting;
-	            try {
-	                const iteration = ctx.iterator.return();
-	                if (isPromiseLike(iteration)) {
-	                    iteration.catch((err) => propagateError(ctx.parent, err));
+	    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) => {
+	                    propagateError(ctx.parent, err);
+	                });
+	            }
+	            else {
+	                if (ctx.f & IsInForOfLoop) {
+	                    unmountComponent(ctx);
+	                }
+	                else {
+	                    returnComponent(ctx);
 	                }
 	            }
-	            finally {
-	                ctx.f &= ~IsExecuting;
+	        }
+	        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) => {
+	                    propagateError(ctx.parent, err);
+	                });
+	            }
+	            else {
+	                // The logic for unmounting async generator components is in the
+	                // runAsyncGenComponent function.
+	                resumePropsIterator(ctx);
 	            }
 	        }
 	    }
 	}
+	function returnComponent(ctx) {
+	    resumePropsIterator(ctx);
+	    if (ctx.iterator && typeof ctx.iterator.return === "function") {
+	        try {
+	            ctx.f |= IsSyncExecuting;
+	            const iteration = ctx.iterator.return();
+	            if (isPromiseLike(iteration)) {
+	                iteration.catch((err) => propagateError(ctx.parent, err));
+	            }
+	        }
+	        finally {
+	            ctx.f &= ~IsSyncExecuting;
+	        }
+	    }
+	}
 	/*** EVENT TARGET UTILITIES ***/
 	// EVENT PHASE CONSTANTS
 	// https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
@@ -1602,39 +1892,39 @@
 	    }
 	}
 	/*** ERROR HANDLING UTILITIES ***/
-	// TODO: generator components which throw errors should be recoverable
 	function handleChildError(ctx, err) {
-	    if (ctx.f & IsDone ||
-	        !ctx.iterator ||
-	        typeof ctx.iterator.throw !== "function") {
+	    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
 	        throw err;
 	    }
-	    resumeCtxIterator(ctx);
+	    resumePropsIterator(ctx);
 	    let iteration;
 	    try {
-	        ctx.f |= IsExecuting;
+	        ctx.f |= IsSyncExecuting;
 	        iteration = ctx.iterator.throw(err);
 	    }
 	    catch (err) {
-	        ctx.f |= IsDone | IsErrored;
+	        ctx.f |= IsErrored;
 	        throw err;
 	    }
 	    finally {
-	        ctx.f &= ~IsExecuting;
+	        ctx.f &= ~IsSyncExecuting;
 	    }
 	    if (isPromiseLike(iteration)) {
 	        return iteration.then((iteration) => {
 	            if (iteration.done) {
-	                ctx.f |= IsDone;
+	                ctx.f &= ~IsAsyncGen;
+	                ctx.iterator = undefined;
 	            }
 	            return updateComponentChildren(ctx, iteration.value);
 	        }, (err) => {
-	            ctx.f |= IsDone | IsErrored;
+	            ctx.f |= IsErrored;
 	            throw err;
 	        });
 	    }
 	    if (iteration.done) {
-	        ctx.f |= IsDone;
+	        ctx.f &= ~IsSyncGen;
+	        ctx.f &= ~IsAsyncGen;
+	        ctx.iterator = undefined;
 	    }
 	    return updateComponentChildren(ctx, iteration.value);
 	}
@@ -1657,44 +1947,58 @@
 
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 	const impl$1 = {
-	    parse(text) {
-	        if (typeof document.createRange === "function") {
-	            const fragment = document.createRange().createContextualFragment(text);
-	            return Array.from(fragment.childNodes);
-	        }
-	        else {
-	            const childNodes = new DOMParser().parseFromString(text, "text/html").body
-	                .childNodes;
-	            return Array.from(childNodes);
-	        }
-	    },
-	    scope(scope, tag) {
+	    scope(xmlns, tag) {
 	        // TODO: Should we handle xmlns???
 	        switch (tag) {
 	            case Portal:
 	            case "foreignObject":
-	                return undefined;
+	                xmlns = undefined;
+	                break;
 	            case "svg":
-	                return SVG_NAMESPACE;
-	            default:
-	                return scope;
+	                xmlns = SVG_NAMESPACE;
+	                break;
 	        }
+	        return xmlns;
 	    },
-	    create(tag, _props, ns) {
+	    create(tag, _props, xmlns) {
 	        if (typeof tag !== "string") {
 	            throw new Error(`Unknown tag: ${tag.toString()}`);
 	        }
 	        else if (tag.toLowerCase() === "svg") {
-	            ns = SVG_NAMESPACE;
+	            xmlns = SVG_NAMESPACE;
+	        }
+	        return xmlns
+	            ? document.createElementNS(xmlns, tag)
+	            : document.createElement(tag);
+	    },
+	    hydrate(tag, node, props) {
+	        if (typeof tag !== "string" && tag !== Portal) {
+	            throw new Error(`Unknown tag: ${tag.toString()}`);
 	        }
-	        return ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+	        if (typeof tag === "string" &&
+	            tag.toUpperCase() !== node.tagName) {
+	            console.error(`Expected <${tag}> while hydrating but found:`, node);
+	            return undefined;
+	        }
+	        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);
+	            }
+	        }
+	        // TODO: extract props from nodes
+	        return { props, children };
 	    },
 	    patch(_tag, 
 	    // TODO: Why does this assignment work?
 	    node, name, 
 	    // TODO: Stricter typings?
-	    value, oldValue, scope) {
-	        const isSVG = scope === SVG_NAMESPACE;
+	    value, oldValue, xmlns) {
+	        const isSVG = xmlns === SVG_NAMESPACE;
 	        switch (name) {
 	            case "style": {
 	                const style = node.style;
@@ -1770,7 +2074,9 @@
 	                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
 	                    if (descriptor != null &&
 	                        (descriptor.writable === true || descriptor.set !== undefined)) {
-	                        node[name] = value;
+	                        if (node[name] !== value) {
+	                            node[name] = value;
+	                        }
 	                        return;
 	                    }
 	                    // if the property wasn't writable, fall through to the code below
@@ -1857,24 +2163,86 @@
 	            }
 	        }
 	    },
+	    text(text, _scope, hydrationData) {
+	        if (hydrationData != null) {
+	            let value = hydrationData.children.shift();
+	            if (typeof value !== "string" || !value.startsWith(text)) {
+	                console.error(`Expected "${text}" while hydrating but found:`, value);
+	            }
+	            else if (text.length < value.length) {
+	                value = value.slice(text.length);
+	                hydrationData.children.unshift(value);
+	            }
+	        }
+	        return text;
+	    },
+	    raw(value, xmlns, hydrationData) {
+	        let result;
+	        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);
+	            }
+	        }
+	        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();
+	                    }
+	                }
+	            }
+	            else if (result != null && typeof result !== "string") {
+	                if (result.nodeType === Node.ELEMENT_NODE ||
+	                    result.nodeType === Node.TEXT_NODE) {
+	                    hydrationData.children.shift();
+	                }
+	            }
+	        }
+	        return result;
+	    },
 	};
 	class DOMRenderer extends Renderer {
 	    constructor() {
 	        super(impl$1);
 	    }
 	    render(children, root, ctx) {
-	        if (root == null || typeof root.nodeType !== "number") {
-	            throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
-	        }
+	        validateRoot(root);
 	        return super.render(children, root, ctx);
 	    }
+	    hydrate(children, root, ctx) {
+	        validateRoot(root);
+	        return super.hydrate(children, root, ctx);
+	    }
+	}
+	function validateRoot(root) {
+	    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())}`);
+	    }
 	}
 	const renderer$1 = new DOMRenderer();
 
 	var dom = /*#__PURE__*/Object.freeze({
 		__proto__: null,
-		impl: impl$1,
 		DOMRenderer: DOMRenderer,
+		impl: impl$1,
 		renderer: renderer$1
 	});
 
@@ -1971,7 +2339,7 @@
 	    create() {
 	        return { value: "" };
 	    },
-	    escape(text) {
+	    text(text) {
 	        return escape(text);
 	    },
 	    read(value) {
@@ -2018,8 +2386,8 @@
 
 	var html = /*#__PURE__*/Object.freeze({
 		__proto__: null,
-		impl: impl,
 		HTMLRenderer: HTMLRenderer,
+		impl: impl,
 		renderer: renderer
 	});
 
@@ -2036,7 +2404,5 @@
 	exports.html = html;
 	exports.isElement = isElement;
 
-	Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=umd.js.map