v0.19 compatibility (#1)

15 files changed, 238 insertions, 141 deletions

diff --git a/README.md b/README.md
index baed905..d468a1c 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ install the accompanying npm library:
 Then, when you are instantiating your Elm application, change it from:
 
 ```javascript
-var app = Elm.MyApp.fullscreen();
+var app = Elm.MyApp.init();
 ```
 
 to
@@ -33,17 +33,23 @@ to
 ```javascript
 import elmMapbox from "elm-mapbox";
 
-var app = elmMapbox(Elm.MyApp.fullscreen());
+elmMapbox.registerCustomElement();
+var app = Elm.MyApp.init();
+elmMapbox.registerPorts(app);
 ```
 
-(where `MyApp` is your main module and `fullscreen` can be any way of instantiating an elm application).
+(where `MyApp` is your main module and `init` can be any way of instantiating an elm application).
 
-Additionally, you may pass in your mapbox token as an option to this method:
+It is important that these operations proceed in this order, i.e. the custom element is registered before the application first renders. The ports can only be setup immediately afterwards (as they need a reference to the application).
+
+Additionally, you may pass in your mapbox token as an option through this method:
 
 ```javascript
 import elmMapbox from "elm-mapbox";
 
-var app = elmMapbox(Elm.MyApp.fullscreen(), {token: 'pk45.rejkgnwejk'});
+elmMapbox.registerCustomElement({token: 'pk45.rejkgnwejk'});
+var app = Elm.MyApp.init();
+elmMapbox.registerPorts(app);
 ```
 
 Next, optionally, setup a ports module. The best way to do this is to to copy [this file](examples/MapCommands.elm) into your project.
@@ -150,25 +156,28 @@ has a `supported` function that can be injected via flags:
 ```javascript
 import elmMapbox from "elm-mapbox";
 
-var app = elmMapbox(Elm.MyApp.fullscreen({
+var app = Elm.MyApp.fullscreen({
   mapboxSupported: elmMapbox.supported({
     // If  true , the function will return  false if the performance of
     // Mapbox GL JS would be dramatically worse than expected (e.g. a
     // software WebGL renderer would be used).
     failIfMajorPerformanceCaveat: true
   })
-}));
+});
 ```
 
 ### Customizing the JS side
 
-The `elmMapbox` function accepts an options object that takes the following options:
+The `elmMapbox.registerCustomElement` function accepts an options object that takes the following options:
 
  - `token`: the Mapbox token. If you don't pass it here, you will need to use the `token` Elm attribute.
- - `easingFunctions`: an object whose values are easing functions (i.e. they take a number between 0..1 and return a number between 0..1). You can refer to these with the `easing` option in the Cmd.Option module.
  - `onMount` a callback that gives you access to the mapbox instance whenever a map gets instantiated. Mostly useful for registering [plugins](https://www.mapbox.com/mapbox-gl-js/plugins).
 
-Furthermore, the elm-mapbox element exposes its internal mapboxgl.js reference as a `map` property, which you can use if necessary (although, worth mentioning on slack if you are needing to do this). 
+Furthermore, the elm-mapbox element exposes its internal mapboxgl.js reference as a `map` property, which you can use if necessary (although, worth mentioning on slack if you are needing to do this).
+
+The `elmMapbox.registerPorts` function accepts an option object that takes the following options:
+
+ - `easingFunctions`: an object whose values are easing functions (i.e. they take a number between 0..1 and return a number between 0..1). You can refer to these with the `easing` option in the Cmd.Option module.
 
 ### License
 
diff --git a/elm-package.json b/elm.json
index 3fa2f75..74826b8 100644
--- a/elm-package.json
+++ b/elm.json
@@ -1,11 +1,9 @@
 {
-    "version": "1.0.0",
+    "type": "package",
+    "name": "gampleman/elm-mapbox",
     "summary": "An advanced mapping library",
-    "repository": "https://github.com/gampleman/elm-mapbox.git",
     "license": "MIT",
-    "source-directories": [
-        "./src"
-    ],
+    "version": "1.0.0",
     "exposed-modules": [
         "Mapbox.Element",
         "Mapbox.Cmd.Template",
@@ -16,9 +14,11 @@
         "Mapbox.Expression",
         "LngLat"
     ],
+    "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
-        "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
+        "elm/core": "1.0.0 <= v < 2.0.0",
+        "elm/html": "1.0.0 <= v < 2.0.0",
+        "elm/json": "1.0.0 <= v < 2.0.0"
     },
-    "elm-version": "0.18.0 <= v < 0.19.0"
-}
+    "test-dependencies": {}
+}
\ No newline at end of file
diff --git a/examples/Example01.elm b/examples/Example01.elm
index 32f5bd6..91a5dee 100644
--- a/examples/Example01.elm
+++ b/examples/Example01.elm
@@ -1,9 +1,12 @@
 module Example01 exposing (main)
 
