babel-plugin-better-import

Babel Plugin Better Import

Makes import() widely useable. Automagically. Part of the Edge Platform.

Ideally suited for combining Webpack 4s new Mini CSS Extract Plugin with James Gillmores excellent Universal React Component.

Installation

npm install babel-plugin-better-import

.babelrc:

{
  "plugins": ["better-import"]
}

What it does

Here you can see what the plugin does - as tested by our test suite:

import universal from 'react-universal-component'
const UniversalComponent = universal(import('./Foo.js'))

<UniversalComponent />

      ↓ ↓ ↓ ↓ ↓ ↓

import universal from 'react-universal-component'
import betterImport from 'babel-plugin-better-import/betterImport.js'
import path from 'path'

const UniversalComponent = universal(betterImport({
  chunkName: () => 'Foo',
  path: () => path.join(__dirname, './Foo.js'),
  resolve: () => require.resolveWeak('./Foo.js'),
  load: () => import( /* webpackChunkName: 'Foo' */ './Foo.js')
}))

<UniversalComponent />

And if you're using dynamic imports:

import universal from 'react-universal-component'
const UniversalComponent = universal(props => import(`./${props.page}`))

<UniversalComponent page='Foo' />

      ↓ ↓ ↓ ↓ ↓ ↓

import universal from 'react-universal-component'
import betterImport from 'babel-plugin-better-import/betterImport.js'
import path from 'path'

const UniversalComponent = universal(props => betterImport({
  chunkName: props => props.page,
  path: props => path.join(__dirname, `./${props.page}`),
  resolve: props => require.resolveWeak(`./${props.page}`),
  load: props => import( /* webpackChunkName: '[request]' */ `./${props.page}`)
}));

<UniversalComponent page='Foo' />

It names all your chunks using magic comments 🔮 behind the scenes and is derived from the imported file. This works with both static and dynamic import paths, as you can see above.

Otherwise, what it's doing is providing all the different types of requires/paths/imports/etc needed by tools like react-universal-component to universally render your component.

The targeted use-case for all this is dynamic imports where you can pass a page prop to the resulting component, thereby allowing you to create one <UniversalComponent page={page} /> for a large number of your components. This is a major upgrade to the previous way of having to make a hash of a million async components in a wrapping component. You no longer have to think about Universal Components as anything different than your other components that use simple HoCs.

License

MIT

Copyright

Copyright 2018
Sebastian Software GmbH

Copyright 2017-2018
James Gillmore