Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    babel-plugin-transform-do-expressionspublic

    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(> 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(> 10) {
        if(> 20) {
          'big x, big y';
        } else {
          'big x, small y';
        }
      } else {
        if(> 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

    Keywords

    install

    npm i babel-plugin-transform-do-expressions

    Downloadsweekly downloads

    737,137

    version

    6.22.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar