https://babeljs.io/assets/js/f9b13418.b100eaa6.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["16290"],{65403:function(e,n,r){r.r(n),r.d(n,{metadata:function(){return s},default:function(){return h},frontMatter:function(){return o},contentTitle:function(){return c},toc:function(){return u},assets:function(){return d}});var s=JSON.parse('{"id":"babel-plugin-transform-object-rest-spread","title":"@babel/plugin-transform-object-rest-spread","description":"This plugin is included in @babel/preset-env, in ES2018","source":"@site/../docs/plugin-transform-object-rest-spread.md","sourceDirName":".","slug":"/babel-plugin-transform-object-rest-spread","permalink":"/docs/babel-plugin-transform-object-rest-spread","draft":false,"unlisted":false,"editUrl":"https://github.com/babel/website/edit/main/docs/../docs/plugin-transform-object-rest-spread.md","tags":[],"version":"current","frontMatter":{"id":"babel-plugin-transform-object-rest-spread","title":"@babel/plugin-transform-object-rest-spread","sidebar_label":"object-rest-spread"},"sidebar":"docs","previous":{"title":"async-generator-functions","permalink":"/docs/babel-plugin-transform-async-generator-functions"},"next":{"title":"unicode-property-regex","permalink":"/docs/babel-plugin-transform-unicode-property-regex"}}'),t=r(62540),i=r(43023),l=r(77779),a=r(98263);let o={id:"babel-plugin-transform-object-rest-spread",title:"@babel/plugin-transform-object-rest-spread",sidebar_label:"object-rest-spread"},c,d={},u=[{value:"Example",id:"example",level:2},{value:"Rest Properties",id:"rest-properties",level:3},{value:"Spread Properties",id:"spread-properties",level:3},{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:"Options",id:"options",level:2},{value:"<code>loose</code>

