named-import-all.macro

A babel-plugin-macro that allows you to import all files asyncronously that match a glob

---

The problem

You want to import all files that match a glob without having to import them individually.

This solution

This is a babel-plugin-macro which allows you to import files that match a glob. You will get a map ({ }) of all named exports and corresponding import functions.

Table of Contents

• Installation
• Usage
• Caveats
• Inspiration
• Other Solutions
• Contributors
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev named-import-all.macro

Usage

Once you've configured babel-plugin-macros you can import/require named-import-all.macro.

The importAll functions accept a glob and will transpile your code to import statements/dynamic imports for each file that matches the given glob.

Let's imagine you have a directory called my-files with the files a.js, b.js, c.js, and d.js.

Here are a few before/after examples:

importAll.deferredNamed gives an object where key is the named export and value is the dynamic import: README:1 importAll.deferredNamed gives an object where key is the named export and value is the dynamic import

import importAll from 'named-import-all.macro'

const routes = importAll.deferredNamed('./files/*.js')

      ↓ ↓ ↓ ↓ ↓ ↓

const routes = {
  foo: function() {
    return import('./files/a.js').then(function(res) {
      return res.foo
    })
  },
  bar: function() {
    return import('./files/b.js').then(function(res) {
      return res.bar
    })
  },
  Baz: function() {
    return import('./files/c.js').then(function(res) {
      return res.Baz
    })
  },
  A: function() {
    return import('./files/d.js').then(function(res) {
      return res.A
    })
  },
}

Caveats

Some static analysis tools (like ESLint, Flow, and Jest) wont like this very much without a little additional work. So Jest's watch mode may not pick up all your tests that are relevant based on changes and some ESLint plugins (like eslint-plugin-import) will probably fail on this.

Inspiration

Sunil Pai's tweet

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 📖 🚇 ⚠️	Jonathan Neal 📖	Rafał Ruciński 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT