Current section
Files
Jump to
Current section
Files
doc/Boam.JS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="ExDoc v0.40.1">
<meta name="project" content="boam v0.1.4">
<title>Boam.JS — boam v0.1.4</title>
<link rel="stylesheet" href="dist/html-elixir-YJO4MOOW.css" />
<script defer src="dist/sidebar_items-CF3A9E4F.js"></script>
<script defer src="docs_config.js"></script>
<script defer src="dist/html-YU4BZFVS.js"></script>
</head>
<body>
<script>(()=>{var t="ex_doc:settings",e="dark";var o="dark",s="light";var E="sidebar_state",n="closed";var r="sidebar_width";var a="sidebar-open";var i=new URLSearchParams(window.location.search),S=i.get("theme")||JSON.parse(localStorage.getItem(t)||"{}").theme;(S===o||S!==s&&window.matchMedia("(prefers-color-scheme: dark)").matches)&&document.body.classList.add(e);var d=sessionStorage.getItem(E),A=d!==n&&!window.matchMedia(`screen and (max-width: ${768}px)`).matches;document.body.classList.toggle(a,A);var c=sessionStorage.getItem(r);c&&document.body.style.setProperty("--sidebarWidth",`${c}px`);var p=/(Macintosh|iPhone|iPad|iPod)/.test(window.navigator.userAgent);document.documentElement.classList.toggle("apple-os",p);})();
</script>
<div class="body-wrapper">
<button id="sidebar-menu" class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
<i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
</button>
<nav id="sidebar" class="sidebar">
<div class="sidebar-header">
<div class="sidebar-projectInfo">
<div>
<a href="readme.html" class="sidebar-projectName" translate="no">
boam
</a>
<div class="sidebar-projectVersion" translate="no">
v0.1.4
</div>
</div>
</div>
<ul id="sidebar-list-nav" class="sidebar-list-nav" role="tablist" data-extras="Pages"></ul>
</div>
</nav>
<output role="status" id="toast"></output>
<main class="content page-module" id="main" data-type="modules">
<div id="content" class="content-inner">
<div class="top-search">
<div class="search-settings">
<form class="search-bar" action="search.html">
<label class="search-label">
<span class="sr-only">Search documentation of boam</span>
<div class="search-input-wrapper">
<input name="q" type="text" class="search-input" placeholder="Press / to search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
<button type="button" tabindex="-1" class="search-close-button" aria-hidden="true">
<i class="ri-close-line ri-lg" title="Cancel search"></i>
</button>
</div>
</label>
</form>
<div class="autocomplete">
</div>
<div class="engine-selector" data-multiple="false">
<button type="button" class="engine-button" aria-label="Select search engine" aria-haspopup="true" aria-expanded="false">
<i class="ri-search-2-line" aria-hidden="true"></i>
<span class="engine-name">Default</span>
<i class="ri-arrow-down-s-line" aria-hidden="true"></i>
</button>
<div class="engine-dropdown" hidden role="menu">
<button type="button"
class="engine-option"
data-engine-url="search.html?q="
role="menuitemradio"
aria-checked="true">
<span class="name">Default</span>
<span class="help">In-browser search</span>
</button>
</div>
</div>
<button class="icon-settings display-settings">
<i class="ri-settings-3-line"></i>
<span class="sr-only">Settings</span>
</button>
</div>
</div>
<div id="top-content">
<div class="heading-with-actions top-heading">
<h1>
<span translate="no">Boam.<wbr>JS</span>
<small class="app-vsn" translate="no">(boam v0.1.4)</small>
</h1>
<a href="Boam.JS.md" title="Copy Markdown (hold Ctrl/Cmd and click it to open as Markdown)" class="copy-markdown icon-action" rel="help">
<i class="ri-markdown-line" aria-hidden="true"></i>
<span class="sr-only">Copy Markdown</span>
</a>
</div>
<section id="moduledoc">
<p>Helpers for generating JavaScript shim code around the <code class="inline">beam.call(...)</code> bridge.</p><p>The main entrypoint is <a href="#export_prelude/1"><code class="inline">export_prelude/1</code></a>, which takes a nested export tree and
returns JavaScript source that installs functions on <code class="inline">globalThis</code>.</p><p>This is useful in two modes:</p><ul><li>pass the generated string through <code class="inline">prelude:</code> when you want manual control
over dispatching</li><li>let <a href="Boam.Runtime.html"><code class="inline">Boam.Runtime</code></a> do the same work automatically with <code class="inline">:js_expose</code></li></ul><h2 id="module-examples" class="section-heading"><a href="#module-examples" class="hover-link"><i class="ri-link-m" aria-hidden="true"></i></a><span class="text">Examples</span></h2><p>Generate a manual prelude:</p><pre><code class="makeup elixir" translate="no"><span class="n">prelude</span><span class="w"> </span><span class="o">=</span><span class="w">
</span><span class="nc">Boam.JS</span><span class="o">.</span><span class="n">export_prelude</span><span class="p" data-group-id="1673315634-1">(</span><span class="p" data-group-id="1673315634-2">%{</span><span class="w">
</span><span class="ss">console</span><span class="p">:</span><span class="w"> </span><span class="p" data-group-id="1673315634-3">%{</span><span class="w">
</span><span class="ss">log</span><span class="p">:</span><span class="w"> </span><span class="no">true</span><span class="p">,</span><span class="w">
</span><span class="ss">error</span><span class="p">:</span><span class="w"> </span><span class="p" data-group-id="1673315634-4">{</span><span class="ss">:dispatch</span><span class="p">,</span><span class="w"> </span><span class="s">"logger.error"</span><span class="p" data-group-id="1673315634-4">}</span><span class="w">
</span><span class="p" data-group-id="1673315634-3">}</span><span class="w">
</span><span class="p" data-group-id="1673315634-2">}</span><span class="p" data-group-id="1673315634-1">)</span></code></pre><p>That produces JavaScript equivalent to:</p><pre><code class="javascript">if (globalThis["console"] == null) { globalThis["console"] = {}; }
globalThis["console"]["log"] = (...args) => beam.call("console.log", ...args);
globalThis["console"]["error"] = (...args) => beam.call("logger.error", ...args);</code></pre>
</section>
</div>
<section id="summary" class="details-list">
<h2 class="section-heading">
<a class="hover-link" href="#summary">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Summary</span>
</h2>
<div class="summary-types summary">
<h3>
<a href="#types">Types</a>
</h3>
<div class="summary-row">
<div class="summary-signature">
<a href="#t:export_tree/0" data-no-tooltip="" translate="no">export_tree()</a>
</div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#t:leaf/0" data-no-tooltip="" translate="no">leaf()</a>
</div>
<div class="summary-synopsis"><p>Leaf spec for a generated JavaScript function.</p></div>
</div>
<div class="summary-row">
<div class="summary-signature">
<a href="#t:path_key/0" data-no-tooltip="" translate="no">path_key()</a>
</div>
</div>
</div>
<div class="summary-functions summary">
<h3>
<a href="#functions">Functions</a>
</h3>
<div class="summary-row">
<div class="summary-signature">
<a href="#export_prelude/1" data-no-tooltip="" translate="no">export_prelude(tree)</a>
</div>
<div class="summary-synopsis"><p>Builds a JavaScript prelude that exposes nested shim functions on <code class="inline">globalThis</code>.</p></div>
</div>
</div>
</section>
<section id="types" class="details-list">
<h2 class="section-heading">
<a class="hover-link" href="#types">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Types</span>
</h2>
<div class="types-list">
<section class="detail" id="t:export_tree/0">
<div class="detail-header">
<a href="#t:export_tree/0" class="detail-link" data-no-tooltip="" aria-label="Link to this type">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<div class="heading-with-actions">
<h1 class="signature" translate="no">export_tree()</h1>
</div>
</div>
<section class="docstring">
<div class="specs">
<pre translate="no"><span class="attribute">@type</span> export_tree() ::
%{optional(<a href="#t:path_key/0">path_key</a>()) => <a href="#t:export_tree/0">export_tree</a>() | <a href="#t:leaf/0">leaf</a>()}
| <a href="https://hexdocs.pm/elixir/typespecs.html#built-in-types">keyword</a>(<a href="#t:export_tree/0">export_tree</a>() | <a href="#t:leaf/0">leaf</a>())</pre>
</div>
</section>
</section>
<section class="detail" id="t:leaf/0">
<div class="detail-header">
<a href="#t:leaf/0" class="detail-link" data-no-tooltip="" aria-label="Link to this type">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<div class="heading-with-actions">
<h1 class="signature" translate="no">leaf()</h1>
</div>
</div>
<section class="docstring">
<div class="specs">
<pre translate="no"><span class="attribute">@type</span> leaf() :: true | {:dispatch, <a href="https://hexdocs.pm/elixir/typespecs.html#basic-types">atom</a>() | <a href="https://hexdocs.pm/elixir/String.html#t:t/0">String.t</a>()}</pre>
</div>
<p>Leaf spec for a generated JavaScript function.</p><ul><li><code class="inline">true</code> derives the dispatch name from the nested path</li><li><code class="inline">{:dispatch, name}</code> generates a shim without attaching a handler</li></ul>
</section>
</section>
<section class="detail" id="t:path_key/0">
<div class="detail-header">
<a href="#t:path_key/0" class="detail-link" data-no-tooltip="" aria-label="Link to this type">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<div class="heading-with-actions">
<h1 class="signature" translate="no">path_key()</h1>
</div>
</div>
<section class="docstring">
<div class="specs">
<pre translate="no"><span class="attribute">@type</span> path_key() :: <a href="https://hexdocs.pm/elixir/typespecs.html#basic-types">atom</a>() | <a href="https://hexdocs.pm/elixir/String.html#t:t/0">String.t</a>()</pre>
</div>
</section>
</section>
</div>
</section>
<section id="functions" class="details-list">
<h2 class="section-heading">
<a class="hover-link" href="#functions">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<span class="text">Functions</span>
</h2>
<div class="functions-list">
<section class="detail" id="export_prelude/1">
<div class="detail-header">
<a href="#export_prelude/1" class="detail-link" data-no-tooltip="" aria-label="Link to this function">
<i class="ri-link-m" aria-hidden="true"></i>
</a>
<div class="heading-with-actions">
<h1 class="signature" translate="no">export_prelude(tree)</h1>
</div>
</div>
<section class="docstring">
<div class="specs">
<pre translate="no"><span class="attribute">@spec</span> export_prelude(<a href="#t:export_tree/0">export_tree</a>()) :: <a href="https://hexdocs.pm/elixir/String.html#t:t/0">String.t</a>()</pre>
</div>
<p>Builds a JavaScript prelude that exposes nested shim functions on <code class="inline">globalThis</code>.</p><p>Leaf dispatch names default to the dot-joined path. For example:</p><pre><code class="makeup elixir" translate="no"><span class="nc">Boam.JS</span><span class="o">.</span><span class="n">export_prelude</span><span class="p" data-group-id="3423495068-1">(</span><span class="p" data-group-id="3423495068-2">%{</span><span class="w">
</span><span class="ss">console</span><span class="p">:</span><span class="w"> </span><span class="p" data-group-id="3423495068-3">%{</span><span class="w">
</span><span class="ss">log</span><span class="p">:</span><span class="w"> </span><span class="no">true</span><span class="w">
</span><span class="p" data-group-id="3423495068-3">}</span><span class="w">
</span><span class="p" data-group-id="3423495068-2">}</span><span class="p" data-group-id="3423495068-1">)</span></code></pre><p>defines <code class="inline">globalThis.console.log = (...args) => beam.call("console.log", ...args)</code>.</p>
</section>
</section>
</div>
</section>
<footer class="footer">
<p>
<span class="line">
<a href="https://hex.pm/packages/boam/0.1.4">Hex Package</a>
<a href="https://preview.hex.pm/preview/boam/0.1.4">Hex Preview</a>
</span>
<span class="line">
<button class="a-main footer-button display-quick-switch" title="Go to package docs">
Go to package docs
</button>
<a href="llms.txt" target="_blank">
View llms.txt
</a>
<a href="boam.epub">
Download ePub version
</a>
</span>
</p>
<p class="built-using">
Built using
<a href="https://github.com/elixir-lang/ex_doc" title="ExDoc" target="_blank" rel="help noopener" translate="no">ExDoc</a> (v0.40.1) for the
<a href="https://elixir-lang.org" title="Elixir" target="_blank" translate="no">Elixir programming language</a>
</p>
</footer>
</div>
</main>
</div>
</body>
</html>