support possibly synchronous generators

Author: alexeyraspopov

modules/Coroutine.js

@@ -1,36 +1,26 @@
 import { Component } from 'react';
 import isEqual from 'shallowequal';
 
-export default class Coroutine extends Component {
-  static create(asyncFn) {
-    return class AsyncComponent extends Coroutine {
-      static get contextTypes() {
-        return asyncFn.contextTypes;
-      }
-
-      static get displayName() {
-        return `Coroutine(${asyncFn.name})`;
-      }
-
-      observe(props, context) {
-        return asyncFn(props, context);
-      }
+export default { create };
 
-      render() {
-        return this.state.data;
-      }
+function create(asyncFn) {
+  let displayName = asyncFn.name || asyncFn.displayName || 'Anonymous';
+  return class extends Coroutine {
+    static get displayName() {
+      return `Coroutine(${displayName})`;
     }
-  }
 
-  static get displayName() {
-    return `Coroutine(${this.name})`;
+    observe(props) {
+      return asyncFn(props);
+    }
   }
+}
 
-  constructor(props, context) {
-    super(props, context);
+class Coroutine extends Component {
+  constructor(props) {
+    super(props);
     this.state = { data: null };
     this.iterator = null;
-    this.forceUpdateHelper = this.forceUpdate.bind(this);
     this.isComponentMounted = false;
   }
 
@@ -50,21 +40,43 @@ export default class Coroutine extends Component {
         }
       });
     } else {
-      const getNextBody = () => {
-        this.iterator.next().then((data) => {
-          if (!this.isComponentMounted || this.iterator !== asyncBody) {
-            return;
+      function resolveSyncIterator(i, step, cb) {
+        if (!step.done) {
+          if (step.value && typeof step.value.then === 'function') {
+            step.value.then(data => resolveSyncIterator(i, i.next(data), cb));
+          } else {
+            resolveSyncIterator(i, i.next(step.value), cb);
           }
+        } else {
+          cb(step.value);
+        }
+      };
 
+      function resolveAsyncIterator(i, step, cb) {
+        step.then((data) => {
           if (data.value !== undefined) {
-            this.setState(() => ({ data: data.value }));
+            cb(data.value);
           }
 
-          return !data.done && getNextBody();
+          return !data.done && resolveAsyncIterator(i, i.next(), cb);
         });
       };
 
-      getNextBody();
+      function resolveIterator(iterator, instance) {
+        const step = iterator.next();
+
+        const updater = (data) => {
+          return instance.isComponentMounted && instance.setState({ data });
+        };
+
+        if (typeof step.then === 'function') {
+          resolveAsyncIterator(iterator, step, updater);
+        } else {
+          resolveSyncIterator(iterator, step, updater);
+        }
+      };
+
+      resolveIterator(this.iterator, this);
     }
   }
 
@@ -94,6 +106,6 @@ export default class Coroutine extends Component {
   }
 
   render() {
-    throw new Error('Coroutine::render should be implemented by a subclass');
+    return this.state.data;
   }
 }

tests/Coroutine.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Renderer from 'react-test-renderer';
 import Coroutine from '../modules/Coroutine';
 
-describe('Coroutine', async () => {
+describe('Coroutine', () => {
   it('should render empty body until coroutine is resolved', async () => {
     async function render() {
       return <p>test</p>;
@@ -33,4 +33,32 @@ describe('Coroutine', async () => {
     const second = await Renderer.create(<p>Done!</p>);
     expect(tree.toJSON()).toEqual(second.toJSON());
   });
+
+  it('should render generator in sync mode', () => {
+    function* render() {
+      let a = yield 1;
+      let b = yield 2;
+      return <p>{a}, {b}</p>;
+    }
+
+    let TestComponent = Coroutine.create(render);
+    let tree = Renderer.create(<TestComponent />);
+
+    let result = Renderer.create(<p>{1}, {2}</p>);
+    expect(tree.toJSON()).toEqual(result.toJSON());
+  });
+
+  it('should render generator in async mode', async () => {
+    function* render() {
+      let a = yield Promise.resolve(1);
+      let b = yield 2;
+      return <p>{a}, {b}</p>;
+    }
+
+    let TestComponent = Coroutine.create(render);
+    let tree = Renderer.create(<TestComponent />);
+
+    let result = await Renderer.create(<p>{1}, {2}</p>);
+    expect(tree.toJSON()).toEqual(result.toJSON());
+  });
 });