@b9g/crank 0.5.0-debug.0 → 0.5.0

package/crank.js

@@ -22,7 +22,8 @@ function arrayify(value) {
             : 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";
@@ -71,8 +72,7 @@ const Copy = Symbol.for("crank.Copy");
 /**
  * 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");
@@ -158,22 +158,6 @@ function createElement(tag, props, ...children) {
     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. */
@@ -252,13 +236,13 @@ function normalize(values) {
 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;
     }
 }
 /**
@@ -267,10 +251,10 @@ class Retainer {
  * @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;
@@ -286,8 +270,8 @@ function getValue(ret) {
  * @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);
@@ -300,7 +284,7 @@ function getChildValues(ret) {
     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;
 }
@@ -308,16 +292,19 @@ const defaultRendererImpl = {
     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
@@ -331,7 +318,7 @@ const $RendererImpl = Symbol.for("crank.RendererImpl");
 class Renderer {
     constructor(impl) {
         this.cache = new WeakMap();
-        this[$RendererImpl] = {
+        this[_RendererImpl] = {
             ...defaultRendererImpl,
             ...impl,
         };
@@ -343,7 +330,7 @@ class Renderer {
      * 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.
@@ -353,7 +340,7 @@ class Renderer {
      */
     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);
         }
@@ -376,8 +363,32 @@ class Renderer {
                 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)) {
@@ -389,17 +400,17 @@ class Renderer {
 /*** 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);
@@ -408,14 +419,15 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
     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)) {
@@ -450,18 +462,19 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
         // 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") {
@@ -469,19 +482,28 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
                     }
                     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;
@@ -493,9 +515,14 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
                         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 {
@@ -504,7 +531,7 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
                 (graveyard = graveyard || []).push(ret);
             }
             if (typeof child === "string") {
-                value = ret = renderer.escape(child, scope);
+                value = ret = renderer.text(child, scope, hydrationData);
             }
             else {
                 ret = undefined;
@@ -537,27 +564,29 @@ function diffChildren(renderer, root, host, ctx, scope, parent, children) {
             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();
@@ -577,58 +606,69 @@ function getInflightValue(child) {
     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 = hydrationValue || ret.value;
     let props = ret.el.props;
     let copied;
     if (tag !== Portal) {
+        if (value == null) {
+            // This assumes that renderer.create does not return nullish values.
+            value = ret.value = renderer.create(tag, props, scope);
+        }
         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") {
@@ -643,8 +683,8 @@ function commitHost(renderer, scope, ret, childValues, oldProps) {
         }
         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;
@@ -691,7 +731,7 @@ function unmount(renderer, host, ctx, ret) {
     }
     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) {
@@ -715,38 +755,43 @@ function unmount(renderer, host, ctx, ret) {
 }
 /*** 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 IsAvailable = 1 << 3;
+const IsInForAwaitOfLoop = 1 << 3;
 /**
- * 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 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 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
@@ -754,28 +799,28 @@ const IsDone = 1 << 4;
  * 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();
@@ -783,12 +828,12 @@ const cleanupMap = new WeakMap();
 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;
@@ -800,10 +845,11 @@ class ContextImpl {
         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
@@ -817,8 +863,10 @@ const $ContextImpl = Symbol.for("crank.ContextImpl");
  * 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.
@@ -828,7 +876,7 @@ class Context {
      * 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???
     /**
@@ -839,45 +887,64 @@ class Context {
      * 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;
+                }
+            }
+        }
+        finally {
+            ctx.f &= ~IsInForAwaitOfLoop;
+            if (ctx.onPropsRequested) {
+                ctx.onPropsRequested();
+                ctx.onPropsRequested = undefined;
             }
-            yield impl.ret.el.props;
-        } while (!(impl.f & IsDone));
+        }
     }
     /**
      * Re-executes a component.
@@ -892,32 +959,31 @@ class Context {
      * 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);
     }
@@ -926,19 +992,19 @@ class Context {
      * 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);
     }
@@ -947,45 +1013,45 @@ class Context {
      * 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);
@@ -996,7 +1062,7 @@ class Context {
         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);
@@ -1013,15 +1079,15 @@ class Context {
         }
         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;
         }
@@ -1035,16 +1101,16 @@ class Context {
         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
@@ -1056,7 +1122,7 @@ class Context {
             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
@@ -1065,18 +1131,21 @@ class Context {
         // 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;
                             }
@@ -1088,13 +1157,25 @@ class Context {
                 }
             }
             {
-                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;
                             }
@@ -1111,10 +1192,15 @@ class Context {
                     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;
                                 }
@@ -1127,10 +1213,6 @@ class Context {
                 }
             }
         }
-        catch (err) {
-            // TODO: Use setTimeout to rethrow the error.
-            console.error(err);
-        }
         finally {
             setEventProperty(ev, "eventPhase", NONE);
             setEventProperty(ev, "currentTarget", null);
@@ -1148,42 +1230,47 @@ function ctxContains(parent, child) {
     }
     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);
 }
@@ -1203,8 +1290,8 @@ function commitComponent(ctx, values) {
             }
         }
     }
-    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;
     }
@@ -1212,7 +1299,7 @@ function commitComponent(ctx, values) {
         // 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++) {
@@ -1227,7 +1314,7 @@ function commitComponent(ctx, values) {
             }
             // 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, 
@@ -1256,50 +1343,79 @@ function commitComponent(ctx, values) {
 }
 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;
@@ -1313,38 +1429,46 @@ function runComponent(ctx) {
             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
@@ -1359,25 +1483,23 @@ function runComponent(ctx) {
  * - 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;
@@ -1385,124 +1507,241 @@ function stepComponent(ctx) {
         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];
-    }
-    // sync generator component
-    if (initial) {
-        ctx.f |= IsSyncGen;
+        return [block, value];
     }
-    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) {
@@ -1512,23 +1751,71 @@ function unmountComponent(ctx) {
             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
@@ -1597,39 +1884,39 @@ function clearEventListeners(ctx) {
     }
 }
 /*** 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);
 }