Deployed da2903c to v4.0.0

v4.0.0/communicate-with-javascript.html

@@ -886,7 +886,7 @@
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  print ,</span></span>
 <span class="line"><span style="--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><h3 id="default-es6-values" tabindex="-1">Default ES6 values <a class="header-anchor" href="#default-es6-values" aria-label="Permalink to &quot;Default ES6 values&quot;">​</a></h3><p>One special case occur when working with JavaScript imports in ES6 modules that look like this:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ten </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;numbers.js&#39;</span><span style="--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><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ten </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--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 <code class="text-ocaml">numbers.ml</code><code class="text-reasonml">numbers.re</code>:</p><div class="language-ocaml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ocaml</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;--shiki-light-text-decoration:underline;--shiki-dark-text-decoration:underline;">let</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> default</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span></span></code></pre></div><div class="language-reasonml vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">reasonml</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> default</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--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><footer class="VPDocFooter" data-v-39a288b8 data-v-48f9bb55><!--[--><!--]--><div class="edit-info" data-v-48f9bb55><div class="edit-link" data-v-48f9bb55><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/melange-re/melange-re.github.io/edit/master/docs/communicate-with-javascript.md" target="_blank" rel="noreferrer" data-v-48f9bb55><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-48f9bb55><path d="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><path d="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><nav class="prev-next" data-v-48f9bb55><div class="pager" data-v-48f9bb55><a class="VPLink link pager-link prev" href="/v4.0.0/build-system.html" data-v-48f9bb55><!--[--><span class="desc" data-v-48f9bb55>Previous page</span><span class="title" data-v-48f9bb55>Build System</span><!--]--></a></div><div class="pager" data-v-48f9bb55><a class="VPLink link pager-link next" href="/v4.0.0/how-to-guides.html" data-v-48f9bb55><!--[--><span class="desc" data-v-48f9bb55>Next page</span><span class="title" data-v-48f9bb55>How-to Guides</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"index.md\":\"VTHgV44G\",\"api.md\":\"OZmnhWWS\",\"rationale.md\":\"aDrhyKzx\",\"roadmap.md\":\"bBktD0s1\",\"what-is-melange.md\":\"xNwgWe0_\",\"community.md\":\"Bzs-vVSt\",\"package-management.md\":\"02odF0u-\",\"new-to-ocaml.md\":\"7pxEwtRP\",\"how-to-guides.md\":\"OCPCqOE0\",\"build-system.md\":\"LZXYnYrR\",\"melange-for-x-developers.md\":\"FYEYYz_g\",\"getting-started.md\":\"Xo-xlWZT\",\"communicate-with-javascript.md\":\"eUPLfPw-\"}");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\":\"/v4.0.0/\",\"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\":\"Blog\",\"link\":\"https://melange.re/blog\"},{\"text\":\"v4.0.0\",\"items\":[{\"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\":\"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\":\"Communicate with JavaScript\",\"link\":\"/communicate-with-javascript\"},{\"text\":\"How-to Guides\",\"link\":\"/how-to-guides\"},{\"text\":\"Melange for X Developers\",\"link\":\"/melange-for-x-developers\"}]},{\"text\":\"Reference\",\"items\":[{\"text\":\"API\",\"link\":\"/api\"}]},{\"text\":\"Try\",\"items\":[{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"}]},{\"text\":\"About\",\"items\":[{\"text\":\"Community\",\"link\":\"/community\"},{\"text\":\"Roadmap\",\"link\":\"/roadmap\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/melange-re/melange\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"community.md\":\"Bzs-vVSt\",\"getting-started.md\":\"gWT2d_QO\",\"api.md\":\"OZmnhWWS\",\"what-is-melange.md\":\"xNwgWe0_\",\"index.md\":\"VTHgV44G\",\"build-system.md\":\"Jqtb4JX9\",\"how-to-guides.md\":\"1mv9jS-X\",\"melange-for-x-developers.md\":\"FYEYYz_g\",\"roadmap.md\":\"bBktD0s1\",\"new-to-ocaml.md\":\"7pxEwtRP\",\"rationale.md\":\"aDrhyKzx\",\"package-management.md\":\"8SAbx3jO\",\"communicate-with-javascript.md\":\"eUPLfPw-\"}");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\":\"/v4.0.0/\",\"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\":\"Blog\",\"link\":\"https://melange.re/blog\"},{\"text\":\"v4.0.0\",\"items\":[{\"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\":\"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\":\"Communicate with JavaScript\",\"link\":\"/communicate-with-javascript\"},{\"text\":\"How-to Guides\",\"link\":\"/how-to-guides\"},{\"text\":\"Melange for X Developers\",\"link\":\"/melange-for-x-developers\"}]},{\"text\":\"Reference\",\"items\":[{\"text\":\"API\",\"link\":\"/api\"}]},{\"text\":\"Try\",\"items\":[{\"text\":\"Playground\",\"link\":\"/playground/\",\"target\":\"_self\"}]},{\"text\":\"About\",\"items\":[{\"text\":\"Community\",\"link\":\"/community\"},{\"text\":\"Roadmap\",\"link\":\"/roadmap\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/melange-re/melange\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
 
   </body>
 </html>