You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<spanclass="line"><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>So one can use either <code>require</code> or <code>import</code> (depending on the module system of choice) to import the <code>print</code> value in a JavaScript file.</p><h3id="default-es6-values" tabindex="-1">Default ES6 values <aclass="header-anchor" href="#default-es6-values" aria-label="Permalink to "Default ES6 values""></a></h3><p>One special case occur when working with JavaScript imports in ES6 modules that look like this:</p><divclass="language-js vp-adaptive-theme"><buttontitle="Copy Code" class="copy"></button><spanclass="lang">js</span><preclass="shiki shiki-themes github-light github-dark vp-code"><code><spanclass="line"><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ten </span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'numbers.js'</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>This import expects <code>numbers.js</code> to have a default export, like:</p><divclass="language-js vp-adaptive-theme"><buttontitle="Copy Code" class="copy"></button><spanclass="lang">js</span><preclass="shiki shiki-themes github-light github-dark vp-code"><code><spanclass="line"><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ten </span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><spanstyle="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>To emulate this kind of exports from Melange, one just needs to define a <code>default</code> value.</p><p>For example, in a file named <codeclass="text-ocaml">numbers.ml</code><codeclass="text-reasonml">numbers.re</code>:</p><divclass="language-ocaml vp-adaptive-theme"><buttontitle="Copy Code" class="copy"></button><spanclass="lang">ocaml</span><preclass="shiki shiki-themes github-light github-dark vp-code"><code><spanclass="line"><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> default</span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><spanstyle="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span></span></code></pre></div><divclass="language-reasonml vp-adaptive-theme"><buttontitle="Copy Code" class="copy"></button><spanclass="lang">reasonml</span><preclass="shiki shiki-themes github-light github-dark vp-code"><code><spanclass="line"><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> default</span><spanstyle="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><spanstyle="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><spanstyle="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">;</span></span></code></pre></div><p>That way, Melange will set the value on the <code>default</code> export so it can be consumed as default import on the JavaScript side.</p></div></div></main><footerclass="VPDocFooter" data-v-39a288b8data-v-48f9bb55><!--[--><!--]--><divclass="edit-info" data-v-48f9bb55><divclass="edit-link" data-v-48f9bb55><aclass="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/melange-re/melange-re.github.io/edit/master/docs/advanced-js-interop.md" target="_blank" rel="noreferrer" data-v-48f9bb55><!--[--><svgxmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-48f9bb55><pathd="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><pathd="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--></a></div><!----></div><navclass="prev-next" data-v-48f9bb55><divclass="pager" data-v-48f9bb55><aclass="VPLink link pager-link prev" href="/v6.0.1/working-with-js-objects-and-values.html" data-v-48f9bb55><!--[--><spanclass="desc" data-v-48f9bb55>Previous page</span><spanclass="title" data-v-48f9bb55>Working with JavaScript objects and values</span><!--]--></a></div><divclass="pager" data-v-48f9bb55><aclass="VPLink link pager-link next" href="/v6.0.1/bindings-cookbook.html" data-v-48f9bb55><!--[--><spanclass="desc" data-v-48f9bb55>Next page</span><spanclass="title" data-v-48f9bb55>Bindings cookbook</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
226
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"new-to-ocaml.md\":\"bRyU6jQg\",\"roadmap.md\":\"HOtAwflR\",\"api.md\":\"xjJ98wNN\",\"package-management.md\":\"Pb4-LSu5\",\"what-is-melange.md\":\"cvw-99wt\",\"communicate-with-javascript.md\":\"4El4v6O1\",\"index.md\":\"TsGc5bsy\",\"language-concepts.md\":\"wOkhLcMT\",\"melange-for-x-developers.md\":\"8K-DHt0b\",\"data-types-and-runtime-rep.md\":\"bDqxTMZk\",\"attributes-and-extension-nodes.md\":\"NqGQoyOy\",\"build-system.md\":\"8cvjjiXr\",\"how-to-guides.md\":\"-uRNm836\",\"resources.md\":\"-qvhP0bX\",\"getting-started.md\":\"difGRO8d\",\"community.md\":\"FJ13iNUf\",\"advanced-js-interop.md\":\"_Zk0unb_\",\"rationale.md\":\"M1aWvVtm\",\"bindings-cookbook.md\":\"Fi2JWCjF\",\"working-with-js-objects-and-values.md\":\"3gxxFXq-\",\"syntaxes.md\":\"ifGWtnlC\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Melange Documentation Site\",\"description\":\"The official documentation site for Melange, a compiler from OCaml to JavaScript. Explore the features and resources for functional programming with Melange, including the standard libraries APIs, the playground, and extensive documentation about bindings, build system, and the opam package manager.\",\"base\":\"/v6.0.1/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":{\"level\":[2,3]},\"search\":{\"provider\":\"local\"},\"editLink\":{\"pattern\":\"https://github.com/melange-re/melange-re.github.io/edit/master/docs/:path\"},\"nav\":[{\"text\":\"Learn\",\"link\":\"/what-is-melange\"},{\"text\":\"API\",\"link\":\"/api\"},{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"},{\"text\":\"Book\",\"link\":\"https://react-book.melange.re\"},{\"text\":\"Blog\",\"link\":\"https://melange.re/blog\"},{\"text\":\"v6.0.1\",\"items\":[{\"text\":\"v5.0.0\",\"link\":\"https://melange.re/v5.0.0/\"},{\"text\":\"v4.0.0\",\"link\":\"https://melange.re/v4.0.0/\"},{\"text\":\"v3.0.0\",\"link\":\"https://melange.re/v3.0.0/\"},{\"text\":\"v2.2.0\",\"link\":\"https://melange.re/v2.2.0/\"},{\"text\":\"v2.1.0\",\"link\":\"https://melange.re/v2.1.0/\"},{\"text\":\"v2.0.0\",\"link\":\"https://melange.re/v2.0.0/\"},{\"text\":\"v1.0.0\",\"link\":\"https://melange.re/v1.0.0/\"},{\"text\":\"unstable\",\"link\":\"https://melange.re/unstable/\"}]}],\"sidebar\":[{\"text\":\"Intro\",\"items\":[{\"text\":\"What is Melange\",\"link\":\"/what-is-melange\"},{\"text\":\"Rationale\",\"link\":\"/rationale\"},{\"text\":\"Supported syntaxes\",\"link\":\"/syntaxes\"},{\"text\":\"Getting Started\",\"link\":\"/getting-started\"}]},{\"text\":\"Learn\",\"items\":[{\"text\":\"New to OCaml?\",\"link\":\"/new-to-ocaml\"},{\"text\":\"Package Management\",\"link\":\"/package-management\"},{\"text\":\"Build System\",\"link\":\"/build-system\"},{\"text\":\"How-to Guides\",\"link\":\"/how-to-guides\"},{\"text\":\"Melange for X Developers\",\"link\":\"/melange-for-x-developers\"}]},{\"text\":\"Communicate with JavaScript\",\"items\":[{\"text\":\"Overview\",\"link\":\"/communicate-with-javascript\"},{\"text\":\"Language concepts\",\"link\":\"/language-concepts\"},{\"text\":\"Data types and runtime representation\",\"link\":\"/data-types-and-runtime-rep\"},{\"text\":\"Melange attributes and extension nodes\",\"link\":\"/attributes-and-extension-nodes\"},{\"text\":\"Working with JavaScript objects and values\",\"link\":\"/working-with-js-objects-and-values\"},{\"text\":\"Advanced JavaScript interoperability\",\"link\":\"/advanced-js-interop\"},{\"text\":\"Bindings cookbook\",\"link\":\"/bindings-cookbook\"}]},{\"text\":\"Reference\",\"items\":[{\"text\":\"API\",\"link\":\"/api\"}]},{\"text\":\"Try\",\"items\":[{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"}]},{\"text\":\"About\",\"items\":[{\"text\":\"Community\",\"link\":\"/community\"},{\"text\":\"Resources\",\"link\":\"/resources\"},{\"text\":\"Roadmap\",\"link\":\"/roadmap\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/melange-re/melange\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
226
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"what-is-melange.md\":\"cvw-99wt\",\"communicate-with-javascript.md\":\"4El4v6O1\",\"getting-started.md\":\"difGRO8d\",\"new-to-ocaml.md\":\"bRyU6jQg\",\"syntaxes.md\":\"ifGWtnlC\",\"bindings-cookbook.md\":\"Fi2JWCjF\",\"api.md\":\"xjJ98wNN\",\"build-system.md\":\"8cvjjiXr\",\"how-to-guides.md\":\"-uRNm836\",\"community.md\":\"FJ13iNUf\",\"index.md\":\"TsGc5bsy\",\"resources.md\":\"-qvhP0bX\",\"melange-for-x-developers.md\":\"8K-DHt0b\",\"roadmap.md\":\"HOtAwflR\",\"package-management.md\":\"Pb4-LSu5\",\"attributes-and-extension-nodes.md\":\"NqGQoyOy\",\"data-types-and-runtime-rep.md\":\"bDqxTMZk\",\"language-concepts.md\":\"wOkhLcMT\",\"working-with-js-objects-and-values.md\":\"3gxxFXq-\",\"rationale.md\":\"M1aWvVtm\",\"advanced-js-interop.md\":\"_Zk0unb_\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Melange Documentation Site\",\"description\":\"The official documentation site for Melange, a compiler from OCaml to JavaScript. Explore the features and resources for functional programming with Melange, including the standard libraries APIs, the playground, and extensive documentation about bindings, build system, and the opam package manager.\",\"base\":\"/v6.0.1/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":{\"level\":[2,3]},\"search\":{\"provider\":\"local\"},\"editLink\":{\"pattern\":\"https://github.com/melange-re/melange-re.github.io/edit/master/docs/:path\"},\"nav\":[{\"text\":\"Learn\",\"link\":\"/what-is-melange\"},{\"text\":\"API\",\"link\":\"/api\"},{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"},{\"text\":\"Book\",\"link\":\"https://react-book.melange.re\"},{\"text\":\"Blog\",\"link\":\"https://melange.re/blog\"},{\"text\":\"v6.0.1\",\"items\":[{\"text\":\"v5.0.0\",\"link\":\"https://melange.re/v5.0.0/\"},{\"text\":\"v4.0.0\",\"link\":\"https://melange.re/v4.0.0/\"},{\"text\":\"v3.0.0\",\"link\":\"https://melange.re/v3.0.0/\"},{\"text\":\"v2.2.0\",\"link\":\"https://melange.re/v2.2.0/\"},{\"text\":\"v2.1.0\",\"link\":\"https://melange.re/v2.1.0/\"},{\"text\":\"v2.0.0\",\"link\":\"https://melange.re/v2.0.0/\"},{\"text\":\"v1.0.0\",\"link\":\"https://melange.re/v1.0.0/\"},{\"text\":\"unstable\",\"link\":\"https://melange.re/unstable/\"}]}],\"sidebar\":[{\"text\":\"Intro\",\"items\":[{\"text\":\"What is Melange\",\"link\":\"/what-is-melange\"},{\"text\":\"Rationale\",\"link\":\"/rationale\"},{\"text\":\"Supported syntaxes\",\"link\":\"/syntaxes\"},{\"text\":\"Getting Started\",\"link\":\"/getting-started\"}]},{\"text\":\"Learn\",\"items\":[{\"text\":\"New to OCaml?\",\"link\":\"/new-to-ocaml\"},{\"text\":\"Package Management\",\"link\":\"/package-management\"},{\"text\":\"Build System\",\"link\":\"/build-system\"},{\"text\":\"How-to Guides\",\"link\":\"/how-to-guides\"},{\"text\":\"Melange for X Developers\",\"link\":\"/melange-for-x-developers\"}]},{\"text\":\"Communicate with JavaScript\",\"items\":[{\"text\":\"Overview\",\"link\":\"/communicate-with-javascript\"},{\"text\":\"Language concepts\",\"link\":\"/language-concepts\"},{\"text\":\"Data types and runtime representation\",\"link\":\"/data-types-and-runtime-rep\"},{\"text\":\"Melange attributes and extension nodes\",\"link\":\"/attributes-and-extension-nodes\"},{\"text\":\"Working with JavaScript objects and values\",\"link\":\"/working-with-js-objects-and-values\"},{\"text\":\"Advanced JavaScript interoperability\",\"link\":\"/advanced-js-interop\"},{\"text\":\"Bindings cookbook\",\"link\":\"/bindings-cookbook\"}]},{\"text\":\"Reference\",\"items\":[{\"text\":\"API\",\"link\":\"/api\"}]},{\"text\":\"Try\",\"items\":[{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"}]},{\"text\":\"About\",\"items\":[{\"text\":\"Community\",\"link\":\"/community\"},{\"text\":\"Resources\",\"link\":\"/resources\"},{\"text\":\"Roadmap\",\"link\":\"/roadmap\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/melange-re/melange\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
0 commit comments