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

package/umd.js

@@ -737,12 +737,6 @@
 	 * resumeCtxIterator function.
 	 */
 	const PropsAvailable = 1 << 4;
-	/**
-	 * A flag which is set when a generator components returns, i.e. the done
-	 * property on the iteration is true. Generator components will stick to their
-	 * last rendered value and ignore further updates.
-	 */
-	const IsDone = 1 << 5;
 	/**
 	 * A flag which is set when a component errors.
 	 *
@@ -786,7 +780,7 @@
 	class ContextImpl {
 	    constructor(renderer, root, host, parent, scope, ret) {
 	        this.f = 0;
-	        this.ctx = new Context(this);
+	        this.owner = new Context(this);
 	        this.renderer = renderer;
 	        this.root = root;
 	        this.host = host;
@@ -843,65 +837,65 @@
 	        return this[_ContextImpl].renderer.read(getValue(this[_ContextImpl].ret));
 	    }
 	    *[Symbol.iterator]() {
-	        const impl = this[_ContextImpl];
-	        if (impl.f & IsAsyncGen) {
+	        const ctx = this[_ContextImpl];
+	        if (ctx.f & IsAsyncGen) {
 	            throw new Error("Use for await…of in async generator components");
 	        }
 	        try {
-	            impl.f |= IsInRenderLoop;
-	            while (!(impl.f & IsUnmounted)) {
-	                if (impl.f & NeedsToYield) {
+	            ctx.f |= IsInRenderLoop;
+	            while (!(ctx.f & IsUnmounted)) {
+	                if (ctx.f & NeedsToYield) {
 	                    throw new Error("Context iterated twice without a yield");
 	                }
 	                else {
-	                    impl.f |= NeedsToYield;
+	                    ctx.f |= NeedsToYield;
 	                }
-	                yield impl.ret.el.props;
+	                yield ctx.ret.el.props;
 	            }
 	        }
 	        finally {
-	            impl.f &= ~IsInRenderLoop;
+	            ctx.f &= ~IsInRenderLoop;
 	        }
 	    }
 	    async *[Symbol.asyncIterator]() {
-	        const impl = this[_ContextImpl];
-	        if (impl.f & IsSyncGen) {
+	        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
-	            impl.f |= IsInRenderLoop;
-	            while (!(impl.f & IsUnmounted)) {
-	                if (impl.f & NeedsToYield) {
+	            ctx.f |= IsInRenderLoop;
+	            while (!(ctx.f & IsUnmounted)) {
+	                if (ctx.f & NeedsToYield) {
 	                    throw new Error("Context iterated twice without a yield");
 	                }
 	                else {
-	                    impl.f |= NeedsToYield;
+	                    ctx.f |= NeedsToYield;
 	                }
-	                if (impl.f & PropsAvailable) {
-	                    impl.f &= ~PropsAvailable;
-	                    yield impl.ret.el.props;
+	                if (ctx.f & PropsAvailable) {
+	                    ctx.f &= ~PropsAvailable;
+	                    yield ctx.ret.el.props;
 	                }
 	                else {
-	                    const props = await new Promise((resolve) => (impl.onProps = resolve));
-	                    if (impl.f & IsUnmounted) {
+	                    const props = await new Promise((resolve) => (ctx.onProps = resolve));
+	                    if (ctx.f & IsUnmounted) {
 	                        break;
 	                    }
 	                    yield props;
 	                }
-	                if (impl.onPropsRequested) {
-	                    impl.onPropsRequested();
-	                    impl.onPropsRequested = undefined;
+	                if (ctx.onPropsRequested) {
+	                    ctx.onPropsRequested();
+	                    ctx.onPropsRequested = undefined;
 	                }
 	            }
 	        }
 	        finally {
-	            impl.f &= ~IsInRenderLoop;
-	            if (impl.onPropsRequested) {
-	                impl.onPropsRequested();
-	                impl.onPropsRequested = undefined;
+	            ctx.f &= ~IsInRenderLoop;
+	            if (ctx.onPropsRequested) {
+	                ctx.onPropsRequested();
+	                ctx.onPropsRequested = undefined;
 	            }
 	        }
 	    }
@@ -918,31 +912,31 @@
 	     * async iterator to suspend.
 	     */
 	    refresh() {
-	        const impl = this[_ContextImpl];
-	        if (impl.f & IsUnmounted) {
+	        const ctx = this[_ContextImpl];
+	        if (ctx.f & IsUnmounted) {
 	            console.error("Component is unmounted");
-	            return impl.renderer.read(undefined);
+	            return ctx.renderer.read(undefined);
 	        }
-	        else if (impl.f & IsSyncExecuting) {
+	        else if (ctx.f & IsSyncExecuting) {
 	            console.error("Component is already executing");
 	            return this.value;
 	        }
-	        const value = enqueueComponentRun(impl);
+	        const value = enqueueComponentRun(ctx);
 	        if (isPromiseLike(value)) {
-	            return value.then((value) => impl.renderer.read(value));
+	            return value.then((value) => ctx.renderer.read(value));
 	        }
-	        return impl.renderer.read(value);
+	        return ctx.renderer.read(value);
 	    }
 	    /**
 	     * Registers a callback which fires when the component commits. Will only
 	     * fire once per callback and update.
 	     */
 	    schedule(callback) {
-	        const impl = this[_ContextImpl];
-	        let callbacks = scheduleMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let callbacks = scheduleMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            scheduleMap.set(impl, callbacks);
+	            scheduleMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
@@ -951,19 +945,19 @@
 	     * rendered into the root. Will only fire once per callback and render.
 	     */
 	    flush(callback) {
-	        const impl = this[_ContextImpl];
-	        if (typeof impl.root !== "object" || impl.root === null) {
+	        const ctx = this[_ContextImpl];
+	        if (typeof ctx.root !== "object" || ctx.root === null) {
 	            return;
 	        }
-	        let flushMap = flushMaps.get(impl.root);
+	        let flushMap = flushMaps.get(ctx.root);
 	        if (!flushMap) {
 	            flushMap = new Map();
-	            flushMaps.set(impl.root, flushMap);
+	            flushMaps.set(ctx.root, flushMap);
 	        }
-	        let callbacks = flushMap.get(impl);
+	        let callbacks = flushMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            flushMap.set(impl, callbacks);
+	            flushMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
@@ -972,45 +966,45 @@
 	     * fire once per callback.
 	     */
 	    cleanup(callback) {
-	        const impl = this[_ContextImpl];
-	        let callbacks = cleanupMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let callbacks = cleanupMap.get(ctx);
 	        if (!callbacks) {
 	            callbacks = new Set();
-	            cleanupMap.set(impl, callbacks);
+	            cleanupMap.set(ctx, callbacks);
 	        }
 	        callbacks.add(callback);
 	    }
 	    consume(key) {
-	        for (let parent = this[_ContextImpl].parent; parent !== undefined; parent = parent.parent) {
-	            const provisions = provisionMaps.get(parent);
+	        for (let ctx = this[_ContextImpl].parent; ctx !== undefined; ctx = ctx.parent) {
+	            const provisions = provisionMaps.get(ctx);
 	            if (provisions && provisions.has(key)) {
 	                return provisions.get(key);
 	            }
 	        }
 	    }
 	    provide(key, value) {
-	        const impl = this[_ContextImpl];
-	        let provisions = provisionMaps.get(impl);
+	        const ctx = this[_ContextImpl];
+	        let provisions = provisionMaps.get(ctx);
 	        if (!provisions) {
 	            provisions = new Map();
-	            provisionMaps.set(impl, provisions);
+	            provisionMaps.set(ctx, provisions);
 	        }
 	        provisions.set(key, value);
 	    }
 	    addEventListener(type, listener, options) {
-	        const impl = this[_ContextImpl];
+	        const ctx = this[_ContextImpl];
 	        let listeners;
 	        if (!isListenerOrListenerObject(listener)) {
 	            return;
 	        }
 	        else {
-	            const listeners1 = listenersMap.get(impl);
+	            const listeners1 = listenersMap.get(ctx);
 	            if (listeners1) {
 	                listeners = listeners1;
 	            }
 	            else {
 	                listeners = [];
-	                listenersMap.set(impl, listeners);
+	                listenersMap.set(ctx, listeners);
 	            }
 	        }
 	        options = normalizeListenerOptions(options);
@@ -1021,7 +1015,7 @@
 	        else {
 	            callback = listener;
 	        }
-	        const record = { type, callback, listener, options };
+	        const record = { type, listener, callback, options };
 	        if (options.once) {
 	            record.callback = function () {
 	                const i = listeners.indexOf(record);
@@ -1038,15 +1032,15 @@
 	        }
 	        listeners.push(record);
 	        // TODO: is it possible to separate out the EventTarget delegation logic
-	        for (const value of getChildValues(impl.ret)) {
+	        for (const value of getChildValues(ctx.ret)) {
 	            if (isEventTarget(value)) {
 	                value.addEventListener(record.type, record.callback, record.options);
 	            }
 	        }
 	    }
 	    removeEventListener(type, listener, options) {
-	        const impl = this[_ContextImpl];
-	        const listeners = listenersMap.get(impl);
+	        const ctx = this[_ContextImpl];
+	        const listeners = listenersMap.get(ctx);
 	        if (listeners == null || !isListenerOrListenerObject(listener)) {
 	            return;
 	        }
@@ -1060,16 +1054,16 @@
 	        const record = listeners[i];
 	        listeners.splice(i, 1);
 	        // TODO: is it possible to separate out the EventTarget delegation logic
-	        for (const value of getChildValues(impl.ret)) {
+	        for (const value of getChildValues(ctx.ret)) {
 	            if (isEventTarget(value)) {
 	                value.removeEventListener(record.type, record.callback, record.options);
 	            }
 	        }
 	    }
 	    dispatchEvent(ev) {
-	        const impl = this[_ContextImpl];
+	        const ctx = this[_ContextImpl];
 	        const path = [];
-	        for (let parent = impl.parent; parent !== undefined; parent = parent.parent) {
+	        for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
 	            path.push(parent);
 	        }
 	        // We patch the stopImmediatePropagation method because ev.cancelBubble
@@ -1081,7 +1075,7 @@
 	            immediateCancelBubble = true;
 	            return stopImmediatePropagation.call(ev);
 	        });
-	        setEventProperty(ev, "target", impl.ctx);
+	        setEventProperty(ev, "target", ctx.owner);
 	        // The only possible errors in this block are errors thrown by callbacks,
 	        // and dispatchEvent will only log these errors rather than throwing
 	        // them. Therefore, we place all code in a try block, log errors in the
@@ -1090,18 +1084,21 @@
 	        // Each early return within the try block returns true because while the
 	        // return value is overridden in the finally block, TypeScript
 	        // (justifiably) does not recognize the unsafe return statement.
-	        //
-	        // TODO: Run all callbacks even if one of them errors
 	        try {
 	            setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
 	            for (let i = path.length - 1; i >= 0; i--) {
 	                const target = path[i];
 	                const listeners = listenersMap.get(target);
 	                if (listeners) {
-	                    setEventProperty(ev, "currentTarget", target.ctx);
+	                    setEventProperty(ev, "currentTarget", target.owner);
 	                    for (const record of listeners) {
 	                        if (record.type === ev.type && record.options.capture) {
-	                            record.callback.call(target.ctx, ev);
+	                            try {
+	                                record.callback.call(target.owner, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
 	                            if (immediateCancelBubble) {
 	                                return true;
 	                            }
@@ -1113,13 +1110,25 @@
 	                }
 	            }
 	            {
-	                const listeners = listenersMap.get(impl);
+	                setEventProperty(ev, "eventPhase", AT_TARGET);
+	                setEventProperty(ev, "currentTarget", ctx.owner);
+	                const propCallback = ctx.ret.el.props["on" + ev.type];
+	                if (propCallback != null) {
+	                    propCallback(ev);
+	                    if (immediateCancelBubble || ev.cancelBubble) {
+	                        return true;
+	                    }
+	                }
+	                const listeners = listenersMap.get(ctx);
 	                if (listeners) {
-	                    setEventProperty(ev, "eventPhase", AT_TARGET);
-	                    setEventProperty(ev, "currentTarget", impl.ctx);
 	                    for (const record of listeners) {
 	                        if (record.type === ev.type) {
-	                            record.callback.call(impl.ctx, ev);
+	                            try {
+	                                record.callback.call(ctx.owner, ev);
+	                            }
+	                            catch (err) {
+	                                console.error(err);
+	                            }
 	                            if (immediateCancelBubble) {
 	                                return true;
 	                            }
@@ -1136,10 +1145,15 @@
 	                    const target = path[i];
 	                    const listeners = listenersMap.get(target);
 	                    if (listeners) {
-	                        setEventProperty(ev, "currentTarget", target.ctx);
+	                        setEventProperty(ev, "currentTarget", target.owner);
 	                        for (const record of listeners) {
 	                            if (record.type === ev.type && !record.options.capture) {
-	                                record.callback.call(target.ctx, ev);
+	                                try {
+	                                    record.callback.call(target.owner, ev);
+	                                }
+	                                catch (err) {
+	                                    console.error(err);
+	                                }
 	                                if (immediateCancelBubble) {
 	                                    return true;
 	                                }
@@ -1152,10 +1166,6 @@
 	                }
 	            }
 	        }
-	        catch (err) {
-	            // TODO: Use setTimeout to rethrow the error.
-	            console.error(err);
-	        }
 	        finally {
 	            setEventProperty(ev, "eventPhase", NONE);
 	            setEventProperty(ev, "currentTarget", null);
@@ -1189,7 +1199,12 @@
 	    return enqueueComponentRun(ctx);
 	}
 	function updateComponentChildren(ctx, children) {
-	    if (ctx.f & IsUnmounted || ctx.f & IsErrored) {
+	    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) {
@@ -1416,9 +1431,6 @@
 	 */
 	function runComponent(ctx) {
 	    const ret = ctx.ret;
-	    if (ctx.f & IsDone) {
-	        return [undefined, getValue(ret)];
-	    }
 	    const initial = !ctx.iterator;
 	    if (initial) {
 	        resumePropsIterator(ctx);
@@ -1426,7 +1438,7 @@
 	        clearEventListeners(ctx);
 	        let result;
 	        try {
-	            result = ret.el.tag.call(ctx.ctx, ret.el.props);
+	            result = ret.el.tag.call(ctx.owner, ret.el.props);
 	        }
 	        catch (err) {
 	            ctx.f |= IsErrored;
@@ -1459,7 +1471,7 @@
 	            iteration = ctx.iterator.next();
 	        }
 	        catch (err) {
-	            ctx.f |= IsDone | IsErrored;
+	            ctx.f |= IsErrored;
 	            throw err;
 	        }
 	        finally {
@@ -1479,11 +1491,10 @@
 	        if (!initial) {
 	            try {
 	                ctx.f |= IsSyncExecuting;
-	                const oldValue = ctx.renderer.read(getValue(ret));
-	                iteration = ctx.iterator.next(oldValue);
+	                iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
 	            }
 	            catch (err) {
-	                ctx.f |= IsDone | IsErrored;
+	                ctx.f |= IsErrored;
 	                throw err;
 	            }
 	            finally {
@@ -1494,7 +1505,8 @@
 	            throw new Error("Sync generator component returned an async iteration");
 	        }
 	        if (iteration.done) {
-	            ctx.f |= IsDone;
+	            ctx.f &= ~IsSyncGen;
+	            ctx.iterator = undefined;
 	        }
 	        let value;
 	        try {
@@ -1508,10 +1520,8 @@
 	        catch (err) {
 	            value = handleChildError(ctx, err);
 	        }
-	        if (isPromiseLike(value)) {
-	            return [value.catch(NOOP), value];
-	        }
-	        return [undefined, value];
+	        const block = isPromiseLike(value) ? value.catch(NOOP) : undefined;
+	        return [block, value];
 	    }
 	    else {
 	        // async generator component
@@ -1519,65 +1529,80 @@
 	    }
 	}
 	async function runAsyncGenComponent(ctx, iterationP) {
-	    do {
-	        // block and value must be assigned at the same time.
-	        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) {
-	            ctx.f |= IsDone;
-	            ctx.f |= IsErrored;
-	            onValue(Promise.reject(err));
-	            break;
-	        }
-	        finally {
-	            if (!(ctx.f & IsInRenderLoop)) {
-	                ctx.f &= ~PropsAvailable;
+	    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;
 	            }
-	        }
-	        if (ctx.f & NeedsToYield) {
-	            ctx.f &= ~NeedsToYield;
-	        }
-	        if (iteration.done) {
-	            ctx.f |= IsDone;
-	        }
-	        let value;
-	        try {
-	            value = updateComponentChildren(ctx, iteration.value);
-	            if (isPromiseLike(value)) {
-	                value = value.catch((err) => handleChildError(ctx, err));
+	            catch (err) {
+	                done = true;
+	                ctx.f |= IsErrored;
+	                onValue(Promise.reject(err));
+	                break;
 	            }
-	            onValue(value);
-	        }
-	        catch (err) {
-	            // Do we need to catch potential errors here in the case of unhandled
-	            // promise rejections?
-	            value = handleChildError(ctx, err);
-	        }
-	        // 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) {
+	            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);
@@ -1586,25 +1611,15 @@
 	                    ctx.f &= ~IsSyncExecuting;
 	                }
 	            }
-	            else {
-	                returnComponent(ctx);
-	                break;
-	            }
 	        }
-	        else if (!(ctx.f & IsDone)) {
-	            try {
-	                ctx.f |= IsSyncExecuting;
-	                iterationP = ctx.iterator.next(oldValue);
-	            }
-	            finally {
-	                ctx.f &= ~IsSyncExecuting;
-	            }
-	        }
-	    } while (!(ctx.f & IsDone));
+	    }
+	    finally {
+	        ctx.f &= ~IsAsyncGen;
+	        ctx.iterator = undefined;
+	    }
 	}
 	/**
-	 * Called to make props available to the props async iterator for async
-	 * generator components.
+	 * Called to resume the props async iterator for async generator components.
 	 */
 	function resumePropsIterator(ctx) {
 	    if (ctx.onProps) {
@@ -1628,7 +1643,7 @@
 	        }
 	    }
 	    ctx.f |= IsUnmounted;
-	    if (ctx.iterator && !(ctx.f & IsDone)) {
+	    if (ctx.iterator) {
 	        if (ctx.f & IsSyncGen) {
 	            let value;
 	            if (ctx.f & IsInRenderLoop) {
@@ -1655,17 +1670,18 @@
 	                }
 	            }
 	        }
-	        else {
-	            // async generator component
+	        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.f & IsDone) && typeof ctx.iterator.return === "function") {
-	        ctx.f |= IsSyncExecuting;
+	    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));
@@ -1675,7 +1691,6 @@
 	            ctx.f &= ~IsSyncExecuting;
 	        }
 	    }
-	    ctx.f |= IsDone;
 	}
 	/*** EVENT TARGET UTILITIES ***/
 	// EVENT PHASE CONSTANTS
@@ -1745,11 +1760,8 @@
 	    }
 	}
 	/*** ERROR HANDLING UTILITIES ***/
-	// TODO: generator components which throw errors should be recoverable
 	function handleChildError(ctx, err) {
-	    if (ctx.f & IsDone ||
-	        !ctx.iterator ||
-	        typeof ctx.iterator.throw !== "function") {
+	    if (!ctx.iterator || typeof ctx.iterator.throw !== "function") {
 	        throw err;
 	    }
 	    resumePropsIterator(ctx);
@@ -1759,7 +1771,7 @@
 	        iteration = ctx.iterator.throw(err);
 	    }
 	    catch (err) {
-	        ctx.f |= IsDone | IsErrored;
+	        ctx.f |= IsErrored;
 	        throw err;
 	    }
 	    finally {
@@ -1768,16 +1780,18 @@
 	    if (isPromiseLike(iteration)) {
 	        return iteration.then((iteration) => {
 	            if (iteration.done) {
-	                ctx.f |= IsDone;
+	                ctx.f &= ~IsAsyncGen;
+	                ctx.iterator = undefined;
 	            }
 	            return updateComponentChildren(ctx, iteration.value);
 	        }, (err) => {
-	            ctx.f |= IsDone | IsErrored;
+	            ctx.f |= IsErrored;
 	            throw err;
 	        });
 	    }
 	    if (iteration.done) {
-	        ctx.f |= IsDone;
+	        ctx.f &= ~IsSyncGen;
+	        ctx.iterator = undefined;
 	    }
 	    return updateComponentChildren(ctx, iteration.value);
 	}
@@ -1798,6 +1812,429 @@
 	    return result;
 	}
 
+	const cache = new Map();
+	function jsx(spans, ...expressions) {
+	    const key = JSON.stringify(spans.raw);
+	    let parseResult = cache.get(key);
+	    if (parseResult == null) {
+	        parseResult = parse(spans.raw);
+	        cache.set(key, parseResult);
+	    }
+	    const { element, targets } = parseResult;
+	    for (let i = 0; i < expressions.length; i++) {
+	        const exp = expressions[i];
+	        const target = targets[i];
+	        if (target) {
+	            if (target.type === "error") {
+	                throw new SyntaxError(target.message.replace("${}", formatTagForError(exp)));
+	            }
+	            target.value = exp;
+	        }
+	    }
+	    return build(element);
+	}
+	/**
+	 * Matches first significant character in children mode.
+	 *
+	 * Group 1: newline
+	 * Group 2: comment
+	 * Group 3: tag
+	 * Group 4: closing slash
+	 * Group 5: tag name
+	 *
+	 * The comment group must appear first because the tag group can potentially
+	 * match a comment, so that we can handle tag expressions where we’ve reached
+	 * the end of a span.
+	 */
+	const CHILDREN_RE = /((?:\r|\n|\r\n)\s*)|(<!--[\S\s]*?(?:-->|$))|(<\s*(\/{0,2})\s*([-_$\w]*))/g;
+	/**
+	 * Matches props after element tags.
+	 *
+	 * Group 1: tag end
+	 * Group 2: spread props
+	 * Group 3: prop name
+	 * Group 4: equals
+	 * Group 5: prop value string
+	 */
+	const PROPS_RE = /\s*(?:(\/?\s*>)|(\.\.\.\s*)|(?:([-_$\w]+)\s*(=)?\s*(?:("(\\"|[\S\s])*?(?:"|$)|'(?:\\'|[\S\s])*?(?:'|$)))?))/g;
+	const CLOSING_BRACKET_RE = />/g;
+	const CLOSING_SINGLE_QUOTE_RE = /[^\\]?'/g;
+	const CLOSING_DOUBLE_QUOTE_RE = /[^\\]?"/g;
+	const CLOSING_COMMENT_RE = /-->/g;
+	function parse(spans) {
+	    let matcher = CHILDREN_RE;
+	    const stack = [];
+	    let element = {
+	        type: "element",
+	        open: { type: "tag", slash: "", value: "" },
+	        close: null,
+	        props: [],
+	        children: [],
+	    };
+	    const targets = [];
+	    let lineStart = true;
+	    for (let s = 0; s < spans.length; s++) {
+	        const span = spans[s];
+	        // Whether or not an expression is upcoming. Used to provide better errors.
+	        const expressing = s < spans.length - 1;
+	        let expressionTarget = null;
+	        for (let i = 0, end = i; i < span.length; i = end) {
+	            matcher.lastIndex = i;
+	            const match = matcher.exec(span);
+	            end = match ? match.index + match[0].length : span.length;
+	            switch (matcher) {
+	                case CHILDREN_RE: {
+	                    if (match) {
+	                        const [, newline, comment, tag, closingSlash, tagName] = match;
+	                        if (i < match.index) {
+	                            let before = span.slice(i, match.index);
+	                            if (lineStart) {
+	                                before = before.replace(/^\s*/, "");
+	                            }
+	                            if (newline) {
+	                                if (span[Math.max(0, match.index - 1)] === "\\") {
+	                                    // We preserve whitespace before escaped newlines and have to
+	                                    // remove the backslash.
+	                                    //   jsx` \
+	                                    //   `
+	                                    before = before.slice(0, -1);
+	                                }
+	                                else {
+	                                    before = before.replace(/\s*$/, "");
+	                                }
+	                            }
+	                            if (before) {
+	                                element.children.push({ type: "value", value: before });
+	                            }
+	                        }
+	                        lineStart = !!newline;
+	                        if (comment) {
+	                            if (end === span.length) {
+	                                // Expression in a comment:
+	                                //   jsx`<!-- ${exp} -->`
+	                                matcher = CLOSING_COMMENT_RE;
+	                            }
+	                        }
+	                        else if (tag) {
+	                            if (closingSlash) {
+	                                element.close = {
+	                                    type: "tag",
+	                                    slash: closingSlash,
+	                                    value: tagName,
+	                                };
+	                                if (!stack.length) {
+	                                    if (end !== span.length) {
+	                                        throw new SyntaxError(`Unmatched closing tag "${tagName}"`);
+	                                    }
+	                                    // ERROR EXPRESSION
+	                                    expressionTarget = {
+	                                        type: "error",
+	                                        message: "Unmatched closing tag ${}",
+	                                        value: null,
+	                                    };
+	                                }
+	                                else {
+	                                    if (end === span.length) {
+	                                        // TAG EXPRESSION
+	                                        expressionTarget = element.close;
+	                                    }
+	                                    element = stack.pop();
+	                                    matcher = CLOSING_BRACKET_RE;
+	                                }
+	                            }
+	                            else {
+	                                const next = {
+	                                    type: "element",
+	                                    open: {
+	                                        type: "tag",
+	                                        slash: "",
+	                                        value: tagName,
+	                                    },
+	                                    close: null,
+	                                    props: [],
+	                                    children: [],
+	                                };
+	                                element.children.push(next);
+	                                stack.push(element);
+	                                element = next;
+	                                matcher = PROPS_RE;
+	                                if (end === span.length) {
+	                                    // TAG EXPRESSION
+	                                    expressionTarget = element.open;
+	                                }
+	                            }
+	                        }
+	                    }
+	                    else {
+	                        if (i < span.length) {
+	                            let after = span.slice(i);
+	                            if (!expressing) {
+	                                // trim trailing whitespace
+	                                after = after.replace(/\s*$/, "");
+	                            }
+	                            if (after) {
+	                                element.children.push({ type: "value", value: after });
+	                            }
+	                        }
+	                    }
+	                    break;
+	                }
+	                case PROPS_RE: {
+	                    if (match) {
+	                        const [, tagEnd, spread, name, equals, string] = match;
+	                        if (i < match.index) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+	                        }
+	                        if (tagEnd) {
+	                            if (tagEnd[0] === "/") {
+	                                // This is a self-closing element, so there will always be a
+	                                // result on the stack.
+	                                element = stack.pop();
+	                            }
+	                            matcher = CHILDREN_RE;
+	                        }
+	                        else if (spread) {
+	                            const value = {
+	                                type: "value",
+	                                value: null,
+	                            };
+	                            element.props.push(value);
+	                            // SPREAD PROP EXPRESSION
+	                            expressionTarget = value;
+	                            if (!(expressing && end === span.length)) {
+	                                throw new SyntaxError('Expression expected after "..."');
+	                            }
+	                        }
+	                        else if (name) {
+	                            let value;
+	                            if (string == null) {
+	                                if (!equals) {
+	                                    value = { type: "value", value: true };
+	                                }
+	                                else if (end < span.length) {
+	                                    throw new SyntaxError(`Unexpected text \`${span.slice(end, end + 20)}\``);
+	                                }
+	                                else {
+	                                    value = { type: "value", value: null };
+	                                    // PROP EXPRESSION
+	                                    expressionTarget = value;
+	                                    if (!(expressing && end === span.length)) {
+	                                        throw new SyntaxError(`Expression expected for prop "${name}"`);
+	                                    }
+	                                }
+	                            }
+	                            else {
+	                                const quote = string[0];
+	                                value = { type: "propString", parts: [] };
+	                                value.parts.push(string);
+	                                if (end === span.length) {
+	                                    matcher =
+	                                        quote === "'"
+	                                            ? CLOSING_SINGLE_QUOTE_RE
+	                                            : CLOSING_DOUBLE_QUOTE_RE;
+	                                }
+	                            }
+	                            const prop = {
+	                                type: "prop",
+	                                name,
+	                                value,
+	                            };
+	                            element.props.push(prop);
+	                        }
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            if (i === span.length) {
+	                                throw new SyntaxError(`Expected props but reached end of document`);
+	                            }
+	                            else {
+	                                throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+	                            }
+	                        }
+	                        // Unexpected expression errors are handled in the outer loop.
+	                        //
+	                        // This would most likely be the starting point for the logic of
+	                        // prop name expressions.
+	                        //   jsx`<p ${name}=${value}>`
+	                    }
+	                    break;
+	                }
+	                case CLOSING_BRACKET_RE: {
+	                    // We’re in a closing tag and looking for the >.
+	                    if (match) {
+	                        if (i < match.index) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+	                        }
+	                        matcher = CHILDREN_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+	                        }
+	                    }
+	                    break;
+	                }
+	                case CLOSING_SINGLE_QUOTE_RE:
+	                case CLOSING_DOUBLE_QUOTE_RE: {
+	                    const string = span.slice(i, end);
+	                    const prop = element.props[element.props.length - 1];
+	                    const propString = prop.value;
+	                    propString.parts.push(string);
+	                    if (match) {
+	                        matcher = PROPS_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError(`Missing \`${matcher === CLOSING_SINGLE_QUOTE_RE ? "'" : '"'}\``);
+	                        }
+	                    }
+	                    break;
+	                }
+	                case CLOSING_COMMENT_RE: {
+	                    if (match) {
+	                        matcher = CHILDREN_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError("Expected `-->` but reached end of template");
+	                        }
+	                    }
+	                    break;
+	                }
+	            }
+	        }
+	        if (expressing) {
+	            if (expressionTarget) {
+	                targets.push(expressionTarget);
+	                if (expressionTarget.type === "error") {
+	                    break;
+	                }
+	                continue;
+	            }
+	            switch (matcher) {
+	                case CHILDREN_RE: {
+	                    const target = { type: "value", value: null };
+	                    element.children.push(target);
+	                    targets.push(target);
+	                    break;
+	                }
+	                case CLOSING_SINGLE_QUOTE_RE:
+	                case CLOSING_DOUBLE_QUOTE_RE: {
+	                    const prop = element.props[element.props.length - 1];
+	                    const target = { type: "value", value: null };
+	                    prop.value.parts.push(target);
+	                    targets.push(target);
+	                    break;
+	                }
+	                case CLOSING_COMMENT_RE:
+	                    targets.push(null);
+	                    break;
+	                default:
+	                    throw new SyntaxError("Unexpected expression");
+	            }
+	        }
+	        else if (expressionTarget) {
+	            throw new SyntaxError("Expression expected");
+	        }
+	        lineStart = false;
+	    }
+	    if (stack.length) {
+	        const ti = targets.indexOf(element.open);
+	        if (ti === -1) {
+	            throw new SyntaxError(`Unmatched opening tag "${element.open.value}"`);
+	        }
+	        targets[ti] = {
+	            type: "error",
+	            message: "Unmatched opening tag ${}",
+	            value: null,
+	        };
+	    }
+	    if (element.children.length === 1 && element.children[0].type === "element") {
+	        element = element.children[0];
+	    }
+	    return { element, targets };
+	}
+	function build(parsed) {
+	    if (parsed.close !== null &&
+	        parsed.close.slash !== "//" &&
+	        parsed.open.value !== parsed.close.value) {
+	        throw new SyntaxError(`Unmatched closing tag ${formatTagForError(parsed.close.value)}, expected ${formatTagForError(parsed.open.value)}`);
+	    }
+	    const children = [];
+	    for (let i = 0; i < parsed.children.length; i++) {
+	        const child = parsed.children[i];
+	        children.push(child.type === "element" ? build(child) : child.value);
+	    }
+	    let props = parsed.props.length ? {} : null;
+	    for (let i = 0; i < parsed.props.length; i++) {
+	        const prop = parsed.props[i];
+	        if (prop.type === "prop") {
+	            let value;
+	            if (prop.value.type === "value") {
+	                value = prop.value.value;
+	            }
+	            else {
+	                let string = "";
+	                for (let i = 0; i < prop.value.parts.length; i++) {
+	                    const part = prop.value.parts[i];
+	                    if (typeof part === "string") {
+	                        string += part;
+	                    }
+	                    else if (typeof part.value !== "boolean" && part.value != null) {
+	                        string +=
+	                            typeof part.value === "string" ? part.value : String(part.value);
+	                    }
+	                }
+	                value = string
+	                    // remove quotes
+	                    .slice(1, -1)
+	                    // unescape things
+	                    // adapted from https://stackoverflow.com/a/57330383/1825413
+	                    .replace(/\\x[0-9a-f]{2}|\\u[0-9a-f]{4}|\\u\{[0-9a-f]+\}|\\./gi, (match) => {
+	                    switch (match[1]) {
+	                        case "b":
+	                            return "\b";
+	                        case "f":
+	                            return "\f";
+	                        case "n":
+	                            return "\n";
+	                        case "r":
+	                            return "\r";
+	                        case "t":
+	                            return "\t";
+	                        case "v":
+	                            return "\v";
+	                        case "x":
+	                            return String.fromCharCode(parseInt(match.slice(2), 16));
+	                        case "u":
+	                            if (match[2] === "{") {
+	                                return String.fromCodePoint(parseInt(match.slice(3, -1), 16));
+	                            }
+	                            return String.fromCharCode(parseInt(match.slice(2), 16));
+	                        case "0":
+	                            return "\0";
+	                        default:
+	                            return match.slice(1);
+	                    }
+	                });
+	            }
+	            props[prop.name] = value;
+	        }
+	        else {
+	            // spread prop
+	            props = { ...props, ...prop.value };
+	        }
+	    }
+	    return createElement(parsed.open.value, props, ...children);
+	}
+	function formatTagForError(tag) {
+	    return typeof tag === "function"
+	        ? tag.name + "()"
+	        : typeof tag === "string"
+	            ? `"${tag}"`
+	            : JSON.stringify(tag);
+	}
+
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 	const impl$1 = {
 	    parse(text) {
@@ -2178,6 +2615,7 @@
 	exports.dom = dom;
 	exports.html = html;
 	exports.isElement = isElement;
+	exports.jsx = jsx;
 
 	Object.defineProperty(exports, '__esModule', { value: true });