https://github.com/wafflepie/universal-import.macro

✂ Babel macro for transformation of dynamic imports into synchronous requires based on a supplied code string.
https://github.com/wafflepie/universal-import.macro

babel-plugin-macros code-splitting server-side-rendering

Last synced: about 2 months ago
JSON representation

✂ Babel macro for transformation of dynamic imports into synchronous requires based on a supplied code string.

• Host: GitHub
• URL: https://github.com/wafflepie/universal-import.macro
• Owner: wafflepie
• License: mit
• Created: 2021-07-07T18:09:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T09:00:35.000Z (almost 2 years ago)
• Last Synced: 2023-12-27T11:23:21.460Z (12 months ago)
• Topics: babel-plugin-macros, code-splitting, server-side-rendering
• Language: JavaScript
• Homepage:
• Size: 249 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# universal-import.macro

[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)

Babel macro for transformation of dynamic imports into synchronous requires based on a supplied code string.

## Why?

Because you want code splitting on the client side, but synchronous imports on the server side.

## How?

Add `universal-import.macro` to your dependencies. Replace `import()` with `universalImport()` from this package.

```js

// Before

import(`./assets/${name}.svg`);

```

```js

// After

import universalImport from "universal-import.macro";

universalImport(`./assets/${name}.svg`, `!!process.env.NO_DYNAMIC_IMPORTS`);

```

Depending on the `!!process.env.NO_DYNAMIC_IMPORTS` expression, Webpack will see a different import method.

```js

// process.env.NO_DYNAMIC_IMPORTS = false

import(`./assets/${name}.svg`);

// process.env.NO_DYNAMIC_IMPORTS = true

require(`./assets/${name}.svg`);

```

Replace `!!process.env.NO_DYNAMIC_IMPORTS` with some other code string which evaluates into a boolean at build-time. Since it can be any expression, you can use an IIFE for more complex conditions.

## Tests?

[Yes, some.](./src/__snapshots__/macro.test.js.snap)

## License?

MIT