babel-plugin-import-customization v1.0.4

babel-plugin-import-customization

This plugin provides the ability to customize importing files by file name suffix, this plugin can also be used for React-Native.
This plugin allows you to create white label applications by allowing you to create a core app with different functionalities\configurations seprarated into dedicated files which will be replaced according to the desired app flavor.

usage in .babelrc

Option 1:
"plugins": [["import-customization", {"suffix": ["myCustomization"]}]]
Option 2:
"plugins": [["import-customization", {"env": "suffixName"}]]

Example

assuming we have the current structure:

src  
  App.js  
  SomeComponent.js  
  SomeComponent.myCustomization.js  

SomeComponent.js - Original Component

  export default class SomeComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
            Hello I am Some Component
        </Text>
      </View>
    );
  }

SomeComponent.myCustomization.js - Component Customization

  // you can inject the original component to custom component in order to extend or use composition
  import SomeComponent from './SomeComponent';
  export default class MyCustomComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
             Hello I am Some Custom Component and below is the original:
        </Text>
          <SomeComponent />
      </View>
    );
  }
}

App.js - Application

  import SomeComponent from './SomeComponent';
  render() {
    return (
      <SomeComponent />
    );
  }
}

without plugin the result would be:
Hello I am Some Component

When building with the plugin the result would be:
Hello I am Some Custom Component and below is the original:
Hello I am Some Component

File suffix configuration

There are two ways to tell the plugin which fileSuffix to take:
1. Plugin configuration
"plugins": [["import-customization", {"suffix": ["myCustomization"]}]] This will hardcode the customization key to "myCustomization".
2. Dynamically by telling the plugin at what env configuration to examine:
this configration take precedence over the one above.
"plugins": [["import-customization", {"env": "suffixName"}]] This allows you to create env variable named suffixName and it's value will be used by the plugin as the file suffixes to take.

Usage in react-native script with env configuration

I suggest to use it with cross-env module, so just "npm i cross-env" module before. and then in package.json add script

  "scripts": {
    "android:build:dev:myCustApp": "cross-env-shell APP_NAME=myCustApp \"cd android && gradlew assembleDevRelease\""
   }

If you you already start a react native packager make sure to start it again with cache-reset since webpack build is cached. to do it just run

node node_modules/react-native/local-cli/cli.js start --reset-cache

Note

I gave react example but this plugin can be used for any javascipt code which uses babel. This also support if you use require and not import