|
| 1 | +# JavaScript Interoperability |
| 2 | + |
| 3 | +## ElixirScript Calling JavaScript |
| 4 | + |
| 5 | +### JS module |
| 6 | + |
| 7 | +The `JS` module has functions and macros that help with interacting with JavaScript. |
| 8 | +These mostly correspond to JavaScript keywords that may be useful. |
| 9 | + |
| 10 | +```elixir |
| 11 | +# Calling the JavaScript Debugger |
| 12 | +JS.debugger() |
| 13 | + |
| 14 | +# Getting the type of a value |
| 15 | +JS.typeof(my_value) |
| 16 | + |
| 17 | +# Creating a new JavaScript Map |
| 18 | +map = JS.new(JS.Map, []) |
| 19 | +``` |
| 20 | + |
| 21 | +### Accessing Global Objects, Functions, and Properties |
| 22 | + |
| 23 | +In order to interact with JavaScript things in the global scope, append "JS" to them. The global scope corresponds to whatever the global object is in the JavaScript environment you are in. For example, in a browser this would be `window` or `self`: |
| 24 | + |
| 25 | +```elixir |
| 26 | +# Calling alert |
| 27 | +JS.alert("hello") |
| 28 | + |
| 29 | +# Calling a method on Object |
| 30 | +JS.Object.keys(my_object) |
| 31 | + |
| 32 | +# Creating a new JavaScript Date |
| 33 | +JS.new(JS.Date, []) |
| 34 | + |
| 35 | +# Getting the outer width |
| 36 | +JS.outerWidth |
| 37 | +``` |
| 38 | + |
| 39 | +### JavaScript modules |
| 40 | + |
| 41 | +ElixirScript can use JavaScript modules from the supported modules systems. |
| 42 | +In order to do so, you must tell ElixirScript about them upfront. |
| 43 | + |
| 44 | +If using ElixirScript in a mix project, you can do so inside of the ElixirScript configuration keyword list |
| 45 | + |
| 46 | +```elixir |
| 47 | + def project do |
| 48 | + [ |
| 49 | + app: :my_project, |
| 50 | + elixir_script: [ |
| 51 | + format: :es, |
| 52 | + js_modules: [ |
| 53 | + {React, "react"}, |
| 54 | + {ReactDOM, "react-dom"} |
| 55 | + ] |
| 56 | + ] |
| 57 | + ] |
| 58 | + end |
| 59 | +``` |
| 60 | + |
| 61 | +Or if using the CLI, you can do so by passing each module via the `js-module` flag |
| 62 | + |
| 63 | +``` |
| 64 | +elixirscript "app/elixirscript" -o dist --js-module React:react --js-module ReactDOM:react-dom |
| 65 | +``` |
| 66 | + |
| 67 | +Interacting with these modules works the same as interacting with an ElixirScript module |
| 68 | + |
| 69 | +```elixir |
| 70 | +React.createElement(...) |
| 71 | +``` |
| 72 | + |
| 73 | +## JavaScript Calling ElixirScript |
| 74 | + |
| 75 | + In order to start an ElixirScript application, you must first import it using whichever JavaScript module system you are using and then call `Elixir.start` |
| 76 | + |
| 77 | + ```Elixir |
| 78 | + # Our ElixirScript module |
| 79 | + |
| 80 | + defmodule Main do |
| 81 | + def start(:normal, args) do |
| 82 | + JS.console.log(args) |
| 83 | + end |
| 84 | + end |
| 85 | + |
| 86 | + ``` |
| 87 | + |
| 88 | + ```javascript |
| 89 | + //ES module example |
| 90 | + import Elixir from './Elixir.App' |
| 91 | + Elixir.start(Elixir.Main, [1, 2, 3]) |
| 92 | + ``` |
| 93 | + |
| 94 | + In the above example, we have an ElixirScript module, `Main` with a `start/2` function. This function is the entry point into your ElixirScript application. when we call `Elixir.start`, we give it this module's name (All modules when compiled begin with `Elixir.`) and a list of the initial args. |
| 95 | + |
| 96 | + |
| 97 | + If you want to use an ElixirScript module inside of your JavaScript code, you can do so using `Elixir.load`. |
| 98 | + |
| 99 | + ```Elixir |
| 100 | + # Our ElixirScript module |
| 101 | + |
| 102 | + defmodule MyModule do |
| 103 | + def hi() do |
| 104 | + JS.alert("hello") |
| 105 | + end |
| 106 | + end |
| 107 | + ``` |
| 108 | + |
| 109 | + |
| 110 | + ```javascript |
| 111 | + const MyModule = Elixir.load(Elixir.MyModule); |
| 112 | + MyModule.hi() |
| 113 | + ``` |
0 commit comments