Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@babel/plugin-proposal-do-expressions
Advanced tools
@babel/plugin-proposal-do-expressions is a Babel plugin that allows you to use 'do' expressions in your JavaScript code. 'Do' expressions enable you to use blocks of code as expressions, which can be particularly useful for complex conditional logic or for creating more readable code.
Basic Do Expression
This feature allows you to use a block of code as an expression. In this example, the 'do' expression evaluates the conditional logic and assigns the result to the 'result' variable.
const result = do {
if (x > 10) {
'greater';
} else {
'lesser';
}
};
Do Expression with Multiple Statements
This feature allows you to include multiple statements within a 'do' expression. Here, a temporary variable 'temp' is calculated and used within the conditional logic.
const result = do {
let temp = x * 2;
if (temp > 10) {
'greater';
} else {
'lesser';
}
};
Do Expression with Function Call
This feature demonstrates how you can include function calls within a 'do' expression. The 'calculate' function is defined and called within the 'do' block, and its result is assigned to the 'result' variable.
const result = do {
function calculate(y) {
return y * 2;
}
calculate(x);
};
This Babel plugin allows you to inline environment variables into your code. While it doesn't provide 'do' expressions, it offers a way to manage environment-specific configurations, which can be useful for conditional logic based on environment variables.
babel-plugin-macros allows you to create custom compile-time transformations. While it doesn't directly offer 'do' expressions, it provides a way to create custom syntax and transformations, which can be used to achieve similar goals.
Compile
do
expressions to ES5
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';
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';
}
}
};
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/>; }
else if(color === 'red') { <RedComponent/>; }
else if(color === 'green') { <GreenComponent/>; }
}}
</div>
;
npm install --save-dev @babel/plugin-proposal-do-expressions
.babelrc
(Recommended).babelrc
{
"plugins": ["@babel/proposal-do-expressions"]
}
babel --plugins @babel/proposal-do-expressions script.js
require("@babel/core").transform("code", {
plugins: ["@babel/proposal-do-expressions"]
});
FAQs
Compile do expressions to ES5
The npm package @babel/plugin-proposal-do-expressions receives a total of 141,853 weekly downloads. As such, @babel/plugin-proposal-do-expressions popularity was classified as popular.
We found that @babel/plugin-proposal-do-expressions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.