Nearly all modules you’ll write in Elm need to import other modules to do their work; also, all our examples so far had some import statements. In this episode, we take a closer look at the import statement and at the different ways to import modules.
About This Series
This is the eighth post in a series of short and sweet blog posts about Elm. The stated goal of this series is to take you from “completely clueless about Elm” to “chief Elm guru”, step by step. If you have missed the previous episodes, you might want to check out the table of contents.
Let’s look at a basic example that just renders some static HTML:
import Html import Html.Attributes main : Html.Html main = Html.div  [ Html.p  [ Html.text "This is the first paragraph" ] , Html.p  [ Html.text "This is another paragraph" ] , Html.hr   , Html.ul  [ Html.li  [ Html.text "some" ] , Html.li  [ Html.text "bullet" ] , Html.li  [ Html.text "points" ] ] , Html.p  [ Html.text "This is the " , Html.span [ Html.Attributes.style [("font-weight", "bold")] ] [ Html.text "closing" ] , Html.text " paragraph." ] ]
This would render the following HTML:
<div> <p>This is the first paragraph</p> <p>This is another paragraph</p> <hr> <ul> <li>some</li> <li>bullet</li> <li>points</li> </ul> <p> This is the <span style="font-weight: bold;">closing</span> paragraph. </p> </div>
As always, go ahead and try stuff out for yourself, for example by copying this into a file named
Imports.elm and check the result with elm-reactor.
This piece of Elm imports two modules,
import Html import Html.Attributes
An import statement basically tells the Elm compiler to load these two modules and to use stuff from them whenever it encounters anything that is prefixed with
Html.Attributes., respectively). Thus, we know that the functions
Html.Attributes.style that we are using in the example code come from said modules.
By the way, where do the imported modules come from? That depends. You can import modules from third party packages that have been installed via
elm-package install. You can also import your own modules from your current project’s source folder (there will be a separate blog post on how to structure your code base with modules later).
In this example, we are importing modules from the package
evancz/elm-html so you would need to install this via
elm-package install --yes evancz/elm-html to follow along. If you already did the examples in episode 3 or episode 4 you can just create a new file (say, Imports.elm) in the same
elm-playground directory and you are good to go. We already installed the elm-html package there.
Coming back to the example code, let’s be honest here: This code looks really bloated with all the redundant
Html.qualifiers. This is where the
exposing keyword comes in.
Open Imports aka Unqualified Imports
The following code example makes use of open imports by using
import exposing, so that the imported identifiers can be used without prefix.
import Html exposing (Html, div, hr, li, p, span, text, ul) import Html.Attributes exposing (style) main : Html main = div  [ p  [ text "This is the first paragraph" ] , p  [ text "This is another paragraph" ] , hr   , ul  [ li  [ text "some" ] , li  [ text "bullet" ] , li  [ text "points" ] ] , p  [ text "This is the " , span [ style [("font-weight", "bold")] ] [ text "closing" ] , text " paragraph." ] ]