babel-plugin-transform-do-expressions

What is babel-plugin-transform-do-expressions?

The babel-plugin-transform-do-expressions package is a Babel plugin that allows you to use 'do expressions' in your JavaScript code. 'Do expressions' enable you to use statements like loops and conditionals in expression contexts, which can be particularly useful for complex logic within JSX or other expression-based syntaxes.

What are babel-plugin-transform-do-expressions's main functionalities?

Basic Do Expression

This feature allows you to use conditional logic within an expression. The 'do' expression evaluates the if-else statement and assigns the result to the variable 'result'.

const result = do {
  if (x > 10) {
    'greater';
  } else {
    'lesser';
  }
};

Do Expression with Loop

This feature allows you to use loops within an expression. The 'do' expression evaluates the for loop and assigns the final value of 'total' to the variable 'sum'.

const sum = do {
  let total = 0;
  for (let i = 0; i < 5; i++) {
    total += i;
  }
  total;
};

Do Expression in JSX

This feature allows you to use 'do expressions' within JSX. The 'do' expression evaluates the conditional logic and renders either the <Welcome> or <Login> component based on the user's login status.

const element = <div>{do {
  if (user.isLoggedIn) {
    <Welcome user={user} />;
  } else {
    <Login />;
  }
}}</div>;

Other packages similar to babel-plugin-transform-do-expressions

babel-plugin-transform-inline-environment-variables

This Babel plugin allows you to inline environment variables into your code. While it doesn't provide the same 'do expression' functionality, it is useful for injecting environment-specific values into your code at build time.

babel-plugin-transform-react-jsx

This Babel plugin transforms JSX syntax into JavaScript. While it doesn't offer 'do expressions', it is essential for working with JSX in React applications, making it a complementary tool for developers using 'do expressions' within JSX.

README

babel-plugin-transform-do-expressions

Compile do expressions to ES5

Detail

The do { .. } expression executes a block (with one or many statements in it), and the final statement completion value inside the block becomes the completion value of the do expression.

from You Don't Know JS

It can be seen as a complex version of the ternary operator:

let a = do {
  if(x > 10) {
    'big';
  } else {
    'small';
  }
};
// is equivalent to:
let a = x > 10 ? 'big' : 'small';

Try in REPL

This example is not the best usage because it is too simple and using a ternary operator is a better option but you can have a much more complex condition in the do { ... } expression with several if ... else chains:

let x = 100;
let y = 20;

let a = do {
  if(x > 10) {
    if(y > 20) {
      'big x, big y';
    } else {
      'big x, small y';
    }
  } else {
    if(y > 10) {
      'small x, big y';
    } else {
      'small x, small y';
    }
  }
};

Try in REPL

Example

In JSX

One of the most useful usage of the do expression is inside JSX. If we want to conditionally display a component we usually have to call another function which would implement the condition and return the correct value, for example:

const getColoredComponent = color => {
  if(color === 'blue') { return <BlueComponent/>; }
  if(color === 'red') { return <RedComponent/>; }
  if(color === 'green') { return <GreenComponent/>; }
}

const Component = props =>
  <div className='myComponent'>
    {getColoredComponent()}
  </div>
;

Using a do expression you can add logic inside JSX:

const Component = props =>
  <div className='myComponent'>
    {do {
      if(color === 'blue') { <BlueComponent/>; }
      if(color === 'red') { <RedComponent/>; }
      if(color === 'green') { <GreenComponent/>; }
    }}
  </div>
;

Try in REPL

Installation

npm install --save-dev babel-plugin-transform-do-expressions

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-do-expressions"]
}

Via CLI

babel --plugins transform-do-expressions script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-do-expressions"]
});

References

• Proposal
• You Don't Know JS
• Very handy for conditions inside JSX: reactjs/react-future#35