https://babel.dev/assets/js/04c4352f.ebc3bf3a.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["17279"],{85054:function(e,n,a){a.r(n),a.d(n,{metadata:function(){return s},default:function(){return h},frontMatter:function(){return i},contentTitle:function(){return c},toc:function(){return d},assets:function(){return u}});var s=JSON.parse('{"id":"babel-plugin-proposal-async-do-expressions","title":"@babel/plugin-proposal-async-do-expressions","description":"The async do { .. } expression executes a block (with one or many statements in it) in an asynchronous context, and the final statement completion value inside the block becomes the completion value of the asynchronous code.","source":"@site/../docs/plugin-proposal-async-do-expressions.md","sourceDirName":".","slug":"/babel-plugin-proposal-async-do-expressions","permalink":"/docs/babel-plugin-proposal-async-do-expressions","draft":false,"unlisted":false,"editUrl":"https://github.com/babel/website/edit/main/docs/../docs/plugin-proposal-async-do-expressions.md","tags":[],"version":"current","frontMatter":{"id":"babel-plugin-proposal-async-do-expressions","title":"@babel/plugin-proposal-async-do-expressions","sidebar_label":"async-do-expressions"},"sidebar":"plugins","previous":{"title":"import-wasm-source","permalink":"/docs/babel-plugin-proposal-import-wasm-source"},"next":{"title":"destructuring-private","permalink":"/docs/babel-plugin-proposal-destructuring-private"}}'),r=a(62540),l=a(43023),t=a(77779),o=a(98263);let i={id:"babel-plugin-proposal-async-do-expressions",title:"@babel/plugin-proposal-async-do-expressions",sidebar_label:"async-do-expressions"},c,u={},d=[{value:"Example",id:"example",level:2},{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"With a configuration file (Recommended)",id:"with-a-configuration-file-recommended",level:3},{value:"Via CLI",id:"via-cli",level:3},{value:"Via Node API",id:"via-node-api",level:3},{value:"References",id:"references",level:2}];function p(e){let n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"async do { .. }"})," expression executes a block (with one or many statements in it) in an ",(0,r.jsx)(n.em,{children:"asynchronous"})," context, and the final statement completion value inside the block becomes the completion value of the ",(0,r.jsx)(n.em,{children:"asynchronous"})," code."]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.p,{children:"Issuing HTTP request in parallel"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"Promise.all([\n  async do {\n    const result = await fetch('https://example.com/A');\n    await result.json()\n  },\n  async do {\n    const result = await fetch('https://example.org/B');\n    await result.json()\n  },\n]).then(([a, b]) => {\n  console.log(\"example.com/A\", a);\n  console.log(\"example.org/B\", b);\n})\n"})}),"\n",(0,r.jsx)(n.p,{children:"will be transformed to"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"Promise.all([\n  (async () {\n    const result = await fetch('https://example.com/A');\n    return await result.json()\n  })(),\n  (async () {\n    const result = await fetch('https://example.org/B');\n    return await result.json()\n  })(),\n]).then(([a, b]) => {\n  console.log(\"example.com/A\", a);\n  console.log(\"example.org/B\", b);\n})\n"})}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(t.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"npm install --save-dev @babel/plugin-proposal-async-do-expressions\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"yarn add 