+import Browser
 import Html exposing (div, text)
 import Html.Attributes exposing (style)
+import Json.Decode
+import Json.Encode
 import LngLat exposing (LngLat)
-import MapCommands exposing (Response(..))
+import MapCommands
 import Mapbox.Cmd.Option as Opt
 import Mapbox.Element exposing (..)
 import Mapbox.Expression as E exposing (false, float, int, str, true)
@@ -13,7 +16,7 @@ import Mapbox.Style as Style exposing (Style(..))
 
 
 main =
-    Html.program
+    Browser.document
         { init = init
         , view = view
         , update = update
@@ -21,8 +24,8 @@ main =
         }
 
 
-init =
-    ( { position = LngLat 0 0 }, Cmd.none )
+init () =
+    ( { position = LngLat 0 0, features = [] }, Cmd.none )
 
 
 type Msg
@@ -32,55 +35,93 @@ type Msg
 
 update msg model =
     case msg of
-        Hover { lngLat } ->
+        Hover { lngLat, renderedFeatures } ->
             ( { model | position = lngLat }, Cmd.none )
 
-        Click { lngLat } ->
-            ( model, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+        Click { lngLat, renderedFeatures } ->
+            ( { model | position = lngLat, features = renderedFeatures }, MapCommands.fitBounds [ Opt.linear True, Opt.maxZoom 10 ] ( LngLat.map (\a -> a - 0.2) lngLat, LngLat.map (\a -> a + 0.2) lngLat ) )
+
+
+geojson =
+    Json.Decode.decodeString Json.Decode.value """
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": 0,
+      "properties": {
+        "name": "Bermuda Triangle",
+        "area": 1150180
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [-64.73, 32.31],
+            [-80.19, 25.76],
+            [-66.09, 18.43],
+            [-64.73, 32.31]
+          ]
+        ]
+      }
+    }
+  ]
+}
+""" |> Result.withDefault (Json.Encode.object [])
 
 
 view model =
-    div [ style [ ( "width", "100vw" ), ( "height", "100vh" ) ] ]
+    { title = "Mapbox Example"
+    , body =
         [ css
-        , map
-            [ maxZoom 5
-            , onMouseMove Hover
-            , onClick Click
-            , id "my-map"
-            ]
-            (Style
-                { transition = Style.defaultTransition
-                , light = Style.defaultLight
-                , sources =
-                    [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7,astrosat.07pz1g3y" ]
-                , misc =
-                    [ Style.name "light"
-                    , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
-                    , Style.defaultZoomLevel 1.5967483759772743
-                    , Style.sprite "mapbox://sprites/astrosat/cjht22eqw0lfc2ro6z0qhlm29"
-                    , Style.glyphs "mapbox://fonts/astrosat/{fontstack}/{range}.pbf"
-                    ]
-                , layers =
-                    [ Layer.background "background"
-                        [ E.rgba 246 246 244 1 |> Layer.backgroundColor
+        , div [ style "width" "100vw", style "height" "100vh" ]
+            [ map
+                [ maxZoom 5
+                , onMouseMove Hover
+                , onClick Click
+                , id "my-map"
+                , eventFeaturesLayers [ "changes" ]
+                ]
+                (Style
+                    { transition = Style.defaultTransition
+                    , light = Style.defaultLight
+                    , sources =
+                        [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7,astrosat.07pz1g3y"
+                        , Source.geoJSONFromValue "changes" [] geojson
+                        ]
+                    , misc =
+                        [ Style.name "light"
+                        , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
+                        , Style.defaultZoomLevel 1.5967483759772743
+                        , Style.sprite "mapbox://sprites/astrosat/cjht22eqw0lfc2ro6z0qhlm29"
+                        , Style.glyphs "mapbox://fonts/astrosat/{fontstack}/{range}.pbf"
                         ]
-                    , Layer.fill "landcover"
-                        "composite"
-                        [ Layer.sourceLayer "landcover"
-                        , E.any
-                            [ E.getProperty (str "class") |> E.isEqual (str "wood")
-                            , E.getProperty (str "class") |> E.isEqual (str "scrub")
-                            , E.getProperty (str "class") |> E.isEqual (str "grass")
-                            , E.getProperty (str "class") |> E.isEqual (str "crop")
+                    , layers =
+                        [ Layer.background "background"
+                            [ E.rgba 246 246 244 1 |> Layer.backgroundColor
+                            ]
+                        , Layer.fill "landcover"
+                            "composite"
+                            [ Layer.sourceLayer "landcover"
+                            , E.any
+                                [ E.getProperty (str "class") |> E.isEqual (str "wood")
+                                , E.getProperty (str "class") |> E.isEqual (str "scrub")
+                                , E.getProperty (str "class") |> E.isEqual (str "grass")
+                                , E.getProperty (str "class") |> E.isEqual (str "crop")
+                                ]
+                                |> Layer.filter
+                            , Layer.fillColor (E.rgba 227 227 227 1)
+                            , Layer.fillOpacity (float 0.6)
+                            ]
+                        , Layer.fill "changes"
+                            "changes"
+                            [ Layer.fillOpacity (E.ifElse (E.toBool (E.featureState (str "hover"))) (float 1) (float 0.3))
                             ]
-                            |> Layer.filter
-
-                        -- , Layer.fillColor (E.rgba 227 227 227 1)
-                        , Layer.fillColor (E.ifElse (E.coalesce [ (E.featureState (str "hover")), false ]) (E.rgba 20 227 227 1) (E.rgba 227 227 227 1))
-                        , Layer.fillOpacity (float 0.6)
                         ]
-                    ]
-                }
-            )
-        , div [ style [ ( "position", "absolute" ), ( "bottom", "20px" ), ( "left", "20px" ) ] ] [ text (toString model.position) ]
+                    }
+                )
+            , div [ style "position" "absolute", style "bottom" "20px", style "left" "20px" ] [ text (LngLat.toString model.position) ]
+            ]
         ]
+    }
diff --git a/examples/elm-package.json b/examples/elm-package.json
deleted file mode 100644
index 00c0096..0000000
--- a/examples/elm-package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "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": [
-        "../src", "."
-    ],
-    "exposed-modules": [],
-    "dependencies": {
-        "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0"
-    },
-    "elm-version": "0.18.0 <= v < 0.19.0"
-}
diff --git a/examples/elm.json b/examples/elm.json
new file mode 100644
index 0000000..2017dd4
--- /dev/null
+++ b/examples/elm.json
@@ -0,0 +1,25 @@
+{
+    "type": "application",
+    "source-directories": [
+        "../src",
+        "."
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.0",
+            "elm/core": "1.0.0",
+            "elm/html": "1.0.0",
+            "elm/json": "1.0.0"
+        },
+        "indirect": {
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.0"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
\ No newline at end of file
diff --git a/src/LngLat.elm b/src/LngLat.elm
index 537b125..a97d22b 100644
--- a/src/LngLat.elm
+++ b/src/LngLat.elm
@@ -1,13 +1,13 @@
-module LngLat exposing (LngLat, encodeAsPair, encodeAsObject, decodeFromPair, decodeFromObject, map)
+module LngLat exposing (LngLat, decodeFromObject, decodeFromPair, encodeAsObject, encodeAsPair, map, toString)
 
 {-| Encodes geographic position.
 
-@docs LngLat, encodeAsPair, encodeAsObject, decodeFromPair, decodeFromObject, map
+@docs LngLat, encodeAsPair, encodeAsObject, decodeFromPair, decodeFromObject, map, toString
 
 -}
 
-import Json.Encode as Encode exposing (Value)
 import Json.Decode as Decode exposing (Decoder)
+import Json.Encode as Encode exposing (Value)
 
 
 {-| A LngLat represents a geographic position.
@@ -22,7 +22,7 @@ type alias LngLat =
 -}
 encodeAsPair : LngLat -> Value
 encodeAsPair { lng, lat } =
-    Encode.list [ Encode.float lng, Encode.float lat ]
+    Encode.list Encode.float [ lng, lat ]
 
 
 {-| Most implementations seem to encode these as a 2 member array.
@@ -59,3 +59,34 @@ decodeFromObject =
 map : (Float -> Float) -> LngLat -> LngLat
 map f { lng, lat } =
     { lng = f lng, lat = f lat }
+
+
+toDMS : Float -> String -> String -> String
+toDMS angle pos neg =
+    let
+        absAngle =
+            abs angle
+
+        degrees =
+            truncate absAngle
+
+        minutes =
+            (absAngle - toFloat degrees) * 60
+
+        seconds =
+            (minutes - toFloat (truncate minutes)) * 60 |> round
+
+        prefix =
+            if angle > 0 then
+                pos
+            else
+                neg
+    in
+    String.fromInt degrees ++ "° " ++ String.fromInt (truncate minutes) ++ "' " ++ String.fromInt seconds ++ "\"" ++ prefix
+
+
+{-| Returns a text representation suitable for humans.
+-}
+toString : LngLat -> String
+toString { lng, lat } =
+    toDMS lat "N" "S" ++ " " ++ toDMS lng "E" "W"
diff --git a/src/Mapbox/Cmd/Option.elm b/src/Mapbox/Cmd/Option.elm
index 2e3321d..4c6374f 100644
--- a/src/Mapbox/Cmd/Option.elm
+++ b/src/Mapbox/Cmd/Option.elm
@@ -1,4 +1,4 @@
-module Mapbox.Cmd.Option exposing (duration, easing, offset, animate, curve, minZoom, speed, screenSpeed, maxDuration, center, zoom, bearing, pitch, around, padding, Padding, linear, maxZoom)
+module Mapbox.Cmd.Option exposing (Padding, animate, around, bearing, center, curve, duration, easing, linear, maxDuration, maxZoom, minZoom, offset, padding, pitch, screenSpeed, speed, zoom)
 
 {-|
 
@@ -25,12 +25,11 @@ Options common to `jumpTo`, `easeTo`, and `flyTo`, controlling the desired locat
 
 -}
 
-import Mapbox.Helpers exposing (encodePair)
 import Json.Encode as Encode exposing (Value)
-import Mapbox.Cmd.Internal as Internal exposing (Option(..), Supported)
-import Mapbox.Helpers exposing (encodePair)
 import LngLat exposing (LngLat)
+import Mapbox.Cmd.Internal as Internal exposing (Option(..), Supported)
 import Mapbox.Expression exposing (DataExpression, Expression)
+import Mapbox.Helpers exposing (encodePair)
 
 
 {-| The animation's duration, measured in milliseconds.
@@ -176,7 +175,7 @@ maxDuration =
 -}
 layers : List String -> Option { a | layers : Supported }
 layers =
-    List.map Encode.string >> Encode.list >> Option "layers"
+    Encode.list Encode.string >> Option "layers"
 
 
 {-| A filter to limit query results.
@@ -197,4 +196,4 @@ intersectsPoint =
 -}
 intersectsBox : ( LngLat, LngLat ) -> Option { a | query : Supported }
 intersectsBox =
-    encodePair (LngLat.encodeAsPair) >> Option "query"
+    encodePair LngLat.encodeAsPair >> Option "query"
diff --git a/src/Mapbox/Cmd/Template.elm b/src/Mapbox/Cmd/Template.elm
index 4d412d5..3dbf66d 100644
--- a/src/Mapbox/Cmd/Template.elm
+++ b/src/Mapbox/Cmd/Template.elm
@@ -1,4 +1,4 @@
-module Mapbox.Cmd.Template exposing (Id, Outgoing, Option, Supported, panBy, panTo, zoomTo, zoomIn, zoomOut, rotateTo, jumpTo, easeTo, flyTo, stop, fitBounds, resize)
+module Mapbox.Cmd.Template exposing (Id, Option, Outgoing, Supported, easeTo, fitBounds, flyTo, jumpTo, panBy, panTo, resize, rotateTo, stop, zoomIn, zoomOut, zoomTo)
 
 {-| This module has a bunch of essentially imperative commands for your map.
 
@@ -27,9 +27,9 @@ You can of course customize the module you copy into your codebase to support th
 
 import Json.Decode as Decode
 import Json.Encode as Encode exposing (Value)
+import LngLat exposing (LngLat)
 import Mapbox.Cmd.Internal as Internal exposing (Option(..), Supported)
 import Mapbox.Helpers exposing (encodePair)
-import LngLat exposing (LngLat)
 
 
 {-| The type of a port that you need to provide for this module to work.
@@ -367,30 +367,30 @@ queryRenderedFeatures prt id reqId options =
 
 -}
 queryResults : ((Value -> msg) -> Sub msg) -> (Int -> ( LngLat, LngLat ) -> response) -> (Int -> List Value -> response) -> (String -> response) -> (response -> msg) -> Sub msg
-queryResults prt getBounds queryRenderedFeatures error tagger =
-    prt (decodeResponse getBounds queryRenderedFeatures error >> tagger)
+queryResults prt getBounds_ queryRenderedFeatures_ error_ tagger =
+    prt (decodeResponse getBounds_ queryRenderedFeatures_ error_ >> tagger)
 
 
-responseDecoder getBounds queryRenderedFeatures =
+responseDecoder getBounds_ queryRenderedFeatures_ =
     Decode.field "type" Decode.string
         |> Decode.andThen
             (\s ->
                 case s of
                     "getBounds" ->
-                        Decode.map2 getBounds (Decode.field "id" Decode.int) (Decode.field "bounds" (decodePair LngLat.decodeFromPair))
+                        Decode.map2 getBounds_ (Decode.field "id" Decode.int) (Decode.field "bounds" (decodePair LngLat.decodeFromPair))
 
                     "queryRenderedFeatures" ->
-                        Decode.map2 queryRenderedFeatures (Decode.field "id" Decode.int) (Decode.field "features" (Decode.list Decode.value))
+                        Decode.map2 queryRenderedFeatures_ (Decode.field "id" Decode.int) (Decode.field "features" (Decode.list Decode.value))
 
                     _ ->
                         Decode.fail <| "Unrecognized response type: " ++ s
             )
 
 
-decodeResponse getBounds queryRenderedFeatures error value =
-    case Decode.decodeValue (responseDecoder getBounds queryRenderedFeatures) value of
+decodeResponse getBounds_ queryRenderedFeatures_ error_ value =
+    case Decode.decodeValue (responseDecoder getBounds_ queryRenderedFeatures_) value of
         Ok res ->
             res
 
         Err e ->
-            error e
+            error_ (Decode.errorToString e)
diff --git a/src/Mapbox/Element.elm b/src/Mapbox/Element.elm
index 14b6873..b9cd74c 100644
--- a/src/Mapbox/Element.elm
+++ b/src/Mapbox/Element.elm
@@ -20,7 +20,7 @@ module Mapbox.Element exposing (EventData, MapboxAttr, TouchEvent, css, eventFea
 
 import Html exposing (Attribute, Html, node)
 import Html.Attributes exposing (attribute, property)
-import Html.Events exposing (Options)
+import Html.Events
 import Json.Decode as Decode exposing (Decoder, Value)
 import Json.Encode as Encode
 import LngLat exposing (LngLat)
@@ -127,8 +127,7 @@ This needs more design before release.
 -}
 featureState : List ( Value, List ( String, Value ) ) -> MapboxAttr msg
 featureState =
-    List.map (\( feature, state ) -> Encode.list [ feature, Encode.object state ])
-        >> Encode.list
+    Encode.list (\( feature, state ) -> Encode.list identity [ feature, Encode.object state ])
         >> property "featureState"
         >> MapboxAttr
 
@@ -150,7 +149,7 @@ a lot of data. Here you can specify which layers you want to search for intersec
 -}
 eventFeaturesLayers : List String -> MapboxAttr msg
 eventFeaturesLayers =
-    List.map Encode.string >> Encode.list >> property "eventFeaturesLayers" >> MapboxAttr
+    Encode.list Encode.string >> property "eventFeaturesLayers" >> MapboxAttr
 
 
 {-| This allows you to use other events not provided by this libary.
@@ -158,9 +157,9 @@ eventFeaturesLayers =
 See <https://www.mapbox.com/mapbox-gl-js/api/#map.event> for all supported events.
 
 -}
-onWithOptions : String -> Options -> Decoder msg -> MapboxAttr msg
-onWithOptions type_ opts decoder =
-    Html.Events.onWithOptions type_ opts decoder |> MapboxAttr
+on : String -> Decoder msg -> MapboxAttr msg
+on type_ decoder =
+    Html.Events.on type_ decoder |> MapboxAttr
 
 
 {-| `point` is the coordinates in pixels in screen space.
@@ -199,7 +198,7 @@ type alias TouchEvent =
 
 
 decodePoint =
-    Decode.map2 (,) (Decode.field "x" Decode.int) (Decode.field "y" Decode.int)
+    Decode.map2 (\a b -> ( a, b )) (Decode.field "x" Decode.int) (Decode.field "y" Decode.int)
 
 
 decodeEventData =
diff --git a/src/Mapbox/Expression.elm b/src/Mapbox/Expression.elm
index d800188..0206a0c 100644
--- a/src/Mapbox/Expression.elm
+++ b/src/Mapbox/Expression.elm
@@ -236,7 +236,7 @@ The expressions in this section can be used to add conditional logic to your sty
 
 Strings can be compared with a collator for locale specific comparisons:
 
-@docs isEqualWithCollator, notEqualWithCollator,lessThanWithCollator, lessThanOrEqualWithCollator, greaterThanWithCollator, greaterThanOrEqualWithCollator
+@docs isEqualWithCollator, notEqualWithCollator, lessThanWithCollator, lessThanOrEqualWithCollator, greaterThanWithCollator, greaterThanOrEqualWithCollator
 
 Logical operators:
 
@@ -657,7 +657,7 @@ rasterResamplingNearest =
 {-| -}
 rgba : Float -> Float -> Float -> Float -> Expression exprType Color
 rgba r g b a =
-    Expression (Json.Encode.string ("rgba" ++ Basics.toString ( r, g, b, a )))
+    Expression (Json.Encode.string ("rgba(" ++ String.fromFloat r ++ ", " ++ String.fromFloat g ++ ", " ++ String.fromFloat b ++ ", " ++ String.fromFloat a ++ ")"))
 
 
 {-| -}
@@ -710,7 +710,7 @@ strings =
 
 list : List (Expression exprType a) -> Expression exprType (Array a)
 list =
-    List.map encode >> Json.Encode.list >> Expression >> call1 "literal"
+    Json.Encode.list encode >> Expression >> call1 "literal"
 
 
 {-| Returns a `Collator` for use in locale-dependent comparison operations. The first argument specifies if the comparison should be case sensitive. The second specifies if it is diacritic sensitive. The final locale argument specifies the IETF language tag of the locale to use.
@@ -718,7 +718,7 @@ list =
 collator : Expression e1 Bool -> Expression e2 Bool -> Expression e3 String -> Expression e4 Collator
 collator (Expression caseSensitive) (Expression diacriticSensitive) (Expression locale) =
     Expression
-        (Json.Encode.list
+        (Json.Encode.list identity
             (Json.Encode.string "collator"
                 :: [ Json.Encode.object
                         [ ( "case-sensitive", caseSensitive )
@@ -881,7 +881,7 @@ calln n expressions =
 
 
 call name args =
-    Expression (Json.Encode.list (Json.Encode.string name :: args))
+    Expression (Json.Encode.list identity (Json.Encode.string name :: args))
 
 
 {-| Retrieves a property value from the current feature's state. Returns null if the requested property is not present on the feature's state. A feature's state is not part of the GeoJSON or vector tile data, and must be set programmatically on each feature. Note that `featureState` can only be used with paint properties that support data-driven styling.
diff --git a/src/Mapbox/Helpers.elm b/src/Mapbox/Helpers.elm
index ed66d37..0f164ac 100644
--- a/src/Mapbox/Helpers.elm
+++ b/src/Mapbox/Helpers.elm
@@ -15,4 +15,4 @@ encodeAnchor v =
 
 
 encodePair encoder ( a, b ) =
-    Encode.list [ encoder a, encoder b ]
+    Encode.list encoder [ a, b ]
diff --git a/src/Mapbox/Layer.elm b/src/Mapbox/Layer.elm
index ce0fa67..3d75373 100644
--- a/src/Mapbox/Layer.elm
+++ b/src/Mapbox/Layer.elm
@@ -299,16 +299,16 @@ encodeAttrs attrs =
     let
         { top, layout, paint } =
             List.foldl
-                (\attr ({ top, layout, paint } as lists) ->
+                (\attr lists ->
                     case attr of
                         Top key val ->
-                            { lists | top = ( key, val ) :: top }
+                            { lists | top = ( key, val ) :: lists.top }
 
                         Paint key val ->
-                            { lists | paint = ( key, val ) :: paint }
+                            { lists | paint = ( key, val ) :: lists.paint }
 
                         Layout key val ->
-                            { lists | layout = ( key, val ) :: layout }
+                            { lists | layout = ( key, val ) :: lists.layout }
                 )
                 { top = [], layout = [], paint = [] }
                 attrs
diff --git a/src/Mapbox/Source.elm b/src/Mapbox/Source.elm
index 5cc571d..8cccfd8 100644
--- a/src/Mapbox/Source.elm
+++ b/src/Mapbox/Source.elm
@@ -120,7 +120,7 @@ getId (Source k _) =
 -}
 bounds : LngLat -> LngLat -> SourceOption any
 bounds sw ne =
-    SourceOption "bounds" (Json.Encode.list [ Json.Encode.float sw.lng, Json.Encode.float sw.lat, Json.Encode.float sw.lng, Json.Encode.float sw.lat ])
+    SourceOption "bounds" (Json.Encode.list Json.Encode.float [ sw.lng, sw.lat, sw.lng, sw.lat ])
 
 
 {-| Minimum zoom level for which tiles are available, as in the TileJSON spec.
@@ -222,7 +222,7 @@ This takes an array of one or more tile source URLs, as in the TileJSON spec.
 -}
 vector : Id -> List Url -> List (SourceOption VectorSource) -> Source
 vector id urls options =
-    ( "tiles", Json.Encode.list (List.map Json.Encode.string urls) )
+    ( "tiles", Json.Encode.list Json.Encode.string urls )
         :: ( "type", Json.Encode.string "vector" )
         :: List.map (\(SourceOption k v) -> ( k, v )) options
         |> Json.Encode.object
@@ -240,7 +240,7 @@ rasterFromUrl id url =
 -}
 raster : Id -> List Url -> List (SourceOption RasterSource) -> Source
 raster id urls options =
-    ( "tiles", Json.Encode.list (List.map Json.Encode.string urls) )
+    ( "tiles", Json.Encode.list Json.Encode.string urls )
         :: ( "type", Json.Encode.string "raster" )
         :: List.map (\(SourceOption k v) -> ( k, v )) options
         |> Json.Encode.object
@@ -306,11 +306,11 @@ type alias Coords =
 
 encodeCoordinates : Coords -> Value
 encodeCoordinates { topLeft, topRight, bottomRight, bottomLeft } =
-    Json.Encode.list
-        [ LngLat.encodeAsPair topLeft
-        , LngLat.encodeAsPair topRight
-        , LngLat.encodeAsPair bottomRight
-        , LngLat.encodeAsPair bottomLeft
+    Json.Encode.list LngLat.encodeAsPair
+        [ topLeft
+        , topRight
+        , bottomRight
+        , bottomLeft
         ]
 
 
@@ -331,7 +331,7 @@ image id url coordinates =
 video : Id -> List Url -> Coords -> Source
 video id urls coordinates =
     [ ( "type", Json.Encode.string "video" )
-    , ( "urls", Json.Encode.list (List.map Json.Encode.string urls) )
+    , ( "urls", Json.Encode.list Json.Encode.string urls )
     , ( "coordinates", encodeCoordinates coordinates )
     ]
         |> Json.Encode.object
diff --git a/src/Mapbox/Style.elm b/src/Mapbox/Style.elm
index 500cf47..97eac31 100644
--- a/src/Mapbox/Style.elm
+++ b/src/Mapbox/Style.elm
@@ -2,7 +2,7 @@ module Mapbox.Style exposing (Light, MiscAttr, Style(..), StyleDef, Transition,
 
 {-| A Mapbox style is a document that defines the visual appearance of a map: what data to draw, the order to draw it in, and how to style the data when drawing it. A style document is a JSON object with specific root level and nested properties. This specification defines and describes these properties.
 
-@docs Style, encode , StyleDef
+@docs Style, encode, StyleDef
 
 
 ### Light
@@ -31,7 +31,7 @@ You can also use one of these predefined styles.
 import Array exposing (Array)
 import Json.Encode as Encode exposing (Value)
 import LngLat exposing (LngLat)
-import Mapbox.Expression exposing (Anchor(Viewport), CameraExpression, Color, Expression, float, floats, rgba)
+import Mapbox.Expression exposing (Anchor(..), CameraExpression, Color, Expression, float, floats, rgba)
 import Mapbox.Helpers exposing (encodeAnchor)
 import Mapbox.Layer exposing (Layer)
 import Mapbox.Source exposing (Source)
@@ -95,7 +95,7 @@ encode style =
             , ( "transition", encodeTransition styleDef.transition )
             , ( "light", encodeLight styleDef.light )
             , ( "sources", Encode.object <| List.map (\source -> ( Mapbox.Source.getId source, Mapbox.Source.encode source )) styleDef.sources )
-            , ( "layers", Encode.list (List.map Mapbox.Layer.encode styleDef.layers) )
+            , ( "layers", Encode.list Mapbox.Layer.encode styleDef.layers )
             ]
                 ++ List.map (\(MiscAttr key value) -> ( key, value )) styleDef.misc
                 |> Encode.object
diff --git a/src/js/main.js b/src/js/main.js
index eff72ed..e56533c 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,18 +1,13 @@
 import mapboxgl from "mapbox-gl";
 
-function wrapElmApplication(elmApp, settings = {}) {
+
+export function registerCustomElement(settings) {
   const options = Object.assign(
     {
-      outgoingPort: "elmMapboxOutgoing",
-      incomingPort: "elmMapboxIncoming",
-      easingFunctions: {
-        linear: t => t
-      },
       onMount() {}
     },
     settings
   );
-
   if (options.token) {
     mapboxgl.accessToken = options.token;
   }
@@ -279,8 +274,21 @@ function wrapElmApplication(elmApp, settings = {}) {
       }
     }
   );
+}
 
-  if (elmApp.ports && elmApp.ports.elmMapboxOutgoing) {
+export function registerPorts(elmApp, settings = {}) {
+  const options = Object.assign(
+    {
+      outgoingPort: "elmMapboxOutgoing",
+      incomingPort: "elmMapboxIncoming",
+      easingFunctions: {
+        linear: t => t
+      }
+    },
+    settings
+  );
+
+  if (elmApp.ports && elmApp.ports[options.outgoingPort]) {
     function processOptions(opts) {
       if (opts.easing) {
         return Object.assign({}, opts, {
@@ -353,11 +361,11 @@ function wrapElmApplication(elmApp, settings = {}) {
           });
       }
     });
+  } else {
+    throw new Error(`Expected Elm App to expose ${elmApp.ports[options.outgoingPort]} port.`);
   }
 
   return elmApp;
 }
 
-wrapElmApplication.supported = mapboxgl.supported;
-
-export default wrapElmApplication;
+export const supported = mapboxgl.supported;