Trouble understanding how wrapper types work together

[szicari]

I am attempting to use Elm for a website but am running into some very basic misunderstandings. The main question is:

How does one make different Elm libs work together?

If I use rtfeldman/elm-css, how do I go from “styled” to unstyled" within different parts of my project so I can manipulate regular divs with other libraries?

How can I add animations with mdgriffith/elm-animator that use elm-tailwind-modules doesn’t offer out of the box?

Are there standard patterns for getting out of rundis/elm-bootstrap types within a project (not just in the view function), again, for using other libs that expect regular divs for manipulation?

It seems like I’m stuck inside layers of “types” that I cannot escape if I need to do something that a particular lib doesn’t offer. Or there are workarounds (like Korban’s excellent elm-animator intro blog post, but they feel hacky. I’m either inside one wrapper type or another, and the “way out” is not obvious to me.

This is where React starts to look a lot more attractive: it’s just jsx that gets converted to HTML with a couple gotchas that IDEs typically cover over (class → className, for example). So we’re only dealing with essentially an HTML type with no layers that can work with any other framework’s examples with little effort. I understand there is very little type safety there without typescript or something similar, and I prefer Elm, but I’m having trouble getting over this basic hurdle.

Any help is greatly appreciated!

[Sebastian]

For elm-css have a look at fromUnstyled and toUnstyled Html.Styled - elm-css 16.1.1

rundis/elm-bootstrap appears to use plain Html, isn’t that the case?

[sebbes]

Yeah, as Sebastian pointed out, there is an fromUnstyled function in elm-css. So if you want to use some elm-animator animation, you’d have to build it in “raw” HTML and then convert it into Html.Styled.

Agreed, this can be cumbersome if you want to do a lot of animations because in the “raw html”, you don’t have access to the Tailwind classes. Then you can consider:

• entirely drop elm-css and only work with “raw” html (and so, write the TW classes “by hand”),
• try to write your animation entirely in CSS (there is Css.Animation in elm-css),
• write szicari/elm-css-animator which copies the mdgriffith/elm-animator lib for the Html.Styled type (yeah this is the long way – not necessarily “hard” still).

Your comparison with React doesn’t seem accurate: elm-css provides a completly different type than the “standard” html. If a React lib was providing a totally different type than the usual “components”, you’d have the same kind of issues.