question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:open
  • Created 5 years ago
  • Reactions:25
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
jamiebuildscommented, Sep 5, 2018

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/>;
  // ...
}
2reactions
fakenickelscommented, Sep 5, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

IDeaS | Revenue Management Software & Solutions
IDeaS revenue management solutions enhance your profitability using revenue science. See how we help hotels, event spaces and car parks thrive.
Read more >
IDEAS/RePEc: Economics and Finance Research
IDEAS is the largest bibliographic database dedicated to Economics and available freely on the Internet. Based on RePEc, it indexes over 4,200,000 items...
Read more >
IDEAS: Home
Transform global communities through contagious hope. ... Our vision is to see transformed lives in communities of contagious hope.
Read more >
65 Synonyms & Antonyms for IDEAS - Thesaurus.com
Find 65 ways to say IDEAS, along with antonyms, related words, and example sentences at Thesaurus.com, the world's most trusted free thesaurus.
Read more >
Ideas - The Atlantic
News analysis, essays, and reporting from the The Atlantic's journalists and contributing writers.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found