ElixirScript - converts Elixir to JavaScript

Hi, I just published version 0.23.0 of Elixirscript.

Most of the changes are around JavaScript interop now that Elixirscript uses the Elixir compiler to compile and load files during compilation. This also means you can define macros in the same file now. Another bonus is that this release makes it a bit easier to share code between Elixir and Elixirscript.

That’s about it. Try it out and any feedback is always helpful.

11 Likes

I’ve been tempted to write a little webcomponent or polymer or so integration with it to see how it works, be a nice little bite-size thing to test with. :slight_smile:

1 Like

Nice! Let me know how it goes. I had written a small React example before for a local meetup, but never posted it online. I’m going to try to do that this week.

2 Likes

Hello I just published the latest version of Elixirscript. For a full list of the changes, take a look at the changelog The major changes in this version are:

  • Can select between ES, CommonJS, or UMD module formats for output
  • Can use and compile dependencies in mix projects (if dependency has the elixirscript compiler in its mix compilers)
  • Default input and output paths in mix projects

There is now an elixirscript organization with the projects that it uses. Also there is a newly created blog with the first post giving more details about the majors changes.

Finally, a gitter room was created for the project. The elixirscript channel on the elixir-lang slack still exists and I’ll still be there. The gitter room allows for integrations and keeps the history.

8 Likes

Ooo, awesome an update! :slight_smile:

3 Likes

Elixirscript 0.26.0 has been released. The biggest change is that output is reduced to a single file.

For a summary of the major changes, check out the post here

For a list of all changes, check out the changelog

Hex: https://hex.pm/packages/elixir_script
Release on GitHub: https://github.com/elixirscript/elixirscript/releases/tag/v0.26.0

3 Likes

@OvermindDL1 I’ve been looking at BuckleScript a lot lately. I know you are a fan of it. I’m wondering how do you like its JavaScript interoperability? https://bloomberg.github.io/bucklescript/Manual.html#_ocaml_calling_js

Wondering if maybe there are some things there that are worth borrowing for Elixirscript

1 Like

It’s Javascript typed bindings are just done via OCaml’s normal FFI system, it just all fit very well. :slight_smile:

But yeah, I’d probably do something similar in Elixirscript. Last I saw Elixirscript you still did the JS.import bit (though now removed according to your just-now changelog ^.^), I’d probably do something like:

defjsmodule Underscore, import_name: "_" do
  deffun blah/2
end

Or whatever, although you could add typing information like I’m doing in TypedElixir so you can cause compile-errors when interfaces are mis-used. :slight_smile:

But yeah, OCaml’s FFI is just typing the interface, which the compiler then resolves to JS modules, it is very succinct and powerful and safe, as well as hard to borrow without having types in Elixir. ^.^

1 Like

Ah that makes sense. Eventually I would like to get it to the point of requiring no JavaScript at all. It’s partially what the JS module is for right now, but could be built up to allow for more. The 2 systems that have impressed my so far are BuckleScript and Scala.js. But I guess both of those are type heavy examples. Anyways, I think there are somethings that can be done to get closer to that goal

2 Likes

@bryanjos: I saw docs at github and have some questions:

  1. Do you support converting whole Elixir project into JavaScript app?
    I mean not only specified directory, but also config, tests and others?
  2. Is it possible to prefix JavaScript calls in Elixir code? :console.log("hello") => :js.console.log("hello"). This could conflict with libraries (I mainly think about :document).
  3. I have a problem with last (4144) line: export default Elixir;, I got error message: SyntaxError: export declarations may only appear at top level of a module in Firefox Nightly and Uncaught SyntaxError: Unexpected token export in Chrome.
2 Likes

@Eiji

  1. Right now only a specific directory. I haven’t tested converting config or tests.

  2. Not possible right now, but something that could be up for discussion. I know clojurescript does something similar and it may be a good idea here. There is the “JS” modules which can be the jumping off point for that.

  3. Try using the “umd” format instead. The default is “es” which isn’t supported by browsers just yet

