@b9g/crank 0.5.7 → 0.6.1

package/umd.js

@@ -4,2278 +4,2333 @@
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Crank = {}));
 })(this, (function (exports) { 'use strict';
 
-	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" ||
-	                !seenKeys ||
-	                !seenKeys.has(ret.el.key))) {
-	            (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 = ret.value;
-	    if (hydrationValue != null) {
-	        value = ret.value = hydrationValue;
-	    }
-	    let props = ret.el.props;
-	    let copied;
-	    if (tag !== Portal) {
-	        if (value == null) {
-	            // This assumes that renderer.create does not return nullish values.
-	            value = ret.value = renderer.create(tag, props, scope);
-	        }
-	        for (const propName in { ...oldProps, ...props }) {
-	            const propValue = props[propName];
-	            if (propValue === Copy) {
-	                // TODO: The Copy tag doubles as a way to skip the patching of a prop.
-	                // Not sure about this feature. Should probably be removed.
-	                (copied = copied || new Set()).add(propName);
-	            }
-	            else if (propName !== "children") {
-	                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 [T=*] - The expected shape of the props passed to the component,
-	 * or a component function. 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];
-	        if (ctx.f & IsUnmounted) {
-	            const value = ctx.renderer.read(getValue(ctx.ret));
-	            callback(value);
-	            return;
-	        }
-	        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) {
-	        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)) {
-	                if (!ctx.parent) {
-	                    throw err;
-	                }
-	                return propagateError(ctx.parent, err);
-	            }
-	            throw err;
-	        }
-	    }
-	    else if (!ctx.enqueuedBlock) {
-	        if (hydrationData !== undefined) {
-	            throw new Error("Hydration error");
-	        }
-	        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
-	        // the Promise constructor call here.
-	        let resolveEnqueuedBlock;
-	        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
-	        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
-	            try {
-	                const [block, value] = runComponent(ctx);
-	                if (block) {
-	                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
-	                }
-	                return value;
-	            }
-	            catch (err) {
-	                if (!(ctx.f & IsUpdating)) {
-	                    if (!ctx.parent) {
-	                        throw err;
-	                    }
-	                    return propagateError(ctx.parent, err);
-	                }
-	                throw err;
-	            }
-	        });
-	    }
-	    return ctx.enqueuedValue;
-	}
-	/** 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));
-	                oldValue.catch((err) => {
-	                    if (ctx.f & IsUpdating) {
-	                        return;
-	                    }
-	                    if (!ctx.parent) {
-	                        throw err;
-	                    }
-	                    return propagateError(ctx.parent, err);
-	                });
-	            }
-	            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) {
-	    if (ctx.f & IsUnmounted) {
-	        return;
-	    }
-	    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) => {
-	                    if (!ctx.parent) {
-	                        throw err;
-	                    }
-	                    return 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) => {
-	                    if (!ctx.parent) {
-	                        throw err;
-	                    }
-	                    return 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) => {
-	                    if (!ctx.parent) {
-	                        throw err;
-	                    }
-	                    return 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) {
-	    let result;
-	    try {
-	        result = handleChildError(ctx, err);
-	    }
-	    catch (err) {
-	        if (!ctx.parent) {
-	            throw err;
-	        }
-	        return propagateError(ctx.parent, err);
-	    }
-	    if (isPromiseLike(result)) {
-	        return result.catch((err) => {
-	            if (!ctx.parent) {
-	                throw err;
-	            }
-	            return propagateError(ctx.parent, err);
-	        });
-	    }
-	    return result;
+	const NOOP = () => { };
+	const IDENTITY = (value) => value;
+	function wrap(value) {
+	    return value === undefined ? [] : Array.isArray(value) ? value : [value];
+	}
+	function unwrap(arr) {
+	    return arr.length === 0 ? undefined : arr.length === 1 ? arr[0] : arr;
+	}
+	/**
+	 * Ensures a value is an array.
+	 *
+	 * This function does the same thing as wrap() above except it handles nulls
+	 * and iterables, so it is appropriate for wrapping user-provided element
+	 * children.
+	 */
+	function arrayify(value) {
+	    return value == null
+	        ? []
+	        : Array.isArray(value)
+	            ? value
+	            : typeof value === "string" ||
+	                typeof value[Symbol.iterator] !== "function"
+	                ? [value]
+	                : [...value];
+	}
+	function isIteratorLike(value) {
+	    return value != null && typeof value.next === "function";
+	}
+	function isPromiseLike(value) {
+	    return value != null && typeof value.then === "function";
+	}
+	/***
+	 * 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) {
+	        this.tag = tag;
+	        this.props = props;
+	    }
+	    get key() {
+	        return this.props.key;
+	    }
+	    get ref() {
+	        return this.props.ref;
+	    }
+	    get copy() {
+	        return !!this.props.copy;
+	    }
+	}
+	// See Element interface
+	Element.prototype.$$typeof = ElementSymbol;
+	function isElement(value) {
+	    return value != null && value.$$typeof === ElementSymbol;
+	}
+	const DEPRECATED_PROP_PREFIXES = ["crank-", "c-", "$"];
+	const DEPRECATED_SPECIAL_PROP_BASES = ["key", "ref", "static"];
+	const SPECIAL_PROPS = new Set(["children", "key", "ref", "copy"]);
+	for (const propPrefix of DEPRECATED_PROP_PREFIXES) {
+	    for (const propBase of DEPRECATED_SPECIAL_PROP_BASES) {
+	        SPECIAL_PROPS.add(propPrefix + propBase);
+	    }
+	}
+	/**
+	 * 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) {
+	    if (props == null) {
+	        props = {};
+	    }
+	    for (let i = 0; i < DEPRECATED_PROP_PREFIXES.length; i++) {
+	        const propPrefix = DEPRECATED_PROP_PREFIXES[i];
+	        for (let j = 0; j < DEPRECATED_SPECIAL_PROP_BASES.length; j++) {
+	            const propBase = DEPRECATED_SPECIAL_PROP_BASES[j];
+	            const deprecatedPropName = propPrefix + propBase;
+	            const targetPropBase = propBase === "static" ? "copy" : propBase;
+	            if (deprecatedPropName in props) {
+	                console.warn(`The \`${deprecatedPropName}\` prop is deprecated. Use \`${targetPropBase}\` instead.`);
+	                props[targetPropBase] = props[deprecatedPropName];
+	            }
+	        }
+	    }
+	    if (children.length > 1) {
+	        props.children = children;
+	    }
+	    else if (children.length === 1) {
+	        props.children = children[0];
+	    }
+	    return new Element(tag, props);
+	}
+	/** 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 });
+	}
+	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. Subclasses will typically call super() with a custom
+	 * RendererImpl. This class is responsible for kicking off the rendering
+	 * process and caching previous trees by root.
+	 *
+	 * @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;
+	    // When hydrating, sibling element trees must be rendered in order, because
+	    // we do not know how many DOM nodes an element will render.
+	    let hydrationBlock;
+	    let oi = 0;
+	    let oldLength = oldRetained.length;
+	    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
+	        // 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 || (typeof ret === "object" && ret.el === child)) {
+	                value = getInflightValue(ret);
+	            }
+	            else {
+	                let oldProps;
+	                let copy = false;
+	                if (typeof ret === "object" && ret.el.tag === child.tag) {
+	                    oldProps = ret.el.props;
+	                    ret.el = child;
+	                    if (child.copy) {
+	                        value = getInflightValue(ret);
+	                        copy = true;
+	                    }
+	                }
+	                else {
+	                    if (typeof ret === "object") {
+	                        (graveyard = graveyard || []).push(ret);
+	                    }
+	                    const fallback = ret;
+	                    ret = new Retainer(child);
+	                    ret.fallbackValue = fallback;
+	                }
+	                if (copy) ;
+	                else if (child.tag === Raw) {
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateRaw(renderer, ret, scope, oldProps, hydrationData))
+	                        : updateRaw(renderer, ret, scope, oldProps, hydrationData);
+	                }
+	                else 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);
+	                }
+	            }
+	            if (isPromiseLike(value)) {
+	                isAsync = true;
+	                if (hydrationData !== undefined) {
+	                    hydrationBlock = 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" ||
+	                !seenKeys ||
+	                !seenKeys.has(ret.el.key))) {
+	            (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);
+	        if (typeof ret.el.ref === "function") {
+	            ret.el.ref(ret.value);
+	        }
+	    }
+	    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 = ret.value;
+	    if (hydrationValue != null) {
+	        value = ret.value = hydrationValue;
+	        if (typeof ret.el.ref === "function") {
+	            ret.el.ref(value);
+	        }
+	    }
+	    let props = ret.el.props;
+	    let copied;
+	    if (tag !== Portal) {
+	        if (value == null) {
+	            // This assumes that renderer.create does not return nullish values.
+	            value = ret.value = renderer.create(tag, props, scope);
+	            if (typeof ret.el.ref === "function") {
+	                ret.el.ref(value);
+	            }
+	        }
+	        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 (!SPECIAL_PROPS.has(propName)) {
+	                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);
+	    }
+	    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.
+	 *
+	 * 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 [T=*] - The expected shape of the props passed to the component,
+	 * or a component function. 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.
+	     */
+	    get props() {
+	        return this[_ContextImpl].ret.el.props;
+	    }
+	    /**
+	     * The current value of the associated element.
+	     *
+	     * @deprecated
+	     */
+	    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 &= -5;
+	        }
+	    }
+	    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 &= -9;
+	            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 ctx.renderer.read(getValue(ctx.ret));
+	        }
+	        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];
+	        if (ctx.f & IsUnmounted) {
+	            const value = ctx.renderer.read(getValue(ctx.ret));
+	            callback(value);
+	            return;
+	        }
+	        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);
+	                // dispatchEvent calls the prop callback if it exists
+	                let propCallback = ctx.ret.el.props["on" + ev.type];
+	                if (typeof propCallback === "function") {
+	                    propCallback(ev);
+	                    if (immediateCancelBubble || ev.cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	                else {
+	                    // Checks for camel-cased event props
+	                    for (const propName in ctx.ret.el.props) {
+	                        if (propName.toLowerCase() === "on" + ev.type.toLowerCase()) {
+	                            propCallback = ctx.ret.el.props[propName];
+	                            if (typeof propCallback === "function") {
+	                                propCallback(ev);
+	                                if (immediateCancelBubble || ev.cancelBubble) {
+	                                    return true;
+	                                }
+	                            }
+	                        }
+	                    }
+	                }
+	                const listeners = listenersMap.get(ctx);
+	                if (listeners) {
+	                    for (const record of listeners) {
+	                        if (record.type === ev.type) {
+	                            try {
+	                                record.callback.call(ctx.owner, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
+	                            if (immediateCancelBubble) {
+	                                return true;
+	                            }
+	                        }
+	                    }
+	                    if (ev.cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	            }
+	            if (ev.bubbles) {
+	                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
+	                for (let i = 0; i < path.length; i++) {
+	                    const target = path[i];
+	                    const listeners = listenersMap.get(target);
+	                    if (listeners) {
+	                        setEventProperty(ev, "currentTarget", target.owner);
+	                        for (const record of listeners) {
+	                            if (record.type === ev.type && !record.options.capture) {
+	                                try {
+	                                    record.callback.call(target.owner, ev);
+	                                }
+	                                catch (err) {
+	                                    console.error(err);
+	                                }
+	                                if (immediateCancelBubble) {
+	                                    return true;
+	                                }
+	                            }
+	                        }
+	                    }
+	                    if (ev.cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	            }
+	        }
+	        finally {
+	            setEventProperty(ev, "eventPhase", NONE);
+	            setEventProperty(ev, "currentTarget", null);
+	            // eslint-disable-next-line no-unsafe-finally
+	            return !ev.defaultPrevented;
+	        }
+	    }
+	}
+	/*** PRIVATE CONTEXT FUNCTIONS ***/
+	function ctxContains(parent, child) {
+	    for (let current = child; current !== undefined; current = current.parent) {
+	        if (current === parent) {
+	            return true;
+	        }
+	    }
+	    return false;
+	}
+	function updateComponent(renderer, root, host, parent, scope, ret, oldProps, hydrationData) {
+	    let ctx;
+	    if (oldProps) {
+	        ctx = ret.ctx;
+	        if (ctx.f & IsSyncExecuting) {
+	            console.error("Component is already executing");
+	            return ret.cachedChildValues;
+	        }
+	    }
+	    else {
+	        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 &= -3;
+	    }
+	    if (isPromiseLike(childValues)) {
+	        ctx.ret.inflightValue = childValues.then((childValues) => commitComponent(ctx, childValues));
+	        return ctx.ret.inflightValue;
+	    }
+	    return commitComponent(ctx, childValues);
+	}
+	function commitComponent(ctx, values) {
+	    if (ctx.f & IsUnmounted) {
+	        return;
+	    }
+	    const listeners = listenersMap.get(ctx);
+	    if (listeners && listeners.length) {
+	        for (let i = 0; i < values.length; i++) {
+	            const value = values[i];
+	            if (isEventTarget(value)) {
+	                for (let j = 0; j < listeners.length; j++) {
+	                    const record = listeners[j];
+	                    value.addEventListener(record.type, record.callback, record.options);
+	                }
+	            }
+	        }
+	    }
+	    const oldValues = wrap(ctx.ret.cachedChildValues);
+	    let value = (ctx.ret.cachedChildValues = unwrap(values));
+	    if (ctx.f & IsScheduling) {
+	        ctx.f |= IsSchedulingRefresh;
+	    }
+	    else if (!(ctx.f & IsUpdating)) {
+	        // If we’re not updating the component, which happens when components are
+	        // refreshed, or when async generator components iterate, we have to do a
+	        // little bit housekeeping when a component’s child values have changed.
+	        if (!arrayEqual(oldValues, values)) {
+	            const records = getListenerRecords(ctx.parent, ctx.host);
+	            if (records.length) {
+	                for (let i = 0; i < values.length; i++) {
+	                    const value = values[i];
+	                    if (isEventTarget(value)) {
+	                        for (let j = 0; j < records.length; j++) {
+	                            const record = records[j];
+	                            value.addEventListener(record.type, record.callback, record.options);
+	                        }
+	                    }
+	                }
+	            }
+	            // rearranging the nearest ancestor host element
+	            const host = ctx.host;
+	            const oldHostValues = wrap(host.cachedChildValues);
+	            invalidate(ctx, host);
+	            const hostValues = getChildValues(host);
+	            ctx.renderer.arrange(host.el.tag, host.value, host.el.props, hostValues, 
+	            // props and oldProps are the same because the host isn’t updated.
+	            host.el.props, oldHostValues);
+	        }
+	        flush(ctx.renderer, ctx.root, ctx);
+	    }
+	    const callbacks = scheduleMap.get(ctx);
+	    if (callbacks) {
+	        scheduleMap.delete(ctx);
+	        ctx.f |= IsScheduling;
+	        const value1 = ctx.renderer.read(value);
+	        for (const callback of callbacks) {
+	            callback(value1);
+	        }
+	        ctx.f &= -1025;
+	        // Handles an edge case where refresh() is called during a schedule().
+	        if (ctx.f & IsSchedulingRefresh) {
+	            ctx.f &= -2049;
+	            value = getValue(ctx.ret);
+	        }
+	    }
+	    ctx.f &= -2;
+	    return value;
+	}
+	function invalidate(ctx, host) {
+	    for (let parent = ctx.parent; parent !== undefined && parent.host === host; parent = parent.parent) {
+	        parent.ret.cachedChildValues = undefined;
+	    }
+	    host.cachedChildValues = undefined;
+	}
+	function arrayEqual(arr1, arr2) {
+	    if (arr1.length !== arr2.length) {
+	        return false;
+	    }
+	    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;
+	        resumePropsAsyncIterator(ctx);
+	        if (isAtLoopbottom) {
+	            if (ctx.inflightBlock == null) {
+	                ctx.inflightBlock = new Promise((resolve) => (ctx.onPropsRequested = resolve));
+	            }
+	            return ctx.inflightBlock.then(() => {
+	                ctx.inflightBlock = undefined;
+	                return ctx.inflightValue;
+	            });
+	        }
+	        return ctx.inflightValue;
+	    }
+	    else if (!ctx.inflightBlock) {
+	        try {
+	            const [block, value] = runComponent(ctx, hydrationData);
+	            if (block) {
+	                ctx.inflightBlock = block
+	                    // TODO: there is some fuckery going on here related to async
+	                    // generator components resuming when they’re meant to be returned.
+	                    .then((v) => v)
+	                    .finally(() => advanceComponent(ctx));
+	                // stepComponent will only return a block if the value is asynchronous
+	                ctx.inflightValue = value;
+	            }
+	            return value;
+	        }
+	        catch (err) {
+	            if (!(ctx.f & IsUpdating)) {
+	                if (!ctx.parent) {
+	                    throw err;
+	                }
+	                return propagateError(ctx.parent, err);
+	            }
+	            throw err;
+	        }
+	    }
+	    else if (!ctx.enqueuedBlock) {
+	        if (hydrationData !== undefined) {
+	            throw new Error("Hydration error");
+	        }
+	        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
+	        // the Promise constructor call here.
+	        let resolveEnqueuedBlock;
+	        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
+	        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
+	            try {
+	                const [block, value] = runComponent(ctx);
+	                if (block) {
+	                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
+	                }
+	                return value;
+	            }
+	            catch (err) {
+	                if (!(ctx.f & IsUpdating)) {
+	                    if (!ctx.parent) {
+	                        throw err;
+	                    }
+	                    return propagateError(ctx.parent, err);
+	                }
+	                throw err;
+	            }
+	        });
+	    }
+	    return ctx.enqueuedValue;
+	}
+	/** 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) {
+	        resumePropsAsyncIterator(ctx);
+	        ctx.f |= IsSyncExecuting;
+	        clearEventListeners(ctx);
+	        let result;
+	        try {
+	            result = ret.el.tag.call(ctx.owner, ret.el.props, ctx.owner);
+	        }
+	        catch (err) {
+	            ctx.f |= IsErrored;
+	            throw err;
+	        }
+	        finally {
+	            ctx.f &= -3;
+	        }
+	        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) {
+	        // hydration data should only be passed on the initial render
+	        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 &= -3;
+	        }
+	        if (isPromiseLike(iteration)) {
+	            ctx.f |= IsAsyncGen;
+	        }
+	        else {
+	            ctx.f |= IsSyncGen;
+	        }
+	    }
+	    if (ctx.f & IsSyncGen) {
+	        // 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 &= -3;
+	            }
+	        }
+	        if (isPromiseLike(iteration)) {
+	            throw new Error("Mixed generator component");
+	        }
+	        if (ctx.f & IsInForOfLoop &&
+	            !(ctx.f & NeedsToYield) &&
+	            !(ctx.f & IsUnmounted)) {
+	            console.error("Component yielded more than once in for...of loop");
+	        }
+	        ctx.f &= -17;
+	        if (iteration.done) {
+	            ctx.f &= -257;
+	            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) {
+	            // Async generator component using for...of loops behave similar to sync
+	            // generator components. This allows for easier refactoring of sync to
+	            // async generator components.
+	            if (!initial) {
+	                try {
+	                    ctx.f |= IsSyncExecuting;
+	                    iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+	                }
+	                catch (err) {
+	                    ctx.f |= IsErrored;
+	                    throw err;
+	                }
+	                finally {
+	                    ctx.f &= -3;
+	                }
+	            }
+	            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);
+	                }
+	                else {
+	                    if (!(ctx.f & NeedsToYield) && !(ctx.f & IsUnmounted)) {
+	                        console.error("Component yielded more than once in for...of loop");
+	                    }
+	                }
+	                ctx.f &= -17;
+	                try {
+	                    value = updateComponentChildren(ctx, 
+	                    // Children can be void so we eliminate that here
+	                    iteration.value, hydrationData);
+	                    if (isPromiseLike(value)) {
+	                        value = value.catch((err) => handleChildError(ctx, err));
+	                    }
+	                }
+	                catch (err) {
+	                    value = handleChildError(ctx, err);
+	                }
+	                return value;
+	            }, (err) => {
+	                ctx.f |= IsErrored;
+	                throw err;
+	            });
+	            return [block, value];
+	        }
+	        else {
+	            runAsyncGenComponent(ctx, iteration, hydrationData, initial);
+	            return [ctx.inflightBlock, ctx.inflightValue];
+	        }
+	    }
+	}
+	async function runAsyncGenComponent(ctx, iterationP, hydrationData, initial = false) {
+	    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;
+	            }
+	            if (!(ctx.f & IsInForAwaitOfLoop)) {
+	                ctx.f &= ~PropsAvailable;
+	            }
+	            done = !!iteration.done;
+	            let value;
+	            try {
+	                if (!(ctx.f & NeedsToYield) &&
+	                    ctx.f & PropsAvailable &&
+	                    ctx.f & IsInForAwaitOfLoop &&
+	                    !initial &&
+	                    !done) {
+	                    // We skip stale iterations in for await...of loops.
+	                    value = ctx.ret.inflightValue || getValue(ctx.ret);
+	                }
+	                else {
+	                    value = updateComponentChildren(ctx, iteration.value, hydrationData);
+	                    hydrationData = undefined;
+	                    if (isPromiseLike(value)) {
+	                        value = value.catch((err) => handleChildError(ctx, err));
+	                    }
+	                }
+	                ctx.f &= ~NeedsToYield;
+	            }
+	            catch (err) {
+	                // Do we need to catch potential errors here in the case of unhandled
+	                // promise rejections?
+	                value = handleChildError(ctx, err);
+	            }
+	            finally {
+	                onValue(value);
+	            }
+	            let oldResult;
+	            if (ctx.ret.inflightValue) {
+	                // The value passed back into the generator as the argument to the next
+	                // method is a promise if an async generator component has async
+	                // children. Sync generator components only resume when their children
+	                // have fulfilled so the element’s inflight child values will never be
+	                // defined.
+	                oldResult = ctx.ret.inflightValue.then((value) => ctx.renderer.read(value));
+	                oldResult.catch((err) => {
+	                    if (ctx.f & IsUpdating) {
+	                        return;
+	                    }
+	                    if (!ctx.parent) {
+	                        throw err;
+	                    }
+	                    return propagateError(ctx.parent, err);
+	                });
+	            }
+	            else {
+	                oldResult = ctx.renderer.read(getValue(ctx.ret));
+	            }
+	            if (ctx.f & IsUnmounted) {
+	                if (ctx.f & IsInForAwaitOfLoop) {
+	                    try {
+	                        ctx.f |= IsSyncExecuting;
+	                        iterationP = ctx.iterator.next(oldResult);
+	                    }
+	                    finally {
+	                        ctx.f &= ~IsSyncExecuting;
+	                    }
+	                }
+	                else {
+	                    returnComponent(ctx);
+	                    break;
+	                }
+	            }
+	            else if (!done && !(ctx.f & IsInForOfLoop)) {
+	                try {
+	                    ctx.f |= IsSyncExecuting;
+	                    iterationP = ctx.iterator.next(oldResult);
+	                }
+	                finally {
+	                    ctx.f &= ~IsSyncExecuting;
+	                }
+	            }
+	            initial = false;
+	        }
+	    }
+	    finally {
+	        if (done) {
+	            ctx.f &= -513;
+	            ctx.iterator = undefined;
+	        }
+	    }
+	}
+	/**
+	 * Called to resume the props async iterator for async generator components.
+	 */
+	function resumePropsAsyncIterator(ctx) {
+	    if (ctx.onProps) {
+	        ctx.onProps(ctx.ret.el.props);
+	        ctx.onProps = undefined;
+	        ctx.f &= -33;
+	    }
+	    else {
+	        ctx.f |= PropsAvailable;
+	    }
+	}
+	// TODO: async unmounting
+	function unmountComponent(ctx) {
+	    if (ctx.f & IsUnmounted) {
+	        return;
+	    }
+	    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) => {
+	                    if (!ctx.parent) {
+	                        throw err;
+	                    }
+	                    return 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) => {
+	                    if (!ctx.parent) {
+	                        throw err;
+	                    }
+	                    return propagateError(ctx.parent, err);
+	                });
+	            }
+	            else {
+	                // The logic for unmounting async generator components is in the
+	                // runAsyncGenComponent function.
+	                resumePropsAsyncIterator(ctx);
+	            }
+	        }
+	    }
+	}
+	function returnComponent(ctx) {
+	    resumePropsAsyncIterator(ctx);
+	    if (ctx.iterator && typeof ctx.iterator.return === "function") {
+	        try {
+	            ctx.f |= IsSyncExecuting;
+	            const iteration = ctx.iterator.return();
+	            if (isPromiseLike(iteration)) {
+	                iteration.catch((err) => {
+	                    if (!ctx.parent) {
+	                        throw err;
+	                    }
+	                    return propagateError(ctx.parent, err);
+	                });
+	            }
+	        }
+	        finally {
+	            ctx.f &= -3;
+	        }
+	    }
+	}
+	/*** EVENT TARGET UTILITIES ***/
+	// EVENT PHASE CONSTANTS
+	// https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
+	const NONE = 0;
+	const CAPTURING_PHASE = 1;
+	const AT_TARGET = 2;
+	const BUBBLING_PHASE = 3;
+	const listenersMap = new WeakMap();
+	function isListenerOrListenerObject(value) {
+	    return (typeof value === "function" ||
+	        (value !== null &&
+	            typeof value === "object" &&
+	            typeof value.handleEvent === "function"));
+	}
+	function normalizeListenerOptions(options) {
+	    if (typeof options === "boolean") {
+	        return { capture: options };
+	    }
+	    else if (options == null) {
+	        return {};
+	    }
+	    return options;
+	}
+	function isEventTarget(value) {
+	    return (value != null &&
+	        typeof value.addEventListener === "function" &&
+	        typeof value.removeEventListener === "function" &&
+	        typeof value.dispatchEvent === "function");
+	}
+	function setEventProperty(ev, key, value) {
+	    Object.defineProperty(ev, key, { value, writable: false, configurable: true });
+	}
+	// TODO: Maybe we can pass in the current context directly, rather than
+	// starting from the parent?
+	/**
+	 * A function to reconstruct an array of every listener given a context and a
+	 * host element.
+	 *
+	 * This function exploits the fact that contexts retain their nearest ancestor
+	 * host element. We can determine all the contexts which are directly listening
+	 * to an element by traversing up the context tree and checking that the host
+	 * element passed in matches the parent context’s host element.
+	 */
+	function getListenerRecords(ctx, ret) {
+	    let listeners = [];
+	    while (ctx !== undefined && ctx.host === ret) {
+	        const listeners1 = listenersMap.get(ctx);
+	        if (listeners1) {
+	            listeners = listeners.concat(listeners1);
+	        }
+	        ctx = ctx.parent;
+	    }
+	    return listeners;
+	}
+	function clearEventListeners(ctx) {
+	    const listeners = listenersMap.get(ctx);
+	    if (listeners && listeners.length) {
+	        for (const value of getChildValues(ctx.ret)) {
+	            if (isEventTarget(value)) {
+	                for (const record of listeners) {
+	                    value.removeEventListener(record.type, record.callback, record.options);
+	                }
+	            }
+	        }
+	        listeners.length = 0;
+	    }
+	}
+	/*** ERROR HANDLING UTILITIES ***/
+	function handleChildError(ctx, err) {
+	    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
+	        throw err;
+	    }
+	    resumePropsAsyncIterator(ctx);
+	    let iteration;
+	    try {
+	        ctx.f |= IsSyncExecuting;
+	        iteration = ctx.iterator.throw(err);
+	    }
+	    catch (err) {
+	        ctx.f |= IsErrored;
+	        throw err;
+	    }
+	    finally {
+	        ctx.f &= -3;
+	    }
+	    if (isPromiseLike(iteration)) {
+	        return iteration.then((iteration) => {
+	            if (iteration.done) {
+	                ctx.f &= -513;
+	                ctx.iterator = undefined;
+	            }
+	            return updateComponentChildren(ctx, iteration.value);
+	        }, (err) => {
+	            ctx.f |= IsErrored;
+	            throw err;
+	        });
+	    }
+	    if (iteration.done) {
+	        ctx.f &= -257;
+	        ctx.f &= -513;
+	        ctx.iterator = undefined;
+	    }
+	    return updateComponentChildren(ctx, iteration.value);
+	}
+	function propagateError(ctx, err) {
+	    let result;
+	    try {
+	        result = handleChildError(ctx, err);
+	    }
+	    catch (err) {
+	        if (!ctx.parent) {
+	            throw err;
+	        }
+	        return propagateError(ctx.parent, err);
+	    }
+	    if (isPromiseLike(result)) {
+	        return result.catch((err) => {
+	            if (!ctx.parent) {
+	                throw err;
+	            }
+	            return propagateError(ctx.parent, err);
+	        });
+	    }
+	    return result;
 	}
 
