Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kentcdodds/import-all.macro

A babel-macro that allows you to import all files that match a glob
https://github.com/kentcdodds/import-all.macro

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/kentcdodds/import-all.macro
Owner: kentcdodds
License: mit
Created: 2017-09-17T21:57:54.000Z (almost 7 years ago)
Default Branch: main
Last Pushed: 2021-01-25T23:14:18.000Z (over 3 years ago)
Last Synced: 2024-04-09T15:03:42.349Z (3 months ago)
Language: JavaScript
Homepage: http://npm.im/import-all.macro
Size: 62.5 KB
Stars: 177
Watchers: 4
Forks: 17
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Lists

awesome-list - import-all.macro - macro that allows you to import all files that match a glob | kentcdodds | 170 | (JavaScript)
awesome-babel-macros - `import-all.macro`
awesome-f2e-libs - **import-all.macro**
awesome-fe - **import-all.macro**

README

        


import-all.macro


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



---

[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![version][version-badge]][package]

[![downloads][downloads-badge]][npmtrends]

[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)

[![PRs Welcome][prs-badge]][prs]

[![Code of Conduct][coc-badge]][coc]

[![Babel Macro][macros-badge]][babel-plugin-macros]

## 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][babel-plugin-macros] 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](#installation)

- [Usage](#usage)

- [Caveats](#caveats)

- [Inspiration](#inspiration)

- [Other Solutions](#other-solutions)

- [Issues](#issues)

  - [🐛 Bugs](#-bugs)

  - [💡 Feature Requests](#-feature-requests)

- [Contributors ✨](#contributors-)

- [LICENSE](#license)

## Installation

This module is distributed via [npm][npm] which is bundled with [node][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`](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md)

you can import/require `import-all.macro`.

The `importAll` functions accept a [`glob`][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**

```javascript

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**

```javascript

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**

```javascript

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`:

```javascript

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

    },

  },

}

```

```javascript

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][sunil-tweet]

## Other Solutions

I'm not aware of any, if you are please [make a pull request][prs] and add it

here!

## Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]

label._

### 🐛 Bugs

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

[**See Bugs**][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**][requests]

## Contributors ✨

Thanks goes to these people ([emoji key][emojis]):

  

    
_{Kent C. Dodds}
💻 📖 🚇 ⚠️

    
_{Jonathan Neal}
📖

    
_{Rafał Ruciński}
🐛 💻

    
_{Justin Dorfman}
🔍

    
_{Michaël De Boey}
💻

    
_{Jianhua Cheng}
💻 ⚠️ 📖

  

This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind welcome!

## LICENSE

MIT

[npm]: https://www.npmjs.com

[node]: https://nodejs.org

[build-badge]: https://img.shields.io/travis/kentcdodds/import-all.macro.svg?style=flat-square

[build]: https://travis-ci.org/kentcdodds/import-all.macro

[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/import-all.macro.svg?style=flat-square

[coverage]: https://codecov.io/github/kentcdodds/import-all.macro

[version-badge]: https://img.shields.io/npm/v/import-all.macro.svg?style=flat-square

[package]: https://www.npmjs.com/package/import-all.macro

[downloads-badge]: https://img.shields.io/npm/dm/import-all.macro.svg?style=flat-square

[npmtrends]: http://www.npmtrends.com/import-all.macro

[license-badge]: https://img.shields.io/npm/l/import-all.macro.svg?style=flat-square

[license]: https://github.com/kentcdodds/import-all.macro/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/kentcdodds/import-all.macro/blob/master/other/CODE_OF_CONDUCT.md

[macros-badge]: https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square

[babel-plugin-macros]: https://github.com/kentcdodds/babel-plugin-macros

[emojis]: https://github.com/all-contributors/all-contributors#emoji-key

[all-contributors]: https://github.com/all-contributors/all-contributors

[bugs]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug

[requests]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement

[good-first-issue]: https://github.com/kentcdodds/import-all.macro/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22

[glob]: https://www.npmjs.com/package/glob

[sunil-tweet]: https://twitter.com/threepointone/status/908290510225330176