babel-plugin-transform-uiw-import

Modular import uiw plugin for babel. compatible with uiw, antd, lodash, material-ui, and so on.

Usage

npm install babel-plugin-transform-uiw-import --save-dev

Via .babelrc or babel-loader.

{
  "plugins": [
    ["babel-plugin-transform-uiw-import"]
  ]
}

// Input Code
import { Alert } from 'uiw';
import { CopyToClipboard } from 'uiw';
import { DateInput, DatePicker } from 'uiw';

// Output   ↓ ↓ ↓ ↓ ↓ ↓
import Alert from "uiw/lib/cjs/alert";
import CopyToClipboard from "uiw/lib/cjs/copy-to-clipboard";
import DateInput from "uiw/lib/cjs/date-input";
import DatePicker from "uiw/lib/cjs/date-picker";

Output Result

- import { Alert } from 'uiw';
+ import Alert from "uiw/lib/cjs/alert";
- import { CopyToClipboard } from 'uiw';
+ import CopyToClipboard from "uiw/lib/cjs/copy-to-clipboard";
- import { DateInput, DatePicker } from 'uiw';
+ import DateInput from "uiw/lib/cjs/date-input";
+ import DatePicker from "uiw/lib/cjs/date-picker";

Options

export interface Options {
  [key: string]: {
    transform: (importName: string) => void | string;
    preventFullImport?: boolean;
    skipDefaultConversion?: boolean;
  }
}

Default Options

/**
 * Camel conversion horizontal line interval
 * @param {String} name 
 * `CopyToClipboard` => `copy-to-clipboard`
 */
function toLine(name) {
  return name.replace(/\B([A-Z])/g, '-$1').toLowerCase()
}

// The default Options
{
  uiw: {
    transform: importName => `uiw/lib/cjs/${toLine(importName)}`,
  }
}

transform: string | function(importName: string): string

The library name to use instead of the one specified in the import statement. ${member} will be replaced with the import name, aka Grid/Row/Col/etc., and ${1-n} will be replaced by any matched regular expression groups. If using a JS Babel config file, a function may be passed directly. (see Programmatic Usage)

preventFullImport: boolean

default false

Whether or not to throw when an import is encountered which would cause the entire module to be imported.

skipDefaultConversion: boolean

default false

When set to true, will preserve import { X } syntax instead of converting to import X.

// Input Code
import { Grid as gird } from 'uiw';
// Output   ↓ ↓ ↓ ↓ ↓ ↓  ====> skipDefaultConversion: true
import { Grid as gird } from 'uiw/lib/Grid';

- import { Grid as gird } from 'uiw';
+ import { Grid as gird } from 'uiw/lib/Grid';

Programmatic Usage

import plugin from 'babel-plugin-transform-uiw-import'
import { transform } from 'babel-core'

// `CopyToClipboard` => `copy-to-clipboard`
function toLine(name) {
  return name.replace(/\B([A-Z])/g, '-$1').toLowerCase();
}
 
function replace (code) {
  return transform(code, {
    babelrc: false,
    plugins: [
      [plugin, {
        'date-fns': {
          transform: importName => `date-fns/${toLine(importName)}`,
          preventFullImport: true,
        },
      }]
    ],
  }).code;
}
 
replace("import { CopyToClipboard } from 'date-fns';")
//=> "import CopyToClipboard from "date-fns/copy-to-clipboard";"

License

MIT © Kenny Wong