[RFC] Enhancing plugin with transform imports functionality

[serhiipalash]

Hi @tleunen ! My name is Serhii Palash.

I would like to commit in your repository a functionality of transforms-imports plugin https://www.npmjs.com/package/babel-plugin-transform-imports. Let me explain why.

In our project we follow the principle One module - one function. We follow this rule to make code more stable, to always be sure that the specific screen depends only on what it really needs. We use named exports only for styled components, in all other places we always use export default.

The code structure looks like this

src/
  app/
    auth/
      actions/
        loginWithEmailAndPassword.js
        loginWithGoogle.js
        loginWithFacebook.js

So, the import statements in the screen component are

import loginWithEmailAndPassword from '@/app/auth/actions/loginWithEmailAndPassword'
import loginWithFacebook from '@/app/auth/actions/loginWithFacebook'

And we use your great plugin for aliasing src/ directory to @ symbol.

Many other projects follow the One module - one function rule (e.g. Material UI).

The main problem with organising code in this way is a long and verbose list of imports, especially on big screens

and the solution is to use a transform Babel plugin transpiling this

import {
  loginWithEmailAndPassword,
  loginWithFacebook
} from '@/app/auth/actions'

into this

import loginWithEmailAndPassword from '@/app/auth/actions/loginWithEmailAndPassword'
import loginWithFacebook from '@/app/auth/actions/loginWithFacebook'

and there is a nice plugin doing it - babel-plugin-transform-imports.

Still it's not enough. Even though aliases are applied and imports are transformed and the app works, the linting is broken.

The goals for linting are

1. Highlight missing real named exports

2. Highlight unresolved modules

3. Apply aliases during imports linting

4. Highlight named import when it resolves to missing module after transformation

And the problem is with last goal. When it's a transformation of imports, linting looks like this

That is because eslint-import-resolver-babel-module, which eslint-import uses for resolving modules, knows only about babel-plugin-module-resolver and doesn't know anything about babel-plugin-transform-imports. So, it applies alias then checks if src/app/auth/actions.js exists, which doesn't. It doesn't know that it should add named import at the end of path src/app/auth/actions/loginWithEmailAndPassword.js.

There are two ways how I can make it work

1. Update eslint-import-resolver-babel-module making it aware about transform-imports plugin effect.
2. Update yours babel-plugin-module-resolver making it support imports transformation and in this way making eslint-import-resolver-babel-module aware about it.

I would personally choose the option 2., making yours babel-plugin-module-resolver to support imports transformation. Your plugin has name module-resolver and not module-aliases, so it seems logical to make it responsible for imports transformation too. Plus your plugin is actually alive and the transforms-imports seems to be dead.

So, can I create a pull request with functionality accepting config like this?

[
  'module-resolver',
  {
    transforms: {
      '@/app/auth/actions': {
        transform: '@/app/auth/actions/${member}',
        preventFullImport: true,
      },
    }
    alias: {
      '@': './src',
    },
    extensions: ['.json', '.js'],
  },
],

I will also add support for regex in transform matchers.

P.S. Material UI is a very popular framework. I think people will thank you for improving its usage.