Use multiple elm packages with distinct program functions

Question

I'm trying to create an elm app using both the Html.Styled package as well as the Navigation package. The issue is that they both have their own program function but as far as I know I only use one program for my entire app. Is it possible to use both packages' program function, or is there a separate way to use those two packages?

Thanks

Can you add the part of your code where you import the libs? In case you are importing all from a module as in import Xyz exposing (..) you will have name collisions. As I have understood, you can import only the module and then use the components as Xyz.something to avoid name collisions. See modules part in syntax documentation — kaskelotti
My issue wasn't from name collisions, but how to logically resolve having two modules requiring their own program function to operate. — fladrif

Chad Gilbert Chad Gilbert · Accepted Answer · 2018-04-16T09:48:25

The source of Html.Styled.program shows that it just wraps your styled view function with toUnstyled. You should be able to do the same thing with your input to Navigation.program:

import Html
import Html.Styled
import Navigation

main : Platform.Program Basics.Never model msg
main =
    Navigation.program urlParser
        { init = init
        , update = update
        , view = view >> Html.Styled.toUnstyled
        , subscriptions = subscriptions
        }


view : model -> Html.Styled.Html msg
view model = ...

I don't believe there is any general purpose solution to make multiple program implementations cooperate between packages, but this should get you rolling with the two packages you've referenced.

Use multiple elm packages with distinct program functions

1 Answers