-	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-	const impl$1 = {
-	    scope(xmlns, tag, props) {
-	        switch (tag) {
-	            case Portal:
-	                xmlns = undefined;
-	                break;
-	            case "svg":
-	                xmlns = SVG_NAMESPACE;
-	                break;
-	        }
-	        return props.xmlns || xmlns;
-	    },
-	    create(tag, _props, xmlns) {
-	        if (typeof tag !== "string") {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
-	        }
-	        else if (tag.toLowerCase() === "svg") {
-	            xmlns = SVG_NAMESPACE;
-	        }
-	        return xmlns
-	            ? document.createElementNS(xmlns, tag)
-	            : document.createElement(tag);
-	    },
-	    hydrate(tag, node, props) {
-	        if (typeof tag !== "string" && tag !== Portal) {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
-	        }
-	        if (typeof tag === "string" &&
-	            tag.toUpperCase() !== node.tagName) {
-	            // TODO: consider pros and cons of hydration warnings
-	            //console.error(`Expected <${tag}> while hydrating but found:`, node);
-	            return undefined;
-	        }
-	        const children = [];
-	        for (let i = 0; i < node.childNodes.length; i++) {
-	            const child = node.childNodes[i];
-	            if (child.nodeType === Node.TEXT_NODE) {
-	                children.push(child.data);
-	            }
-	            else if (child.nodeType === Node.ELEMENT_NODE) {
-	                children.push(child);
-	            }
-	        }
-	        // TODO: extract props from nodes
-	        return { props, children };
-	    },
-	    patch(_tag, 
-	    // TODO: Why does this assignment work?
-	    node, name, 
-	    // TODO: Stricter typings?
-	    value, oldValue, xmlns) {
-	        const isSVG = xmlns === SVG_NAMESPACE;
-	        switch (name) {
-	            case "style": {
-	                const style = node.style;
-	                if (style == null) {
-	                    node.setAttribute("style", value);
-	                }
-	                else if (value == null || value === false) {
-	                    node.removeAttribute("style");
-	                }
-	                else if (value === true) {
-	                    node.setAttribute("style", "");
-	                }
-	                else if (typeof value === "string") {
-	                    if (style.cssText !== value) {
-	                        style.cssText = value;
-	                    }
-	                }
-	                else {
-	                    if (typeof oldValue === "string") {
-	                        style.cssText = "";
-	                    }
-	                    for (const styleName in { ...oldValue, ...value }) {
-	                        const styleValue = value && value[styleName];
-	                        if (styleValue == null) {
-	                            style.removeProperty(styleName);
-	                        }
-	                        else if (style.getPropertyValue(styleName) !== styleValue) {
-	                            style.setProperty(styleName, styleValue);
-	                        }
-	                    }
-	                }
-	                break;
-	            }
-	            case "class":
-	            case "className":
-	                if (value === true) {
-	                    node.setAttribute("class", "");
-	                }
-	                else if (value == null) {
-	                    node.removeAttribute("class");
-	                }
-	                else if (!isSVG) {
-	                    if (node.className !== value) {
-	                        node["className"] = value;
-	                    }
-	                }
-	                else if (node.getAttribute("class") !== value) {
-	                    node.setAttribute("class", value);
-	                }
-	                break;
-	            case "innerHTML":
-	                if (value !== oldValue) {
-	                    node.innerHTML = value;
-	                }
-	                break;
-	            default: {
-	                if (name in node &&
-	                    // boolean properties will coerce strings, but sometimes they map to
-	                    // enumerated attributes, where truthy strings ("false", "no") map to
-	                    // falsy properties, so we use attributes in this case.
-	                    !(typeof value === "string" &&
-	                        typeof node[name] === "boolean")) {
-	                    // walk up the object's prototype chain to find the owner of the
-	                    // named property
-	                    let obj = node;
-	                    do {
-	                        if (Object.prototype.hasOwnProperty.call(obj, name)) {
-	                            break;
-	                        }
-	                    } while ((obj = Object.getPrototypeOf(obj)));
-	                    // get the descriptor for the named property and check whether it
-	                    // implies that the property is writable
-	                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
-	                    if (descriptor != null &&
-	                        (descriptor.writable === true || descriptor.set !== undefined)) {
-	                        if (node[name] !== value || oldValue === undefined) {
-	                            node[name] = value;
-	                        }
-	                        return;
-	                    }
-	                    // if the property wasn't writable, fall through to the code below
-	                    // which uses setAttribute() instead of assigning directly.
-	                }
-	                if (value === true) {
-	                    value = "";
-	                }
-	                else if (value == null || value === false) {
-	                    node.removeAttribute(name);
-	                    return;
-	                }
-	                if (node.getAttribute(name) !== value) {
-	                    node.setAttribute(name, value);
-	                }
-	            }
-	        }
-	    },
-	    arrange(tag, node, props, children, _oldProps, oldChildren) {
-	        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
-	            throw new TypeError(`Portal root is not a node. Received: ${JSON.stringify(node && node.toString())}`);
-	        }
-	        if (!("innerHTML" in props) &&
-	            // We don’t want to update elements without explicit children (<div/>),
-	            // because these elements sometimes have child nodes added via raw
-	            // DOM manipulations.
-	            // However, if an element has previously rendered children, we clear the
-	            // them because it would be surprising not to clear Crank managed
-	            // children, even if the new element does not have explicit children.
-	            ("children" in props || (oldChildren && oldChildren.length))) {
-	            if (children.length === 0) {
-	                node.textContent = "";
-	            }
-	            else {
-	                let oldChild = node.firstChild;
-	                let i = 0;
-	                while (oldChild !== null && i < children.length) {
-	                    const newChild = children[i];
-	                    if (oldChild === newChild) {
-	                        oldChild = oldChild.nextSibling;
-	                        i++;
-	                    }
-	                    else if (typeof newChild === "string") {
-	                        if (oldChild.nodeType === Node.TEXT_NODE) {
-	                            if (oldChild.data !== newChild) {
-	                                oldChild.data = newChild;
-	                            }
-	                            oldChild = oldChild.nextSibling;
-	                        }
-	                        else {
-	                            node.insertBefore(document.createTextNode(newChild), oldChild);
-	                        }
-	                        i++;
-	                    }
-	                    else if (oldChild.nodeType === Node.TEXT_NODE) {
-	                        const nextSibling = oldChild.nextSibling;
-	                        node.removeChild(oldChild);
-	                        oldChild = nextSibling;
-	                    }
-	                    else {
-	                        node.insertBefore(newChild, oldChild);
-	                        i++;
-	                        // TODO: This is an optimization but we need to think a little more about other cases like prepending.
-	                        if (oldChild !== children[i]) {
-	                            const nextSibling = oldChild.nextSibling;
-	                            node.removeChild(oldChild);
-	                            oldChild = nextSibling;
-	                        }
-	                    }
-	                }
-	                // remove excess DOM nodes
-	                while (oldChild !== null) {
-	                    const nextSibling = oldChild.nextSibling;
-	                    node.removeChild(oldChild);
-	                    oldChild = nextSibling;
-	                }
-	                // append excess children
-	                for (; i < children.length; i++) {
-	                    const newChild = children[i];
-	                    node.appendChild(typeof newChild === "string"
-	                        ? document.createTextNode(newChild)
-	                        : newChild);
-	                }
-	            }
-	        }
-	    },
-	    text(text, _scope, hydrationData) {
-	        if (hydrationData != null) {
-	            let value = hydrationData.children.shift();
-	            if (typeof value !== "string" || !value.startsWith(text)) ;
-	            else if (text.length < value.length) {
-	                value = value.slice(text.length);
-	                hydrationData.children.unshift(value);
-	            }
-	        }
-	        return text;
-	    },
-	    raw(value, xmlns, hydrationData) {
-	        let result;
-	        if (typeof value === "string") {
-	            const el = xmlns == null
-	                ? document.createElement("div")
-	                : document.createElementNS(xmlns, "svg");
-	            el.innerHTML = value;
-	            if (el.childNodes.length === 0) {
-	                result = undefined;
-	            }
-	            else if (el.childNodes.length === 1) {
-	                result = el.childNodes[0];
-	            }
-	            else {
-	                result = Array.from(el.childNodes);
-	            }
-	        }
-	        else {
-	            result = value;
-	        }
-	        if (hydrationData != null) {
-	            // TODO: maybe we should warn on incorrect values
-	            if (Array.isArray(result)) {
-	                for (let i = 0; i < result.length; i++) {
-	                    const node = result[i];
-	                    if (typeof node !== "string" &&
-	                        (node.nodeType === Node.ELEMENT_NODE ||
-	                            node.nodeType === Node.TEXT_NODE)) {
-	                        hydrationData.children.shift();
-	                    }
-	                }
-	            }
-	            else if (result != null && typeof result !== "string") {
-	                if (result.nodeType === Node.ELEMENT_NODE ||
-	                    result.nodeType === Node.TEXT_NODE) {
-	                    hydrationData.children.shift();
-	                }
-	            }
-	        }
-	        return result;
-	    },
-	};
-	class DOMRenderer extends Renderer {
-	    constructor() {
-	        super(impl$1);
-	    }
-	    render(children, root, ctx) {
-	        validateRoot(root);
-	        return super.render(children, root, ctx);
-	    }
-	    hydrate(children, root, ctx) {
-	        validateRoot(root);
-	        return super.hydrate(children, root, ctx);
-	    }
-	}
-	function validateRoot(root) {
-	    if (root === null ||
-	        (typeof root === "object" && typeof root.nodeType !== "number")) {
-	        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
-	    }
-	}
+	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+	const impl$1 = {
+	    scope(xmlns, tag, props) {
+	        switch (tag) {
+	            case Portal:
+	                xmlns = undefined;
+	                break;
+	            case "svg":
+	                xmlns = SVG_NAMESPACE;
+	                break;
+	        }
+	        return props.xmlns || xmlns;
+	    },
+	    create(tag, _props, xmlns) {
+	        if (typeof tag !== "string") {
+	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	        }
+	        else if (tag.toLowerCase() === "svg") {
+	            xmlns = SVG_NAMESPACE;
+	        }
+	        return xmlns
+	            ? document.createElementNS(xmlns, tag)
+	            : document.createElement(tag);
+	    },
+	    hydrate(tag, node, props) {
+	        if (typeof tag !== "string" && tag !== Portal) {
+	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	        }
+	        if (typeof tag === "string" &&
+	            tag.toUpperCase() !== node.tagName) {
+	            // TODO: consider pros and cons of hydration warnings
+	            //console.error(`Expected <${tag}> while hydrating but found:`, node);
+	            return undefined;
+	        }
+	        const children = [];
+	        for (let i = 0; i < node.childNodes.length; i++) {
+	            const child = node.childNodes[i];
+	            if (child.nodeType === Node.TEXT_NODE) {
+	                children.push(child.data);
+	            }
+	            else if (child.nodeType === Node.ELEMENT_NODE) {
+	                children.push(child);
+	            }
+	        }
+	        // TODO: extract props from nodes
+	        return { props, children };
+	    },
+	    patch(_tag, 
+	    // TODO: Why does this assignment work?
+	    node, name, 
+	    // TODO: Stricter typings?
+	    value, oldValue, xmlns) {
+	        const isSVG = xmlns === SVG_NAMESPACE;
+	        const colonIndex = name.indexOf(":");
+	        if (colonIndex !== -1) {
+	            const ns = name.slice(0, colonIndex);
+	            const name1 = name.slice(colonIndex + 1);
+	            switch (ns) {
+	                case "prop":
+	                    node[name1] = value;
+	                    return;
+	                case "attr":
+	                    if (value == null || value === false) {
+	                        node.removeAttribute(name1);
+	                    }
+	                    else if (value === true) {
+	                        node.setAttribute(name1, "");
+	                    }
+	                    else if (typeof value === "string") {
+	                        node.setAttribute(name1, value);
+	                    }
+	                    else {
+	                        node.setAttribute(name, String(value));
+	                    }
+	                    return;
+	            }
+	        }
+	        switch (name) {
+	            case "style": {
+	                const style = node.style;
+	                if (style == null) {
+	                    node.setAttribute("style", value);
+	                }
+	                else if (value == null || value === false) {
+	                    node.removeAttribute("style");
+	                }
+	                else if (value === true) {
+	                    node.setAttribute("style", "");
+	                }
+	                else if (typeof value === "string") {
+	                    if (style.cssText !== value) {
+	                        style.cssText = value;
+	                    }
+	                }
+	                else {
+	                    if (typeof oldValue === "string") {
+	                        style.cssText = "";
+	                    }
+	                    for (const styleName in { ...oldValue, ...value }) {
+	                        const styleValue = value && value[styleName];
+	                        if (styleValue == null) {
+	                            style.removeProperty(styleName);
+	                        }
+	                        else if (style.getPropertyValue(styleName) !== styleValue) {
+	                            style.setProperty(styleName, styleValue);
+	                        }
+	                    }
+	                }
+	                break;
+	            }
+	            case "class":
+	            case "className":
+	                if (value === true) {
+	                    node.setAttribute("class", "");
+	                }
+	                else if (value == null) {
+	                    node.removeAttribute("class");
+	                }
+	                else if (!isSVG) {
+	                    if (node.className !== value) {
+	                        node["className"] = value;
+	                    }
+	                }
+	                else if (node.getAttribute("class") !== value) {
+	                    node.setAttribute("class", value);
+	                }
+	                break;
+	            case "innerHTML":
+	                if (value !== oldValue) {
+	                    node.innerHTML = value;
+	                }
+	                break;
+	            default: {
+	                if (name[0] === "o" &&
+	                    name[1] === "n" &&
+	                    name[2] === name[2].toUpperCase() &&
+	                    typeof value === "function") {
+	                    // Support React-style event names (onClick, onChange, etc.)
+	                    name = name.toLowerCase();
+	                }
+	                if (name in node &&
+	                    // boolean properties will coerce strings, but sometimes they map to
+	                    // enumerated attributes, where truthy strings ("false", "no") map to
+	                    // falsy properties, so we use attributes in this case.
+	                    !(typeof value === "string" &&
+	                        typeof node[name] === "boolean")) {
+	                    // walk up the object's prototype chain to find the owner of the
+	                    // named property
+	                    let obj = node;
+	                    do {
+	                        if (Object.prototype.hasOwnProperty.call(obj, name)) {
+	                            break;
+	                        }
+	                    } while ((obj = Object.getPrototypeOf(obj)));
+	                    // get the descriptor for the named property and check whether it
+	                    // implies that the property is writable
+	                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
+	                    if (descriptor != null &&
+	                        (descriptor.writable === true || descriptor.set !== undefined)) {
+	                        if (node[name] !== value || oldValue === undefined) {
+	                            node[name] = value;
+	                        }
+	                        return;
+	                    }
+	                    // if the property wasn't writable, fall through to the code below
+	                    // which uses setAttribute() instead of assigning directly.
+	                }
+	                if (value === true) {
+	                    value = "";
+	                }
+	                else if (value == null || value === false) {
+	                    node.removeAttribute(name);
+	                    return;
+	                }
+	                if (node.getAttribute(name) !== value) {
+	                    node.setAttribute(name, value);
+	                }
+	            }
+	        }
+	    },
+	    arrange(tag, node, props, children, _oldProps, oldChildren) {
+	        if (tag === Portal && (node == null || typeof node.nodeType !== "number")) {
+	            throw new TypeError(`Portal root is not a node. Received: ${JSON.stringify(node && node.toString())}`);
+	        }
+	        if (!("innerHTML" in props) &&
+	            // We don’t want to update elements without explicit children (<div/>),
+	            // because these elements sometimes have child nodes added via raw
+	            // DOM manipulations.
+	            // However, if an element has previously rendered children, we clear the
+	            // them because it would be surprising not to clear Crank managed
+	            // children, even if the new element does not have explicit children.
+	            ("children" in props || (oldChildren && oldChildren.length))) {
+	            if (children.length === 0) {
+	                node.textContent = "";
+	            }
+	            else {
+	                let oldChild = node.firstChild;
+	                let i = 0;
+	                while (oldChild !== null && i < children.length) {
+	                    const newChild = children[i];
+	                    if (oldChild === newChild) {
+	                        oldChild = oldChild.nextSibling;
+	                        i++;
+	                    }
+	                    else if (typeof newChild === "string") {
+	                        if (oldChild.nodeType === Node.TEXT_NODE) {
+	                            if (oldChild.data !== newChild) {
+	                                oldChild.data = newChild;
+	                            }
+	                            oldChild = oldChild.nextSibling;
+	                        }
+	                        else {
+	                            node.insertBefore(document.createTextNode(newChild), oldChild);
+	                        }
+	                        i++;
+	                    }
+	                    else if (oldChild.nodeType === Node.TEXT_NODE) {
+	                        const nextSibling = oldChild.nextSibling;
+	                        node.removeChild(oldChild);
+	                        oldChild = nextSibling;
+	                    }
+	                    else {
+	                        node.insertBefore(newChild, oldChild);
+	                        i++;
+	                        // TODO: This is an optimization but we need to think a little more about other cases like prepending.
+	                        if (oldChild !== children[i]) {
+	                            const nextSibling = oldChild.nextSibling;
+	                            node.removeChild(oldChild);
+	                            oldChild = nextSibling;
+	                        }
+	                    }
+	                }
+	                // remove excess DOM nodes
+	                while (oldChild !== null) {
+	                    const nextSibling = oldChild.nextSibling;
+	                    node.removeChild(oldChild);
+	                    oldChild = nextSibling;
+	                }
+	                // append excess children
+	                for (; i < children.length; i++) {
+	                    const newChild = children[i];
+	                    node.appendChild(typeof newChild === "string"
+	                        ? document.createTextNode(newChild)
+	                        : newChild);
+	                }
+	            }
+	        }
+	    },
+	    text(text, _scope, hydrationData) {
+	        if (hydrationData != null) {
+	            let value = hydrationData.children.shift();
+	            if (typeof value !== "string" || !value.startsWith(text)) ;
+	            else if (text.length < value.length) {
+	                value = value.slice(text.length);
+	                hydrationData.children.unshift(value);
+	            }
+	        }
+	        return text;
+	    },
+	    raw(value, xmlns, hydrationData) {
+	        let result;
+	        if (typeof value === "string") {
+	            const el = xmlns == null
+	                ? document.createElement("div")
+	                : document.createElementNS(xmlns, "svg");
+	            el.innerHTML = value;
+	            if (el.childNodes.length === 0) {
+	                result = undefined;
+	            }
+	            else if (el.childNodes.length === 1) {
+	                result = el.childNodes[0];
+	            }
+	            else {
+	                result = Array.from(el.childNodes);
+	            }
+	        }
+	        else {
+	            result = value;
+	        }
+	        if (hydrationData != null) {
+	            // TODO: maybe we should warn on incorrect values
+	            if (Array.isArray(result)) {
+	                for (let i = 0; i < result.length; i++) {
+	                    const node = result[i];
+	                    if (typeof node !== "string" &&
+	                        (node.nodeType === Node.ELEMENT_NODE ||
+	                            node.nodeType === Node.TEXT_NODE)) {
+	                        hydrationData.children.shift();
+	                    }
+	                }
+	            }
+	            else if (result != null && typeof result !== "string") {
+	                if (result.nodeType === Node.ELEMENT_NODE ||
+	                    result.nodeType === Node.TEXT_NODE) {
+	                    hydrationData.children.shift();
+	                }
+	            }
+	        }
+	        return result;
+	    },
+	};
+	class DOMRenderer extends Renderer {
+	    constructor() {
+	        super(impl$1);
+	    }
+	    render(children, root, ctx) {
+	        validateRoot(root);
+	        return super.render(children, root, ctx);
+	    }
+	    hydrate(children, root, ctx) {
+	        validateRoot(root);
+	        return super.hydrate(children, root, ctx);
+	    }
+	}
+	function validateRoot(root) {
+	    if (root === null ||
+	        (typeof root === "object" && typeof root.nodeType !== "number")) {
+	        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
+	    }
+	}
 	const renderer$1 = new DOMRenderer();
 
 	var dom = /*#__PURE__*/Object.freeze({
@@ -2285,142 +2340,160 @@
 		renderer: renderer$1
 	});
 
