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

package/umd.js

@@ -27,7 +27,8 @@
 	            : typeof value === "string" ||
 	                typeof value[Symbol.iterator] !== "function"
 	                ? [value]
-	                : [...value];
+	                : // TODO: inference broke in TypeScript 3.9.
+	                    [...value];
 	}
 	function isIteratorLike(value) {
 	    return value != null && typeof value.next === "function";
@@ -76,8 +77,7 @@
 	/**
 	 * A special tag for injecting raw nodes or strings via a value prop.
 	 *
-	 * If the value prop is a string, Renderer.prototype.parse() will be called on
-	 * the string and the result will be set as the element’s value.
+	 * Renderer.prototype.raw() is called with the value prop.
 	 */
 	const Raw = Symbol.for("crank.Raw");
 	const ElementSymbol = Symbol.for("crank.Element");
@@ -297,10 +297,13 @@
 	    create() {
 	        throw new Error("Not implemented");
 	    },
+	    hydrate() {
+	        throw new Error("Not implemented");
+	    },
 	    scope: IDENTITY,
 	    read: IDENTITY,
-	    escape: IDENTITY,
-	    parse: IDENTITY,
+	    text: IDENTITY,
+	    raw: IDENTITY,
 	    patch: NOOP,
 	    arrange: NOOP,
 	    dispose: NOOP,
@@ -366,7 +369,31 @@
 	            }
 	        }
 	        const impl = this[_RendererImpl];
-	        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children);
+	        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children, undefined);
+	        // We return the child values of the portal because portal elements
+	        // themselves have no readable value.
+	        if (isPromiseLike(childValues)) {
+	            return childValues.then((childValues) => commitRootRender(impl, root, ctx, ret, childValues, oldProps));
+	        }
+	        return commitRootRender(impl, root, ctx, ret, childValues, oldProps);
+	    }
+	    hydrate(children, root, bridge) {
+	        const impl = this[_RendererImpl];
+	        const ctx = bridge && bridge[_ContextImpl];
+	        let ret;
+	        ret = this.cache.get(root);
+	        if (ret !== undefined) {
+	            // If there is a retainer for the root, hydration is not necessary.
+	            return this.render(children, root, bridge);
+	        }
+	        let oldProps;
+	        ret = new Retainer(createElement(Portal, { children, root }));
+	        ret.value = root;
+	        if (typeof root === "object" && root !== null && children != null) {
+	            this.cache.set(root, ret);
+	        }
+	        const hydrationData = impl.hydrate(Portal, root, {});
+	        const childValues = diffChildren(impl, root, ret, ctx, impl.scope(undefined, Portal, ret.el.props), ret, children, hydrationData);
 	        // We return the child values of the portal because portal elements
 	        // themselves have no readable value.
 	        if (isPromiseLike(childValues)) {
@@ -388,7 +415,7 @@
 	    }
 	    return renderer.read(ret.cachedChildValues);
 	}
