https://github.com/gajus/babel-plugin-transform-export-default-name

Babel plugin that transforms default exports to named exports.
https://github.com/gajus/babel-plugin-transform-export-default-name

babel-plugin es-modules

Last synced: 29 days ago
JSON representation

Babel plugin that transforms default exports to named exports.

• Host: GitHub
• URL: https://github.com/gajus/babel-plugin-transform-export-default-name
• Owner: gajus
• License: other
• Created: 2016-02-03T12:08:54.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-04-14T20:37:04.000Z (over 3 years ago)
• Last Synced: 2025-03-29T01:23:42.512Z (6 months ago)
• Topics: babel-plugin, es-modules
• Language: JavaScript
• Homepage:
• Size: 136 KB
• Stars: 21
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# babel-plugin-transform-export-default-name

[![NPM version](http://img.shields.io/npm/v/babel-plugin-transform-export-default-name.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-transform-export-default-name)

[![Travis build status](http://img.shields.io/travis/gajus/babel-plugin-transform-export-default-name/master.svg?style=flat-square)](https://travis-ci.org/gajus/babel-plugin-transform-export-default-name)

[![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)

Babel plugin that transforms `export default` of anonymous functions to named function export.

Plugin uses the name of the target file to create a temporary variable. Target resource (arrow function or an anonymous function) is assigned to the latter temporary variable. Temporary value is used in place of function in the export declaration.

## Implementation

Values that are affected:

* anonymous function

* arrow function

* anonymous class

Named function, named class and other object as well as literal values are not transformed.

### Export Name

The name used for a temporary variable is derived from the name of the file (excluding `.js` extension). [`_.camelCase`](https://lodash.com/docs#camelCase) is used to sanitize file name (i.e. `foo-bar.js` becomes `fooBar`).

## Problem

Executing a function without a name (arrow function or an anonymous function) appears as an `(anonymous function)` in the stack trace, e.g.

```js

(() => {

    throw new Error('Hello, World!');

})();

```

![Stack trace without function name](./.README/stack-trace-without-name.png)

However, if an arrow function is defined on the right-hand-side of an assignment expression, the engine will take the name on the left-hand-side and use it to set the arrow function's `.name`, e.g.

```js

let test;

test = () => {

    throw new Error('Hello, World!');

};

test();

```

![Stack trace without function name](./.README/stack-trace-with-name.png)

When you export an anonymous function using `export default`, this function will appear as an `(anonymous function)` the stack trace. `babel-plugin-transform-export-default-name` plugin transforms the code to assign function a name before it is exported.

`./index.js`

```js

import foo from './foo';

foo();

```

`./foo.js`

```js

import bar from './bar';

export default () => {

    bar();

};

```

`./bar.js`

```js

import baz from './baz';

export default () => {

    baz();

};

```

`./baz.js`

```js

export default () => {

    throw new Error('test');

};

```

![Stack trace before and after export is given a name](./.README/stack-trace-before-and-after.png)

## Example

Input file is `./foo.js`.

Input code:

```js

export default () => {};

```

Output code:

```js

let foo = () => {};

export default foo;

```

## Usage

Add to `.babelrc`:

```js

{

    "plugins": [

        "transform-export-default-name"

    ]

}

```