import-all.macro

import-all.macro

A babel-plugin-macro that allows you to import all files 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. It supports import statements for synchronous resolution as well as dynamic import() for deferred resolution (for code splitting with react router for example).

Table of Contents

• Installation
• Usage
• Caveats
• Inspiration
• Other Solutions
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• 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 import-all.macro

Usage

Once you've configured babel-plugin-macros you can import/require 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 uses dynamic import: README:1 importAll uses dynamic import

import importAll from 'import-all.macro'

document.getElementById('load-stuff').addEventListener('click', () => {
  importAll('./files/*.js').then(all => {
    console.log(all)
  })
})

      ↓ ↓ ↓ ↓ ↓ ↓

document.getElementById('load-stuff').addEventListener('click', () => {
  Promise.all([
    import('./files/a.js'),
    import('./files/b.js'),
    import('./files/c.js'),
    import('./files/d.js'),
  ])
    .then(function importAllHandler(importVals) {
      return {
        './files/a.js': importVals[0],
        './files/b.js': importVals[1],
        './files/c.js': importVals[2],
        './files/d.js': importVals[3],
      }
    })
    .then(all => {
      console.log(all)
    })
})

importAll.sync uses static imports: README:2 importAll.sync uses static imports

import importAll from 'import-all.macro'

const a = importAll.sync('./files/*.js')

      ↓ ↓ ↓ ↓ ↓ ↓

import * as _filesAJs from './files/a.js'
import * as _filesBJs from './files/b.js'
import * as _filesCJs from './files/c.js'
import * as _filesDJs from './files/d.js'
const a = {
  './files/a.js': _filesAJs,
  './files/b.js': _filesBJs,
  './files/c.js': _filesCJs,
  './files/d.js': _filesDJs,
}

importAll.deferred gives an object with dynamic imports: README:3 importAll.deferred gives an object with dynamic imports

import importAll from 'import-all.macro'

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

      ↓ ↓ ↓ ↓ ↓ ↓

const routes = {
  './files/a.js': function () {
    return import('./files/a.js')
  },
  './files/b.js': function () {
    return import('./files/b.js')
  },
  './files/c.js': function () {
    return import('./files/c.js')
  },
  './files/d.js': function () {
    return import('./files/d.js')
  },
}

Configure importAll to transform import path before generating imports

babel-plugin-macros.config.js:

module.exports = {
  importAll: {
    transformModulePath(modulePath, importingPath) {
      const projectRoot = path.join(__dirname, '../../')
      const modulePathWithoutExt = modulePath.replace(/\.js$/, '')
      const absolutePath = path.resolve(
        path.dirname(importingPath),
        modulePathWithoutExt,
      )
      const pathRelativeToRoot = path.relative(projectRoot, absolutePath)
      return pathRelativeToRoot
    },
  },
}

import importAll from 'import-all.macro'
const a = importAll.sync('./files/*.js')
      ↓ ↓ ↓ ↓ ↓ ↓
import * as _filesA from './files/a'
import * as _filesB from './files/b'
import * as _filesC from './files/c'
import * as _filesD from './files/d'
const a = {
  './files/a': _filesA,
  './files/b': _filesB,
  './files/c': _filesC,
  './files/d': _filesD,
}

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!

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

Contributors ✨

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 📖 🚇 ⚠️

Jonathan Neal 📖

Rafał Ruciński 🐛 💻

Justin Dorfman 🔍

Michaël De Boey 💻

Jianhua Cheng 💻 ⚠️ 📖

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

LICENSE

MIT