Ideas

I really like what you’ve done with regenerator, I’ve been playing around with some ideas:

https://github.com/jamiebuilds/renderator

yield <Component/>

By leveraging React.cloneElement() you can eliminate the extra functions being created in each yield:

// before:
let { time } = yield props => <Time {...props}/>;
// after:
let { time } = yield <Time/>;

Instead of switching on typeof value === 'function' you can switch on immutagen’s context.next function being non-existant. Then modify the props of the context.value with React.cloneElement

if (!context.next) {
  return context.value;
} else {
  return React.cloneElement(context.value, null, values => {
    return compose(context.next(values));
  });
}

I think it would be good to do this because it requires a lot less typing and is a lot easier to read.

displayName

You can make the returned component look better in React DevTools by providing a displayName which wraps the previous generator’s name:

RenderatorComponent.displayName = 'renderator(' + (generator.displayName || generator.name || 'anonymous') + ')';

Rename regenerator

Regenerator is already a super similar project which is in wide use. It’s actually a requirement to use @astrocoders/regenerator if you want to transform generators functions for the browser today because it’s what Babel uses.

I think this project would do better if it had a name that was more accessible. You’ve got some great words to play with too. The -rator from generator lets you do fun stuff. My first idea was “Renderator”

React RFC

I think I’m going to turn this into an RFC for React to add it directly.

function* Example() {
  let { time } = yield <Time/>;
  return (
    <p>Current time: {time.toLocaleString()}</p>
  );
}

Someone on the React team (I forget who) already brought up potentially adding a syntax like this.

[jamiebuilds]

we feared that it would add implicitness with cloneElement

I don’t think most people would even notice unless already know in detail how React elements work

Also with the function you can pass the “continuation callback” to any prop the Component expects.

I would just enforce the use of children and encourage people to do this:

function Wrapper(props) {
  return <Original {...props} render={props.children}/> 
}

function* Example() {
  let { state } = yield <Wrapper/>;
  // ...
}

[fakenickels]

Thanks for the detailed suggestion!

yield <Component /> without function

We had discussed this before here and we feared that it would add implicitness with cloneElement, though I agree it gets easier to read and helper beginners to relate it with “await”. Also with the function you can pass the “continuation callback” to any prop the Component expects. For instance, Formik gets a render prop instead of a children. Maybe we could inject both render and children? Or just enforce the children usage (which I personally prefer)? I don’t know if it would come to a case where it would become a problem

Name change

I really liked the “Renderator” name. What do you guys say @Astrocoders/core? Let’s rename it to Renderator?

[Edit]

Just looked and Formik also allow a children https://github.com/jaredpalmer/formik#children-func, so I think we are good here to enforce the continuation callback to be the children.