In this post we'll get syntax highlighting working and meet all the elm binaries.
- elm-make
- elm-package
- elm-reactor
We start this article from where we left in How to setup your local development environment for Elm from source, with a newly installed Elm environment we want to take for a spin.
Elm support in Sublime Text####
There are some editors that have plugins for Elm, namely the usual suspects, Vim, Emacs, Atom and Sublime Text.
When I started out with Elm the Emacs support was buggy, so I ended up buying Sublime Text, and as it works quite well for me I haven't looked back.
Install Package Control, following the instructions here, then Tools-> Command Palette -> type "Install" and chose "Package Control: Install package".
Search for "Elm Language Support" on the installable packages list and confirm.
Assuming that worked, you're now ready to edit Elm source code.
Compiling Elm code with elm-make###
This is an Hello World, we'll compile it and run it:
import Html exposing (span, text)
import Html.Attributes exposing (class)
main =
span [class "welcome-message"] [text "Hello, World!"]
use elm-make to compile it to an js file page you can add to an html page and execute in a browser:
$ elm-make hello.elm
Likely you'll see elm-package in action, while it automatically finds that you are missing a dependency:
Some new packages are needed. Here is the upgrade plan.
Install:
elm-lang/core 2.1.0
Do you approve of this plan? (y/n) y
Downloading elm-lang/core
Packages configured successfully!
Error when searching for modules imported by module 'Main':
Could not find module 'Html'
Potential problems could be:
* Misspelled the module name
* Need to add a source directory or new dependency to elm-package.json
Elm-make has created a template elm-package.json
for you, it holds the data needed by elm-make to compile your project. Dependencies, versions, and much more.
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/USER/PROJECT.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "2.1.0 <= v < 3.0.0"
},
"elm-version": "0.15.1 <= v < 0.16.0"
}
It only filled in elm-core
as a dependency, but we also need the Html library. You can look libraries up at the elm-package repository.
The package you need is evancz/elm-html
.
By attempting to install it with elm-package you'll find that it will ask you nicely if you want it to update your elm-package.json
for you as well:
elm-package install evancz/elm-html
To install evancz/elm-html I would like to add the following
dependency to elm-package.json:
"evancz/elm-html": "4.0.1 <= v < 5.0.0"
May I add that to elm-package.json for you? (y/n)
After it completes the installation of the dependencies, you can try to compile again, and this time there is no more yak shaving awaiting you:
$ elm-make hello.elm
Success! Compiled 37 modules.
Successfully generated elm.js
This generates a .js file that you can include in a web page.
To generate a convenient html file that you can directly execute in your browser use:
$ elm-make hello.elm --output=hello.html
Success! Compiled 1 modules.
Successfully generated hello.html
Debugging workflow with Elm Reactor####
This guide wouldn't be complete without showing you how to use Elm's debugger workflow, elm-reactor.
It's unlikely you have seen anything like this before, as I hadn't. It's a time travelling debugger.
For more about how a Time Travelling Debugger works take a look at my video overview of elm-reactor.
The hello world isn't very interesting and there's not much to debug. So let's use another example, create mouse.elm:
import Graphics.Element exposing (..)
import Mouse
main : Signal Element
main =
Signal.map show Mouse.position
Run $ elm-reactor
in the directory your code is.
Elm Reactor 0.3.2 (Elm Platform 0.15.1)
Listening on http://0.0.0.0:8000/
Open the url it will give you, you will see a list of your file and directories, some with a gear icon at the left. If you click on the name of an Elm file it will execute it. But what we're interested in is reached by pressing the gear icon near the file you want to debug, mouse.elm.
Everytime you move the mouse the coordinate shown update, but also the session counter on the right side of the page keep adding states. If you grab the slider and drag it back and forth you'll be able to go through all the coordinate values the program has shown before pausing.
Add a watch to the mouse position, and the values should be shown on the right side of the page, below the states slider, you also have to add Debug to your imports.
import Graphics.Element exposing (..)
import Mouse
import Debug
main : Signal Element
main =
Signal.map show (Signal.map (Debug.watch "mouse") Mouse.position)
Next: (Coming soon)
Thanks to Janis Voigtländer, Gil Mizrahi, Richard Feldman and the Elm mailing list.
Comments? Give me a shout at @lambda_cat.
To get the latest post updates subscribe to the LambdaCat newsletter.
You can support my writing on LambdaCat's Patreon.