andarist / babel-plugin-jsx-adopt

babel-plugin-jsx-adopt

This plugin transforms adopt calls to render props. Idea based on this gist. ⚠️ Experimental: Code you are likely to write should be transformed just fine, convoluted/edge cases might not be covered yet.

Example

Input

const Example = () => {
  const theme = adopt(<Theme />)
  const counter = adopt(<Counter />)
  const toggle = adopt(<Toggle />)

  return (
    <div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
      <span>{`Count: ${counter}`}</span>
      <button onClick={toggle}>{'Toggle'}</button>
    </div>
  )
}

Output

const Example = () => {
  return (
    <Theme>
      {theme => (
        <Counter>
          {counter => (
            <Toggle>
              {toggle => (
                <div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
                  <span>{`Count: ${counter}`}</span>
                  <button onClick={toggle}>{'Toggle'}</button>
                </div>
              )}
            </Toggle>
          )}
        </Counter>
      )}
    </Theme>
  )
}

Installation

npm install --save-dev babel-plugin-jsx-adopt

If you want to use it with babel@7, you should also install babel-core@^7.0.0-0 (just to prevent peer dep warnings).

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["babel-plugin-jsx-adopt"]
}

Via CLI

babel --plugins babel-plugin-jsx-adopt script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['babel-plugin-jsx-adopt'],
})

babel-plugin-jsx-adopt's Issues

Manipulate children universally

Not sure how to do it properly, but at the moment React.cloneElement is used and this should be:

• avoided
• or configured

Optimize simple conditionals

In some cases generator fallback could be avoided

Investigate & implement properly adoptions not assigned to LVals

Export macro?

This is a perfect use case for a babel-plugin-macros macro. Anyone interested in doing that?

Check nested adopts (can happen in props)

Multiple arguments?

Is this possible? I couldn't make it work

<Grid >
    {(item, opened, toggle) => {

a possible solution could be

const [item, opened, toggle] = adopt(<Grid />)

Fix ArrowFunctionExpression with body being an expression

const example = () => (theme = <ThemeContext.Consumer />)

this is likely broken because of

babel-plugin-jsx-adopt/src/index.js

Line 143 in c768508

const stmt = path.findParent(p => p.isStatement())

stmt will be found in outer function (the one containing example), logic should be contained to the nearest function only, which in this care is the whats inside example

Ensure babel@6 compatibility

Create exec tests, especially for generator fallback