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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:25
- Comments:5 (2 by maintainers)
I don’t think most people would even notice unless already know in detail how React elements work
I would just enforce the use of
children
and encourage people to do this: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 achildren
. Maybe we could inject bothrender
andchildren
? Or just enforce thechildren
usage (which I personally prefer)? I don’t know if it would come to a case where it would become a problemName 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.