swc-plugin-transform-import

Inspired from babel-plugin-transform-imports

Installation

npm i -D swc-plugin-transform-import

Uses with webpack-config

// webpack.config.js

const PluginTransformImport = require('swc-plugin-transform-import').default;

module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'swc-loader',
          options: {
            plugin: (m) => new PluginTransformImport({
              "lodash": {
                "transform": "lodash/${member}",
                "preventFullImport": true
              }
            }).visitProgram(m),
          }
        }]
      },
    ],
};

import { Row, Grid as MyGrid } from 'react-bootstrap';
import { merge } from 'lodash';

...into default style imports:

import Row from 'react-bootstrap/lib/Row';
import MyGrid from 'react-bootstrap/lib/Grid';
import merge from 'lodash/merge';

Note: this plugin is not restricted to the react-bootstrap and lodash libraries. You may use it with any library.

That's stupid, why would you do that?

When SWC encounters a member style import such as:

import { Grid, Row, Col } from 'react-bootstrap';

it will generate something similarish to:

var reactBootstrap = require('react-bootstrap');
var Grid = reactBootstrap.Grid;
var Row = reactBootstrap.Row;
var Col = reactBootstrap.Col;

Some libraries, such as react-bootstrap and lodash, are rather large and pulling in the entire module just to use a few pieces would cause unnecessary bloat to your client optimized (webpack etc.) bundle. The only way around this is to use default style imports:

import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

But, the more pieces we need, the more this sucks. This plugin will allow you to pull in just the pieces you need, without a separate import for each item. Additionally, it can be configured to throw when somebody accidentally writes an import which would cause the entire module to resolve, such as:

import Bootstrap, { Grid } from 'react-bootstrap';
// -- or --
import * as Bootstrap from 'react-bootstrap';

Installation

npm install --save-dev swc-plugin-transform-import

Advanced Transformations

In cases where the provided default string replacement transformation is not sufficient (for example, needing to execute a RegExp on the import name), you may instead provide a path to a .js file which exports a function to run instead. Keep in mind that the .js file will be required relative from this plugin's path, likely located in /node_modules/babel-plugin-transform-imports. You may provide any filename, as long as it ends with .js.

.babelrc:

{
    "plugins": [
        ["transform-imports", {
            "my-library": {
                "transform": "../../path/to/transform.js",
                "preventFullImport": true
            }
        }]
    ]
}

/path/to/transform.js:

module.exports = function(importName) {
    return 'my-library/etc/' + importName.toUpperCase();
};

Options

Name	Type	Required	Default	Description
`transform`	`string`	yes	`undefined`	The library name to use instead of the one specified in the import statement. ${member} will be replaced with the member, aka Grid/Row/Col/etc. Alternatively, pass a path to a .js file which exports a function to process the transform (see Advanced Transformations)
`preventFullImport`	`boolean`	no	`false`	Whether or not to throw when an import is encountered which would cause the entire module to be imported.
`skipDefaultConversion`	`boolean`	no	`false`	When set to true, will preserve `import { X }` syntax instead of converting to `import X`.

Comments

How to add to .swcrc

Not an issue but a question. I'm currently using @swc/register to transpile on the fly for local development. How do I add this plugin to the .swcrc config file? Or would I somehow add it as an option to @swc/register? Thanks.

opened by yvuong 8
feat(styleTransform): add styleTransform opt

There are some cases we need to fine tune the transformed style import.

I propose complementing the style opt as a function

style: (transformedPath: string) => string

Inspired from babel-plugin-import https://www.npmjs.com/package/babel-plugin-import#style

opened by thienphanexcalibur 3

Releases(v1.2.0)

v1.2.0(Mar 8, 2022)
What's Changed

feat(styleTransform): add styleTransform opt by @thienphanexcalibur in https://github.com/ankitchouhan1020/swc-plugin-transform-import/pull/2

New Contributors

@thienphanexcalibur made their first contribution in https://github.com/ankitchouhan1020/swc-plugin-transform-import/pull/2

Full Changelog: https://github.com/ankitchouhan1020/swc-plugin-transform-import/compare/v1.1.2...v1.2.0
Source code(tar.gz)
Source code(zip)
v1.1.2(Mar 8, 2022)
What's Changed

Add style option by @myklt in https://github.com/ankitchouhan1020/swc-plugin-transform-import/pull/1

New Contributors

@myklt made their first contribution in https://github.com/ankitchouhan1020/swc-plugin-transform-import/pull/1

Full Changelog: https://github.com/ankitchouhan1020/swc-plugin-transform-import/compare/v1.0.1...v1.1.2
Source code(tar.gz)
Source code(zip)