sibs-projects / codemod-rn24-to-rn25 Goto Github PK

A simple codemod to handle the new import style on RN25

JavaScript 100.00%

codemod-rn24-to-rn25's Introduction

README

Why this transform is necessary?

Until React Native 24, you import React from 'react-native' package, but this will change in RN 25, you will need to import React from 'react', and also all the other React exports like Component, PropTypes, Children and so on. You probably have many files that does this, so I've created a codemod to save you a bunch of time

How to use this

Install jscodeshift
Download this transform
Navigate to the directory
Run the transform

# 1
npm install -g jscodeshift

# 2, 3
git clone https://github.com/sibeliusseraphini/codemod-RN24-to-RN25.git && cd codemod-RN24-to-RN25

# 4.
jscodeshift PATH_TO_FILES

Example

import React, {
  Component,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  TextInput,
  PropTypes,
} from 'react-native';
import NavigationBar from 'react-native-navbar';


class LoginScreen extends Component {
  render() {
    return (
      <View>
        <NavigationBar
          tintColor="#ADF8D1"
        />
      </View>
    );
  }
}

Will be transformed to:

import React, {Component, PropTypes} from "react";
import {View, Text, StyleSheet, TouchableHighlight, TextInput} from "react-native";
import NavigationBar from 'react-native-navbar';

class LoginScreen extends Component {
  render() {
    return (
      <View>
        <NavigationBar
          tintColor="#ADF8D1"
        />
      </View>
    );
  }
}

Recast Options

Options to recast's printer can be provided through the printOptions command line argument. See the full list of options here.

jscodeshift PATH_TO_FILES --printOptions='{"quote":"double"}'

codemod-rn24-to-rn25's People

Contributors

Stargazers

Watchers

Forkers

alinz almost colinterface reergymerej quentinyang gerard0315 jedt clycheng2015 wuxieken pedramsaleh

codemod-rn24-to-rn25's Issues

Add support to require expression

This codemod needs do handle this expression:

var React = require('react-native')

use require import does not work

hi, how to handle the following situation?
the code

var React = require('react');
var { StyleSheet }= React;

Expect Result：

var React = require('react');
var { StyleSheet }= require('react-native');

Running this codemod got rid of all of my @providesModule pragmas

An example of a typical module in my codebase:

'use strict';

/*
 * @providesModule GenericToast
 */

import React, {
  Platform,
  NativeModules,
} from 'react-native';

...implementation

After running the codemod:

'use strict';

import React from 'react';
import { Platform, NativeModules } from 'react-native';

... implementation

Thankfully I only have about a dozen modules that implement this pragma but it was still not great!

Add support for separate import and destructuring

example:

import React from 'react-native';
const {
  Component,
  View,
  Text,
} = React;

turns out almost half of the components in my project are written this way 😿

i imagine i'm not the only person with this problem so if i get it working i'll send a PR. this is my first time working with code transformations so it might take me a while to figure this out

unable to get single quotes using the provided example

i'm doing jscodeshift -t transform.js ../Project/src/ --printOptions='{"quote":"single"}' and i'm getting double quotes. any idea what i might be doing wrong?

thanks!

Errors when using this codemod in node_modules

Looks like some .js files use code that can't me read by this codemod

Complete error for one file
ERR node_modules/detect-newline/cli.js Transformation error
SyntaxError: 'return' outside of function (30:4)
at Parser.pp.raise (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.parseReturnStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:275:10)
at Parser.pp.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:89:19)
at Parser.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/plugins/flow.js:655:22)
at Parser.pp.parseBlock (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:442:21)
at Parser.pp.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:105:19)
at Parser.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/plugins/flow.js:655:22)
at Parser.pp.parseIfStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:268:26)
at Parser.pp.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/parser/statement.js:87:19)
at Parser.parseStatement (/usr/local/lib/node_modules/jscodeshift/node_modules/babylon/lib/plugins/flow.js:655:22)

Same error occurs in:
ERR node_modules/jade/jade.js Transformation error
ERR node_modules/detect-indent/cli.js Transformation error
ERR node_modules/beeper/index.js Transformation error
ERR node_modules/esprima-fb/test/test.js Transformation error
ERR node_modules/jade/testing/user.js Transformation error
ERR node_modules/json5/test/stringify.js Transformation error
ERR node_modules/mkdirp/bin/cmd.js Transformation error
ERR node_modules/private/test/run.js Transformation error

Support React exports of PropTypes, Children, ... etc

https://github.com/facebook/react/blob/master/src/isomorphic/React.js#L57-L88

We can also move them to React import, not just the Component?

Release on npm

it should be simply to install this codemod and run in any project

npm install -g codemod-rn24-to-rn25