GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → umidbekk → Babel Plugin Direct Import

umidbekk / Babel Plugin Direct Import

Licence: mit
Babel plugin to cherry-pick ES module imports.

Programming Languages

typescript
32286 projects

Labels

babel-plugin

Projects that are alternatives of or similar to Babel Plugin Direct Import

Babel Plugin Add Module Exports
【v0.2 no longer maintained】 Fix babel/babel#2212 - Follow the [email protected] behavior for [email protected]
Stars: ✭ 729 (+956.52%)
Mutual labels:  babel-plugin
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-42.03%)
Mutual labels:  babel-plugin
Babel Plugin Css Prop
Babel plugin to transpile `css` prop to a styled component. (Experimental)
Stars: ✭ 56 (-18.84%)
Mutual labels:  babel-plugin
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+10478.26%)
Mutual labels:  babel-plugin
Babel Plugin Import Fix
alter import module to certain module file path for smaller bundle and better performance
Stars: ✭ 34 (-50.72%)
Mutual labels:  babel-plugin
Magiql
🌐 💫 Simple and powerful GraphQL Client, love child of react-query ❤️ relay
Stars: ✭ 45 (-34.78%)
Mutual labels:  babel-plugin
Kneden
Transpile ES2017 async/await to vanilla ES6 Promise chains: a Babel plugin
Stars: ✭ 517 (+649.28%)
Mutual labels:  babel-plugin
Sowing Machine
🌱A React UI toolchain & JSX alternative
Stars: ✭ 64 (-7.25%)
Mutual labels:  babel-plugin
Babel Plugin Const Enum
Transform TypeScript `const` enums
Stars: ✭ 38 (-44.93%)
Mutual labels:  babel-plugin
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-20.29%)
Mutual labels:  babel-plugin
Babel Plugin Transform React Remove Prop Types
Remove unnecessary React propTypes from the production build. 🎈
Stars: ✭ 890 (+1189.86%)
Mutual labels:  babel-plugin
Babel Plugin Jsx Two Way Binding
🍺 A two-way data binding solution for React
Stars: ✭ 15 (-78.26%)
Mutual labels:  babel-plugin
Xwasm
[Work In Progress] WebAssembly Packager and WASM tooling for modern frontend
Stars: ✭ 45 (-34.78%)
Mutual labels:  babel-plugin
Flow Runtime
A runtime type system for JavaScript with full Flow compatibility.
Stars: ✭ 813 (+1078.26%)
Mutual labels:  babel-plugin
Tinker.macro
Evaluate Laravel code at build-time, via Laravel Tinker
Stars: ✭ 56 (-18.84%)
Mutual labels:  babel-plugin
React Svg Loader
A loader for webpack, rollup, babel that loads svg as a React Component
Stars: ✭ 570 (+726.09%)
Mutual labels:  babel-plugin
Babel Plugin Ast
使用 babel 进行 AST 分析和处理
Stars: ✭ 44 (-36.23%)
Mutual labels:  babel-plugin
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-5.8%)
Mutual labels:  babel-plugin
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-13.04%)
Mutual labels:  babel-plugin
Babel Plugin Root Import
Add the opportunity to import modules by the root path
Stars: ✭ 1,084 (+1471.01%)
Mutual labels:  babel-plugin
View All Similar Projects ➔

babel-plugin-direct-import

Build npm version npm downloads Codecov

Babel plugin to cherry-pick ES module imports.

Installation

npm install --save-dev babel-plugin-direct-import

Example

In

import {
  Button,
  colors,
  makeStyles,
  ServerStyleSheets,
} from '@material-ui/core';
import { ChevronLeft, ChevronRight } from '@material-ui/icons';

Out

import Button from '@material-ui/core/esm/Button/index.js';
import * as colors from '@material-ui/core/esm/colors/index.js';
import makeStyles from '@material-ui/core/esm/styles/makeStyles.js';
import { ServerStyleSheets } from '@material-ui/styles/esm/index.js';
import ChevronLeft from '@material-ui/icons/esm/ChevronLeft.js';
import ChevronRight from '@material-ui/icons/esm/ChevronRight.js';

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["luxon", "@material-ui/core", "@material-ui/icons"]
      }
    ]
  ]
}

Via Node API 

require('babel-core').transform('code', {
  plugins: [
    [
      'babel-plugin-direct-import',
      {
        modules: ['luxon', '@material-ui/core', '@material-ui/icons'],
      },
    ],
  ],
});

Limitations

Transformation of namespace imports:

Namespace imports are complicate to analyze, that's why we skip them.

import * as MUI from 'material-ui';

return (props) => <MUI.Checkbox {...props} />;

Mapping of variable exports:

import foo from './foo';

export const bar = foo.bar;
export const baz = foo.baz;
export const noop = () => {};

Tested Packages

Luxon 

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["luxon"]
      }
    ]
  ]
}

Material UI 

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": [
          "@material-ui/lab",
          "@material-ui/core",
          "@material-ui/icons",
          "@material-ui/styles"
        ]
      }
    ]
  ]
}

Migration

0.5.0 to 0.6.0

After migration to Babel v7 it's impossible to pass arrays as configs, and now you have to pass an object with modules property:

Before:

{
  "plugins": [["babel-plugin-direct-import", ["@material-ui/core"]]]
}

After:

{
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": ["@material-ui/core"]
      }
    ]
  ]
}

Thanks

Heavily inspired by:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].