Tutorial: Wrapper/Use: Too Many 🤬 Imports!?

...or How to Use babel-plugin-transform-imports

If you're pulling in AsyncAF's standalone scoped packages (@async-af/map, @async-af/wrapper, etc.), strategically using AsyncAfWrapper and use to pull in only what you need, you may have ended up with something like this:

The Too Many Imports Way 🙀

// hypothetically awesome file that uses wrapper, map, filter, includes, every, indexof, some, reduce, join, and log

import AsyncAF from '@async-af/wrapper';
import mapAF from '@async-af/map';
import filterAF from '@async-af/filter';
import includesAF from '@async-af/includes';
import everyAF from '@async-af/every';
import indexOfAF from '@async-af/indexof';
import someAF from '@async-af/some';
import reduceAF from '@async-af/reduce';
import joinAF from '@async-af/join';
import logAF from '@async-af/log';

AsyncAF.use({
  // ...all the methods
});

// ...more sweet sweet code

Using another tool; however, we can condense all those damned line-taking-up imports into a single line.

How to Do It⁉️

Installation

First, install the individual AsyncAF packages as usual (npm, yarn, etc.).

npm install --save @async-af/{wrapper,map,filter,includes,every,indexof,some,reduce,join,log}

Or, if you're on Windows,

npm install --save @async-af/wrapper @async-af/map @async-af/filter @async-af/includes @async-af/every @async-af/indexof @async-af/some @async-af/reduce @async-af/join @async-af/log

Also install babel-plugin-transform-imports; this is where the magic happens.

npm install --save-dev babel-plugin-transform-imports

You can follow along in babel-plugin-transform-imports's README if your setup is a bit different. There's webpack instructions there too. For our purposes, we'll assume you're already using babel for transpiling.

.babelrc or variant

Wherever your babel configuration lives (.babelrc, etc.), add to your plugins, transform-imports and add async-af to the list of libraries to transform as follows:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    [
      "transform-imports",
      {
        "async-af": {
          "transform": "@async-af/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]
}

Note if you're using AsyncAF in production code

Don't forget to use the appropriate version if you need production/minified code or if you're targeting legacy browsers. If so, replace the path in "transform": "@async-af/${member}" with:

mode	browsers	path
development	modern (ES6+)	`@async-af/${member}`
development	legacy (ES5+)	`@async-af/${member}/legacy`
production	modern (ES6+)	`@async-af/${member}/min`
production	legacy (ES5+)	`@async-af/${member}/legacy/min`

You Did It: A Nice One-Liner 😻

Now, with the babel plugin up and running (make sure you've installed any peer dependencies for babel), you can refactor that wall of imports to something more succinct and sophisticated: 🥃

// hypothetically awesome file that uses wrapper, map, filter, includes, every, indexof, some, reduce, join, and log

import {wrapper as AsyncAF, map, filter, includes, every, indexOf, some, reduce, join, log} from 'async-af';

AsyncAF.use({
  // ...all the methods
});

// ...more sweet sweet code

Caveats; however

While the imported method names are case-insensitive (e.g., @async-af/indexof vs. indexOf—as imported above); they must be "AF-less" (map vs. mapAF) when using this plugin.

If it's important to you that the AsyncAF methods you use be clearly differentiated from native methods with trailing "AF"s, then you can use importpackageaspackageAF syntax, although the result is clearly not as concise:

import {wrapper as AsyncAF, map as mapAF, filter as filterAF, includes as includesAF, every as everyAF, indexOf as indexOfAF, some as someAF, reduce as reduceAF, join as joinAF, log as logAF} from 'async-af';

Alternatively, you can alias the methods when you add them to AsyncAfWrapper via the use method:

import {wrapper as AsyncAF, map, filter, includes, every, indexOf, some, reduce, join, log} from 'async-af';

AsyncAF.use({
  mapAF: map,
  filterAF: filter,
  // ... etc.
}, {
  logAF: log
});