-	function diffChildren(renderer, root, host, ctx, scope, parent, children) {
+	function diffChildren(renderer, root, host, ctx, scope, parent, children, hydrationData) {
 	    const oldRetained = wrap(parent.children);
 	    const newRetained = [];
 	    const newChildren = arrayify(children);
@@ -397,14 +424,15 @@
 	    let childrenByKey;
 	    let seenKeys;
 	    let isAsync = false;
-	    let oi = 0, oldLength = oldRetained.length;
+	    let hydrationBlock;
+	    let oi = 0;
+	    let oldLength = oldRetained.length;
 	    for (let ni = 0, newLength = newChildren.length; ni < newLength; ni++) {
-	        // We make sure we don’t access indices out of bounds to prevent
-	        // deoptimizations.
+	        // length checks to prevent index out of bounds deoptimizations.
 	        let ret = oi >= oldLength ? undefined : oldRetained[oi];
 	        let child = narrow(newChildren[ni]);
 	        {
-	            // Aligning new children with old retainers
+	            // aligning new children with old retainers
 	            let oldKey = typeof ret === "object" ? ret.el.key : undefined;
 	            let newKey = typeof child === "object" ? child.key : undefined;
 	            if (newKey !== undefined && seenKeys && seenKeys.has(newKey)) {
@@ -439,18 +467,19 @@
 	        // Updating
 	        let value;
 	        if (typeof child === "object") {
-	            if (typeof ret === "object" && child.static_) {
-	                ret.el = child;
-	                value = getInflightValue(ret);
-	            }
-	            else if (child.tag === Copy) {
+	            if (child.tag === Copy) {
 	                value = getInflightValue(ret);
 	            }
 	            else {
 	                let oldProps;
+	                let static_ = false;
 	                if (typeof ret === "object" && ret.el.tag === child.tag) {
 	                    oldProps = ret.el.props;
 	                    ret.el = child;
+	                    if (child.static_) {
+	                        value = getInflightValue(ret);
+	                        static_ = true;
+	                    }
 	                }
 	                else {
 	                    if (typeof ret === "object") {
@@ -460,17 +489,26 @@
 	                    ret = new Retainer(child);
 	                    ret.fallbackValue = fallback;
 	                }
-	                if (child.tag === Raw) {
-	                    value = updateRaw(renderer, ret, scope, oldProps);
+	                if (static_) ;
+	                else if (child.tag === Raw) {
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateRaw(renderer, ret, scope, oldProps, hydrationData))
+	                        : updateRaw(renderer, ret, scope, oldProps, hydrationData);
 	                }
 	                else if (child.tag === Fragment) {
-	                    value = updateFragment(renderer, root, host, ctx, scope, ret);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateFragment(renderer, root, host, ctx, scope, ret, hydrationData))
+	                        : updateFragment(renderer, root, host, ctx, scope, ret, hydrationData);
 	                }
 	                else if (typeof child.tag === "function") {
-	                    value = updateComponent(renderer, root, host, ctx, scope, ret, oldProps);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData))
+	                        : updateComponent(renderer, root, host, ctx, scope, ret, oldProps, hydrationData);
 	                }
 	                else {
-	                    value = updateHost(renderer, root, ctx, scope, ret, oldProps);
+	                    value = hydrationBlock
+	                        ? hydrationBlock.then(() => updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData))
+	                        : updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData);
 	                }
 	            }
 	            const ref = child.ref;
@@ -482,9 +520,14 @@
 	                        return value;
 	                    });
 	                }
+	                if (hydrationData !== undefined) {
+	                    hydrationBlock = value;
+	                }
 	            }
-	            else if (typeof ref === "function") {
-	                ref(renderer.read(value));
+	            else {
+	                if (typeof ref === "function") {
+	                    ref(renderer.read(value));
+	                }
 	            }
 	        }
 	        else {
@@ -493,7 +536,7 @@
 	                (graveyard = graveyard || []).push(ret);
 	            }
 	            if (typeof child === "string") {
-	                value = ret = renderer.escape(child, scope);
+	                value = ret = renderer.text(child, scope, hydrationData);
 	            }
 	            else {
 	                ret = undefined;
@@ -573,53 +616,64 @@
 	    }
 	    return getValue(child);
 	}
