@b9g/crank 0.5.0-beta.4 → 0.5.0-beta.6

package/crank.js

@@ -1,1814 +1,4 @@
 /// <reference types="crank.d.ts" />
-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.
- *
- * If the value prop is a string, Renderer.prototype.parse() will be called on
- * the string and the result will be set as the element’s value.
- */
-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");
-    },
-    scope: IDENTITY,
-    read: IDENTITY,
-    escape: IDENTITY,
-    parse: 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);
-        // 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) {
-    const oldRetained = wrap(parent.children);
-    const newRetained = [];
-    const newChildren = arrayify(children);
-    const values = [];
-    let graveyard;
-    let childrenByKey;
-    let seenKeys;
-    let isAsync = false;
-    let oi = 0, oldLength = oldRetained.length;
-    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
-        // We make sure we don’t access indices out of bounds to prevent
-        // deoptimizations.
-        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 (typeof ret === "object" && child.static_) {
-                ret.el = child;
-                value = getInflightValue(ret);
-            }
-            else if (child.tag === Copy) {
-                value = getInflightValue(ret);
-            }
-            else {
-                let oldProps;
-                if (typeof ret === "object" && ret.el.tag === child.tag) {
-                    oldProps = ret.el.props;
-                    ret.el = child;
-                }
-                else {
-                    if (typeof ret === "object") {
-                        (graveyard = graveyard || []).push(ret);
-                    }
-                    const fallback = ret;
-                    ret = new Retainer(child);
-                    ret.fallbackValue = fallback;
-                }
-                if (child.tag === Raw) {
-                    value = updateRaw(renderer, ret, scope, oldProps);
-                }
-                else if (child.tag === Fragment) {
-                    value = updateFragment(renderer, root, host, ctx, scope, ret);
-                }
-                else if (typeof child.tag === "function") {
-                    value = updateComponent(renderer, root, host, ctx, scope, ret, oldProps);
-                }
-                else {
-                    value = updateHost(renderer, root, ctx, scope, ret, oldProps);
-                }
-            }
-            const ref = child.ref;
-            if (isPromiseLike(value)) {
-                isAsync = true;
-                if (typeof ref === "function") {
-                    value = value.then((value) => {
-                        ref(renderer.read(value));
-                        return 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.escape(child, scope);
-            }
-            else {
-                ret = undefined;
-            }
-        }
-        values[ni] = value;
-        newRetained[ni] = ret;
-    }
-    // cleanup remaining retainers
-    for (; oi < oldLength; oi++) {
-        const ret = oldRetained[oi];
-        if (typeof ret === "object" && typeof ret.el.key === "undefined") {
-            (graveyard = graveyard || []).push(ret);
-        }
-    }
-    if (childrenByKey !== undefined && childrenByKey.size > 0) {
-        (graveyard = graveyard || []).push(...childrenByKey.values());
-    }
-    parent.children = unwrap(newRetained);
-    if (isAsync) {
-        let childValues1 = Promise.all(values).finally(() => {
-            if (graveyard) {
-                for (let i = 0; i < graveyard.length; i++) {
-                    unmount(renderer, host, ctx, graveyard[i]);
-                }
-            }
-        });
-        let onChildValues;
-        childValues1 = Promise.race([
-            childValues1,
-            new Promise((resolve) => (onChildValues = resolve)),
-        ]);
-        if (parent.onNextValues) {
-            parent.onNextValues(childValues1);
-        }
-        parent.onNextValues = onChildValues;
-        return childValues1.then((childValues) => {
-            parent.inflightValue = parent.fallbackValue = undefined;
-            return normalize(childValues);
-        });
-    }
-    else {
-        if (graveyard) {
-            for (let i = 0; i < graveyard.length; i++) {
-                unmount(renderer, host, ctx, graveyard[i]);
-            }
-        }
-        if (parent.onNextValues) {
-            parent.onNextValues(values);
-            parent.onNextValues = undefined;
-        }
-        parent.inflightValue = parent.fallbackValue = undefined;
-        // We can assert there are no promises in the array because isAsync is false
-        return normalize(values);
-    }
-}
-function createChildrenByKey(children, offset) {
-    const childrenByKey = new Map();
-    for (let i = offset; i < children.length; i++) {
-        const child = children[i];
-        if (typeof child === "object" && typeof child.el.key !== "undefined") {
-            childrenByKey.set(child.el.key, child);
-        }
-    }
-    return childrenByKey;
-}
-function getInflightValue(child) {
-    if (typeof child !== "object") {
-        return child;
-    }
-    const ctx = typeof child.el.tag === "function" ? child.ctx : undefined;
-    if (ctx && ctx.f & IsUpdating && ctx.inflightValue) {
-        return ctx.inflightValue;
-    }
-    else if (child.inflightValue) {
-        return child.inflightValue;
-    }
-    return getValue(child);
-}
-function updateRaw(renderer, ret, scope, oldProps) {
-    const props = ret.el.props;
-    if (typeof props.value === "string") {
-        if (!oldProps || oldProps.value !== props.value) {
-            ret.value = renderer.parse(props.value, scope);
-        }
-    }
-    else {
-        ret.value = props.value;
-    }
-    return ret.value;
-}
-function updateFragment(renderer, root, host, ctx, scope, ret) {
-    const childValues = diffChildren(renderer, root, host, ctx, scope, ret, ret.el.props.children);
-    if (isPromiseLike(childValues)) {
-        ret.inflightValue = childValues.then((childValues) => unwrap(childValues));
-        return ret.inflightValue;
-    }
-    return unwrap(childValues);
-}
-function updateHost(renderer, root, ctx, scope, ret, oldProps) {
-    const el = ret.el;
-    const tag = el.tag;
-    if (el.tag === Portal) {
-        root = ret.value = el.props.root;
-    }
-    else if (!oldProps) {
-        // We use the truthiness of oldProps to determine if this the first render.
-        ret.value = renderer.create(tag, el.props, scope);
-    }
-    scope = renderer.scope(scope, tag, el.props);
-    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children);
-    if (isPromiseLike(childValues)) {
-        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps));
-        return ret.inflightValue;
-    }
-    return commitHost(renderer, scope, ret, childValues, oldProps);
-}
-function commitHost(renderer, scope, ret, childValues, oldProps) {
-    const tag = ret.el.tag;
-    const value = ret.value;
-    let props = ret.el.props;
-    let copied;
-    if (tag !== Portal) {
-        for (const propName in { ...oldProps, ...props }) {
-            const propValue = props[propName];
-            if (propValue === Copy) {
-                (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 the render loop.
- */
-const IsInRenderLoop = 1 << 2;
-/**
- * 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 << 3;
-/**
- * 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 << 4;
-/**
- * A flag which is set when a component errors.
- *
- * NOTE: This is mainly used to prevent some false positives in component
- * yields or returns undefined warnings. The reason we’re using this versus
- * IsUnmounted is a very troubling test (cascades sync generator parent and
- * sync generator child) where synchronous code causes a stack overflow error
- * in a non-deterministic way. Deeply disturbing stuff.
- */
-const IsErrored = 1 << 6;
-/**
- * A flag which is set when the component is unmounted. Unmounted components
- * are no longer in the element tree and cannot refresh or rerender.
- */
-const IsUnmounted = 1 << 7;
-/**
- * A flag which indicates that the component is a sync generator component.
- */
-const IsSyncGen = 1 << 8;
-/**
- * A flag which indicates that the component is an async generator component.
- */
-const IsAsyncGen = 1 << 9;
-/**
- * A flag which is set while schedule callbacks are called.
- */
-const IsScheduling = 1 << 10;
-/**
- * A flag which is set when a schedule callback calls refresh.
- */
-const IsSchedulingRefresh = 1 << 11;
-const provisionMaps = new WeakMap();
-const scheduleMap = new WeakMap();
-const cleanupMap = new WeakMap();
-// keys are roots
-const flushMaps = new WeakMap();
-/**
- * @internal
- * The internal class which holds context data.
- */
-class ContextImpl {
-    constructor(renderer, root, host, parent, scope, ret) {
-        this.f = 0;
-        this.owner = new Context(this);
-        this.renderer = renderer;
-        this.root = root;
-        this.host = host;
-        this.parent = parent;
-        this.scope = scope;
-        this.ret = ret;
-        this.iterator = undefined;
-        this.inflightBlock = undefined;
-        this.inflightValue = undefined;
-        this.enqueuedBlock = undefined;
-        this.enqueuedValue = undefined;
-        this.onProps = undefined;
-        this.onPropsRequested = undefined;
-    }
-}
-const _ContextImpl = Symbol.for("crank.ContextImpl");
-/**
- * A class which is instantiated and passed to every component as its this
- * value. Contexts form a tree just like elements and all components in the
- * element tree are connected via contexts. Components can use this tree to
- * communicate data upwards via events and downwards via provisions.
- *
- * @template [TProps=*] - The expected shape of the props passed to the
- * component. Used to strongly type the Context iterator methods.
- * @template [TResult=*] - The readable element value type. It is used in
- * places such as the return value of refresh and the argument passed to
- * schedule and cleanup callbacks.
- */
-class Context {
-    // TODO: If we could make the constructor function take a nicer value, it
-    // would be useful for testing purposes.
-    constructor(impl) {
-        this[_ContextImpl] = impl;
-    }
-    /**
-     * The current props of the associated element.
-     *
-     * Typically, you should read props either via the first parameter of the
-     * component or via the context iterator methods. This property is mainly for
-     * plugins or utilities which wrap contexts.
-     */
-    get props() {
-        return this[_ContextImpl].ret.el.props;
-    }
-    // TODO: Should we rename this???
-    /**
-     * The current value of the associated element.
-     *
-     * Typically, you should read values via refs, generator yield expressions,
-     * or the refresh, schedule, cleanup, or flush methods. This property is
-     * mainly for plugins or utilities which wrap contexts.
-     */
-    get value() {
-        return this[_ContextImpl].renderer.read(getValue(this[_ContextImpl].ret));
-    }
-    *[Symbol.iterator]() {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsAsyncGen) {
-            throw new Error("Use for await…of in async generator components");
-        }
-        try {
-            ctx.f |= IsInRenderLoop;
-            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 &= ~IsInRenderLoop;
-        }
-    }
-    async *[Symbol.asyncIterator]() {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsSyncGen) {
-            throw new Error("Use for…of in sync generator components");
-        }
-        try {
-            // await an empty promise to prevent the IsInRenderLoop flag from
-            // returning false positives in the case of async generator components
-            // which immediately enter the loop
-            ctx.f |= IsInRenderLoop;
-            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 &= ~IsInRenderLoop;
-            if (ctx.onPropsRequested) {
-                ctx.onPropsRequested();
-                ctx.onPropsRequested = undefined;
-            }
-        }
-    }
-    /**
-     * Re-executes a component.
-     *
-     * @returns The rendered value of the component or a promise thereof if the
-     * component or its children execute asynchronously.
-     *
-     * The refresh method works a little differently for async generator
-     * components, in that it will resume the Context’s props async iterator
-     * rather than resuming execution. This is because async generator components
-     * are perpetually resumed independent of updates, and rely on the props
-     * async iterator to suspend.
-     */
-    refresh() {
-        const ctx = this[_ContextImpl];
-        if (ctx.f & IsUnmounted) {
-            console.error("Component is unmounted");
-            return ctx.renderer.read(undefined);
-        }
-        else if (ctx.f & IsSyncExecuting) {
-            console.error("Component is already executing");
-            return this.value;
-        }
-        const value = enqueueComponentRun(ctx);
-        if (isPromiseLike(value)) {
-            return value.then((value) => ctx.renderer.read(value));
-        }
-        return ctx.renderer.read(value);
-    }
-    /**
-     * Registers a callback which fires when the component commits. Will only
-     * fire once per callback and update.
-     */
-    schedule(callback) {
-        const ctx = this[_ContextImpl];
-        let callbacks = scheduleMap.get(ctx);
-        if (!callbacks) {
-            callbacks = new Set();
-            scheduleMap.set(ctx, callbacks);
-        }
-        callbacks.add(callback);
-    }
-    /**
-     * Registers a callback which fires when the component’s children are
-     * rendered into the root. Will only fire once per callback and render.
-     */
-    flush(callback) {
-        const ctx = this[_ContextImpl];
-        if (typeof ctx.root !== "object" || ctx.root === null) {
-            return;
-        }
-        let flushMap = flushMaps.get(ctx.root);
-        if (!flushMap) {
-            flushMap = new Map();
-            flushMaps.set(ctx.root, flushMap);
-        }
-        let callbacks = flushMap.get(ctx);
-        if (!callbacks) {
-            callbacks = new Set();
-            flushMap.set(ctx, callbacks);
-        }
-        callbacks.add(callback);
-    }
-    /**
-     * Registers a callback which fires when the component unmounts. Will only
-     * fire once per callback.
-     */
-    cleanup(callback) {
-        const ctx = this[_ContextImpl];
-        let callbacks = cleanupMap.get(ctx);
-        if (!callbacks) {
-            callbacks = new Set();
-            cleanupMap.set(ctx, callbacks);
-        }
-        callbacks.add(callback);
-    }
-    consume(key) {
-        for (let ctx = this[_ContextImpl].parent; ctx !== undefined; ctx = ctx.parent) {
-            const provisions = provisionMaps.get(ctx);
-            if (provisions && provisions.has(key)) {
-                return provisions.get(key);
-            }
-        }
-    }
-    provide(key, value) {
-        const ctx = this[_ContextImpl];
-        let provisions = provisionMaps.get(ctx);
-        if (!provisions) {
-            provisions = new Map();
-            provisionMaps.set(ctx, provisions);
-        }
-        provisions.set(key, value);
-    }
-    addEventListener(type, listener, options) {
-        const ctx = this[_ContextImpl];
-        let listeners;
-        if (!isListenerOrListenerObject(listener)) {
-            return;
-        }
-        else {
-            const listeners1 = listenersMap.get(ctx);
-            if (listeners1) {
-                listeners = listeners1;
-            }
-            else {
-                listeners = [];
-                listenersMap.set(ctx, listeners);
-            }
-        }
-        options = normalizeListenerOptions(options);
-        let callback;
-        if (typeof listener === "object") {
-            callback = () => listener.handleEvent.apply(listener, arguments);
-        }
-        else {
-            callback = listener;
-        }
-        const record = { type, listener, callback, options };
-        if (options.once) {
-            record.callback = function () {
-                const i = listeners.indexOf(record);
-                if (i !== -1) {
-                    listeners.splice(i, 1);
-                }
-                return callback.apply(this, arguments);
-            };
-        }
-        if (listeners.some((record1) => record.type === record1.type &&
-            record.listener === record1.listener &&
-            !record.options.capture === !record1.options.capture)) {
-            return;
-        }
-        listeners.push(record);
-        // TODO: is it possible to separate out the EventTarget delegation logic
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                value.addEventListener(record.type, record.callback, record.options);
-            }
-        }
-    }
-    removeEventListener(type, listener, options) {
-        const ctx = this[_ContextImpl];
-        const listeners = listenersMap.get(ctx);
-        if (listeners == null || !isListenerOrListenerObject(listener)) {
-            return;
-        }
-        const options1 = normalizeListenerOptions(options);
-        const i = listeners.findIndex((record) => record.type === type &&
-            record.listener === listener &&
-            !record.options.capture === !options1.capture);
-        if (i === -1) {
-            return;
-        }
-        const record = listeners[i];
-        listeners.splice(i, 1);
-        // TODO: is it possible to separate out the EventTarget delegation logic
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                value.removeEventListener(record.type, record.callback, record.options);
-            }
-        }
-    }
-    dispatchEvent(ev) {
-        const ctx = this[_ContextImpl];
-        const path = [];
-        for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
-            path.push(parent);
-        }
-        // We patch the stopImmediatePropagation method because ev.cancelBubble
-        // only informs us if stopPropagation was called and there are no
-        // properties which inform us if stopImmediatePropagation was called.
-        let immediateCancelBubble = false;
-        const stopImmediatePropagation = ev.stopImmediatePropagation;
-        setEventProperty(ev, "stopImmediatePropagation", () => {
-            immediateCancelBubble = true;
-            return stopImmediatePropagation.call(ev);
-        });
-        setEventProperty(ev, "target", ctx.owner);
-        // The only possible errors in this block are errors thrown by callbacks,
-        // and dispatchEvent will only log these errors rather than throwing
-        // them. Therefore, we place all code in a try block, log errors in the
-        // catch block, and use an unsafe return statement in the finally block.
-        //
-        // Each early return within the try block returns true because while the
-        // return value is overridden in the finally block, TypeScript
-        // (justifiably) does not recognize the unsafe return statement.
-        try {
-            setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
-            for (let i = path.length - 1; i >= 0; i--) {
-                const target = path[i];
-                const listeners = listenersMap.get(target);
-                if (listeners) {
-                    setEventProperty(ev, "currentTarget", target.owner);
-                    for (const record of listeners) {
-                        if (record.type === ev.type && record.options.capture) {
-                            try {
-                                record.callback.call(target.owner, ev);
-                            }
-                            catch (err) {
-                                console.error(err);
-                            }
-                            if (immediateCancelBubble) {
-                                return true;
-                            }
-                        }
-                    }
-                }
-                if (ev.cancelBubble) {
-                    return true;
-                }
-            }
-            {
-                setEventProperty(ev, "eventPhase", AT_TARGET);
-                setEventProperty(ev, "currentTarget", ctx.owner);
-                const propCallback = ctx.ret.el.props["on" + ev.type];
-                if (propCallback != null) {
-                    propCallback(ev);
-                    if (immediateCancelBubble || ev.cancelBubble) {
-                        return true;
-                    }
-                }
-                const listeners = listenersMap.get(ctx);
-                if (listeners) {
-                    for (const record of listeners) {
-                        if (record.type === ev.type) {
-                            try {
-                                record.callback.call(ctx.owner, ev);
-                            }
-                            catch (err) {
-                                console.error(err);
-                            }
-                            if (immediateCancelBubble) {
-                                return true;
-                            }
-                        }
-                    }
-                    if (ev.cancelBubble) {
-                        return true;
-                    }
-                }
-            }
-            if (ev.bubbles) {
-                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
-                for (let i = 0; i < path.length; i++) {
-                    const target = path[i];
-                    const listeners = listenersMap.get(target);
-                    if (listeners) {
-                        setEventProperty(ev, "currentTarget", target.owner);
-                        for (const record of listeners) {
-                            if (record.type === ev.type && !record.options.capture) {
-                                try {
-                                    record.callback.call(target.owner, ev);
-                                }
-                                catch (err) {
-                                    console.error(err);
-                                }
-                                if (immediateCancelBubble) {
-                                    return true;
-                                }
-                            }
-                        }
-                    }
-                    if (ev.cancelBubble) {
-                        return true;
-                    }
-                }
-            }
-        }
-        finally {
-            setEventProperty(ev, "eventPhase", NONE);
-            setEventProperty(ev, "currentTarget", null);
-            // eslint-disable-next-line no-unsafe-finally
-            return !ev.defaultPrevented;
-        }
-    }
-}
-/*** PRIVATE CONTEXT FUNCTIONS ***/
-function ctxContains(parent, child) {
-    for (let current = child; current !== undefined; current = current.parent) {
-        if (current === parent) {
-            return true;
-        }
-    }
-    return false;
-}
-function updateComponent(renderer, root, host, parent, scope, ret, oldProps) {
-    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);
-}
-function updateComponentChildren(ctx, children) {
-    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));
-    }
-    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) {
-    if (ctx.f & IsAsyncGen) {
-        // This branch will only run for async generator components after the
-        // initial render.
-        //
-        // Async generator components which are in the props loop can be in one of
-        // three states:
-        //
-        // 1. propsAvailable flag is true: "available"
-        //
-        //   The component is paused 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 reached the bottom of the loop and is waiting for
-        //   new props.
-        //
-        // 3. neither 1 or 2: "Running"
-        //
-        //   The component is paused somewhere in the loop. When the component
-        //   reaches the bottom of the loop, it will suspend.
-        //
-        // By definition, 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 before returning the inflight value.
-        const isAtLoopbottom = ctx.f & IsInRenderLoop && !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);
-            if (block) {
-                ctx.inflightBlock = block
-                    // TODO: there is some fuckery going on here related to async
-                    // generator components resuming when they’re meant to be returned.
-                    .then((v) => v)
-                    .finally(() => advanceComponent(ctx));
-                // stepComponent will only return a block if the value is asynchronous
-                ctx.inflightValue = value;
-            }
-            return value;
-        }
-        catch (err) {
-            if (!(ctx.f & IsUpdating)) {
-                return propagateError(ctx.parent, err);
-            }
-            throw err;
-        }
-    }
-    else if (!ctx.enqueuedBlock) {
-        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
-        // the Promise constructor call.
-        let resolveEnqueuedBlock;
-        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
-        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
-            try {
-                const [block, value] = runComponent(ctx);
-                if (block) {
-                    resolveEnqueuedBlock(block.finally(() => advanceComponent(ctx)));
-                }
-                return value;
-            }
-            catch (err) {
-                if (!(ctx.f & IsUpdating)) {
-                    return propagateError(ctx.parent, err);
-                }
-                throw err;
-            }
-        });
-    }
-    return ctx.enqueuedValue;
-}
-/** Called when the inflight block promise settles. */
-function advanceComponent(ctx) {
-    if (ctx.f & IsAsyncGen) {
-        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) {
-    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), (err) => {
-                ctx.f |= IsErrored;
-                throw err;
-            });
-            return [result1.catch(NOOP), value];
-        }
-        else {
-            // sync function component
-            return [undefined, updateComponentChildren(ctx, result)];
-        }
-    }
-    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;
-            runAsyncGenComponent(ctx, iteration);
-        }
-        else {
-            ctx.f |= IsSyncGen;
-        }
-    }
-    if (ctx.f & IsSyncGen) {
-        // sync generator component
-        ctx.f &= ~NeedsToYield;
-        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("Sync generator component returned an async iteration");
-        }
-        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);
-            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 {
-        // async generator component
-        return [undefined, ctx.inflightValue];
-    }
-}
-async function runAsyncGenComponent(ctx, iterationP) {
-    let done = false;
-    try {
-        while (!done) {
-            // 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 & IsInRenderLoop)) {
-                    ctx.f &= ~PropsAvailable;
-                }
-            }
-            done = !!iteration.done;
-            let value;
-            try {
-                value = updateComponentChildren(ctx, iteration.value);
-                if (isPromiseLike(value)) {
-                    value = value.catch((err) => handleChildError(ctx, err));
-                }
-            }
-            catch (err) {
-                done = true;
-                // Do we need to catch potential errors here in the case of unhandled
-                // promise rejections?
-                value = handleChildError(ctx, err);
-            }
-            finally {
-                onValue(value);
-            }
-            // TODO: this can be done more elegantly
-            let oldValue;
-            if (ctx.ret.inflightValue) {
-                // The value passed back into the generator as the argument to the next
-                // method is a promise if an async generator component has async
-                // children. Sync generator components only resume when their children
-                // have fulfilled so the element’s inflight child values will never be
-                // defined.
-                oldValue = ctx.ret.inflightValue.then((value) => ctx.renderer.read(value), () => ctx.renderer.read(undefined));
-            }
-            else {
-                oldValue = ctx.renderer.read(getValue(ctx.ret));
-            }
-            if (ctx.f & IsUnmounted) {
-                if (ctx.f & IsInRenderLoop) {
-                    try {
-                        ctx.f |= IsSyncExecuting;
-                        iterationP = ctx.iterator.next(oldValue);
-                    }
-                    finally {
-                        ctx.f &= ~IsSyncExecuting;
-                    }
-                }
-                else {
-                    returnComponent(ctx);
-                    break;
-                }
-            }
-            else if (!done) {
-                try {
-                    ctx.f |= IsSyncExecuting;
-                    iterationP = ctx.iterator.next(oldValue);
-                }
-                finally {
-                    ctx.f &= ~IsSyncExecuting;
-                }
-            }
-        }
-    }
-    finally {
-        ctx.f &= ~IsAsyncGen;
-        ctx.iterator = undefined;
-    }
-}
-/**
- * Called to resume the props async iterator for async generator components.
- */
-function resumePropsIterator(ctx) {
-    if (ctx.onProps) {
-        ctx.onProps(ctx.ret.el.props);
-        ctx.onProps = undefined;
-        ctx.f &= ~PropsAvailable;
-    }
-    else {
-        ctx.f |= PropsAvailable;
-    }
-}
-// TODO: async unmounting
-function unmountComponent(ctx) {
-    clearEventListeners(ctx);
-    const callbacks = cleanupMap.get(ctx);
-    if (callbacks) {
-        cleanupMap.delete(ctx);
-        const value = ctx.renderer.read(getValue(ctx.ret));
-        for (const callback of callbacks) {
-            callback(value);
-        }
-    }
-    ctx.f |= IsUnmounted;
-    if (ctx.iterator) {
-        if (ctx.f & IsSyncGen) {
-            let value;
-            if (ctx.f & IsInRenderLoop) {
-                value = enqueueComponentRun(ctx);
-            }
-            if (isPromiseLike(value)) {
-                value.then(() => {
-                    if (ctx.f & IsInRenderLoop) {
-                        unmountComponent(ctx);
-                    }
-                    else {
-                        returnComponent(ctx);
-                    }
-                }, (err) => {
-                    propagateError(ctx.parent, err);
-                });
-            }
-            else {
-                if (ctx.f & IsInRenderLoop) {
-                    unmountComponent(ctx);
-                }
-                else {
-                    returnComponent(ctx);
-                }
-            }
-        }
-        else if (ctx.f & IsAsyncGen) {
-            // The logic for unmounting async generator components is in the
-            // runAsyncGenComponent function.
-            resumePropsIterator(ctx);
-        }
-    }
-}
-function returnComponent(ctx) {
-    resumePropsIterator(ctx);
-    if (ctx.iterator && typeof ctx.iterator.return === "function") {
-        try {
-            ctx.f |= IsSyncExecuting;
-            const iteration = ctx.iterator.return();
-            if (isPromiseLike(iteration)) {
-                iteration.catch((err) => propagateError(ctx.parent, err));
-            }
-        }
-        finally {
-            ctx.f &= ~IsSyncExecuting;
-        }
-    }
-}
-/*** EVENT TARGET UTILITIES ***/
-// EVENT PHASE CONSTANTS
-// https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
-const NONE = 0;
-const CAPTURING_PHASE = 1;
-const AT_TARGET = 2;
-const BUBBLING_PHASE = 3;
-const listenersMap = new WeakMap();
-function isListenerOrListenerObject(value) {
-    return (typeof value === "function" ||
-        (value !== null &&
-            typeof value === "object" &&
-            typeof value.handleEvent === "function"));
-}
-function normalizeListenerOptions(options) {
-    if (typeof options === "boolean") {
-        return { capture: options };
-    }
-    else if (options == null) {
-        return {};
-    }
-    return options;
-}
-function isEventTarget(value) {
-    return (value != null &&
-        typeof value.addEventListener === "function" &&
-        typeof value.removeEventListener === "function" &&
-        typeof value.dispatchEvent === "function");
-}
-function setEventProperty(ev, key, value) {
-    Object.defineProperty(ev, key, { value, writable: false, configurable: true });
-}
-// TODO: Maybe we can pass in the current context directly, rather than
-// starting from the parent?
-/**
- * A function to reconstruct an array of every listener given a context and a
- * host element.
- *
- * This function exploits the fact that contexts retain their nearest ancestor
- * host element. We can determine all the contexts which are directly listening
- * to an element by traversing up the context tree and checking that the host
- * element passed in matches the parent context’s host element.
- */
-function getListenerRecords(ctx, ret) {
-    let listeners = [];
-    while (ctx !== undefined && ctx.host === ret) {
-        const listeners1 = listenersMap.get(ctx);
-        if (listeners1) {
-            listeners = listeners.concat(listeners1);
-        }
-        ctx = ctx.parent;
-    }
-    return listeners;
-}
-function clearEventListeners(ctx) {
-    const listeners = listenersMap.get(ctx);
-    if (listeners && listeners.length) {
-        for (const value of getChildValues(ctx.ret)) {
-            if (isEventTarget(value)) {
-                for (const record of listeners) {
-                    value.removeEventListener(record.type, record.callback, record.options);
-                }
-            }
-        }
-        listeners.length = 0;
-    }
-}
-/*** ERROR HANDLING UTILITIES ***/
-function handleChildError(ctx, err) {
-    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
-        throw err;
-    }
-    resumePropsIterator(ctx);
-    let iteration;
-    try {
-        ctx.f |= IsSyncExecuting;
-        iteration = ctx.iterator.throw(err);
-    }
-    catch (err) {
-        ctx.f |= IsErrored;
-        throw err;
-    }
-    finally {
-        ctx.f &= ~IsSyncExecuting;
-    }
-    if (isPromiseLike(iteration)) {
-        return iteration.then((iteration) => {
-            if (iteration.done) {
-                ctx.f &= ~IsAsyncGen;
-                ctx.iterator = undefined;
-            }
-            return updateComponentChildren(ctx, iteration.value);
-        }, (err) => {
-            ctx.f |= IsErrored;
-            throw err;
-        });
-    }
-    if (iteration.done) {
-        ctx.f &= ~IsSyncGen;
-        ctx.iterator = undefined;
-    }
-    return updateComponentChildren(ctx, iteration.value);
-}
-function propagateError(ctx, err) {
-    if (ctx === undefined) {
-        throw err;
-    }
-    let result;
-    try {
-        result = handleChildError(ctx, err);
-    }
-    catch (err) {
-        return propagateError(ctx.parent, err);
-    }
-    if (isPromiseLike(result)) {
-        return result.catch((err) => propagateError(ctx.parent, err));
-    }
-    return result;
-}
-// Some JSX transpilation tools expect these functions to be defined on the
-// default export. Prefer named exports when importing directly.
-var crank = { createElement, Fragment };
-
-export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, crank as default, isElement };
+export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, isElement } from './core.js';
+export { jsx } from './tags.js';
 //# sourceMappingURL=crank.js.map