Pseudo Web Components in Elm

[Peter Damoc]

Hello Community, 

I've worked the last few days to bring about an older dream of mine: converting Elm programs into Html elements with the intention of composing them. 

The route I took was that of the pseudo Web Components. 

Here is the library that I made:

https://github.com/pdamoc/elm-box

It is implemented with Native so, don't expect to see it in the packages repository any time soon but I think this is an important topic and should be explored by more people. 

The Readme has instructions for both playing with it and for testing it in toy projects. 

The examples folder has a bunch of examples showing how I view implemented the old elm-architecture-tutorial examples using Boxes. 

The examples range from extremely simple to a more fancy example that integrates with elm-css. 

The API has passed through a few iterations and I think it is quite OK but if you have suggestions for improvements please contribute. 

There are, of course, a lot issues and caveats due to this being a quick and dirty implementation BUT, it think the code is good enough to be used to start this discussion. 

This is a very dear topic to me so, any questions or comments are appreciated.

Thank you. 

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Berry Groenendijk]

Hi Peter,

If I understand correctly, a box is basically a mini-main. And boxes can be composed into one big main. I like the resulting code, like:

main : Html msg

main =

    div []

        [ counter [ value 4 ] []

        , counter [ value 2 ] []

        ]

The result is a very easy composable main. Questions that come to mind are:

- Theme-ability: can components adhere to a general CSS theme?

- And I did not see an example where information from one component is used in another. How would that look like? Can a box store information in a model in main, for example? I imagine a form box that gathers information from a user (including validation, etc.) and if form is valid the information is stored in the model in main. And some other component uses this information to show the data.

- Can boxes exist within boxes?

PS: the example runs in chrome. But, in Safari I get the following error:

Which is line 162 in box.js.

Thanks!

Berry

Op zaterdag 21 januari 2017 10:43:09 UTC+1 schreef Peter Damoc:

[Peter Damoc]

Hi Berry,

You understand correctly, that's the intended way of composing.

I have not thought seriously about themability but it should be possible through the use of shared CSS (elm-css).

The CounterList example shows how the counters push data into the parents through events.

Boxes can exist within boxes. AltMain shows this (it is a box that contains other boxes)

Please add an issue about Safari in the repository. I'll investigate it when I get back to a computer (I'm on my mobile now).

Thank you for the feedback!

--


You received this message because you are subscribed to the Google Groups "Elm Discuss" group.


To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.


For more options, visit https://groups.google.com/d/optout.

[Peter Damoc]

For people interested in this topic, the latest version fixes the issue reported by Berry (I've added a minimal polyfill for registerElement)

Also, inspired by this article I've implemented basic support for styled elements. 

This file contains an example on how one would implement a simple grid with it. :) 
https://github.com/pdamoc/elm-box/blob/master/examples/SimpleGrid.elm

There is also an example on how to use this with elm-css: 
https://github.com/pdamoc/elm-box/blob/master/examples/FancyCounter.elm