Overview

Elm Friday: Imports (Part VIII)

No Comments

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.

Qualified Imports

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, Html and Html.Attributes:

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. (or Html.Attributes., respectively). Thus, we know that the functions Html.text or 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."
        ]
    ]

Comment

Your email address will not be published. Required fields are marked *