-	const voidTags = new Set([
-	    "area",
-	    "base",
-	    "br",
-	    "col",
-	    "command",
-	    "embed",
-	    "hr",
-	    "img",
-	    "input",
-	    "keygen",
-	    "link",
-	    "meta",
-	    "param",
-	    "source",
-	    "track",
-	    "wbr",
-	]);
-	function escape(text) {
-	    return text.replace(/[&<>"']/g, (match) => {
-	        switch (match) {
-	            case "&":
-	                return "&amp;";
-	            case "<":
-	                return "&lt;";
-	            case ">":
-	                return "&gt;";
-	            case '"':
-	                return "&quot;";
-	            case "'":
-	                return "&#039;";
-	            default:
-	                return "";
-	        }
-	    });
-	}
-	function printStyleObject(style) {
-	    const cssStrings = [];
-	    for (const [name, value] of Object.entries(style)) {
-	        if (value != null) {
-	            cssStrings.push(`${name}:${value};`);
-	        }
-	    }
-	    return cssStrings.join("");
-	}
-	function printAttrs(props) {
-	    const attrs = [];
-	    for (const [name, value] of Object.entries(props)) {
-	        switch (true) {
-	            case name === "children":
-	            case name === "innerHTML":
-	                break;
-	            case name === "style": {
-	                if (typeof value === "string") {
-	                    attrs.push(`style="${escape(value)}"`);
-	                }
-	                else if (typeof value === "object") {
-	                    attrs.push(`style="${escape(printStyleObject(value))}"`);
-	                }
-	                break;
-	            }
-	            case name === "className": {
-	                if ("class" in props || typeof value !== "string") {
-	                    continue;
-	                }
-	                attrs.push(`class="${escape(value)}"`);
-	                break;
-	            }
-	            case typeof value === "string":
-	                attrs.push(`${escape(name)}="${escape(value)}"`);
-	                break;
-	            case typeof value === "number":
-	                attrs.push(`${escape(name)}="${value}"`);
-	                break;
-	            case value === true:
-	                attrs.push(`${escape(name)}`);
-	                break;
-	        }
-	    }
-	    return attrs.join(" ");
-	}
-	function join(children) {
-	    let result = "";
-	    for (let i = 0; i < children.length; i++) {
-	        const child = children[i];
-	        result += typeof child === "string" ? child : child.value;
-	    }
-	    return result;
-	}
-	const impl = {
-	    create() {
-	        return { value: "" };
-	    },
-	    text(text) {
-	        return escape(text);
-	    },
-	    read(value) {
-	        if (Array.isArray(value)) {
-	            return join(value);
-	        }
-	        else if (typeof value === "undefined") {
-	            return "";
-	        }
-	        else if (typeof value === "string") {
-	            return value;
-	        }
-	        else {
-	            return value.value;
-	        }
-	    },
-	    arrange(tag, node, props, children) {
-	        if (tag === Portal) {
-	            return;
-	        }
-	        else if (typeof tag !== "string") {
-	            throw new Error(`Unknown tag: ${tag.toString()}`);
-	        }
-	        const attrs = printAttrs(props);
-	        const open = `<${tag}${attrs.length ? " " : ""}${attrs}>`;
-	        let result;
-	        if (voidTags.has(tag)) {
-	            result = open;
-	        }
-	        else {
-	            const close = `</${tag}>`;
-	            const contents = "innerHTML" in props ? props["innerHTML"] : join(children);
-	            result = `${open}${contents}${close}`;
-	        }
-	        node.value = result;
-	    },
-	};
-	class HTMLRenderer extends Renderer {
-	    constructor() {
-	        super(impl);
-	    }
-	}
+	const voidTags = new Set([
+	    "area",
+	    "base",
+	    "br",
+	    "col",
+	    "command",
+	    "embed",
+	    "hr",
+	    "img",
+	    "input",
+	    "keygen",
+	    "link",
+	    "meta",
+	    "param",
+	    "source",
+	    "track",
+	    "wbr",
+	]);
+	function escape(text) {
+	    return text.replace(/[&<>"']/g, (match) => {
+	        switch (match) {
+	            case "&":
+	                return "&amp;";
+	            case "<":
+	                return "&lt;";
+	            case ">":
+	                return "&gt;";
+	            case '"':
+	                return "&quot;";
+	            case "'":
+	                return "&#039;";
+	            default:
+	                return "";
+	        }
+	    });
+	}
+	function printStyleObject(style) {
+	    const cssStrings = [];
+	    for (const [name, value] of Object.entries(style)) {
+	        if (value != null) {
+	            cssStrings.push(`${name}:${value};`);
+	        }
+	    }
+	    return cssStrings.join("");
+	}
+	function printAttrs(props) {
+	    const attrs = [];
+	    for (let [name, value] of Object.entries(props)) {
+	        // TODO: Because printAttrs is called in arrange, special props are not filtered out.
+	        // This should be handled by the core library.
+	        if (name === "children" ||
+	            name === "innerHTML" ||
+	            name === "key" ||
+	            name === "ref" ||
+	            name === "copy" ||
+	            name.startsWith("prop:") ||
+	            // TODO: Remove deprecated special props
+	            name === "crank-key" ||
+	            name === "crank-ref" ||
+	            name === "crank-static" ||
+	            name === "c-key" ||
+	            name === "c-ref" ||
+	            name === "c-static" ||
+	            name === "$key" ||
+	            name === "$ref" ||
+	            name === "$static") {
+	            continue;
+	        }
+	        else if (name === "style") {
+	            if (typeof value === "string") {
+	                attrs.push(`style="${escape(value)}"`);
+	            }
+	            else if (typeof value === "object") {
+	                attrs.push(`style="${escape(printStyleObject(value))}"`);
+	            }
+	        }
+	        else if (name === "className") {
+	            if ("class" in props || typeof value !== "string") {
+	                continue;
+	            }
+	            attrs.push(`class="${escape(value)}"`);
+	        }
+	        else {
+	            if (name.startsWith("attr:")) {
+	                name = name.slice("attr:".length);
+	            }
+	            if (typeof value === "string") {
+	                attrs.push(`${escape(name)}="${escape(value)}"`);
+	            }
+	            else if (typeof value === "number") {
+	                attrs.push(`${escape(name)}="${value}"`);
+	            }
+	            else if (value === true) {
+	                attrs.push(`${escape(name)}`);
+	            }
+	        }
+	    }
+	    return attrs.join(" ");
+	}
+	function join(children) {
+	    let result = "";
+	    for (let i = 0; i < children.length; i++) {
+	        const child = children[i];
+	        result += typeof child === "string" ? child : child.value;
+	    }
+	    return result;
+	}
+	const impl = {
+	    create() {
+	        return { value: "" };
+	    },
+	    text(text) {
+	        return escape(text);
+	    },
+	    read(value) {
+	        if (Array.isArray(value)) {
+	            return join(value);
+	        }
+	        else if (typeof value === "undefined") {
+	            return "";
+	        }
+	        else if (typeof value === "string") {
+	            return value;
+	        }
+	        else {
+	            return value.value;
+	        }
+	    },
+	    arrange(tag, node, props, children) {
+	        if (tag === Portal) {
+	            return;
+	        }
+	        else if (typeof tag !== "string") {
+	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	        }
+	        const attrs = printAttrs(props);
+	        const open = `<${tag}${attrs.length ? " " : ""}${attrs}>`;
+	        let result;
+	        if (voidTags.has(tag)) {
+	            result = open;
+	        }
+	        else {
+	            const close = `</${tag}>`;
+	            const contents = "innerHTML" in props ? props["innerHTML"] : join(children);
+	            result = `${open}${contents}${close}`;
+	        }
+	        node.value = result;
+	    },
+	};
+	class HTMLRenderer extends Renderer {
+	    constructor() {
+	        super(impl);
+	    }
+	}
 	const renderer = new HTMLRenderer();
 
 	var html = /*#__PURE__*/Object.freeze({