-	function updateRaw(renderer, ret, scope, oldProps) {
+	function updateRaw(renderer, ret, scope, oldProps, hydrationData) {
 	    const props = ret.el.props;
-	    if (typeof props.value === "string") {
-	        if (!oldProps || oldProps.value !== props.value) {
-	            ret.value = renderer.parse(props.value, scope);
-	        }
-	    }
-	    else {
-	        ret.value = props.value;
+	    if (!oldProps || oldProps.value !== props.value) {
+	        ret.value = renderer.raw(props.value, scope, hydrationData);
 	    }
 	    return ret.value;
 	}
-	function updateFragment(renderer, root, host, ctx, scope, ret) {
-	    const childValues = diffChildren(renderer, root, host, ctx, scope, ret, ret.el.props.children);
+	function updateFragment(renderer, root, host, ctx, scope, ret, hydrationData) {
+	    const childValues = diffChildren(renderer, root, host, ctx, scope, ret, ret.el.props.children, hydrationData);
 	    if (isPromiseLike(childValues)) {
 	        ret.inflightValue = childValues.then((childValues) => unwrap(childValues));
 	        return ret.inflightValue;
 	    }
 	    return unwrap(childValues);
 	}
-	function updateHost(renderer, root, ctx, scope, ret, oldProps) {
+	function updateHost(renderer, root, ctx, scope, ret, oldProps, hydrationData) {
 	    const el = ret.el;
 	    const tag = el.tag;
+	    let hydrationValue;
 	    if (el.tag === Portal) {
 	        root = ret.value = el.props.root;
 	    }
-	    else if (!oldProps) {
-	        // We use the truthiness of oldProps to determine if this the first render.
-	        ret.value = renderer.create(tag, el.props, scope);
+	    else {
+	        if (hydrationData !== undefined) {
+	            const value = hydrationData.children.shift();
+	            hydrationValue = value;
+	        }
 	    }
 	    scope = renderer.scope(scope, tag, el.props);
-	    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children);
+	    let childHydrationData;
+	    if (hydrationValue != null && typeof hydrationValue !== "string") {
+	        childHydrationData = renderer.hydrate(tag, hydrationValue, el.props);
+	        if (childHydrationData === undefined) {
+	            hydrationValue = undefined;
+	        }
+	    }
+	    const childValues = diffChildren(renderer, root, ret, ctx, scope, ret, ret.el.props.children, childHydrationData);
 	    if (isPromiseLike(childValues)) {
-	        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps));
+	        ret.inflightValue = childValues.then((childValues) => commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue));
 	        return ret.inflightValue;
 	    }
-	    return commitHost(renderer, scope, ret, childValues, oldProps);
+	    return commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue);
 	}
