Giter Club home page Giter Club logo

babel-plugin-transform-replace-object-assign's Introduction

babel-plugin-transform-replace-object-assign

All Contributors Build Status npm version npm downloads

Replaces Object.assign with a custom implementation that you provide in plugin configuration. This plugin works similarly to the babel-plugin-transform-object-assign plugin except it allows you to provide your own implementation that you would like to replace Object.assign with rather than the _extends helper that Babel uses.

Also, this plugin will import an external package in files where Object.assign is used rather than redeclaring the function in each file (which should help reduce bundle size). This is ultimately what babel-plugin-transform-runtime does for you when using the _extends helper.

The implementation you configure is specified as a npm package dependency.


⚠️ Important note on the use of this project:

Most likely you do not and should not use this plugin! I initially wrote this plugin due to a bug in Chrome where key order was not gaurenteed to be correct for objects mutated with Object.assign (the issue is also described at sindresorhus/object-assign#22).

While the bug did not cause problems for most projects, it did causes problems for a project I was helping maintain (Material-UI). We heavily used Object.assign to merge style definitions that were defined in javascript objects. Since key order is important when defining CSS style rules, the Object.assign implementation built into Chrome caused many style related bugs. This plugin allowed us to completely replace all uses of Object.assign within our source code with an implementation that did not break in Chrome (with the expectation that we would stop using this plugin when the bug was fixed and rolled out to a majority of Chrome users).

The bug in Chrome has been fixed for quite some time now (it was fixed in Chrome 49), so this plugin is no longer necessary for the purpose it was originally created for. We have also stopped using this plugin for Material-UI. Please carefully consider the necessity and implications of replacing all of your Object.assign calls before using this plugin. If you are not sure if you need this, feel free to open an issue to discuss it.


Usage

Installation

# Install the plugin
$ npm install --save-dev babel-plugin-transform-replace-object-assign

# Install an assign implementation
$ npm install object-assign

Configure

When you provide the plugin, use the moduleSpecifier option to specify which package you would like imported and used when replacing Object.assign.

.babelrc

{
  "plugins": [
    ["transform-replace-object-assign", { "moduleSpecifier": "object-assign" }]
  ]
}

To use defaults (which is the same as above):

{
  "plugins": ["transform-replace-object-assign"]
}

Result

In

Object.assign(a, b);

Out

import _objectAssign from 'object-assign';

_objectAssign(a, b);

Contributors

Thanks goes to these wonderful people (emoji key):


Neil Gabbadon

💻 📖

Ivan Nikolić

🐛

Jordan Harband

🤔

Jayden Seric

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

babel-plugin-transform-replace-object-assign's People

Contributors

jaydenseric avatar newoga avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

babel-plugin-transform-replace-object-assign's Issues

Unnecessary Babel require default interop helpers

When the Babel sourceType is script (CJS), this plugin unessesarily creates _interopRequireDefault in the output.

For example, this input:

Object.assign({});

Results in this output:

var _default = _interopRequireDefault(require("object-assign")).default;

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

_default({});

When output more like this would be better:

var _default = require("object-assign");

_default({});

The object-assign package (along with others a user might specify using the moduleSpecifier option) doesn't require any default interop:

https://unpkg.com/[email protected]/index.js

Perhaps we should add a new noInterop option, that behaves like the same for @babel/plugin-transform-modules-commonjs:

https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#nointerop

It should default to true, to ensure optimal output when no options are provided.

Support for CommonJS?

Currently, transform expects that final code uses ES modules, but maybe there could be option to switch to CommonJS require?

Code for require would look something like this:

const declar = t.variableDeclaration('var', [t.variableDeclarator(t.identifier(OBJECT_ASSIGN), t.callExpression(t.identifier('require'), [t.stringLiteral(OBJECT_ASSIGN)]))]);

What do you think? I could create PR for this if you’re interested.

Release stable v2

Babel v7 has been released, so a stable v2 release should be prepared here.

Potentially the Babel dependencies should be bumped.

Does not replace babel helper

Even using this plugin, I'm still seeing this code in my build output:

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

Could this plugin also replace this with var _extends = require('my-configured-module')?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.