@b9g/crank 0.5.0-beta.5 → 0.5.0-beta.7

package/crank.cjs

@@ -2,20 +2,1960 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var core = require('./core.cjs');
-var tags = require('./tags.cjs');
+const NOOP = () => { };
+const IDENTITY = (value) => value;
+function wrap(value) {
+    return value === undefined ? [] : Array.isArray(value) ? value : [value];
+}
+function unwrap(arr) {
+    return arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;
+}
+/**
+ * Ensures a value is an array.
+ *
+ * This function does the same thing as wrap() above except it handles nulls
+ * and iterables, so it is appropriate for wrapping user-provided element
+ * children.
+ */
+function arrayify(value) {
+    return value == null
+        ? []
+        : Array.isArray(value)
+            ? value
+            : typeof value === "string" ||
+                typeof value[Symbol.iterator] !== "function"
+                ? [value]
+                : // TODO: inference broke in TypeScript 3.9.
+                    [...value];
+}
+function isIteratorLike(value) {
+    return value != null && typeof value.next === "function";
+}
+function isPromiseLike(value) {
+    return value != null && typeof value.then === "function";
+}
+/***
+ * SPECIAL TAGS
+ *
+ * Crank provides a couple tags which have special meaning for the renderer.
+ ***/
+/**
+ * A special tag for grouping multiple children within the same parent.
+ *
+ * All non-string iterables which appear in the element tree are implicitly
+ * wrapped in a fragment element.
+ *
+ * This tag is just the empty string, and you can use the empty string in
+ * createElement calls or transpiler options directly to avoid having to
+ * reference this export.
+ */
+const Fragment = "";
+// TODO: We assert the following symbol tags as any because TypeScript support
+// for symbol tags in JSX doesn’t exist yet.
+// https://github.com/microsoft/TypeScript/issues/38367
+/**
+ * A special tag for rendering into a new root node via a root prop.
+ *
+ * This tag is useful for creating element trees with multiple roots, for
+ * things like modals or tooltips.
+ *
+ * Renderer.prototype.render() will implicitly wrap top-level element trees in
+ * a Portal element.
+ */
+const Portal = Symbol.for("crank.Portal");
+/**
+ * A special tag which preserves whatever was previously rendered in the
+ * element’s position.
+ *
+ * Copy elements are useful for when you want to prevent a subtree from
+ * rerendering as a performance optimization. Copy elements can also be keyed,
+ * in which case the previously rendered keyed element will be copied.
+ */
+const Copy = Symbol.for("crank.Copy");
+/**
+ * A special tag for injecting raw nodes or strings via a value prop.
+ *
+ * Renderer.prototype.raw() is called with the value prop.
+ */
+const Raw = Symbol.for("crank.Raw");
+const ElementSymbol = Symbol.for("crank.Element");
+/**
+ * Elements are the basic building blocks of Crank applications. They are
+ * JavaScript objects which are interpreted by special classes called renderers
+ * to produce and manage stateful nodes.
+ *
+ * @template {Tag} [TTag=Tag] - The type of the tag of the element.
+ *
+ * @example
+ * // specific element types
+ * let div: Element<"div">;
+ * let portal: Element<Portal>;
+ * let myEl: Element<MyComponent>;
+ *
+ * // general element types
+ * let host: Element<string | symbol>;
+ * let component: Element<Component>;
+ *
+ * Typically, you use a helper function like createElement to create elements
+ * rather than instatiating this class directly.
+ */
+class Element {
+    constructor(tag, props, key, ref, static_) {
+        this.tag = tag;
+        this.props = props;
+        this.key = key;
+        this.ref = ref;
+        this.static_ = static_;
+    }
+}
+// See Element interface
+Element.prototype.$$typeof = ElementSymbol;
+function isElement(value) {
+    return value != null && value.$$typeof === ElementSymbol;
+}
+/**
+ * Creates an element with the specified tag, props and children.
+ *
+ * This function is usually used as a transpilation target for JSX transpilers,
+ * but it can also be called directly. It additionally extracts special props so
+ * they aren’t accessible to renderer methods or components, and assigns the
+ * children prop according to any additional arguments passed to the function.
+ */
+function createElement(tag, props, ...children) {
+    let key;
+    let ref;
+    let static_ = false;
+    const props1 = {};
+    if (props != null) {
+        for (const name in props) {
+            switch (name) {
+                case "crank-key":
+                case "c-key":
+                case "$key":
+                    // We have to make sure we don’t assign null to the key because we
+                    // don’t check for null keys in the diffing functions.
+                    if (props[name] != null) {
+                        key = props[name];
+                    }
+                    break;
+                case "crank-ref":
+                case "c-ref":
+                case "$ref":
+                    if (typeof props[name] === "function") {
+                        ref = props[name];
+                    }
+                    break;
+                case "crank-static":
+                case "c-static":
+                case "$static":
+                    static_ = !!props[name];
+                    break;
+                default:
+                    props1[name] = props[name];
+            }
+        }
+    }
+    if (children.length > 1) {
+        props1.children = children;
+    }
+    else if (children.length === 1) {
+        props1.children = children[0];
+    }
+    return new Element(tag, props1, key, ref, static_);
+}
+/** Clones a given element, shallowly copying the props object. */
+function cloneElement(el) {
+    if (!isElement(el)) {
+        throw new TypeError("Cannot clone non-element");
+    }
+    return new Element(el.tag, { ...el.props }, el.key, el.ref);
+}
+function narrow(value) {
+    if (typeof value === "boolean" || value == null) {
+        return undefined;
+    }
+    else if (typeof value === "string" || isElement(value)) {
+        return value;
+    }
+    else if (typeof value[Symbol.iterator] === "function") {
+        return createElement(Fragment, null, value);
+    }
+    return value.toString();
+}
+/**
+ * Takes an array of element values and normalizes the output as an array of
+ * nodes and strings.
+ *
+ * @returns Normalized array of nodes and/or strings.
+ *
+ * Normalize will flatten only one level of nested arrays, because it is
+ * designed to be called once at each level of the tree. It will also
+ * concatenate adjacent strings and remove all undefined values.
+ */
+function normalize(values) {
+    const result = [];
+    let buffer;
+    for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        if (!value) ;
+        else if (typeof value === "string") {
+            buffer = (buffer || "") + value;
+        }
+        else if (!Array.isArray(value)) {
+            if (buffer) {
+                result.push(buffer);
+                buffer = undefined;
+            }
+            result.push(value);
+        }
+        else {
+            // We could use recursion here but it’s just easier to do it inline.
+            for (let j = 0; j < value.length; j++) {
+                const value1 = value[j];
+                if (!value1) ;
+                else if (typeof value1 === "string") {
+                    buffer = (buffer || "") + value1;
+                }
+                else {
+                    if (buffer) {
+                        result.push(buffer);
+                        buffer = undefined;
+                    }
+                    result.push(value1);
+                }
+            }
+        }
+    }
+    if (buffer) {
+        result.push(buffer);
+    }
+    return result;
+}
+/**
+ * @internal
+ * The internal nodes which are cached and diffed against new elements when
+ * rendering element trees.
+ */
+class Retainer {
+    constructor(el) {
+        this.el = el;
+        this.ctx = undefined;
+        this.children = undefined;
+        this.value = undefined;
+        this.cachedChildValues = undefined;
+        this.fallbackValue = undefined;
+        this.inflightValue = undefined;
+        this.onNextValues = undefined;
+    }
+}
+/**
+ * Finds the value of the element according to its type.
+ *
+ * @returns The value of the element.
+ */
+function getValue(ret) {
+    if (typeof ret.fallbackValue !== "undefined") {
+        return typeof ret.fallbackValue === "object"
+            ? getValue(ret.fallbackValue)
+            : ret.fallbackValue;
+    }
+    else if (ret.el.tag === Portal) {
+        return;
+    }
+    else if (typeof ret.el.tag !== "function" && ret.el.tag !== Fragment) {
+        return ret.value;
+    }
+    return unwrap(getChildValues(ret));
+}
+/**
+ * Walks an element’s children to find its child values.
+ *
+ * @returns A normalized array of nodes and strings.
+ */
+function getChildValues(ret) {
+    if (ret.cachedChildValues) {
+        return wrap(ret.cachedChildValues);
+    }
+    const values = [];
+    const children = wrap(ret.children);
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child) {
+            values.push(typeof child === "string" ? child : getValue(child));
+        }
+    }
+    const values1 = normalize(values);
+    const tag = ret.el.tag;
+    if (typeof tag === "function" || (tag !== Fragment && tag !== Raw)) {
+        ret.cachedChildValues = unwrap(values1);
+    }
+    return values1;
+}
+const defaultRendererImpl = {
+    create() {
+        throw new Error("Not implemented");
+    },
+    hydrate() {
+        throw new Error("Not implemented");
+    },
+    scope: IDENTITY,
+    read: IDENTITY,
+    text: IDENTITY,
+    raw: IDENTITY,
+    patch: NOOP,
+    arrange: NOOP,
+    dispose: NOOP,
+    flush: NOOP,
+};
+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
+ * process and caching previous trees by root.
+ *
+ * @template TNode - The type of the node for a rendering environment.
+ * @template TScope - Data which is passed down the tree.
+ * @template TRoot - The type of the root for a rendering environment.
+ * @template TResult - The type of exposed values.
+ */
+class Renderer {
+    constructor(impl) {
+        this.cache = new WeakMap();
+        this[_RendererImpl] = {
+            ...defaultRendererImpl,
+            ...impl,
+        };
+    }
+    /**
+     * Renders an element tree into a specific root.
+     *
+     * @param children - An element tree. You can render null with a previously
+     * used root to delete the previously rendered element tree from the cache.
+     * @param root - The node to be rendered into. The renderer will cache
+     * element trees per root.
+     * @param bridge - An optional context that will be the ancestor context of all
+     * elements in the tree. Useful for connecting different renderers so that
+     * events/provisions properly propagate. The context for a given root must be
+     * the same or an error will be thrown.
+     *
+     * @returns The result of rendering the children, or a possible promise of
+     * the result if the element tree renders asynchronously.
+     */
+    render(children, root, bridge) {
+        let ret;
+        const ctx = bridge && bridge[_ContextImpl];
+        if (typeof root === "object" && root !== null) {
+            ret = this.cache.get(root);
+        }
+        let oldProps;
+        if (ret === undefined) {
+            ret = new Retainer(createElement(Portal, { children, root }));
+            ret.value = root;
+            ret.ctx = ctx;
+            if (typeof root === "object" && root !== null && children != null) {
+                this.cache.set(root, ret);
+            }
+        }
+        else if (ret.ctx !== ctx) {
+            throw new Error("Context mismatch");
+        }
+        else {
+            oldProps = ret.el.props;
+            ret.el = createElement(Portal, { children, root });
+            if (typeof root === "object" && root !== null && children == null) {
+                this.cache.delete(root);
+            }
+        }
+        const impl = this[_RendererImpl];
+        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children, undefined);
+        // We return the child values of the portal because portal elements
+        // themselves have no readable value.
+        if (isPromiseLike(childValues)) {
+            return childValues.then((childValues) => commitRootRender(impl, root, ctx, ret, childValues, oldProps));
+        }
+        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
+    }
+    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)) {
+            return childValues.then((childValues) => commitRootRender(impl, root, ctx, ret, childValues, oldProps));
+        }
+        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
+    }
+}
+/*** PRIVATE RENDERER FUNCTIONS ***/
+function commitRootRender(renderer, root, ctx, ret, childValues, oldProps) {
+    // element is a host or portal element
+    if (root != null) {
+        renderer.arrange(Portal, root, ret.el.props, childValues, oldProps, wrap(ret.cachedChildValues));
+        flush(renderer, root);
+    }
+    ret.cachedChildValues = unwrap(childValues);
+    if (root == null) {
+        unmount(renderer, ret, ctx, ret);
+    }
+    return renderer.read(ret.cachedChildValues);
+}
+function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrationData) {
+    const oldRetained = wrap(parent.children);
+    const newRetained = [];
+    const newChildren = arrayify(children);
+    const values = [];
+    let graveyard;
+    let childrenByKey;
+    let seenKeys;
+    let isAsync = false;
+    let hydrationBlock;
+    let oi = 0;
+    let oldLength = oldRetained.length;
+    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
+        // length checks to prevent index out of bounds deoptimizations.
+        let ret = oi >= oldLength ? undefined : oldRetained[oi];
+        let child = narrow(newChildren[ni]);
+        {
+            // 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)) {
+                console.error("Duplicate key", newKey);
+                newKey = undefined;
+            }
+            if (oldKey === newKey) {
+                if (childrenByKey !== undefined && newKey !== undefined) {
+                    childrenByKey.delete(newKey);
+                }
+                oi++;
+            }
+            else {
+                childrenByKey = childrenByKey || createChildrenByKey(oldRetained, oi);
+                if (newKey === undefined) {
+                    while (ret !== undefined && oldKey !== undefined) {
+                        oi++;
+                        ret = oldRetained[oi];
+                        oldKey = typeof ret === "object" ? ret.el.key : undefined;
+                    }
+                    oi++;
+                }
+                else {
+                    ret = childrenByKey.get(newKey);
+                    if (ret !== undefined) {
+                        childrenByKey.delete(newKey);
+                    }
+                    (seenKeys = seenKeys || new Set()).add(newKey);
+                }
+            }
+        }
+        // Updating
+        let value;
+        if (typeof child === "object") {
+            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") {
+                        (graveyard = graveyard || []).push(ret);
+                    }
+                    const fallback = ret;
+                    ret = new Retainer(child);
+                    ret.fallbackValue = fallback;
+                }
+                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 = 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 = hydrationBlock
+                        ? hydrationBlock.then(() => updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData))
+                        : updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData);
+                }
+                else {
+                    value = hydrationBlock
+                        ? hydrationBlock.then(() => updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData))
+                        : updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData);
+                }
+            }
+            const ref = child.ref;
+            if (isPromiseLike(value)) {
+                isAsync = true;
+                if (typeof ref === "function") {
+                    value = value.then((value) => {
+                        ref(renderer.read(value));
+                        return value;
+                    });
+                }
+                if (hydrationData !== undefined) {
+                    hydrationBlock = value;
+                }
+            }
+            else {
+                if (typeof ref === "function") {
+                    ref(renderer.read(value));
+                }
+            }
+        }
+        else {
+            // child is a string or undefined
+            if (typeof ret === "object") {
+                (graveyard = graveyard || []).push(ret);
+            }
+            if (typeof child === "string") {
+                value = ret = renderer.text(child, scope, hydrationData);
+            }
+            else {
+                ret = undefined;
+            }
+        }
+        values[ni] = value;
+        newRetained[ni] = ret;
+    }
+    // cleanup remaining retainers
+    for (; oi < oldLength; oi++) {
+        const ret = oldRetained[oi];
+        if (typeof ret === "object" && typeof ret.el.key === "undefined") {
+            (graveyard = graveyard || []).push(ret);
+        }
+    }
+    if (childrenByKey !== undefined && childrenByKey.size > 0) {
+        (graveyard = graveyard || []).push(...childrenByKey.values());
+    }
+    parent.children = unwrap(newRetained);
+    if (isAsync) {
+        let childValues1 = Promise.all(values).finally(() => {
+            if (graveyard) {
+                for (let i = 0; i < graveyard.length; i++) {
+                    unmount(renderer, host, ctx, graveyard[i]);
+                }
+            }
+        });
+        let onChildValues;
+        childValues1 = Promise.race([
+            childValues1,
+            new Promise((resolve) => (onChildValues = resolve)),
+        ]);
+        if (parent.onNextValues) {
+            parent.onNextValues(childValues1);
+        }
+        parent.onNextValues = onChildValues;
+        return childValues1.then((childValues) => {
+            parent.inflightValue = parent.fallbackValue = undefined;
+            return normalize(childValues);
+        });
+    }
+    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);
+    }
+}
+function createChildrenByKey(children, offset) {
+    const childrenByKey = new Map();
+    for (let i = offset; i < children.length; i++) {
+        const child = children[i];
+        if (typeof child === "object" && typeof child.el.key !== "undefined") {
+            childrenByKey.set(child.el.key, child);
+        }
+    }
+    return childrenByKey;
+}
+function getInflightValue(child) {
+    if (typeof child !== "object") {
+        return child;
+    }
+    const ctx = typeof child.el.tag === "function" ? child.ctx : undefined;
+    if (ctx && ctx.f & IsUpdating && ctx.inflightValue) {
+        return ctx.inflightValue;
+    }
+    else if (child.inflightValue) {
+        return child.inflightValue;
+    }
+    return getValue(child);
+}
+function updateRaw(renderer, ret, scope, oldProps, hydrationData) {
+    const props = ret.el.props;
+    if (!oldProps || oldProps.value !== props.value) {
+        ret.value = renderer.raw(props.value, scope, hydrationData);
+    }
+    return ret.value;
+}
+function updateFragment(renderer, root, host, ctx, scope, ret, hydrationData) {
+    const childValues = diffChildren(renderer, root, host, ctx, scope, ret, ret.el.props.children, hydrationData);
+    if (isPromiseLike(childValues)) {
+        ret.inflightValue = childValues.then((childValues) => unwrap(childValues));
+        return ret.inflightValue;
+    }
+    return unwrap(childValues);
+}
+function updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData) {
+    const el = ret.el;
+    const tag = el.tag;
+    let hydrationValue;
+    if (el.tag === Portal) {
+        root = ret.value = el.props.root;
+    }
+    else {
+        if (hydrationData !== undefined) {
+            const value = hydrationData.children.shift();
+            hydrationValue = value;
+        }
+    }
+    scope = renderer.scope(scope, tag, el.props);
+    let childHydrationData;
+    if (hydrationValue != null && typeof hydrationValue !== "string") {
+        childHydrationData = renderer.hydrate(tag, hydrationValue, el.props);
+        if (childHydrationData === undefined) {
+            hydrationValue = undefined;
+        }
+    }
+    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children, childHydrationData);
+    if (isPromiseLike(childValues)) {
+        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue));
+        return ret.inflightValue;
+    }
+    return commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue);
+}
+function commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue) {
+    const tag = ret.el.tag;
+    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") {
+                renderer.patch(tag, value, propName, propValue, oldProps && oldProps[propName], scope);
+            }
+        }
+    }
+    if (copied) {
+        props = { ...ret.el.props };
+        for (const name of copied) {
+            props[name] = oldProps && oldProps[name];
+        }
+        ret.el = new Element(tag, props, ret.el.key, ret.el.ref);
+    }
+    renderer.arrange(tag, value, props, childValues, oldProps, wrap(ret.cachedChildValues));
+    ret.cachedChildValues = unwrap(childValues);
+    if (tag === Portal) {
+        flush(renderer, ret.value);
+        return;
+    }
+    return value;
+}
+function flush(renderer, root, initiator) {
+    renderer.flush(root);
+    if (typeof root !== "object" || root === null) {
+        return;
+    }
+    const flushMap = flushMaps.get(root);
+    if (flushMap) {
+        if (initiator) {
+            const flushMap1 = new Map();
+            for (let [ctx, callbacks] of flushMap) {
+                if (!ctxContains(initiator, ctx)) {
+                    flushMap.delete(ctx);
+                    flushMap1.set(ctx, callbacks);
+                }
+            }
+            if (flushMap1.size) {
+                flushMaps.set(root, flushMap1);
+            }
+            else {
+                flushMaps.delete(root);
+            }
+        }
+        else {
+            flushMaps.delete(root);
+        }
+        for (const [ctx, callbacks] of flushMap) {
+            const value = renderer.read(getValue(ctx.ret));
+            for (const callback of callbacks) {
+                callback(value);
+            }
+        }
+    }
+}
+function unmount(renderer, host, ctx, ret) {
+    if (typeof ret.el.tag === "function") {
+        ctx = ret.ctx;
+        unmountComponent(ctx);
+    }
+    else if (ret.el.tag === Portal) {
+        host = ret;
+        renderer.arrange(Portal, host.value, host.el.props, [], host.el.props, wrap(host.cachedChildValues));
+        flush(renderer, host.value);
+    }
+    else if (ret.el.tag !== Fragment) {
+        if (isEventTarget(ret.value)) {
+            const records = getListenerRecords(ctx, host);
+            for (let i = 0; i < records.length; i++) {
+                const record = records[i];
+                ret.value.removeEventListener(record.type, record.callback, record.options);
+            }
+        }
+        renderer.dispose(ret.el.tag, ret.value, ret.el.props);
+        host = ret;
+    }
+    const children = wrap(ret.children);
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (typeof child === "object") {
+            unmount(renderer, host, ctx, child);
+        }
+    }
+}
+/*** CONTEXT FLAGS ***/
+/**
+ * A flag which is true when the component is initialized or updated by an
+ * ancestor component or the root render call.
+ *
+ * Used to determine things like whether the nearest host ancestor needs to be
+ * rearranged.
+ */
+const IsUpdating = 1 << 0;
+/**
+ * A flag which is true when the component is synchronously executing.
+ *
+ * Used to guard against components triggering stack overflow or generator error.
+ */
+const IsSyncExecuting = 1 << 1;
+/**
+ * A flag which is true when the component is in a for...of loop.
+ */
+const IsInForOfLoop = 1 << 2;
+/**
+ * A flag which is true when the component is in a for await...of loop.
+ */
+const IsInForAwaitOfLoop = 1 << 3;
+/**
+ * A flag which is true when the component starts the render loop but has not
+ * yielded yet.
+ *
+ * Used to make sure that components yield at least once per loop.
+ */
+const NeedsToYield = 1 << 4;
+/**
+ * A flag used by async generator components in conjunction with the
+ * onAvailable callback to mark whether new props can be pulled via the context
+ * async iterator. See the Symbol.asyncIterator method and the
+ * resumeCtxIterator function.
+ */
+const PropsAvailable = 1 << 5;
+/**
+ * A flag which is set when a component errors.
+ *
+ * NOTE: This is mainly used to prevent some false positives in component
+ * yields or returns undefined warnings. The reason we’re using this versus
+ * IsUnmounted is a very troubling test (cascades sync generator parent and
+ * sync generator child) where synchronous code causes a stack overflow error
+ * in a non-deterministic way. Deeply disturbing stuff.
+ */
+const IsErrored = 1 << 6;
+/**
+ * A flag which is set when the component is unmounted. Unmounted components
+ * are no longer in the element tree and cannot refresh or rerender.
+ */
+const IsUnmounted = 1 << 7;
+/**
+ * A flag which indicates that the component is a sync generator component.
+ */
+const IsSyncGen = 1 << 8;
+/**
+ * A flag which indicates that the component is an async generator component.
+ */
+const IsAsyncGen = 1 << 9;
+/**
+ * A flag which is set while schedule callbacks are called.
+ */
+const IsScheduling = 1 << 10;
+/**
+ * A flag which is set when a schedule callback calls refresh.
+ */
+const IsSchedulingRefresh = 1 << 11;
+const provisionMaps = new WeakMap();
+const scheduleMap = new WeakMap();
+const cleanupMap = new WeakMap();
+// keys are roots
+const flushMaps = new WeakMap();
+/**
+ * @internal
+ * The internal class which holds context data.
+ */
+class ContextImpl {
+    constructor(renderer, root, host, parent, scope, ret) {
+        this.f = 0;
+        this.owner = new Context(this);
+        this.renderer = renderer;
+        this.root = root;
+        this.host = host;
+        this.parent = parent;
+        this.scope = scope;
+        this.ret = ret;
+        this.iterator = undefined;
+        this.inflightBlock = undefined;
+        this.inflightValue = undefined;
+        this.enqueuedBlock = undefined;
+        this.enqueuedValue = undefined;
+        this.onProps = undefined;
+        this.onPropsRequested = undefined;
+    }
+}
+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
+ * element tree are connected via contexts. Components can use this tree to
+ * communicate data upwards via events and downwards via provisions.
+ *
+ * @template [TProps=*] - The expected shape of the props passed to the
+ * component. Used to strongly type the Context iterator methods.
+ * @template [TResult=*] - The readable element value type. It is used in
+ * places such as the return value of refresh and the argument passed to
+ * 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;
+    }
+    /**
+     * The current props of the associated element.
+     *
+     * Typically, you should read props either via the first parameter of the
+     * component or via the context iterator methods. This property is mainly for
+     * plugins or utilities which wrap contexts.
+     */
+    get props() {
+        return this[_ContextImpl].ret.el.props;
+    }
+    // TODO: Should we rename this???
+    /**
+     * The current value of the associated element.
+     *
+     * Typically, you should read values via refs, generator yield expressions,
+     * or the refresh, schedule, cleanup, or flush methods. This property is
+     * mainly for plugins or utilities which wrap contexts.
+     */
+    get value() {
+        return this[_ContextImpl].renderer.read(getValue(this[_ContextImpl].ret));
+    }
+    *[Symbol.iterator]() {
+        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;
+            }
+        }
+        finally {
+            ctx.f &= ~IsInForOfLoop;
+        }
+    }
+    async *[Symbol.asyncIterator]() {
+        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;
+            }
+        }
+    }
+    /**
+     * Re-executes a component.
+     *
+     * @returns The rendered value of the component or a promise thereof if the
+     * component or its children execute asynchronously.
+     *
+     * The refresh method works a little differently for async generator
+     * components, in that it will resume the Context’s props async iterator
+     * rather than resuming execution. This is because async generator components
+     * are perpetually resumed independent of updates, and rely on the props
+     * async iterator to suspend.
+     */
+    refresh() {
+        const ctx = this[_ContextImpl];
+        if (ctx.f & IsUnmounted) {
+            console.error("Component is unmounted");
+            return ctx.renderer.read(undefined);
+        }
+        else if (ctx.f & IsSyncExecuting) {
+            console.error("Component is already executing");
+            return this.value;
+        }
+        const value = enqueueComponentRun(ctx);
+        if (isPromiseLike(value)) {
+            return value.then((value) => ctx.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 ctx = this[_ContextImpl];
+        let callbacks = scheduleMap.get(ctx);
+        if (!callbacks) {
+            callbacks = new Set();
+            scheduleMap.set(ctx, callbacks);
+        }
+        callbacks.add(callback);
+    }
+    /**
+     * Registers a callback which fires when the component’s children are
+     * rendered into the root. Will only fire once per callback and render.
+     */
+    flush(callback) {
+        const ctx = this[_ContextImpl];
+        if (typeof ctx.root !== "object" || ctx.root === null) {
+            return;
+        }
+        let flushMap = flushMaps.get(ctx.root);
+        if (!flushMap) {
+            flushMap = new Map();
+            flushMaps.set(ctx.root, flushMap);
+        }
+        let callbacks = flushMap.get(ctx);
+        if (!callbacks) {
+            callbacks = new Set();
+            flushMap.set(ctx, callbacks);
+        }
+        callbacks.add(callback);
+    }
+    /**
+     * Registers a callback which fires when the component unmounts. Will only
+     * fire once per callback.
+     */
+    cleanup(callback) {
+        const ctx = this[_ContextImpl];
+        let callbacks = cleanupMap.get(ctx);
+        if (!callbacks) {
+            callbacks = new Set();
+            cleanupMap.set(ctx, callbacks);
+        }
+        callbacks.add(callback);
+    }
+    consume(key) {
+        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 ctx = this[_ContextImpl];
+        let provisions = provisionMaps.get(ctx);
+        if (!provisions) {
+            provisions = new Map();
+            provisionMaps.set(ctx, provisions);
+        }
+        provisions.set(key, value);
+    }
+    addEventListener(type, listener, options) {
+        const ctx = this[_ContextImpl];
+        let listeners;
+        if (!isListenerOrListenerObject(listener)) {
+            return;
+        }
+        else {
+            const listeners1 = listenersMap.get(ctx);
+            if (listeners1) {
+                listeners = listeners1;
+            }
+            else {
+                listeners = [];
+                listenersMap.set(ctx, listeners);
+            }
+        }
+        options = normalizeListenerOptions(options);
+        let callback;
+        if (typeof listener === "object") {
+            callback = () => listener.handleEvent.apply(listener, arguments);
+        }
+        else {
+            callback = listener;
+        }
+        const record = { type, listener, callback, options };
+        if (options.once) {
+            record.callback = function () {
+                const i = listeners.indexOf(record);
+                if (i !== -1) {
+                    listeners.splice(i, 1);
+                }
+                return callback.apply(this, arguments);
+            };
+        }
+        if (listeners.some((record1) => record.type === record1.type &&
+            record.listener === record1.listener &&
+            !record.options.capture === !record1.options.capture)) {
+            return;
+        }
+        listeners.push(record);
+        // TODO: is it possible to separate out the EventTarget delegation logic
+        for (const value of getChildValues(ctx.ret)) {
+            if (isEventTarget(value)) {
+                value.addEventListener(record.type, record.callback, record.options);
+            }
+        }
+    }
+    removeEventListener(type, listener, options) {
+        const ctx = this[_ContextImpl];
+        const listeners = listenersMap.get(ctx);
+        if (listeners == null || !isListenerOrListenerObject(listener)) {
+            return;
+        }
+        const options1 = normalizeListenerOptions(options);
+        const i = listeners.findIndex((record) => record.type === type &&
+            record.listener === listener &&
+            !record.options.capture === !options1.capture);
+        if (i === -1) {
+            return;
+        }
+        const record = listeners[i];
+        listeners.splice(i, 1);
+        // TODO: is it possible to separate out the EventTarget delegation logic
+        for (const value of getChildValues(ctx.ret)) {
+            if (isEventTarget(value)) {
+                value.removeEventListener(record.type, record.callback, record.options);
+            }
+        }
+    }
+    dispatchEvent(ev) {
+        const ctx = this[_ContextImpl];
+        const path = [];
+        for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
+            path.push(parent);
+        }
+        // We patch the stopImmediatePropagation method because ev.cancelBubble
+        // only informs us if stopPropagation was called and there are no
+        // properties which inform us if stopImmediatePropagation was called.
+        let immediateCancelBubble = false;
+        const stopImmediatePropagation = ev.stopImmediatePropagation;
+        setEventProperty(ev, "stopImmediatePropagation", () => {
+            immediateCancelBubble = true;
+            return stopImmediatePropagation.call(ev);
+        });
+        setEventProperty(ev, "target", ctx.owner);
+        // The only possible errors in this block are errors thrown by callbacks,
+        // and dispatchEvent will only log these errors rather than throwing
+        // them. Therefore, we place all code in a try block, log errors in the
+        // catch block, and use an unsafe return statement in the finally block.
+        //
+        // Each early return within the try block returns true because while the
+        // return value is overridden in the finally block, TypeScript
+        // (justifiably) does not recognize the unsafe return statement.
+        try {
+            setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
+            for (let i = path.length - 1; i >= 0; i--) {
+                const target = path[i];
+                const listeners = listenersMap.get(target);
+                if (listeners) {
+                    setEventProperty(ev, "currentTarget", target.owner);
+                    for (const record of listeners) {
+                        if (record.type === ev.type && record.options.capture) {
+                            try {
+                                record.callback.call(target.owner, ev);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                            if (immediateCancelBubble) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                if (ev.cancelBubble) {
+                    return true;
+                }
+            }
+            {
+                setEventProperty(ev, "eventPhase", AT_TARGET);
+                setEventProperty(ev, "currentTarget", ctx.owner);
+                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) {
+                    for (const record of listeners) {
+                        if (record.type === ev.type) {
+                            try {
+                                record.callback.call(ctx.owner, ev);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                            if (immediateCancelBubble) {
+                                return true;
+                            }
+                        }
+                    }
+                    if (ev.cancelBubble) {
+                        return true;
+                    }
+                }
+            }
+            if (ev.bubbles) {
+                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
+                for (let i = 0; i < path.length; i++) {
+                    const target = path[i];
+                    const listeners = listenersMap.get(target);
+                    if (listeners) {
+                        setEventProperty(ev, "currentTarget", target.owner);
+                        for (const record of listeners) {
+                            if (record.type === ev.type && !record.options.capture) {
+                                try {
+                                    record.callback.call(target.owner, ev);
+                                }
+                                catch (err) {
+                                    console.error(err);
+                                }
+                                if (immediateCancelBubble) {
+                                    return true;
+                                }
+                            }
+                        }
+                    }
+                    if (ev.cancelBubble) {
+                        return true;
+                    }
+                }
+            }
+        }
+        finally {
+            setEventProperty(ev, "eventPhase", NONE);
+            setEventProperty(ev, "currentTarget", null);
+            // eslint-disable-next-line no-unsafe-finally
+            return !ev.defaultPrevented;
+        }
+    }
+}
+/*** PRIVATE CONTEXT FUNCTIONS ***/
+function ctxContains(parent, child) {
+    for (let current = child; current !== undefined; current = current.parent) {
+        if (current === parent) {
+            return true;
+        }
+    }
+    return false;
+}
+function updateComponent(renderer, root, host, parent, scope, ret, oldProps, hydrationData) {
+    let ctx;
+    if (oldProps) {
+        // TODO: we should probably use the existence of ret.ctx
+        if (ret.ctx == null) {
+            throw new Error("Hmmm");
+        }
+        ctx = ret.ctx;
+        if (ctx.f & IsSyncExecuting) {
+            console.error("Component is already executing");
+            return ret.cachedChildValues;
+        }
+    }
+    else {
+        ctx = ret.ctx = new ContextImpl(renderer, root, host, parent, scope, ret);
+    }
+    ctx.f |= IsUpdating;
+    return enqueueComponentRun(ctx, hydrationData);
+}
+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;
+    try {
+        // 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 &= ~IsSyncExecuting;
+    }
+    if (isPromiseLike(childValues)) {
+        ctx.ret.inflightValue = childValues.then((childValues) => commitComponent(ctx, childValues));
+        return ctx.ret.inflightValue;
+    }
+    return commitComponent(ctx, childValues);
+}
+function commitComponent(ctx, values) {
+    if (ctx.f & IsUnmounted) {
+        return;
+    }
+    const listeners = listenersMap.get(ctx);
+    if (listeners && listeners.length) {
+        for (let i = 0; i < values.length; i++) {
+            const value = values[i];
+            if (isEventTarget(value)) {
+                for (let j = 0; j < listeners.length; j++) {
+                    const record = listeners[j];
+                    value.addEventListener(record.type, record.callback, record.options);
+                }
+            }
+        }
+    }
+    const oldValues = wrap(ctx.ret.cachedChildValues);
+    let value = (ctx.ret.cachedChildValues = unwrap(values));
+    if (ctx.f & IsScheduling) {
+        ctx.f |= IsSchedulingRefresh;
+    }
+    else if (!(ctx.f & IsUpdating)) {
+        // If we’re not updating the component, which happens when components are
+        // refreshed, or when async generator components iterate, we have to do a
+        // little bit housekeeping when a component’s child values have changed.
+        if (!arrayEqual(oldValues, values)) {
+            const records = getListenerRecords(ctx.parent, ctx.host);
+            if (records.length) {
+                for (let i = 0; i < values.length; i++) {
+                    const value = values[i];
+                    if (isEventTarget(value)) {
+                        for (let j = 0; j < records.length; j++) {
+                            const record = records[j];
+                            value.addEventListener(record.type, record.callback, record.options);
+                        }
+                    }
+                }
+            }
+            // rearranging the nearest ancestor host element
+            const host = ctx.host;
+            const oldHostValues = wrap(host.cachedChildValues);
+            invalidate(ctx, host);
+            const hostValues = getChildValues(host);
+            ctx.renderer.arrange(host.el.tag, host.value, host.el.props, hostValues, 
+            // props and oldProps are the same because the host isn’t updated.
+            host.el.props, oldHostValues);
+        }
+        flush(ctx.renderer, ctx.root, ctx);
+    }
+    const callbacks = scheduleMap.get(ctx);
+    if (callbacks) {
+        scheduleMap.delete(ctx);
+        ctx.f |= IsScheduling;
+        const value1 = ctx.renderer.read(value);
+        for (const callback of callbacks) {
+            callback(value1);
+        }
+        ctx.f &= ~IsScheduling;
+        // Handles an edge case where refresh() is called during a schedule().
+        if (ctx.f & IsSchedulingRefresh) {
+            ctx.f &= ~IsSchedulingRefresh;
+            value = getValue(ctx.ret);
+        }
+    }
+    ctx.f &= ~IsUpdating;
+    return value;
+}
+function invalidate(ctx, host) {
+    for (let parent = ctx.parent; parent !== undefined && parent.host === host; parent = parent.parent) {
+        parent.ret.cachedChildValues = undefined;
+    }
+    host.cachedChildValues = undefined;
+}
+function arrayEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    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. */
+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] = runComponent(ctx, hydrationData);
+            if (block) {
+                ctx.inflightBlock = block
+                    // TODO: there is some fuckery going on here related to async
+                    // generator components resuming when they’re meant to be returned.
+                    .then((v) => v)
+                    .finally(() => advanceComponent(ctx));
+                // stepComponent will only return a block if the value is asynchronous
+                ctx.inflightValue = value;
+            }
+            return value;
+        }
+        catch (err) {
+            if (!(ctx.f & IsUpdating)) {
+                return propagateError(ctx.parent, err);
+            }
+            throw err;
+        }
+    }
+    else if (!ctx.enqueuedBlock) {
+        if (hydrationData !== undefined) {
+            throw new Error("Hydration error");
+        }
+        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
+        // the Promise constructor call here.
+        let resolveEnqueuedBlock;
+        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
+        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
+            try {
+                const [block, value] = runComponent(ctx);
+                if (block) {
+                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
+                }
+                return value;
+            }
+            catch (err) {
+                if (!(ctx.f & IsUpdating)) {
+                    return propagateError(ctx.parent, err);
+                }
+                throw err;
+            }
+        });
+    }
+    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. 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
+ * component is blocked from updating.
+ * value - A possible promise resolving to the rendered value of children.
+ *
+ * Each component type will block according to the type of the component.
+ * - Sync function components never block and will transparently pass updates
+ * to children.
+ * - Async function components and async generator components block while
+ * executing itself, but will not block for async children.
+ * - Sync generator components block while any children are executing, because
+ * they are expected to only resume when they’ve actually rendered.
+ */
+function runComponent(ctx, hydrationData) {
+    const ret = ctx.ret;
+    const initial = !ctx.iterator;
+    if (initial) {
+        resumePropsIterator(ctx);
+        ctx.f |= IsSyncExecuting;
+        clearEventListeners(ctx);
+        let result;
+        try {
+            result = ret.el.tag.call(ctx.owner, ret.el.props);
+        }
+        catch (err) {
+            ctx.f |= IsErrored;
+            throw err;
+        }
+        finally {
+            ctx.f &= ~IsSyncExecuting;
+        }
+        if (isIteratorLike(result)) {
+            ctx.iterator = result;
+        }
+        else if (isPromiseLike(result)) {
+            // async function component
+            const result1 = result instanceof Promise ? result : Promise.resolve(result);
+            const value = result1.then((result) => updateComponentChildren(ctx, result, hydrationData), (err) => {
+                ctx.f |= IsErrored;
+                throw err;
+            });
+            return [result1.catch(NOOP), value];
+        }
+        else {
+            // sync function component
+            return [
+                undefined,
+                updateComponentChildren(ctx, result, hydrationData),
+            ];
+        }
+    }
+    else if (hydrationData !== undefined) {
+        throw new Error("Hydration error");
+    }
+    let iteration;
+    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;
+        }
+    }
+    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];
+    }
+    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) => {
+            let value;
+            if (!(ctx.f & IsInForOfLoop)) {
+                runAsyncGenComponent(ctx, Promise.resolve(iteration), hydrationData);
+            }
+            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);
+            }
+            return value;
+        }, (err) => {
+            ctx.f |= IsErrored;
+            throw err;
+        });
+        return [block, value];
+    }
+    else {
+        runAsyncGenComponent(ctx, iteration, hydrationData);
+        // async generator component
+        return [ctx.inflightBlock, ctx.inflightValue];
+    }
+}
+async function runAsyncGenComponent(ctx, iterationP, hydrationData) {
+    let done = false;
+    try {
+        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;
+                }
+            }
+        }
+    }
+    finally {
+        if (done) {
+            ctx.f &= ~IsAsyncGen;
+            ctx.iterator = undefined;
+        }
+    }
+}
+/**
+ * Called to resume the props async iterator for async generator components.
+ */
+function resumePropsIterator(ctx) {
+    if (ctx.onProps) {
+        ctx.onProps(ctx.ret.el.props);
+        ctx.onProps = undefined;
+        ctx.f &= ~PropsAvailable;
+    }
+    else {
+        ctx.f |= PropsAvailable;
+    }
+}
+// TODO: async unmounting
+function unmountComponent(ctx) {
+    clearEventListeners(ctx);
+    const callbacks = cleanupMap.get(ctx);
+    if (callbacks) {
+        cleanupMap.delete(ctx);
+        const value = ctx.renderer.read(getValue(ctx.ret));
+        for (const callback of callbacks) {
+            callback(value);
+        }
+    }
+    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);
+                }
+            }
+        }
+        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
+const NONE = 0;
+const CAPTURING_PHASE = 1;
+const AT_TARGET = 2;
+const BUBBLING_PHASE = 3;
+const listenersMap = new WeakMap();
+function isListenerOrListenerObject(value) {
+    return (typeof value === "function" ||
+        (value !== null &&
+            typeof value === "object" &&
+            typeof value.handleEvent === "function"));
+}
+function normalizeListenerOptions(options) {
+    if (typeof options === "boolean") {
+        return { capture: options };
+    }
+    else if (options == null) {
+        return {};
+    }
+    return options;
+}
+function isEventTarget(value) {
+    return (value != null &&
+        typeof value.addEventListener === "function" &&
+        typeof value.removeEventListener === "function" &&
+        typeof value.dispatchEvent === "function");
+}
+function setEventProperty(ev, key, value) {
+    Object.defineProperty(ev, key, { value, writable: false, configurable: true });
+}
+// TODO: Maybe we can pass in the current context directly, rather than
+// starting from the parent?
+/**
+ * A function to reconstruct an array of every listener given a context and a
+ * host element.
+ *
+ * This function exploits the fact that contexts retain their nearest ancestor
+ * host element. We can determine all the contexts which are directly listening
+ * to an element by traversing up the context tree and checking that the host
+ * element passed in matches the parent context’s host element.
+ */
+function getListenerRecords(ctx, ret) {
+    let listeners = [];
+    while (ctx !== undefined && ctx.host === ret) {
+        const listeners1 = listenersMap.get(ctx);
+        if (listeners1) {
+            listeners = listeners.concat(listeners1);
+        }
+        ctx = ctx.parent;
+    }
+    return listeners;
+}
+function clearEventListeners(ctx) {
+    const listeners = listenersMap.get(ctx);
+    if (listeners && listeners.length) {
+        for (const value of getChildValues(ctx.ret)) {
+            if (isEventTarget(value)) {
+                for (const record of listeners) {
+                    value.removeEventListener(record.type, record.callback, record.options);
+                }
+            }
+        }
+        listeners.length = 0;
+    }
+}
+/*** ERROR HANDLING UTILITIES ***/
+function handleChildError(ctx, err) {
+    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
+        throw err;
+    }
+    resumePropsIterator(ctx);
+    let iteration;
+    try {
+        ctx.f |= IsSyncExecuting;
+        iteration = ctx.iterator.throw(err);
+    }
+    catch (err) {
+        ctx.f |= IsErrored;
+        throw err;
+    }
+    finally {
+        ctx.f &= ~IsSyncExecuting;
+    }
+    if (isPromiseLike(iteration)) {
+        return iteration.then((iteration) => {
+            if (iteration.done) {
+                ctx.f &= ~IsAsyncGen;
+                ctx.iterator = undefined;
+            }
+            return updateComponentChildren(ctx, iteration.value);
+        }, (err) => {
+            ctx.f |= IsErrored;
+            throw err;
+        });
+    }
+    if (iteration.done) {
+        ctx.f &= ~IsSyncGen;
+        ctx.f &= ~IsAsyncGen;
+        ctx.iterator = undefined;
+    }
+    return updateComponentChildren(ctx, iteration.value);
+}
+function propagateError(ctx, err) {
+    if (ctx === undefined) {
+        throw err;
+    }
+    let result;
+    try {
+        result = handleChildError(ctx, err);
+    }
+    catch (err) {
+        return propagateError(ctx.parent, err);
+    }
+    if (isPromiseLike(result)) {
+        return result.catch((err) => propagateError(ctx.parent, err));
+    }
+    return result;
+}
+// Some JSX transpilation tools expect these functions to be defined on the
+// default export. Prefer named exports when importing directly.
+var crank = { createElement, Fragment };
 
-
-
-exports.Context = core.Context;
-exports.Copy = core.Copy;
-exports.Element = core.Element;
-exports.Fragment = core.Fragment;
-exports.Portal = core.Portal;
-exports.Raw = core.Raw;
-exports.Renderer = core.Renderer;
-exports.cloneElement = core.cloneElement;
-exports.createElement = core.createElement;
-exports.isElement = core.isElement;
-exports.jsx = tags.jsx;
+exports.Context = Context;
+exports.Copy = Copy;
+exports.Element = Element;
+exports.Fragment = Fragment;
+exports.Portal = Portal;
+exports.Raw = Raw;
+exports.Renderer = Renderer;
+exports.cloneElement = cloneElement;
+exports.createElement = createElement;
+exports.default = crank;
+exports.isElement = isElement;
 //# sourceMappingURL=crank.cjs.map