Edit: I probably need to do a good sweep of the docs to make sure they are up to date

1 Like

@bryanjos: How I should start app?
My code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="Elixir.App.js"></script>
    <style>
      h1 { text-align: center; }
    </style>
    <title>Example</title>
  </head>
  <body>
    <h1>
      Example
    </h1>
    <script>
      Elixir.start(Elixir.Example, []); // like that?
    </script>
  </body>
</html>
1 Like

@Eiji that’s correct. So if you had a module named Example with a start/2 function, running what you have would run it

1 Like

&Example.start/2 is what I have missed, thanks :smile:

I have more questions:

  1. Do you support defining classes? I’m interested in: custom elements - it’s important for me.

  2. Can I change JavaScript file name?

  3. Do you support module and method docs?

  4. How I can access other methods? Do I need to implement &start/2 method for every module? I currently have this:

Elixir.start(Elixir.Example, []);
Elixir.Example.__exports.hello();
  1. I have a problem with Logger:
** (RuntimeError) Module Logger not found
    lib/elixir_script/translator/lexical_scope.ex:361: ElixirScript.Translator.LexicalScope.check_for_module_existence/2
    lib/elixir_script/translator/lexical_scope.ex:314: ElixirScript.Translator.LexicalScope.add_require/2
    lib/elixir_script/translator.ex:469: ElixirScript.Translator.do_translate/2
    (elixir) lib/enum.ex:1325: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
    (elixir) lib/enum.ex:1325: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
    lib/elixir_script/translator/kernel/special_forms/block.ex:7: ElixirScript.Translator.Block.make_block/2
    lib/elixir_script/translator/kernel/defmodule.ex:88: ElixirScript.Translator.Defmodule.translate_body/2
    lib/elixir_script/translator/kernel/defmodule.ex:50: ElixirScript.Translator.Defmodule.process_module/3
1 Like

There is no support for defining classes and that’s on purpose. But if someone can find an idiomatic Elixir way to add classes I am all for it. Even though Elixirscript can’t create classes, it can instantiate them with JS.new/2. I hardly ever use classes in JavaScript so it’s a low priority for me.

You can’t change the output name now, but it is something that can be allowed now. I can make an issue to update the output parameter to allow for that.

Does not support method and module docs. I don’t see a reason to since this is a compile target.

start/2 is meant to be the “main” or entrypoint of your Elixirscript application. If you want to other modules outside of the Elixirscript scope then yes you would have to define start on them. or call __load(Elixir) directly or the module to load it and get an object returned with the functions defined on it.

Not all of the standard library is supported yet, but Logger may be a simple one to add. I’ll make an issue for it.

1 Like

Imagine that you prefer to use Elixir, but want to create a JavaScript library. As you know API docs are really useful for other developers.

1 Like

The problem is that you already have it in docs in section called Completed Modules:

Completed Modules

  • Tuple
  • List
  • Atom
  • Range
  • Logger
  • Map
  • MapSet

so I thought that I can use it already. What about create a Logger backend - is it a good way for you?

1 Like

Good point :slight_smile: I’ll update the docs. There used to be an implementation in the earlier days but since I started implementing the standard library in elixir I never added one back.

1 Like

You could write a simple Macro that creates Module with some info, for example in module attributes.

defjsclass MyModuleName, :main do
  # shortcut for define variable getter
  defjsvariable :variable_name, :get
  # shortcut for define another variable getter and setter
  defjsvariable :another_variable_name, :both
  
  def main do
    # ...
  end
end

that should be visible like:

defmodule MyModuleName do
  @elixir_script_class_constructor_method_name :main
  @elixir_script_is_class true

  # shortcut for define variable getter
  defjsvariable :variable_name, :get
  # shortcut for define another variable getter and setter
  defjsvariable :another_variable_name, :both

  def main do
    # ...
  end
end
1 Like

cough: https://github.com/wojtekmach/oop

Just a joke, but it works! ^.^

3 Likes