1",id:"loose",level:3},{value:"<code>useBuiltIns</code>",id:"usebuiltins",level:3},{value:"Example",id:"example-1",level:5},{value:"References",id:"references",level:2}];function p(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h5:"h5",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsxs)(n.p,{children:["This plugin is included in ",(0,t.jsx)(n.code,{children:"@babel/preset-env"}),", in ",(0,t.jsx)(n.a,{href:"https://github.com/tc39/proposals/blob/master/finished-proposals.md",children:"ES2018"})]})}),"\n",(0,t.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.h3,{id:"rest-properties",children:"Rest Properties"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };\nconsole.log(x); // 1\nconsole.log(y); // 2\nconsole.log(z); // { a: 3, b: 4 }\n"})}),"\n",(0,t.jsx)(n.h3,{id:"spread-properties",children:"Spread Properties"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"let n = { x, y, ...z };\nconsole.log(n); // { x: 1, y: 2, a: 3, b: 4 }\n"})}),"\n",(0,t.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,t.jsx)(a.A,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-shell",children:"npm install --save-dev @babel/plugin-transform-object-rest-spread\n"})})}),(0,t.jsx)(a.A,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-shell",children:"yarn add --dev @babel/plugin-transform-object-rest-spread\n"})})}),(0,t.jsx)(a.A,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-shell",children:"pnpm add --save-dev @babel/plugin-transform-object-rest-spread\n"})})}),(0,t.jsx)(a.A,{value:"bun",label:"Bun",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-shell",children:"bun add --dev @babel/plugin-transform-object-rest-spread\n"})})})]}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(n.h3,{id:"with-a-configuration-file-recommended",children:"With a configuration file (Recommended)"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",metastring:'title="babel.config.json"',children:'{\n  "plugins": ["@babel/plugin-transform-object-rest-spread"]\n}\n'})}),"\n",(0,t.jsx)(n.h3,{id:"via-cli",children:"Via CLI"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-sh",metastring:'title="Shell"',children:"babel --plugins @babel/plugin-transform-object-rest-spread script.js\n"})}),"\n",(0,t.jsx)(n.h3,{id:"via-node-api",children:"Via Node API"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:'require("@babel/core").transformSync("code", {\n  plugins: ["@babel/plugin-transform-object-rest-spread"],\n});\n'})}),"\n",(0,t.jsx)(n.h2,{id:"options",children:"Options"}),"\n",(0,t.jsxs)(n.p,{children:["By default, this plugin will produce spec compliant code by using Babel's ",(0,t.jsx)(n.code,{children:"objectSpread"})," helper."]}),"\n",(0,t.jsx)(n.h3,{id:"loose",children:(0,t.jsx)(n.code,{children:"loose"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"boolean"}),", defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Enabling this option will use Babel's ",(0,t.jsx)(n.code,{children:"extends"})," helper, which is basically the same as ",(0,t.jsx)(n.code,{children:"Object.assign"})," (see ",(0,t.jsx)(n.code,{children:"useBuiltIns"})," below to use it directly)."]}),"\n",(0,t.jsx)(n.admonition,{type:"caution",children:(0,t.jsxs)(n.p,{children:["Consider migrating to the top level ",(0,t.jsx)(n.a,{href:"/docs/assumptions#setspreadproperties",children:(0,t.jsx)(n.code,{children:"setSpreadProperties"})})," assumption."]})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",metastring:'title="babel.config.json"',children:'{\n  "assumptions": {\n    "setSpreadProperties": true\n  }\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Please keep in mind that even if they're almost equivalent, there's an important difference between spread and ",(0,t.jsx)(n.code,{children:"Object.assign"}),": ",(0,t.jsxs)(n.strong,{children:["spread ",(0,t.jsx)(n.em,{children:"defines"})," new properties, while ",(0,t.jsx)(n.code,{children:"Object.assign()"})," ",(0,t.jsx)(n.em,{children:"sets"})," them"]}),", so using this mode might produce unexpected results in some cases."]}),"\n",(0,t.jsxs)(n.p,{children:["For detailed information please check out ",(0,t.jsx)(n.a,{href:"http://2ality.com/2016/10/rest-spread-properties.html#spreading-objects-versus-objectassign",children:"Spread VS. Object.assign"})," and ",(0,t.jsx)(n.a,{href:"http://exploringjs.com/es6/ch_oop-besides-classe

