1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["43737"],{55061:function(e,n,r){r.r(n),r.d(n,{metadata:function(){return a},default:function(){return m},frontMatter:function(){return i},contentTitle:function(){return u},toc:function(){return d},assets:function(){return c}});var a=JSON.parse('{"id":"babel-plugin-proposal-import-wasm-source","title":"@babel/plugin-proposal-import-wasm-source","description":"Transforms import source declarations to WebAssembly.Module objects, assuming that import source is being used to import the source of a WebAssembly Module.","source":"@site/../docs/plugin-proposal-import-wasm-source.md","sourceDirName":".","slug":"/babel-plugin-proposal-import-wasm-source","permalink":"/docs/babel-plugin-proposal-import-wasm-source","draft":false,"unlisted":false,"editUrl":"https://github.com/babel/website/edit/main/docs/../docs/plugin-proposal-import-wasm-source.md","tags":[],"version":"current","frontMatter":{"id":"babel-plugin-proposal-import-wasm-source","title":"@babel/plugin-proposal-import-wasm-source","sidebar_label":"import-wasm-source"},"sidebar":"plugins","previous":{"title":"decorators","permalink":"/docs/babel-plugin-proposal-decorators"},"next":{"title":"async-do-expressions","permalink":"/docs/babel-plugin-proposal-async-do-expressions"}}'),l=r(62540),t=r(43023),s=r(77779),o=r(98263);let i={id:"babel-plugin-proposal-import-wasm-source",title:"@babel/plugin-proposal-import-wasm-source",sidebar_label:"import-wasm-source"},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},{value:"References",id:"references",level:2}];function p(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(n.p,{children:["Transforms ",(0,l.jsx)(n.code,{children:"import source"})," declarations to ",(0,l.jsx)(n.code,{children:"WebAssembly.Module"})," objects, assuming that ",(0,l.jsx)(n.code,{children:"import source"})," is being used to import the source of a WebAssembly Module."]}),"\n",(0,l.jsxs)(n.p,{children:["The transformation applied by this plugin depends on your top-level ",(0,l.jsx)(n.a,{href:"/docs/options#targets",children:(0,l.jsx)(n.code,{children:"targets"})})," to detect whether the generated code should be compatible with Node.js, browsers, or both. When targeting Node.js, the generated code will also change depending on whether you are compiling modules to CommonJS or not."]}),"\n",(0,l.jsx)(n.admonition,{type:"caution",children:(0,l.jsx)(n.p,{children:"This plugin cannot be used when compiling modules to AMD, SystemJS, or UMD."})}),"\n",(0,l.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="input.js"',children:'import source libMod from "./lib.wasm";\n'})}),"\n",(0,l.jsx)(n.p,{children:"will be transformed to"}),"\n",(0,l.jsxs)(s.A,{children:[(0,l.jsx)(o.A,{value:"browsers",label:"Browsers",default:!0,children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="output.js"',children:'const libMod = await WebAssembly.compileStreaming(fetch(import.meta.resolve("./lib.wasm")));\n'})})}),(0,l.jsx)(o.A,{value:"node-esm",label:"Node.js (ESM)",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="output.js"',children:'import { readFileSync as _readFileSync } from "fs";\nconst libMod = new WebAssembly.Module(_readFileSync(new URL(import.meta.resolve("./lib.wasm"))));\n'})})}),(0,l.jsx)(o.A,{value:"node-cjs",label:"Node.js (CommonJS)",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="output.js"',children:'"use strict";\n\nconst libMod = new WebAssembly.Module(require("fs").readFileSync(require.resolve("./lib.wasm")));\n'})})})]}),"\n",(0,l.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,l.jsxs)(s.A,{groupId:"npm2yarn",children:[(0,l.jsx)(o.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-proposal-import-wasm-source\n"})})}),(0,l.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-shell",children:"yarn add
1--dev @babel/plugin-proposal-import-wasm-source\n"})})}),(0,l.jsx)(o.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-proposal-import-wasm-source\n"})})}),(0,l.jsx)(o.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-proposal-import-wasm-source\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": [\n "@babel/plugin-proposal-import-wasm-source"\n ]\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-proposal-import-wasm-source 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: [\n "@babel/plugin-proposal-import-wasm-source"\n ],\n});\n'})}),"\n",(0,l.jsx)(n.h2,{id:"references",children:"References"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://github.com/tc39/proposal-source-phase-imports/",children:"Proposal: Source Phase Imports"})}),"\n"]})]})}function m(e={}){let{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(p,{...e})}):p(e)}},98263:function(e,n,r){r.d(n,{A:function(){return o}});var a=r(62540);r(63696);var l=r(11750),t=r(23865);function s({children:e,className:n,hidden:r}){return(0,a.jsx)("div",{role:"tabpanel",className:(0,l.A)("tabItem_wHwb",n),hidden:r,children:e})}function o({children:e,className:n,value:r}){let{selectedValue:l,lazy:i}=(0,t.uc)(),u=r===l;return!u&&i?null:(0,a.jsx)(s,{className:n,hidden:!u,children:e})}},77779:function(e,n,r){r.d(n,{A:function(){return p}});var a=r(62540);r(63696);var l=r(11750),t=r(46065),s=r(23865),o=r(45194),i=r(83029);function u({className:e}){let{selectedValue:n,selectValue:r,tabValues:t,block:i}=(0,s.uc)(),c=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.a_)(),p=e=>{let a=e.currentTarget,l=t[c.indexOf(a)].value;l!==n&&(d(a),r(l))},m=e=>{let n=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let r=c.indexOf(e.currentTarget)+1;n=c[r]??c[0];break}case"ArrowLeft":{let r=c.indexOf(e.currentTarget)-1;n=c[r]??c[c.length-1]}}n?.focus()};return(0,a.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.A)("tabs",{"tabs--block":i},e),children:t.map(({value:e,label:r,attributes:t})=>(0,a.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{c.push(e)},onKeyDown:m,onClick:p,...t,className:(0,l.A)("tabs__item","tabItem_l0OV",t?.className,{"tabs__item--active":n===e}),children:r??e},e))})}function c({children:e}){return(0,a.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:n}){return(0,a.jsxs)("div",{className:(0,l.A)(t.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,a.jsx)(u,{className:e}),(0,a.jsx)(c,{children:n})]})}function p(e){let n=(0,i.A)(),r=(0,s.OC)(e);return(0,a.jsx)(s.O_,{value:r,children:(0,a.jsx)(d,{className:e.className,children:(0,s.vT)(e.children)})},String(n))}},23865:function(e,n,r){r.d(n,{OC:function(){return p},O_:function(){return b},uc:function(){return h},vT:function(){return c}});
1var a=r(62540),l=r(63696),t=r(49519),s=r(6743),o=r(88511),i=r(15396),u=r(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 p(e){let n,{defaultValue:r,queryString:a=!1,groupId:c}=e,p=function(e){let{values:n,children:r}=e;return(0,l.useMemo)(()=>{let e=n??l.Children.toArray(r).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:r,default:a}})=>({value:e,label:n,attributes:r,default:a})),a=(0,i.XI)(e,(e,n)=>e.value===n.value);if(a.length>0)throw Error(`Docusaurus error: Duplicate values "${a.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,r])}(e),[m,h]=(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 r=n.find(e=>e.default)??n[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:r,tabValues:p})),[b,f]=function({queryString:e=!1,groupId:n}){let r=(0,t.W6)(),a=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)(a),(0,l.useCallback)(e=>{if(!a)return;let n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})},[a,r])]}({queryString:a,groupId:c}),[g,j]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[r,a]=(0,u.Dv)(n);return[r,(0,l.useCallback)(e=>{n&&a.set(e)},[n,a])]}({groupId:c}),v=d({value:n=b??g,tabValues:p})?n:null;return(0,s.A)(()=>{v&&h(v)},[v]),{selectedValue:m,selectValue:(0,l.useCallback)(e=>{if(!d({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);h(e),f(e),j(e)},[f,j,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let m=(0,l.createContext)(null);function h(){let e=l.useContext(m);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function b(e){return(0,a.jsx)(m.Provider,{value:e.value,children:e.children})}},43023:function(e,n,r){r.d(n,{R:function(){return s},x:function(){return o}});var a=r(63696);let l={},t=a.createContext(l);function s(e){let n=a.useContext(t);return a.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(l):e.components||l:s(e.components),a.createElement(t.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.