1--dev @babel/plugin-proposal-async-do-expressions\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"pnpm add --save-dev @babel/plugin-proposal-async-do-expressions\n"})})}),(0,r.jsx)(o.A,{value:"bun",label:"Bun",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"bun add --dev @babel/plugin-proposal-async-do-expressions\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.h3,{id:"with-a-configuration-file-recommended",children:"With a configuration file (Recommended)"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="babel.config.json"',children:'{\n  "plugins": ["@babel/plugin-proposal-async-do-expressions"]\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["Note: This plugin transpiles ",(0,r.jsx)(n.code,{children:"async do {}"})," to ES2017 Async arrow function ",(0,r.jsx)(n.code,{children:"async () => {}"}),". If you target to an older engine, i.e. Node.js 6 or IE 11, please also add ",(0,r.jsx)(n.a,{href:"/docs/babel-plugin-transform-async-to-generator",children:(0,r.jsx)(n.code,{children:"@babel/plugin-transform-async-to-generator"})}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title="babel.config.json"',children:'{\n  "plugins": [\n    "@babel/plugin-proposal-async-do-expressions",\n    "@babel/plugin-transform-async-to-generator"\n  ]\n}\n'})}),"\n",(0,r.jsx)(n.h3,{id:"via-cli",children:"Via CLI"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",metastring:'title="Shell"',children:"babel --plugins @babel/plugin-proposal-async-do-expressions script.js\n"})}),"\n",(0,r.jsx)(n.h3,{id:"via-node-api",children:"Via Node API"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:'require("@babel/core").transformSync("code", {\n  plugins: ["@babel/plugin-proposal-async-do-expressions"],\n});\n'})}),"\n",(0,r.jsx)(n.h2,{id:"references",children:"References"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsxs)(n.a,{href:"https://github.com/tc39/proposal-async-do-expressions",children:["Proposal: ",(0,r.jsx)(n.code,{children:"async do"})," expressions"]})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},98263:function(e,n,a){a.d(n,{A:function(){return o}});var s=a(62540);a(63696);var r=a(11750),l=a(23865);function t({children:e,className:n,hidden:a}){return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)("tabItem_wHwb",n),hidden:a,children:e})}function o({children:e,className:n,value:a}){let{selectedValue:r,lazy:i}=(0,l.uc)(),c=a===r;return!c&&i?null:(0,s.jsx)(t,{className:n,hidden:!c,children:e})}},77779:function(e,n,a){a.d(n,{A:function(){return p}});var s=a(62540);a(63696);var r=a(11750),l=a(46065),t=a(23865),o=a(45194),i=a(83029);function c({className:e}){let{selectedValue:n,selectValue:a,tabValues:l,block:i}=(0,t.uc)(),u=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.a_)(),p=e=>{let s=e.currentTarget,r=l[u.indexOf(s)].value;r!==n&&(d(s),a(r))},h=e=>{let n=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let a=u.indexOf(e.currentTarget)+1;n=u[a]??u[0];break}case"ArrowLeft":{let a=u.indexOf(e.currentTarget)-1;n=u[a]??u[u.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":i},e),children:l.map(({value:e,label:a,attributes:l})=>(0,s.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{u.push(e)},onKeyDown:h,onClick:p,...l,className:(0,r.A)("tabs__item","tabItem_l0OV",l?.className,{"tabs__item--active":n===e}),children:a??e},e))})}function u({children:e}){return(0,s.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:n}){return(0,s.jsxs)("div",{className:(0,r.A)(l.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,s.jsx)(c,{className:e}),(0,s.jsx)(u,{children:n})]})}function p(e){let n=(0,i.A)(),a=(0,t.OC)(e);return(0,s.jsx)(t.O_,{value:a,children:(0,s.jsx)(d,{className:e.className,children:(0,t.vT)(e.children)})},String(n))}},23865:function(e,n,a){a.d(n,{OC:function(){return p},O_:function(){return b},uc:function(){return m},vT:function(){return u}});var s=a(62540),r=a(63696),l=a(49519),t=a(6743),o=a(88511),i=a(15396),c=a(89030);function u(e){return r.Children.toArray(e).filter(e=>"\n"!==e)}function d({value:e,tabValues:n}){return n.some(n=>n.value===e)}function p(e){let n,{defaultValue:a,queryString:s=!1,groupId:u}=e,p=function(e){let{values:n,children:a}=e;return(0,r.useMemo)(()=>{let e=n??r.Children.toArray(a).flatMap(e=>{if(!e)return[];if((0,r.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];

1let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:a,default:s}})=>({value:e,label:n,attributes:a,default:s})),s=(0,i.XI)(e,(e,n)=>e.value===n.value);if(s.length>0)throw Error(`Docusaurus error: Duplicate values "${s.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,a])}(e),[h,m]=(0,r.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!d({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let a=n.find(e=>e.default)??n[0];if(!a)throw Error("Unexpected error: 0 tabValues");return a.value})({defaultValue:a,tabValues:p})),[b,f]=function({queryString:e=!1,groupId:n}){let a=(0,l.W6)(),s=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,o.aZ)(s),(0,r.useCallback)(e=>{if(!s)return;let n=new URLSearchParams(a.location.search);n.set(s,e),a.replace({...a.location,search:n.toString()})},[s,a])]}({queryString:s,groupId:u}),[x,g]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[a,s]=(0,c.Dv)(n);return[a,(0,r.useCallback)(e=>{n&&s.set(e)},[n,s])]}({groupId:u}),v=d({value:n=b??x,tabValues:p})?n:null;return(0,t.A)(()=>{v&&m(v)},[v]),{selectedValue:h,selectValue:(0,r.useCallback)(e=>{if(!d({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);m(e),f(e),g(e)},[f,g,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let h=(0,r.createContext)(null);function m(){let e=r.useContext(h);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function b(e){return(0,s.jsx)(h.Provider,{value:e.value,children:e.children})}},43023:function(e,n,a){a.d(n,{R:function(){return t},x:function(){return o}});var s=a(63696);let r={},l=s.createContext(r);function t(e){let n=s.useContext(l);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]);