|
| 1 | + |
| 2 | +<!DOCTYPE html> |
| 3 | +<html lang="en-us"> |
| 4 | +<meta charset="UTF-8"> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | +<meta content="" name="keywords"> |
| 7 | +<meta content="elixirscript 0.26.0 released - Elixirscript" property="og:title"> |
| 8 | +<title>elixirscript 0.26.0 released | Elixirscript</title> |
| 9 | +<link rel="stylesheet" href="https://elixirscript.github.io/css/style.css"> |
| 10 | +<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> |
| 11 | + |
| 12 | +<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css"> |
| 13 | + |
| 14 | + |
| 15 | +<section class="section"> |
| 16 | + <div class="container"> |
| 17 | + <nav class="nav"> |
| 18 | + <div class="nav-left"> |
| 19 | + <a class="nav-item" href="https://elixirscript.github.io"><h1 class="title is-4">Elixirscript</h1></a> |
| 20 | + </div> |
| 21 | + <div class="nav-right"> |
| 22 | + <nav class="nav-item level is-mobile"> |
| 23 | + |
| 24 | + <a class="level-item" href="https://github.com/elixirscript"> |
| 25 | + <span class="icon"> |
| 26 | + <i class="fa fa-github"></i> |
| 27 | + </span> |
| 28 | + </a> |
| 29 | + |
| 30 | + <a class="level-item" href="/index.xml"> |
| 31 | + <span class="icon"> |
| 32 | + <i class="fa fa-rss"></i> |
| 33 | + </span> |
| 34 | + </a> |
| 35 | + |
| 36 | + </nav> |
| 37 | + </div> |
| 38 | + </nav> |
| 39 | + </div> |
| 40 | +</section> |
| 41 | + |
| 42 | +<section class="section"> |
| 43 | + <div class="container"> |
| 44 | + <h2 class="subtitle is-6">February 25, 2017</h2> |
| 45 | + <h1 class="title">elixirscript 0.26.0 released</h1> |
| 46 | + |
| 47 | + <div class="content"> |
| 48 | + |
| 49 | + |
| 50 | +<p>For a full list of changes, check out out the <a href="https://github.com/elixirscript/elixirscript/blob/master/CHANGELOG.md">changelog</a>.</p> |
| 51 | + |
| 52 | +<p>This version of Elixirscript has a lot of major changes. Here are some of the changes in the new release:</p> |
| 53 | + |
| 54 | +<h2 id="bundled-output">Bundled output</h2> |
| 55 | + |
| 56 | +<p>This release is the bundle all output into a single file. Now the only file output will be <code>Elixir.App.js.</code></p> |
| 57 | + |
| 58 | +<h2 id="removed-on-js-load">Removed <code>@on_js_load</code></h2> |
| 59 | + |
| 60 | +<p><code>@on_js_load</code> is no more. To start an application, do the following:</p> |
| 61 | + |
| 62 | +<pre><code class="language-js">//Note: An ES module example. Update for your module output of choice |
| 63 | +import Elixir from "./Elixir.App"; |
| 64 | + |
| 65 | +const my_inital_args = []; |
| 66 | +Elixir.start(Elixir.MyApp, my_inital_args); |
| 67 | +</code></pre> |
| 68 | + |
| 69 | +<p>This looks for a <code>start/2</code> function in the <code>MyApp</code> module. It tries to mimick the API of a normal Elixir Application.</p> |
| 70 | + |
| 71 | +<pre><code class="language-elixir"> def start(type, args) do |
| 72 | + end |
| 73 | +</code></pre> |
| 74 | + |
| 75 | +<h2 id="removed-js-import">Removed <code>JS.import</code></h2> |
| 76 | + |
| 77 | +<p><code>JS.import</code> is also no more. External JavaScript modules are now defined in configuration. A new configuration, <code>js_modules</code> is where they go.</p> |
| 78 | + |
| 79 | +<pre><code class="language-elixir">js_modules: [ |
| 80 | + {React, "react"}, |
| 81 | + {ReactDOM, "react-dom"} |
| 82 | +] |
| 83 | +</code></pre> |
| 84 | + |
| 85 | +<p>Elixirscript adds both <code>React</code> and <code>ReactDOM</code> imports to the top of the bundled output. Each item must be 2-tuple or a 3-tuple. The third element is an optional keyword list of options.</p> |
| 86 | + |
| 87 | +<p>The CLI now has a <code>js-module</code> to support the above.</p> |
| 88 | + |
| 89 | +<p><code>elixirscript input/path -o output/path --js-module React:react --js-module ReactDOM:react-dom</code></p> |
| 90 | + |
| 91 | + </div> |
| 92 | + </div> |
| 93 | +</section> |
| 94 | + |
| 95 | + |
| 96 | +<section class="section"> |
| 97 | + <div class="container has-text-centered"> |
| 98 | + <p></p> |
| 99 | + </div> |
| 100 | +</section> |
| 101 | +<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" integrity="sha256-KbfTjB0WZ8vvXngdpJGY3Yp3xKk+tttbqClO11anCIU=" crossorigin="anonymous"></script> |
| 102 | + |
| 103 | +<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/elixir.min.js"></script> |
| 104 | + |
| 105 | +<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script> |
| 106 | + |
| 107 | +<script>hljs.initHighlightingOnLoad();</script> |
| 108 | + |
| 109 | + |
0 commit comments