fela-codemods

Automatic Codemods to migrate your Fela code to newer versions using jscodeshift.

Installation

yarn add fela-codemods

You may alternatively use npm i --save fela-codemods.

Usage

First of all, we need to have jscodeshift installed globally.

yarn global add jscodeshift

You may alternatively use npm i -g jscodeshift.

Now transforming our codebase is as simple as using the jscodeshift CLI.

jscodeshift -t node_modules/fela-codemods/lib/{codemod} [path]

where codemod is the actual codemod file that should be used and path is either a single file or a directory. Note: If using Typescript of Flow, you may need to specify the parser argument, e.g.,

jscodeshift --parser=flow -t node_modules/fela-codemods/lib/{codemod} [path]

Available Codemods

The following list shows all available codemods for different version migrations. In order to use all codemods for a specific version at once, we use index as our codemod value.

Table of Contents

• v10
  • FelaComponent
  • FelaTheme
  • RendererProvider

v10

FelaComponent

| Packages | Codemod | | --- | --- | | react-felainferno-felapreact-fela | v10/FelaComponent.js |

Renames the rule prop to style and transforms all style as a function of theme to a function of props. Also transforms the render prop to either as or children respectively.

Warning: This codemod transforms inline functions passed to the style prop (theme => ... -> ({ theme }) => ...), but cannot handle non inlined functions. The following case would need to be handled manually:

<FelaComponent style={myStyle}>...</FelaComponent>

// The signature of this function is not transformed by the codemode,
// and should be manually edited to:
//   function myStyle({ theme, }) { ... }
function myStyle(theme) { return { color: theme.color, } }

const Usage = (
  <FelaComponent rule={({ color }) => ({ fontSize: 15, color })} />
)

const Usage = (
  <FelaComponent style={theme => ({ color: theme.primary })} />
)

const Usage = (
  <FelaComponent render="div">Hello</FelaComponent>
)

const Usage = (
  <FelaComponent render={({ className }) => <div className={className}>Hello</div>} />
)

const Usage = (
  <FelaComponent style={({ color }) => ({ fontSize: 15, color })} />
)

const Usage = (
  <FelaComponent style={({ theme }) => ({ color: theme.primary })} />
)

const Usage = (
  <FelaComponent as="div">Hello</FelaComponent>
)

const Usage = (
  <FelaComponent>{({ className }) => <div className={className}>Hello</div>}</FelaComponent>
)

FelaTheme

| Packages | Codemod | | --- | --- | | react-felainferno-felapreact-fela | v10/FelaTheme.js | 

Refactors using the render prop to use the children special prop instead.

const Usage = (
  <FelaTheme render={theme => <div>{theme.color.primary}</div>} />
)

const Usage = (
  <FelaTheme>{theme => <div>{theme.color.primary}</div>}</FelaTheme>
)

RendererProvider

| Packages | Codemod | | --- | --- | | react-felainferno-felapreact-fela | v10/RendererProvider.js | 

Renames all usages of Provider to RendererProvider. Also works for named imports.

import { Provider } from 'react-fela'

const Usage = (
  <Provider renderer={renderer}>
    <App />
  </Provider>
)

import { Provider as FelaProvider } from 'react-fela'

const Usage = (
  <FelaProvider renderer={renderer}>
    <App />
  </FelaProvider>
)

import { RendererProvider } from 'react-fela'

const Usage = (
  <RendererProvider renderer={renderer}>
    <App />
  </RendererProvider>
)

import { RendererProvider as FelaProvider } from 'react-fela'

const Usage = (
  <FelaProvider renderer={renderer}>
    <App />
  </FelaProvider>
)

Example

# applies all version 10 codemods to all .js files in src
jscodeshift -t node_modules/fela-codemods/lib/v10/index.js src

# applies the version 10 FelaComponent codemod to all .js files in src
jscodeshift -t node_modules/fela-codemods/lib/v10/FelaComponent.js src

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.