https://babeljs.io/assets/js/057f6684.2f5ba674.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["34466"],{76727:function(e,n,t){t.r(n),t.d(n,{metadata:function(){return r},default:function(){return m},frontMatter:function(){return i},contentTitle:function(){return u},toc:function(){return d},assets:function(){return c}});var r=JSON.parse('{"id":"babel-plugin-transform-flow-comments","title":"@babel/plugin-transform-flow-comments","description":"You should be able to use this plugin instead of @babel/plugin-flow-strip-types to preserve the / @flow / directive and still use flow.","source":"@site/../docs/plugin-transform-flow-comments.md","sourceDirName":".","slug":"/babel-plugin-transform-flow-comments","permalink":"/docs/babel-plugin-transform-flow-comments","draft":false,"unlisted":false,"editUrl":"https://github.com/babel/website/edit/main/docs/../docs/plugin-transform-flow-comments.md","tags":[],"version":"current","frontMatter":{"id":"babel-plugin-transform-flow-comments","title":"@babel/plugin-transform-flow-comments","sidebar_label":"flow-comments"}}'),l=t(62540),a=t(43023),o=t(77779),s=t(98263);let i={id:"babel-plugin-transform-flow-comments",title:"@babel/plugin-transform-flow-comments",sidebar_label:"flow-comments"},u,c={},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}];function f(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(n.p,{children:["You should be able to use this plugin instead of ",(0,l.jsx)(n.code,{children:"@babel/plugin-flow-strip-types"})," to preserve the ",(0,l.jsx)(n.code,{children:"/* @flow */"})," directive and still use flow."]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://flow.org/blog/2015/02/20/Flow-Comments/",children:"Flow Comments Blog Post"})}),"\n",(0,l.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"In"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:'function foo(bar?) {}\nfunction foo2(bar?: string) {}\nfunction foo(x: number): string {}\ntype B = {\n  name: string,\n};\nexport type GraphQLFormattedError = number;\nimport type A, { B, C } from "./types";\nimport typeof D, { E, F } from "./types";\n'})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Out"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"\"use strict\";\n\nfunction foo(bar /*:: ?*/) {}\nfunction foo2(bar /*:: ?: string*/) {}\nfunction foo(x /*: number*/) /*: string*/ {}\n/*:: type B = {\n  name: string;\n};*/\n/*:: export type GraphQLFormattedError = number;*/\n/*:: import type A, { B, C } from './types';*/\n/*:: import typeof D, { E, F } from './types';*/\n"})}),"\n",(0,l.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,l.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,l.jsx)(s.A,{value:"npm",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"npm install --save-dev @babel/plugin-transform-flow-comments\n"})})}),(0,l.jsx)(s.A,{value:"yarn",label:"Yarn",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"yarn add --dev @babel/plugin-transform-flow-comments\n"})})}),(0,l.jsx)(s.A,{value:"pnpm",label:"pnpm",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"pnpm add --save-dev @babel/plugin-transform-flow-comments\n"})})}),(0,l.jsx)(s.A,{value:"bun",label:"Bun",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"bun add --dev @babel/plugin-transform-flow-comments\n"})})})]}),"\n",(0,l.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsx)(n.h3,{id:"with-a-configuration-file-recommended",children:"With a configuration file (Recommended)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",metastring:'title="babel.config.json"',children:'{\n  "plugins": ["@babel/plugin-transform-flow-comments"]\n}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"via-cli",children:"Via CLI"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-sh",metastring:'title="Shell"',children:"babel --plugins @babel/plugin-transform-flow-comments script.js\n"})}),"\n",(0,l.jsx)(n.h3,{id:"via-node-api",children:"Via Node API"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:'require("@babel/core").transformSync("code", {\n  plugins: ["@babel/plugin-transform-flow-comments"],\n});\n'})})]})}function m(e={}){let{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(f,{...e})}):f(e)}},98263:function(e,n,t){t.d(n,{A:function(){return s}});var r=t(62540);t(63696);

1var l=t(11750),a=t(23865);function o({children:e,className:n,hidden:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,l.A)("tabItem_wHwb",n),hidden:t,children:e})}function s({children:e,className:n,value:t}){let{selectedValue:l,lazy:i}=(0,a.uc)(),u=t===l;return!u&&i?null:(0,r.jsx)(o,{className:n,hidden:!u,children:e})}},77779:function(e,n,t){t.d(n,{A:function(){return f}});var r=t(62540);t(63696);var l=t(11750),a=t(46065),o=t(23865),s=t(45194),i=t(83029);function u({className:e}){let{selectedValue:n,selectValue:t,tabValues:a,block:i}=(0,o.uc)(),c=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.a_)(),f=e=>{let r=e.currentTarget,l=a[c.indexOf(r)].value;l!==n&&(d(r),t(l))},m=e=>{let n=null;switch(e.key){case"Enter":f(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.A)("tabs",{"tabs--block":i},e),children:a.map(({value:e,label:t,attributes:a})=>(0,r.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{c.push(e)},onKeyDown:m,onClick:f,...a,className:(0,l.A)("tabs__item","tabItem_l0OV",a?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function c({children:e}){return(0,r.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:n}){return(0,r.jsxs)("div",{className:(0,l.A)(a.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,r.jsx)(u,{className:e}),(0,r.jsx)(c,{children:n})]})}function f(e){let n=(0,i.A)(),t=(0,o.OC)(e);return(0,r.jsx)(o.O_,{value:t,children:(0,r.jsx)(d,{className:e.className,children:(0,o.vT)(e.children)})},String(n))}},23865:function(e,n,t){t.d(n,{OC:function(){return f},O_:function(){return h},uc:function(){return p},vT:function(){return c}});var r=t(62540),l=t(63696),a=t(49519),o=t(6743),s=t(88511),i=t(15396),u=t(89030);function c(e){return l.Children.toArray(e).filter(e=>"\n"!==e)}function d({value:e,tabValues:n}){return n.some(n=>n.value===e)}function f(e){let n,{defaultValue:t,queryString:r=!1,groupId:c}=e,f=function(e){let{values:n,children:t}=e;return(0,l.useMemo)(()=>{let e=n??l.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,l.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let 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:t,default:r}})=>({value:e,label:n,attributes:t,default:r})),r=(0,i.XI)(e,(e,n)=>e.value===n.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[m,p]=(0,l.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 t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:f})),[h,b]=function({queryString:e=!1,groupId:n}){let t=(0,a.W6)(),r=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,s.aZ)(r),(0,l.useCallback)(e=>{if(!r)return;let n=new URLSearchParams(t.location.search);n.set(r,e),t.replace({...t.location,search:n.toString()})},[r,t])]}({queryString:r,groupId:c}),[g,v]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,r]=(0,u.Dv)(n);return[t,(0,l.useCallback)(e=>{n&&r.set(e)},[n,r])]}({groupId:c}),x=d({value:n=h??g,tabValues:f})?n:null;return(0,o.A)(()=>{x&&p(x)},[x]),{selectedValue:m,selectValue:(0,l.useCallback)(e=>{if(!d({value:e,tabValues:f}))throw Error(`Can't select invalid tab value=${e}`);p(e),b(e),v(e)},[b,v,f]),tabValues:f,lazy:e.lazy??!1,block:e.block??!1}}let m=(0,l.createContext)(null);function p(){let e=l.useContext(m);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function h(e){return(0,r.jsx)(m.Provider,{value:e.value,children:e.children})}},43023:function(e,n,t){t.d(n,{R:function(){return o},x:function(){return s}});var r=t(63696);let l={},a=r.createContext(l);function o(e){let n=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]);