-	function commitHost(renderer, scope, ret, childValues, oldProps) {
+	function commitHost(renderer, scope, ret, childValues, oldProps, hydrationValue) {
 	    const tag = ret.el.tag;
-	    const value = ret.value;
+	    let value = hydrationValue || ret.value;
 	    let props = ret.el.props;
 	    let copied;
 	    if (tag !== Portal) {
+	        if (value == null) {
+	            // This assumes that renderer.create does not return nullish values.
+	            value = ret.value = renderer.create(tag, props, scope);
+	        }
 	        for (const propName in { ...oldProps, ...props }) {
 	            const propValue = props[propName];
 	            if (propValue === Copy) {
+	                // TODO: The Copy tag doubles as a way to skip the patching of a prop.
+	                // Not sure about this feature. Should probably be removed.
 	                (copied = copied || new Set()).add(propName);
 	            }
 	            else if (propName !== "children") {
@@ -720,23 +774,27 @@
 	 */
 	const IsSyncExecuting = 1 << 1;
 	/**
-	 * A flag which is true when the component is in the render loop.
+	 * A flag which is true when the component is in a for...of loop.
 	 */
-	const IsInRenderLoop = 1 << 2;
+	const IsInForOfLoop = 1 << 2;
+	/**
+	 * A flag which is true when the component is in a for await...of loop.
+	 */
+	const IsInForAwaitOfLoop = 1 << 3;
 	/**
 	 * A flag which is true when the component starts the render loop but has not
 	 * yielded yet.
 	 *
 	 * Used to make sure that components yield at least once per loop.
 	 */
-	const NeedsToYield = 1 << 3;
+	const NeedsToYield = 1 << 4;
 	/**
 	 * A flag used by async generator components in conjunction with the
 	 * onAvailable callback to mark whether new props can be pulled via the context
 	 * async iterator. See the Symbol.asyncIterator method and the
 	 * resumeCtxIterator function.
 	 */
-	const PropsAvailable = 1 << 4;
+	const PropsAvailable = 1 << 5;
 	/**
 	 * A flag which is set when a component errors.
 	 *
@@ -838,11 +896,8 @@
 	    }
 	    *[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;
+	            ctx.f |= IsInForOfLoop;
 	            while (!(ctx.f & IsUnmounted)) {
 	                if (ctx.f & NeedsToYield) {
 	                    throw new Error("Context iterated twice without a yield");
@@ -854,19 +909,16 @@
 	            }
 	        }
 	        finally {
-	            ctx.f &= ~IsInRenderLoop;
+	            ctx.f &= ~IsInForOfLoop;
 	        }
 	    }
 	    async *[Symbol.asyncIterator]() {
 	        const ctx = this[_ContextImpl];
 	        if (ctx.f & IsSyncGen) {
-	            throw new Error("Use for…of in sync generator components");
+	            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;
+	            ctx.f |= IsInForAwaitOfLoop;
 	            while (!(ctx.f & IsUnmounted)) {
 	                if (ctx.f & NeedsToYield) {
 	                    throw new Error("Context iterated twice without a yield");
@@ -892,7 +944,7 @@
 	            }
 	        }
 	        finally {
-	            ctx.f &= ~IsInRenderLoop;
+	            ctx.f &= ~IsInForAwaitOfLoop;
 	            if (ctx.onPropsRequested) {
 	                ctx.onPropsRequested();
 	                ctx.onPropsRequested = undefined;
@@ -1183,9 +1235,13 @@
 	    }
 	    return false;
 	}
-	function updateComponent(renderer, root, host, parent, scope, ret, oldProps) {
+	function updateComponent(renderer, root, host, parent, scope, ret, oldProps, hydrationData) {
 	    let ctx;
 	    if (oldProps) {
+	        // TODO: we should probably use the existence of ret.ctx
+	        if (ret.ctx == null) {
+	            throw new Error("Hmmm");
+	        }
 	        ctx = ret.ctx;
 	        if (ctx.f & IsSyncExecuting) {
 	            console.error("Component is already executing");
@@ -1196,9 +1252,9 @@
 	        ctx = ret.ctx = new ContextImpl(renderer, root, host, parent, scope, ret);
 	    }
 	    ctx.f |= IsUpdating;
-	    return enqueueComponentRun(ctx);
+	    return enqueueComponentRun(ctx, hydrationData);
 	}
-	function updateComponentChildren(ctx, children) {
+	function updateComponentChildren(ctx, children, hydrationData) {
 	    if (ctx.f & IsUnmounted) {
 	        return;
 	    }
@@ -1216,7 +1272,7 @@
 	        // 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));
+	        childValues = diffChildren(ctx.renderer, ctx.root, ctx.host, ctx, ctx.scope, ctx.ret, narrow(children), hydrationData);
 	    }
 	    finally {
 	        ctx.f &= ~IsSyncExecuting;
@@ -1314,37 +1370,41 @@
 	    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.
+	function enqueueComponentRun(ctx, hydrationData) {
+	    if (ctx.f & IsAsyncGen && !(ctx.f & IsInForOfLoop)) {
+	        if (hydrationData !== undefined) {
+	            throw new Error("Hydration error");
+	        }
+	        // This branch will run for non-initial renders of async generator
+	        // components when they are not in for...of loops. When in a for...of loop,
+	        // async generator components will behave normally.
 	        //
-	        // Async generator components which are in the props loop can be in one of
-	        // three states:
+	        // Async gen componennts can be in one of three states:
 	        //
 	        // 1. propsAvailable flag is true: "available"
 	        //
-	        //   The component is paused somewhere in the loop. When the component
+	        //   The component is suspended somewhere in the loop. When the component
 	        //   reaches the bottom of the loop, it will run again with the next props.
 	        //
 	        // 2. onAvailable callback is defined: "suspended"
 	        //
-	        //   The component has reached the bottom of the loop and is waiting for
-	        //   new props.
+	        //   The component has suspended at the bottom of the loop and is waiting
+	        //   for new props.
 	        //
 	        // 3. neither 1 or 2: "Running"
 	        //
-	        //   The component is paused somewhere in the loop. When the component
+	        //   The component is suspended 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
+	        // 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;
+	        // the bottom of the loop to be reached before returning the inflight
+	        // value.
+	        const isAtLoopbottom = ctx.f & IsInForAwaitOfLoop && !ctx.onProps;
 	        resumePropsIterator(ctx);
 	        if (isAtLoopbottom) {
 	            if (ctx.inflightBlock == null) {
@@ -1359,7 +1419,7 @@
 	    }
 	    else if (!ctx.inflightBlock) {
 	        try {
-	            const [block, value] = runComponent(ctx);
+	            const [block, value] = runComponent(ctx, hydrationData);
 	            if (block) {
 	                ctx.inflightBlock = block
 	                    // TODO: there is some fuckery going on here related to async
@@ -1379,8 +1439,11 @@
 	        }
 	    }
 	    else if (!ctx.enqueuedBlock) {
+	        if (hydrationData !== undefined) {
+	            throw new Error("Hydration error");
+	        }
 	        // We need to assign enqueuedBlock and enqueuedValue synchronously, hence
-	        // the Promise constructor call.
+	        // the Promise constructor call here.
 	        let resolveEnqueuedBlock;
 	        ctx.enqueuedBlock = new Promise((resolve) => (resolveEnqueuedBlock = resolve));
 	        ctx.enqueuedValue = ctx.inflightBlock.then(() => {
@@ -1403,7 +1466,7 @@
 	}
 	/** Called when the inflight block promise settles. */
 	function advanceComponent(ctx) {
-	    if (ctx.f & IsAsyncGen) {
+	    if (ctx.f & IsAsyncGen && !(ctx.f & IsInForOfLoop)) {
 	        return;
 	    }
 	    ctx.inflightBlock = ctx.enqueuedBlock;
@@ -1429,7 +1492,7 @@
 	 * - Sync generator components block while any children are executing, because
 	 * they are expected to only resume when they’ve actually rendered.
 	 */
-	function runComponent(ctx) {
+	function runComponent(ctx, hydrationData) {
 	    const ret = ctx.ret;
 	    const initial = !ctx.iterator;
 	    if (initial) {
@@ -1453,7 +1516,7 @@
 	        else if (isPromiseLike(result)) {
 	            // async function component
 	            const result1 = result instanceof Promise ? result : Promise.resolve(result);
-	            const value = result1.then((result) => updateComponentChildren(ctx, result), (err) => {
+	            const value = result1.then((result) => updateComponentChildren(ctx, result, hydrationData), (err) => {
 	                ctx.f |= IsErrored;
 	                throw err;
 	            });
@@ -1461,9 +1524,15 @@
 	        }
 	        else {
 	            // sync function component
-	            return [undefined, updateComponentChildren(ctx, result)];
+	            return [
+	                undefined,
+	                updateComponentChildren(ctx, result, hydrationData),
+	            ];
 	        }
 	    }
+	    else if (hydrationData !== undefined) {
+	        throw new Error("Hydration error");
+	    }
 	    let iteration;
 	    if (initial) {
 	        try {
@@ -1479,15 +1548,14 @@
 	        }
 	        if (isPromiseLike(iteration)) {
 	            ctx.f |= IsAsyncGen;
-	            runAsyncGenComponent(ctx, iteration);
 	        }
 	        else {
 	            ctx.f |= IsSyncGen;
 	        }
 	    }
 	    if (ctx.f & IsSyncGen) {
-	        // sync generator component
 	        ctx.f &= ~NeedsToYield;
+	        // sync generator component
 	        if (!initial) {
 	            try {
 	                ctx.f |= IsSyncExecuting;
@@ -1502,7 +1570,7 @@
 	            }
 	        }
 	        if (isPromiseLike(iteration)) {
-	            throw new Error("Sync generator component returned an async iteration");
+	            throw new Error("Mixed generator component");
 	        }
 	        if (iteration.done) {
 	            ctx.f &= ~IsSyncGen;
@@ -1512,7 +1580,7 @@
 	        try {
 	            value = updateComponentChildren(ctx, 
 	            // Children can be void so we eliminate that here
-	            iteration.value);
+	            iteration.value, hydrationData);
 	            if (isPromiseLike(value)) {
 	                value = value.catch((err) => handleChildError(ctx, err));
 	            }
@@ -1523,15 +1591,63 @@
 	        const block = isPromiseLike(value) ? value.catch(NOOP) : undefined;
 	        return [block, value];
 	    }
+	    else if (ctx.f & IsInForOfLoop) {
+	        // TODO: does this need to be done async?
+	        ctx.f &= ~NeedsToYield;
+	        // we are in a for...of loop for async generator
+	        if (!initial) {
+	            try {
+	                ctx.f |= IsSyncExecuting;
+	                iteration = ctx.iterator.next(ctx.renderer.read(getValue(ret)));
+	            }
+	            catch (err) {
+	                ctx.f |= IsErrored;
+	                throw err;
+	            }
+	            finally {
+	                ctx.f &= ~IsSyncExecuting;
+	            }
+	        }
+	        if (!isPromiseLike(iteration)) {
+	            throw new Error("Mixed generator component");
+	        }
+	        const block = iteration.catch(NOOP);
+	        const value = iteration.then((iteration) => {
+	            let value;
+	            if (!(ctx.f & IsInForOfLoop)) {
+	                runAsyncGenComponent(ctx, Promise.resolve(iteration), hydrationData);
+	            }
+	            try {
+	                value = updateComponentChildren(ctx, 
+	                // Children can be void so we eliminate that here
+	                iteration.value, hydrationData);
+	                if (isPromiseLike(value)) {
+	                    value = value.catch((err) => handleChildError(ctx, err));
+	                }
+	            }
+	            catch (err) {
+	                value = handleChildError(ctx, err);
+	            }
+	            return value;
+	        }, (err) => {
+	            ctx.f |= IsErrored;
+	            throw err;
+	        });
+	        return [block, value];
+	    }
 	    else {
+	        runAsyncGenComponent(ctx, iteration, hydrationData);
 	        // async generator component
-	        return [undefined, ctx.inflightValue];
+	        return [ctx.inflightBlock, ctx.inflightValue];
 	    }
 	}
-	async function runAsyncGenComponent(ctx, iterationP) {
+	async function runAsyncGenComponent(ctx, iterationP, hydrationData) {
 	    let done = false;
 	    try {
 	        while (!done) {
+	            if (ctx.f & IsInForOfLoop) {
+	                break;
+	            }
 	            // inflightValue must be set synchronously.
 	            let onValue;
 	            ctx.inflightValue = new Promise((resolve) => (onValue = resolve));
@@ -1553,20 +1669,20 @@
 	            }
 	            finally {
 	                ctx.f &= ~NeedsToYield;
-	                if (!(ctx.f & IsInRenderLoop)) {
+	                if (!(ctx.f & IsInForAwaitOfLoop)) {
 	                    ctx.f &= ~PropsAvailable;
 	                }
 	            }
 	            done = !!iteration.done;
 	            let value;
 	            try {
-	                value = updateComponentChildren(ctx, iteration.value);
+	                value = updateComponentChildren(ctx, iteration.value, hydrationData);
+	                hydrationData = undefined;
 	                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);
@@ -1588,7 +1704,7 @@
 	                oldValue = ctx.renderer.read(getValue(ctx.ret));
 	            }
 	            if (ctx.f & IsUnmounted) {
-	                if (ctx.f & IsInRenderLoop) {
+	                if (ctx.f & IsInForAwaitOfLoop) {
 	                    try {
 	                        ctx.f |= IsSyncExecuting;
 	                        iterationP = ctx.iterator.next(oldValue);
@@ -1602,7 +1718,7 @@
 	                    break;
 	                }
 	            }
-	            else if (!done) {
+	            else if (!done && !(ctx.f & IsInForOfLoop)) {
 	                try {
 	                    ctx.f |= IsSyncExecuting;
 	                    iterationP = ctx.iterator.next(oldValue);
@@ -1614,8 +1730,10 @@
 	        }
 	    }
 	    finally {
-	        ctx.f &= ~IsAsyncGen;
-	        ctx.iterator = undefined;
+	        if (done) {
+	            ctx.f &= ~IsAsyncGen;
+	            ctx.iterator = undefined;
+	        }
 	    }
 	}
 	/**
@@ -1646,12 +1764,12 @@
 	    if (ctx.iterator) {
 	        if (ctx.f & IsSyncGen) {
 	            let value;
-	            if (ctx.f & IsInRenderLoop) {
+	            if (ctx.f & IsInForOfLoop) {
 	                value = enqueueComponentRun(ctx);
 	            }
 	            if (isPromiseLike(value)) {
 	                value.then(() => {
-	                    if (ctx.f & IsInRenderLoop) {
+	                    if (ctx.f & IsInForOfLoop) {
 	                        unmountComponent(ctx);
 	                    }
 	                    else {
@@ -1662,7 +1780,7 @@
 	                });
 	            }
 	            else {
-	                if (ctx.f & IsInRenderLoop) {
+	                if (ctx.f & IsInForOfLoop) {
 	                    unmountComponent(ctx);
 	                }
 	                else {
@@ -1671,9 +1789,24 @@
 	            }
 	        }
 	        else if (ctx.f & IsAsyncGen) {
-	            // The logic for unmounting async generator components is in the
-	            // runAsyncGenComponent function.
-	            resumePropsIterator(ctx);
+	            if (ctx.f & IsInForOfLoop) {
+	                const value = enqueueComponentRun(ctx);
+	                value.then(() => {
+	                    if (ctx.f & IsInForOfLoop) {
+	                        unmountComponent(ctx);
+	                    }
+	                    else {
+	                        returnComponent(ctx);
+	                    }
+	                }, (err) => {
+	                    propagateError(ctx.parent, err);
+	                });
+	            }
+	            else {
+	                // The logic for unmounting async generator components is in the
+	                // runAsyncGenComponent function.
+	                resumePropsIterator(ctx);
+	            }
 	        }
 	    }
 	}
@@ -1791,6 +1924,7 @@
 	    }
 	    if (iteration.done) {
 	        ctx.f &= ~IsSyncGen;
+	        ctx.f &= ~IsAsyncGen;
 	        ctx.iterator = undefined;
 	    }
 	    return updateComponentChildren(ctx, iteration.value);
@@ -1812,469 +1946,60 @@
 	    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) {
-	        if (typeof document.createRange === "function") {
-	            const fragment = document.createRange().createContextualFragment(text);
-	            return Array.from(fragment.childNodes);
-	        }
-	        else {
-	            const childNodes = new DOMParser().parseFromString(text, "text/html").body
-	                .childNodes;
-	            return Array.from(childNodes);
-	        }
-	    },
-	    scope(scope, tag) {
+	    scope(xmlns, tag) {
 	        // TODO: Should we handle xmlns???
 	        switch (tag) {
 	            case Portal:
 	            case "foreignObject":
-	                return undefined;
+	                xmlns = undefined;
+	                break;
 	            case "svg":
-	                return SVG_NAMESPACE;
-	            default:
-	                return scope;
+	                xmlns = SVG_NAMESPACE;
+	                break;
 	        }
+	        return xmlns;
 	    },
-	    create(tag, _props, ns) {
+	    create(tag, _props, xmlns) {
 	        if (typeof tag !== "string") {
 	            throw new Error(`Unknown tag: ${tag.toString()}`);
 	        }
 	        else if (tag.toLowerCase() === "svg") {
-	            ns = SVG_NAMESPACE;
+	            xmlns = SVG_NAMESPACE;
 	        }
-	        return ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+	        return xmlns
+	            ? document.createElementNS(xmlns, tag)
+	            : document.createElement(tag);
+	    },
+	    hydrate(tag, node, props) {
+	        if (typeof tag !== "string" && tag !== Portal) {
+	            throw new Error(`Unknown tag: ${tag.toString()}`);
+	        }
+	        if (typeof tag === "string" &&
+	            tag.toUpperCase() !== node.tagName) {
+	            console.error(`Expected <${tag}> while hydrating but found:`, node);
+	            return undefined;
+	        }
+	        const children = [];
+	        for (let i = 0; i < node.childNodes.length; i++) {
+	            const child = node.childNodes[i];
+	            if (child.nodeType === Node.TEXT_NODE) {
+	                children.push(child.data);
+	            }
+	            else if (child.nodeType === Node.ELEMENT_NODE) {
+	                children.push(child);
+	            }
+	        }
+	        // TODO: extract props from nodes
+	        return { props, children };
 	    },
 	    patch(_tag, 
 	    // TODO: Why does this assignment work?
 	    node, name, 
 	    // TODO: Stricter typings?
-	    value, oldValue, scope) {
-	        const isSVG = scope === SVG_NAMESPACE;
+	    value, oldValue, xmlns) {
+	        const isSVG = xmlns === SVG_NAMESPACE;
 	        switch (name) {
 	            case "style": {
 	                const style = node.style;
@@ -2350,7 +2075,9 @@
 	                    const descriptor = Object.getOwnPropertyDescriptor(obj, name);
 	                    if (descriptor != null &&
 	                        (descriptor.writable === true || descriptor.set !== undefined)) {
-	                        node[name] = value;
+	                        if (node[name] !== value) {
+	                            node[name] = value;
+	                        }
 	                        return;
 	                    }
 	                    // if the property wasn't writable, fall through to the code below
@@ -2437,24 +2164,86 @@
 	            }
 	        }
 	    },
+	    text(text, _scope, hydrationData) {
+	        if (hydrationData != null) {
+	            let value = hydrationData.children.shift();
+	            if (typeof value !== "string" || !value.startsWith(text)) {
+	                console.error(`Expected "${text}" while hydrating but found:`, value);
+	            }
+	            else if (text.length < value.length) {
+	                value = value.slice(text.length);
+	                hydrationData.children.unshift(value);
+	            }
+	        }
+	        return text;
+	    },
+	    raw(value, xmlns, hydrationData) {
+	        let result;
+	        if (typeof value === "string") {
+	            const el = xmlns == null
+	                ? document.createElement("div")
+	                : document.createElementNS(xmlns, "svg");
+	            el.innerHTML = value;
+	            if (el.childNodes.length === 0) {
+	                result = undefined;
+	            }
+	            else if (el.childNodes.length === 1) {
+	                result = el.childNodes[0];
+	            }
+	            else {
+	                result = Array.from(el.childNodes);
+	            }
+	        }
+	        else {
+	            result = value;
+	        }
+	        if (hydrationData != null) {
+	            // TODO: maybe we should warn on incorrect values
+	            if (Array.isArray(result)) {
+	                for (let i = 0; i < result.length; i++) {
+	                    const node = result[i];
+	                    if (typeof node !== "string" &&
+	                        (node.nodeType === Node.ELEMENT_NODE ||
+	                            node.nodeType === Node.TEXT_NODE)) {
+	                        hydrationData.children.shift();
+	                    }
+	                }
+	            }
+	            else if (result != null && typeof result !== "string") {
+	                if (result.nodeType === Node.ELEMENT_NODE ||
+	                    result.nodeType === Node.TEXT_NODE) {
+	                    hydrationData.children.shift();
+	                }
+	            }
+	        }
+	        return result;
+	    },
 	};
 	class DOMRenderer extends Renderer {
 	    constructor() {
 	        super(impl$1);
 	    }
 	    render(children, root, ctx) {
-	        if (root == null || typeof root.nodeType !== "number") {
-	            throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
-	        }
+	        validateRoot(root);
 	        return super.render(children, root, ctx);
 	    }
+	    hydrate(children, root, ctx) {
+	        validateRoot(root);
+	        return super.hydrate(children, root, ctx);
+	    }
+	}
+	function validateRoot(root) {
+	    if (root === null ||
+	        (typeof root === "object" && typeof root.nodeType !== "number")) {
+	        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
+	    }
 	}
 	const renderer$1 = new DOMRenderer();
 
 	var dom = /*#__PURE__*/Object.freeze({
 		__proto__: null,
-		impl: impl$1,
 		DOMRenderer: DOMRenderer,
+		impl: impl$1,
 		renderer: renderer$1
 	});
 
@@ -2551,7 +2340,7 @@
 	    create() {
 	        return { value: "" };
 	    },
-	    escape(text) {
+	    text(text) {
 	        return escape(text);
 	    },
 	    read(value) {
@@ -2598,8 +2387,8 @@
 
 	var html = /*#__PURE__*/Object.freeze({
 		__proto__: null,
-		impl: impl,
 		HTMLRenderer: HTMLRenderer,
+		impl: impl,
 		renderer: renderer
 	});
 
@@ -2615,9 +2404,6 @@
 	exports.dom = dom;
 	exports.html = html;
 	exports.isElement = isElement;
-	exports.jsx = jsx;
-
-	Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=umd.js.map