` becomes `React.createElement('div', {a: b})`. ### react-display-name Analogous to [babel-plugin-transform-react-display-name](https://babeljs.io/docs/plugins/transform-react-display-name/) Detect and add display name to React component created using `React.createClass` or `createReactClass`. #### Limitations * Does not use the filename as the display name when declaring a class in an `export default` position, since the Sucrase API currently does not accept the filename. ### imports Analogous to [babel-plugin-transform-es2015-modules-commonjs](https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/) Converts ES Modules (`import`/`export`) to CommonJS (`require`/`module.exports`) using the same approach as Babel. #### Limitations * Assumes that there are no variables shadowing imported names. Any such variables will be incorrectly transformed. If you use ESLint, the [no-shadow](https://eslint.org/docs/rules/no-shadow) rule should avoid this issue. * Complex assignments to exported names do not update the live bindings properly. For example, after `export let a = 1;`, `a = 2;` works, but `[a] = [3];` will not cause imported usages of `a` to update. * The code for handling object shorthand does not take ASI into account, so there may be rare bugs if you omit semicolons. * Imports are not hoisted to the top of the file. ### add-module-exports Analogous to [babel-plugin-add-module-exports](https://github.com/59naga/babel-plugin-add-module-exports) Add a snippet to emulate the Babel 5 approach to CommonJS interop: if a module has only a default export, that default export is used as the module body, which avoids the need for code like `require('./MyModule').default`. ## Motivation As JavaScript implementations mature, it becomes more and more reasonable to disable Babel transforms, especially in development when you know that you're targeting a modern runtime. You might hope that you could simplify and speed up the build step by eventually disabling Babel entirely, but this isn't possible if you're using a non-standard language extension like JSX, Flow, or TypeScript. Unfortunately, disabling most transforms in Babel doesn't speed it up as much as you might expect. To understand, let's take a look at how Babel works: 1. Tokenize the input source code into a token stream. 2. Parse the token stream into an AST. 3. Walk the AST to compute the scope information for each variable. 4. Apply all transform plugins in a single traversal, resulting in a new AST. 5. Print the resulting AST. Only step 4 gets faster when disabling plugins, so there's always a fixed cost to running Babel regardless of how many transforms are enabled. Sucrase bypasses most of these steps, and works like this: 1. Tokenize the input source code into a token stream using Babel's tokenizer. 2. Scan through the tokens, computing preliminary information like all imported/exported names and additional info on the role of each token. 3. Run the transform by doing a pass through the tokens and performing a number of careful find-and-replace operations, like replacing `