1s.html#sec_assigning-vs-defining-properties",children:"Assigning VS. defining properties"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"usebuiltins",children:(0,t.jsx)(n.code,{children:"useBuiltIns"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"boolean"}),", defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Enabling this option will use ",(0,t.jsx)(n.code,{children:"Object.assign"})," directly instead of the Babel's ",(0,t.jsx)(n.code,{children:"extends"})," helper."]}),"\n",(0,t.jsx)(n.h5,{id:"example-1",children:"Example"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:".babelrc"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",metastring:'title="JSON"',children:'{\n  "assumptions": {\n    "setSpreadProperties": true\n  },\n  "plugins": [\n    ["@babel/plugin-transform-object-rest-spread", { "useBuiltIns": true }]\n  ]\n}\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"In"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"z = { x, ...y };\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Out"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"z = Object.assign({ x }, y);\n"})}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["You can read more about configuring plugin options ",(0,t.jsx)(n.a,{href:"/docs/plugins#plugin-options",children:"here"})]})}),"\n",(0,t.jsx)(n.h2,{id:"references",children:"References"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/tc39/proposal-object-rest-spread",children:"Proposal: Object Rest/Spread Properties for ECMAScript"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://tc39.github.io/transform-object-rest-spread/",children:"Spec"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"http://2ality.com/2016/10/rest-spread-properties.html#spreading-objects-versus-objectassign",children:"Spread VS. Object.assign"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"http://exploringjs.com/es6/ch_oop-besides-classes.html#sec_assigning-vs-defining-properties",children:"Assigning VS. defining properties"})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},98263:function(e,n,r){r.d(n,{A:function(){return a}});var s=r(62540);r(63696);var t=r(11750),i=r(23865);function l({children:e,className:n,hidden:r}){return(0,s.jsx)("div",{role:"tabpanel",className:(0,t.A)("tabItem_wHwb",n),hidden:r,children:e})}function a({children:e,className:n,value:r}){let{selectedValue:t,lazy:o}=(0,i.uc)(),c=r===t;return!c&&o?null:(0,s.jsx)(l,{className:n,hidden:!c,children:e})}},77779:function(e,n,r){r.d(n,{A:function(){return p}});var s=r(62540);r(63696);var t=r(11750),i=r(46065),l=r(23865),a=r(45194),o=r(83029);function c({className:e}){let{selectedValue:n,selectValue:r,tabValues:i,block:o}=(0,l.uc)(),d=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),p=e=>{let s=e.currentTarget,t=i[d.indexOf(s)].value;t!==n&&(u(s),r(t))},h=e=>{let n=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let r=d.indexOf(e.currentTarget)+1;n=d[r]??d[0];break}case"ArrowLeft":{let r=d.indexOf(e.currentTarget)-1;n=d[r]??d[d.length-1]}}n?.focus()};return(0,s.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,t.A)("tabs",{"tabs--block":o},e),children:i.map(({value:e,label:r,attributes:i})=>(0,s.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{d.push(e)},onKeyDown:h,onClick:p,...i,className:(0,t.A)("tabs__item","tabItem_l0OV",i?.className,{"tabs__item--active":n===e}),children:r??e},e))})}function d({children:e}){return(0,s.jsx)("div",{className:"margin-top--md",children:e})}function u({className:e,children:n}){return(0,s.jsxs)("div",{className:(0,t.A)(i.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,s.jsx)(c,{className:e}),(0,s.jsx)(d,{children:n})]})}function p(e){let n=(0,o.A)(),r=(0,l.OC)(e);return(0,s.jsx)(l.O_,{value:r,children:(0,s.jsx)(u,{className:e.className,children:(0,l.vT)(e.children)})},String(n))}},23865:function(e,n,r){r.d(n,{OC:function(){return p},O_:function(){return j},uc:function(){return b},vT:function(){return d}});var s=r(62540),t=r(63696),i=r(49519),l=r(6743),a=r(88511),o=r(15396),c=r(89030);function d(e){return t.Children.toArray(e).filter(e=>"\n"!==e)}function u({value:e,tabValues:n}){return n.some(n=>n.value===e)}function p(e){let n,{defaultValue:r,queryString:s=!1,groupId:d}=e,p=function(e){let{values:n,children:r}=e;return(0,t.useMemo)(()=>{let e=n??t.Children.toArray(r).flatMap(e=>{if(!e)return[];if((0,t.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:r,default:s}})=>({value:e,label:n,attributes:r,default:s})),s=(0,o.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,r])}(e),[h,b]=(0,t.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(!u({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 r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:r,tabValues:p})),[j,m]=function({queryString:e=!1,groupId:n}){let r=(0,i.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,a.aZ)(s),(0,t.useCallback)(e=>{if(!s)return;let n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})},[s,r])]}({queryString:s,groupId:d}),[f,g]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[r,s]=(0,c.Dv)(n);return[r,(0,t.useCallback)(e=>{n&&s.set(e)},[n,s])]}({groupId:d}),x=u({value:n=j??f,tabValues:p})?n:null;return(0,l.A)(()=>{x&&b(x)},[x]),{selectedValue:h,selectValue:(0,t.useCallback)(e=>{if(!u({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);b(e),m(e),g(e)},[m,g,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let h=(0,t.createContext)(null);function b(){let e=t.useContext(h);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function j(e){return(0,s.jsx)(h.Provider,{value:e.value,children:e.children})}},43023:function(e,n,r){r.d(n,{R:function(){return l},x:function(){return a}});var s=r(63696);let t={},i=s.createContext(t);function l(e){let n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);