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

package/crank.js

@@ -732,12 +732,6 @@ const NeedsToYield = 1 << 3;
  * 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.
  *
@@ -781,7 +775,7 @@ const flushMaps = new WeakMap();
 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;
@@ -838,65 +832,65 @@ class Context {
         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;
             }
         }
     }
@@ -913,31 +907,31 @@ class Context {
      * 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);
     }
@@ -946,19 +940,19 @@ class Context {
      * 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);
     }
@@ -967,45 +961,45 @@ class Context {
      * 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);
@@ -1016,7 +1010,7 @@ class Context {
         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);
@@ -1033,15 +1027,15 @@ class Context {
         }
         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;
         }
@@ -1055,16 +1049,16 @@ class Context {
         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
@@ -1076,7 +1070,7 @@ class Context {
             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
@@ -1085,18 +1079,21 @@ class Context {
         // 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;
                             }
@@ -1108,13 +1105,25 @@ class Context {
                 }
             }
             {
-                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;
                             }
@@ -1131,10 +1140,15 @@ class Context {
                     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;
                                 }
@@ -1147,10 +1161,6 @@ class Context {
                 }
             }
         }
-        catch (err) {
-            // TODO: Use setTimeout to rethrow the error.
-            console.error(err);
-        }
         finally {
             setEventProperty(ev, "eventPhase", NONE);
             setEventProperty(ev, "currentTarget", null);
@@ -1184,7 +1194,12 @@ function updateComponent(renderer, root, host, parent, scope, ret, oldProps) {
     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) {
@@ -1411,9 +1426,6 @@ function advanceComponent(ctx) {
  */
 function runComponent(ctx) {
     const ret = ctx.ret;
-    if (ctx.f & IsDone) {
-        return [undefined, getValue(ret)];
-    }
     const initial = !ctx.iterator;
     if (initial) {
         resumePropsIterator(ctx);
@@ -1421,7 +1433,7 @@ function runComponent(ctx) {
         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;
@@ -1454,7 +1466,7 @@ function runComponent(ctx) {
             iteration = ctx.iterator.next();
         }
         catch (err) {
-            ctx.f |= IsDone | IsErrored;
+            ctx.f |= IsErrored;
             throw err;
         }
         finally {
@@ -1474,11 +1486,10 @@ function runComponent(ctx) {
         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 {
@@ -1489,7 +1500,8 @@ function runComponent(ctx) {
             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 {
@@ -1503,10 +1515,8 @@ function runComponent(ctx) {
         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
@@ -1514,65 +1524,80 @@ function runComponent(ctx) {
     }
 }
 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);
             }
-        }
-        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));
+            let iteration;
+            try {
+                iteration = await iterationP;
             }
-            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) {
+            catch (err) {
+                done = true;
+                ctx.f |= IsErrored;
+                onValue(Promise.reject(err));
+                break;
+            }
+            finally {
+                ctx.f &= ~NeedsToYield;
+                if (!(ctx.f & IsInRenderLoop)) {
+                    ctx.f &= ~PropsAvailable;
+                }
+            }
+            done = !!iteration.done;
+            let value;
+            try {
+                value = updateComponentChildren(ctx, iteration.value);
+                if (isPromiseLike(value)) {
+                    value = value.catch((err) => handleChildError(ctx, err));
+                }
+            }
+            catch (err) {
+                done = true;
+                // Do we need to catch potential errors here in the case of unhandled
+                // promise rejections?
+                value = handleChildError(ctx, err);
+            }
+            finally {
+                onValue(value);
+            }
+            // TODO: this can be done more elegantly
+            let oldValue;
+            if (ctx.ret.inflightValue) {
+                // The value passed back into the generator as the argument to the next
+                // method is a promise if an async generator component has async
+                // children. Sync generator components only resume when their children
+                // have fulfilled so the element’s inflight child values will never be
+                // defined.
+                oldValue = ctx.ret.inflightValue.then((value) => ctx.renderer.read(value), () => ctx.renderer.read(undefined));
+            }
+            else {
+                oldValue = ctx.renderer.read(getValue(ctx.ret));
+            }
+            if (ctx.f & IsUnmounted) {
+                if (ctx.f & IsInRenderLoop) {
+                    try {
+                        ctx.f |= IsSyncExecuting;
+                        iterationP = ctx.iterator.next(oldValue);
+                    }
+                    finally {
+                        ctx.f &= ~IsSyncExecuting;
+                    }
+                }
+                else {
+                    returnComponent(ctx);
+                    break;
+                }
+            }
+            else if (!done) {
                 try {
                     ctx.f |= IsSyncExecuting;
                     iterationP = ctx.iterator.next(oldValue);
@@ -1581,25 +1606,15 @@ async function runAsyncGenComponent(ctx, iterationP) {
                     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) {
@@ -1623,7 +1638,7 @@ function unmountComponent(ctx) {
         }
     }
     ctx.f |= IsUnmounted;
-    if (ctx.iterator && !(ctx.f & IsDone)) {
+    if (ctx.iterator) {
         if (ctx.f & IsSyncGen) {
             let value;
             if (ctx.f & IsInRenderLoop) {
@@ -1650,17 +1665,18 @@ function unmountComponent(ctx) {
                 }
             }
         }
-        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));
@@ -1670,7 +1686,6 @@ function returnComponent(ctx) {
             ctx.f &= ~IsSyncExecuting;
         }
     }
-    ctx.f |= IsDone;
 }
 /*** EVENT TARGET UTILITIES ***/
 // EVENT PHASE CONSTANTS
@@ -1740,11 +1755,8 @@ function clearEventListeners(ctx) {
     }
 }
 /*** 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);
@@ -1754,7 +1766,7 @@ function handleChildError(ctx, err) {
         iteration = ctx.iterator.throw(err);
     }
     catch (err) {
-        ctx.f |= IsDone | IsErrored;
+        ctx.f |= IsErrored;
         throw err;
     }
     finally {
@@ -1763,16 +1775,18 @@ function handleChildError(ctx, err) {
     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);
 }