[elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Simon]

One interesting thing I found as I experimented this morning is that React 
components can be wrapped up 
 to be web 
components, which might make react components more accessible from Elm (at 
present it is not straightforward 
). 
Here’s a basic example of the pattern. My experience of React is very 
limited, so I’m wondering how scalable this example could be for the react 
components people get excited about (not sure which those are though)?

import React from 'react';
import ReactDOM from 'react-dom';

var mountPoint = document.createElement('div');

const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
this.createShadowRoot().appendChild(mountPoint);

const name = this.getAttribute('name');
myRender({name});
}
},
attributeChangedCallback: {
value: (attrName, oldVal, newVal) => {
if (attrName == "name") {
myRender({newVal});
}
}
}
});

function myRender(s) {
ReactDOM.render(s, mountPoint);
}

document.registerElement('x-hello', {prototype: proto});

On Friday, 23 September 2016 14:28:06 UTC+2, Peter Damoc wrote:

I've been trying to get this to work but I don't have enough knowledge. 
>
> The main problem I'm facing seams to be one of setup/deployment. 
>
> Can someone help with a simple example that uses paper-date-picker
> https://customelements.io/bendavis78/paper-date-picker/
>
> I'm looking for the following:
>
> - a file structure/setup for the project that allows development of an Elm 
> program using paper-date-picker where one can see the same output in both 
> Chrome and Firefox
> - a way capture a notification for the date change
>
> less important but useful: 
> - a way to create some kind of a deliverable (something that one can put 
> on some webhosting and have it work)  
>
> Regarding the event from the component I've found 
> https://github.com/kevinlebrun/elm-polymer
> but I was unable to transfer the knowledge shown there for how to listen 
> to changes inside the web component. 
>
> Setting the date value with attribute (counter-polymer-inside-elm) 
> actually proved to be very easy and it worked without needing the port. 
> Getting informed about the date change happening inside the widget 
> however, did not work. 
>
> I tried replacing "value" with "date" in the event attribute and the json 
> decoder  (replacing Json.int with Json.string) but... it did not work. 
>
> Here are the files I have so far: 
> https://gist.github.com/pdamoc/48c6f7dd2f7fec44bdd3262f269f635c
>
>
>
>
> -- 
> There is NO FATE, we are the creators.
> blog: http://damoc.ro/
>
​

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[dedo]

yes, that does seem to help, thanks for the pointer! ... ah, those magic 
incantations :)

On Sunday, December 4, 2016 at 4:37:43 PM UTC-6, Richard Feldman wrote:
>
> Simon - video is not up yet.
>
> dedo - I haven't tried that, but try what Rupert did here 
>  - 
> seemed to help with children of lists!
>
> On Sunday, December 4, 2016 at 1:43:08 PM UTC-8, dedo wrote:
>>
>> @Richard, I tried to use your google-maps / polymer version but had 
>> trouble getting google-map-marker 
>> s to work as 
>> children of the map element. Did map markers work for you?
>>
>>>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Richard Feldman]

Simon - video is not up yet.

dedo - I haven't tried that, but try what Rupert did here 
 - 
seemed to help with children of lists!

On Sunday, December 4, 2016 at 1:43:08 PM UTC-8, dedo wrote:
>
> @Richard, I tried to use your google-maps / polymer version but had 
> trouble getting google-map-marker 
> s to work as 
> children of the map element. Did map markers work for you?
>
>>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[dedo]

@Richard, I tried to use your google-maps / polymer version but had trouble 
getting google-map-marker 
s to work as 
children of the map element. Did map markers work for you?


On Thursday, November 3, 2016 at 11:54:11 AM UTC-5, Richard Feldman wrote:
>
> FYI I got Google Maps working based on Fred's calendar repo: 
> https://github.com/rtfeldman/elm-google-maps
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Simon]

Is the video available now?

On Friday, 4 November 2016 02:36:52 UTC+1, Richard Feldman wrote:
>
> Yes and yes! I'll post when the video is up.
>
> On Thu, Nov 3, 2016 at 3:45 PM, Peter Damoc  > wrote:
>
>> This is pretty awesome. 
>>
>> Have you given the talk in Vienna? 
>> Is this part of that talk? :) 
>>
>>
>>
>> On Thu, Nov 3, 2016 at 6:54 PM, Richard Feldman > > wrote:
>>
>>> FYI I got Google Maps working based on Fred's calendar repo: 
>>> https://github.com/rtfeldman/elm-google-maps
>>>
>>> -- 
>>> 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.
>>>
>>
>>
>>
>> -- 
>> There is NO FATE, we are the creators.
>> blog: http://damoc.ro/
>>
>> -- 
>> You received this message because you are subscribed to a topic in the 
>> Google Groups "Elm Discuss" group.
>> To unsubscribe from this topic, visit 
>> https://groups.google.com/d/topic/elm-discuss/8Q2xwRh6UYc/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to 
>> elm-discuss...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Ed Ilyin]

Richard, multiple Polymer elements can be styled mostly by using native CSS
mixins (like
https://elements.polymer-project.org/elements/paper-dropdown-menu):
--paper-dropdown-menu-button A mixin that is applied to the internal menu
button {}
How to do that using your elm-css library?

Il giorno ven 4 nov 2016 alle ore 03:36 Richard Feldman <
richard.t.feld...@gmail.com> ha scritto:

> Yes and yes! I'll post when the video is up.
>
> On Thu, Nov 3, 2016 at 3:45 PM, Peter Damoc  wrote:
>
> This is pretty awesome.
>
> Have you given the talk in Vienna?
> Is this part of that talk? :)
>
>
>
> On Thu, Nov 3, 2016 at 6:54 PM, Richard Feldman <
> richard.t.feld...@gmail.com> wrote:
>
> FYI I got Google Maps working based on Fred's calendar repo:
> https://github.com/rtfeldman/elm-google-maps
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> There is NO FATE, we are the creators.
> blog: http://damoc.ro/
>
> --
>
> You received this message because you are subscribed to a topic in the
> Google Groups "Elm Discuss" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/elm-discuss/8Q2xwRh6UYc/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> elm-discuss+unsubscr...@googlegroups.com.
>
>
> For more options, visit https://groups.google.com/d/optout.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

This is pretty awesome.

Have you given the talk in Vienna?
Is this part of that talk? :)



On Thu, Nov 3, 2016 at 6:54 PM, Richard Feldman  wrote:

> FYI I got Google Maps working based on Fred's calendar repo:
> https://github.com/rtfeldman/elm-google-maps
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Richard Feldman]

FYI I got Google Maps working based on Fred's calendar 
repo: https://github.com/rtfeldman/elm-google-maps

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 17, 2016 at 10:29:52 AM UTC+1, Rupert Smith wrote:
>
> On Friday, October 14, 2016 at 2:50:44 PM UTC+1, Peter Damoc wrote:
>>
>> On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <
>> elm-d...@googlegroups.com> wrote:
>>
>>> 1. Build some support into the Elm compiler for webcomponents. 
>>>
>>
>> There could also be a direction where Elm compiler only implements 
>> support for  Custom Elements. 
>>
>> It would be awesome if someone more knowledgeble in JS could research 
>> what is the minimal amount of change needed to support that in a nice way. 
>>
>> Ideally, it would be some library that would allow the implementation of 
>> the custom elements without ports or need for extra JS so that custom 
>> elements could be implemented and shared through the official package 
>> repository. 
>>
>> This could simplify a lot of things, if taken in a 5 years perspective 
>> where Elm has even better tools take advantage of all the extra information 
>> that the language brings in order to create highly efficient deliverables.  
>>
>
> The thing is... custom elements are only part of what makes a component. 
> Indeed in Elm, you don't even really need custom components, since you are 
> not working in Html directly but writing functions to generate Html. For 
> example, from the elm-mdl library I can do  "Card.view ..." to add a card 
> component to my UI. Already the limited pallete of Html has been overcome 
> by a library of functions.
>
> The ports are used to receive updates or to set state on the component. In 
> a modular sense, a component encapsulates some state and provides a set of 
> 'methods' to read and write that state in a carefully controlled manner, 
> with the intention of providing a nice abstraction for working with a 
> component, that cannot be put into an illegal state by reading or writing 
> private state.
>
> So in terms of compiler/langauge support that is what is missing - a way 
> for one Elm program to include another as a module, but to only be able to 
> access that module through a restricted set of events and writeable state.
>
> It is Parnas principles of modular design really.
>

Looking at this elm meetup presentation on elm-mdl:

https://www.dailydrip.com/topics/elm-remote-meetup/drips/implementing-a-ui-library-in-elm-the-good-the-bad-the-ugly-by-soren-debois
 

elm-mdl had similar consideration about private state and private update 
events that are not really meant to be exposed to the consumer of it. The 
presentation shows how this could be done within the TEA framework, all it 
requires from the consumer is that they include the Mdl model in their 
model, and hook up to an Mdl event to pass along internal events.

I suspect this approach might be more appealing for Elm than the more OO 
apporach to modularisation that I describe above. webcomponents written 
this way, would not have their own main Program though, so could not stand 
alone as components outside of an Elm consumer.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Friday, October 14, 2016 at 2:50:44 PM UTC+1, Peter Damoc wrote:
>
> On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <
> elm-d...@googlegroups.com > wrote:
>
>> 1. Build some support into the Elm compiler for webcomponents. 
>>
>
> There could also be a direction where Elm compiler only implements support 
> for  Custom Elements. 
>
> It would be awesome if someone more knowledgeble in JS could research what 
> is the minimal amount of change needed to support that in a nice way. 
>
> Ideally, it would be some library that would allow the implementation of 
> the custom elements without ports or need for extra JS so that custom 
> elements could be implemented and shared through the official package 
> repository. 
>
> This could simplify a lot of things, if taken in a 5 years perspective 
> where Elm has even better tools take advantage of all the extra information 
> that the language brings in order to create highly efficient deliverables.  
>

The thing is... custom elements are only part of what makes a component. 
Indeed in Elm, you don't even really need custom components, since you are 
not working in Html directly but writing functions to generate Html. For 
example, from the elm-mdl library I can do  "Card.view ..." to add a card 
component to my UI. Already the limited pallete of Html has been overcome 
by a library of functions.

The ports are used to receive updates or to set state on the component. In 
a modular sense, a component encapsulates some state and provides a set of 
'methods' to read and write that state in a carefully controlled manner, 
with the intention of providing a nice abstraction for working with a 
component, that cannot be put into an illegal state by reading or writing 
private state.

So in terms of compiler/langauge support that is what is missing - a way 
for one Elm program to include another as a module, but to only be able to 
access that module through a restricted set of events and writeable state.

It is Parnas principles of modular design really.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> 1. Build some support into the Elm compiler for webcomponents.
>

There could also be a direction where Elm compiler only implements support
for  Custom Elements.

It would be awesome if someone more knowledgeble in JS could research what
is the minimal amount of change needed to support that in a nice way.

Ideally, it would be some library that would allow the implementation of
the custom elements without ports or need for extra JS so that custom
elements could be implemented and shared through the official package
repository.

This could simplify a lot of things, if taken in a 5 years perspective
where Elm has even better tools take advantage of all the extra information
that the language brings in order to create highly efficient deliverables.

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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Tuesday, October 11, 2016 at 11:21:05 AM UTC+1, Rupert Smith wrote:
>
> I'm interested in expanding on the counter example to add more complexity 
> - and I have a component in mind that will be useful to me - the listbox 
> that I was working with previously.
>
> The areas to add more complexity to are:
>
> More complex data on initialization - for example, passing a list of items 
> to init the list box with. This will be a List (String, String) in the Elm 
> application -> json array of string, string -> List (String, String) in the 
> Elm component. That is, just needs encoder/decoder written to handle it.
>
> More complex data on update - same as above really, provide a list of 
> selected items every time it changes.
>
> More complex internal state on the component - more options on the 
> component for things like max items to display before adding a scroll bar, 
> the scroll bar and scroll state itself. Ability to fetch the list of items 
> from the server, so I can configure a listbox like this  href="http:/.../picklists/somelist">, and have the component manage the 
> request/response lifecycle itself.
>

I've pushed an update to the listbox to display an elm-mdl checkbox when 
items in the list are selected. It works nicely and I will re-use it many 
time accross my code.

https://github.com/rupertlssmith/wood-polymer 

Scroll bars and multi-select/single-select are things that I may continue 
to add. I won't add the ability for it to fetch its contents through a REST 
API call, as that would be too restrictive, that will remain the 
responsibility of the consumer of the component.

Other than that, I am going to pause on this elm+polymer exploration for a 
while, or until I feel the need to create some new and wonderful component 
that I have a pressing need for.

I think elm+polymer could be taken in a number of directions:

1. Build some support into the Elm compiler for webcomponents. This would 
be a new 'program' type with support for hooking parts of the program state 
and events up to a webcomponent. The consuming program would also be able 
to link to it, in such a way that it can be given access to its 'public' 
state. This is really OO encapsulation, and as such might not be a popular 
idea within Elm. I only have a vague idea of what tighter integration would 
look like anyway, so far too early to start down this route.

2. Build a component library using Elm + minimal amount of Polymer. 
Overcoming restrictions previously discussed is generally going to 
necessitate more ports and more javascript.

3. Build components on top of polymer-paper elements in the MDL style. 
elm-mdl is ideal for this as both it and paper are built with MDL in mind. 
paper has a lot of javascript in it, but its well tested and designed and 
all useful. Many components built on top of it would just be Elm window 
dressing - to expose selected events on the component to the consumer. Some 
more sophisticated components could be built with more behaviour defined in 
Elm and so long as these work in a mostly declarative fashion, not 
requiring too much sharing of state between the consumer and the component, 
some nice stuff could be built.

Having explored this in some depth I think 3 would be the way to do - 
although it does add to the overhead by pulling in more Polymer javascript. 
The reasons I say 3 are: already proved that Elm can work with Polymer 
nicely without needing to be changed, there is already something well 
tested and fairly comprehensive to build on top of, it is the direction in 
which progress could be made fastest, it requires the least 'native' code 
and number of ports to be workable.

If anyone is up for working up some more Polymer+Elm components, I'm up for 
joining in the effort.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 13, 2016 at 12:23:30 PM UTC+1, Rupert Smith wrote:
>
> Which is ok, but what I really want is for the listbox user to be able to 
> display more than just a string in the listbox, along these lines:
>
> root : Model -> Html Msg
> root model =
> listbox [ attrForSelect "value", onSelectedChanged SelectChanged ]
> [ listItem  [ value "1" ] [ text "one" ],
>   listItem  [ value "2" ] [ text "two" ],
>   ...
> ]
>

I have been having a little experiment with adding events into the UI 
component.

On the consumer side I did this:

listbox [ items model.roleLookup, onSelectedChanged 
SelectChanged ]
[ Button.render Mdl
[ 0 ]
model.mdl
[ Button.onClick SomeAction
]
[ text "test" ]
]
] 

When I click the button, the event is received by the consumer application.

On the component side, I did this:

woodItem
styleAttrs
[ text value
, (Button.render Mdl
[ 5 ]
model.mdl
[ Button.onClick (Select "test") ]
[ text "test" ]
  )
]

Clicking this button triggers the Select "test" event on the consumer Elm 
program. So now I have a UI element owned by the consuming application, 
showing a list of items rendered by the component application. Within it 
there is a button which triggers an event on the consumer, and buttons 
which trigger events on the component!

If I would like the consumer of a component to be able to custom render 
within the component, allowing the consumer to build whatever  it 
wants inside the component would be convenient. However, I could still have 
the component render custom content, by simply creating a little DSL for 
building HTML, and passing this down as part of the component config, and 
having the component render it.

So between those two options, I think I can do components that are very 
customizeable from the consumer of the components perspective. But I have 
to chose which side it would be more useful to let the consumer define 
events on?

For example, if the component were a data table, and there was a column 
with 'action' button in it, for example, to take you to a screen to edit an 
item from the table, it makes sense for the consumer to be able to hook 
into the event.

If the component were the video example, with the consumer defining a 
custom control bar, it would be useful for the DSL to allow the consumer to 
say that a button hooks up to the components 'pause' action.

Be nice if I could do both, but I can't see a way to doing that yet.

Also, for the pause action, I could set a property instead of directly 
triggering an event within the component. Then the consumer could hook up 
to the pause button and set property playState = "paused" on the component, 
which will in turn get picked up by the component.

On that basis, I guess it is more useful to allow the consumer of a 
component to render customer  within it using the Html library and 
Html.Events.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 12, 2016 at 1:34:32 PM UTC+1, Rupert Smith wrote:
>
> So there is an issue with being able to change the state of the component, 
> post initialization, from the consumer of the component. Because if there 
> is a port used to set state on the component... which component?
>

So I have been able to solve this problem without resorting to passing an 
id for the component down the port. Instead, the Elm program managing the 
component listens to its properties using a subscription.

I changed the code to not use attributes to initialize the component, but 
instead use a property. This means that the data does not need to be 
serialized too.

You can then set up a property change listener on the webcomponent:

properties: {
items: {
type: Array,
notify: true,
observer: '_itemsChanged',
value: []
},

_itemsChanged: function(newValue, oldValue) {
if (app) {
app.ports.itemsChanged.send(newValue);
}
}

With app being the Elm program set up in attached:

attached() {
console.log("attached : items = " + this.items);

app = Elm.Listbox.embed(this);

this._itemsChanged(this.items, []);

app.ports.setSelected.subscribe(items => {
this.selected = items;
});
},

You will also notice that attached triggers the change notifier for the 
items, so as to set the items to be rendered for the first time, as the 
items may get set prior to 'attached()' being invoked.

This has proved to be very useful, as I had a situation where I created a 
view with a list of items, but the items had not yet been returned from a 
REST endpoint, so the list would show as empty. Now I can set the 'items' 
property after the initial creation of the component, and have the items 
update in the component.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Tuesday, October 11, 2016 at 11:21:05 AM UTC+1, Rupert Smith wrote:
>
> I'm interested in expanding on the counter example to add more complexity 
> - and I have a component in mind that will be useful to me - the listbox 
> that I was working with previously.
>

So I have a first pass at making a listbox component, you can find it here:

https://github.com/rupertlssmith/wood-polymer

Sticking with the Polymer elements naming convention, I called this library 
'wood', since that also fits with the Elm theme...
 
I create a listbox like this:

root : Model -> Html Msg
root model =
listbox
[ items (Dict.fromList [ ( "1", "one" ), ( "2", "two" ), ( "3", 
"three" ) ])
, onSelectedChanged SelectChanged
]

Which is ok, but what I really want is for the listbox user to be able to 
display more than just a string in the listbox, along these lines:

root : Model -> Html Msg
root model =
listbox [ attrForSelect "value", onSelectedChanged SelectChanged ]
[ listItem  [ value "1" ] [ text "one" ],
  listItem  [ value "2" ] [ text "two" ],
  ...
]

But if the listitems are rendered withon the scope of the consuming Elm 
program, I run straight away into the previously discussed issue of not 
knowing which component to attach events to.

A listbox seems like quite a good component for allowing the consumer to 
decide how to render the list items. I might like an icon for example, or a 
checkbox which gets ticked when an item is selected, and so on. But it is 
wokring nicely for a plain text list.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 13, 2016 at 9:33:18 AM UTC+1, Rupert Smith wrote:
>
> On Wednesday, October 12, 2016 at 5:34:36 PM UTC+1, Peter Damoc wrote:
>>
>> On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <
>> elm-d...@googlegroups.com> wrote:
>>
>>> This limitation means you can't have UI elements defined outside of a 
>>> component affect its state. Suppose you had a video component and a video 
>>> control bar compnent, you could not make those separate components, you'd 
>>> always have to embed the control bar inside the video component. 
>>>
>>
>> To my understanding, Html elements are treated as stateless so, there is 
>> no semantic to tell a certain Html element anything just like you cannot 
>> tell the integer number 42 to do something. It's just data. It's not an 
>> object.  
>>
>> If someone wants to say something to the actual html element, they have 
>> to give that element an ID in Elm and go to JS in order to give it a 
>> message.
>>
>
> Right, that is good point. State must always go on the model. 
>
> Sticking with my video controller analogy - suppose we put the "pause : 
> Bool" on the model, then the onClick action can simply set the state there. 
> Perhaps you could define a record visible in the components API, that holds 
> all of its state that can be modified from the outside. I wonder what 
> happens though, when the video component is re-built from this model:
>
> type alias Model =
> { ...
> , vidState : Video.Model
> }
>
> video model.vidstate [ src "http://myvids.com/cute_cats.mpg 
> "
>  
> ]
> [ videoControl [] [ button [ onclick Pause ] [ text "pause" ] ] ]
>
> Presumably the change to the state would cause a brand new video control 
> to be rendered and lose internal state like which point in the video you 
> were currently watching?
>
> Still, I quite like the idea of making any externally accesible state an 
> explicit type in the Elm program, even if the above approach were combined 
> with a ComponentId and a helper function using a port to set state on the 
> component; at least from the point of view of the Elm program we are 
> keeping state in the model not the Html component.
>

Any updates to the components state could be handled by a single helper 
function, which is quite convenient:

updateComponent : ComponentId -> Model -> Cmd msg

or perhaps you always put the ComponentId in the Model so it is just

updateComponent : Model -> Cmd msg

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 12, 2016 at 5:34:36 PM UTC+1, Peter Damoc wrote:
>
> On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <
> elm-d...@googlegroups.com > wrote:
>
>> This limitation means you can't have UI elements defined outside of a 
>> component affect its state. Suppose you had a video component and a video 
>> control bar compnent, you could not make those separate components, you'd 
>> always have to embed the control bar inside the video component. 
>>
>
> To my understanding, Html elements are treated as stateless so, there is 
> no semantic to tell a certain Html element anything just like you cannot 
> tell the integer number 42 to do something. It's just data. It's not an 
> object.  
>
> If someone wants to say something to the actual html element, they have to 
> give that element an ID in Elm and go to JS in order to give it a message.
>

Right, that is good point. State must always go on the model. 

Sticking with my video controller analogy - suppose we put the "pause : 
Bool" on the model, then the onClick action can simply set the state there. 
Perhaps you could define a record visible in the components API, that holds 
all of its state that can be modified from the outside. I wonder what 
happens though, when the video component is re-built from this model:

type alias Model =
{ ...
, vidState : Video.Model
}

video model.vidstate [ src "http://myvids.com/cute_cats.mpg 
"
 
]
[ videoControl [] [ button [ onclick Pause ] [ text "pause" ] ] ]

Presumably the change to the state would cause a brand new video control to 
be rendered and lose internal state like which point in the video you were 
currently watching?

Still, I quite like the idea of making any externally accesible state an 
explicit type in the Elm program, even if the above approach were combined 
with a ComponentId and a helper function using a port to set state on the 
component; at least from the point of view of the Elm program we are 
keeping state in the model not the Html component.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> This limitation means you can't have UI elements defined outside of a
> component affect its state. Suppose you had a video component and a video
> control bar compnent, you could not make those separate components, you'd
> always have to embed the control bar inside the video component.
>

To my understanding, Html elements are treated as stateless so, there is no
semantic to tell a certain Html element anything just like you cannot tell
the integer number 42 to do something. It's just data. It's not an object.

If someone wants to say something to the actual html element, they have to
give that element an ID in Elm and go to JS in order to give it a message.





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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 12, 2016 at 1:55:02 PM UTC+1, Peter Damoc wrote:
>
> I did however became aware of a big limitation to this approach: ports. 
>
> ports seam to be needed in order to implement triggering events in order 
> to communicate with the outside of the component. 
>

I'll have to correct you here. The event is triggered by using an on-event 
on the custom components html element:

onCountChanged : (Int -> msg) -> Attribute msg
onCountChanged tagger =
on "count-changed" <| Decode.map tagger detailCount

This is actually very neat, since ports are not needed.

But the port does need to be used to push the part of the state that the 
component wants to make public from the Elm program, into the component as 
javascript, so that it can trigger an on-event to pass it to the consumer 
of the component.
 

> This limits the usefulness of the method because it bans the components 
> from package.elm-lang.org. 
>
> what do you think about this?
>

I think eventually package.elm-lang.org has to figure out its process for 
bringing in new native stuff, but I understand the caution. Its not such a 
problem for me right now as I'm interested in building and consuming my own 
components, can push stuff out through github, and need to experiment with 
stuff a lot more before anything is really releasable.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

Needing to set state on a component feels like an anti-pattern.


I did however became aware of a big limitation to this approach: ports.

ports seam to be needed in order to implement triggering events in order to
communicate with the outside of the component.

This limits the usefulness of the method because it bans the components
from package.elm-lang.org.

what do you think about this?



On Wed, Oct 12, 2016 at 3:34 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

>
>
> On Tuesday, October 11, 2016 at 11:07:46 AM UTC+1, Rupert Smith wrote:
>>
>> On Monday, October 10, 2016 at 10:40:25 PM UTC+1, Peter Damoc wrote:
>>>
>>> Now, the next challenge is to figure a way to declare all this in Elm
>>> and automate as much as possible the process of creating the custom
>>> components. :)
>>>
>>
>> I think rolling these Elm web components by hand should continue for a
>> while until issues are ironed out and the pattern becomes well established.
>>
>
> So there is an issue with being able to change the state of the component,
> post initialization, from the consumer of the component. Because if there
> is a port used to set state on the component... which component?
>
> We set the port up for setting its value like this:
>
> app.ports.setCount.subscribe(count => {
> this.count = count;
> });
>
> I exposed this port in my API module, so the user of the component could
> call it:
>
> port module API exposing (counter, initialCount, onCountChanged, setCount)
> ...
>
> port setCount : Int -> Cmd msg
>
> Calling setCount from within the components program works, but calling it
> from within the consumers program? It does not have a way to know which
> component to 'setCount' on, if there was >1 of them on the screen.
>
> I'll try it.
>
> But this means that there is a limitation on what I can do with
> webcomponents so far:
>
> Can initialize state using attributes on the component, by
> serlizing/deserializing init data in and out of Elm.
> Can trigger events on the Component and on the Consumer.
> Cannot make a call from the consumer to set state on the component
> dynamically.
>
> Perhaps this limitation is even useful as it will tend to lead to
> component designs that are declarative as they have to be built up front
> and live independently after that.
>
> I can also see some evil way of doing this... also passing an id down the
> port, then using it on the other end to figure out which component to
> 'invoke the port' on. I suppose you could even pass javascript as a string
> down a port and run it on the other end so there are definitely going to be
> ways of overcoming limitations.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Tuesday, October 11, 2016 at 11:07:46 AM UTC+1, Rupert Smith wrote:
>
> On Monday, October 10, 2016 at 10:40:25 PM UTC+1, Peter Damoc wrote:
>>
>> Now, the next challenge is to figure a way to declare all this in Elm and 
>> automate as much as possible the process of creating the custom components. 
>> :) 
>>
>
> I think rolling these Elm web components by hand should continue for a 
> while until issues are ironed out and the pattern becomes well established.
>

So there is an issue with being able to change the state of the component, 
post initialization, from the consumer of the component. Because if there 
is a port used to set state on the component... which component?

We set the port up for setting its value like this:

app.ports.setCount.subscribe(count => {
this.count = count;
});

I exposed this port in my API module, so the user of the component could 
call it:

port module API exposing (counter, initialCount, onCountChanged, setCount)
...

port setCount : Int -> Cmd msg

Calling setCount from within the components program works, but calling it 
from within the consumers program? It does not have a way to know which 
component to 'setCount' on, if there was >1 of them on the screen.

I'll try it.

But this means that there is a limitation on what I can do with 
webcomponents so far:

Can initialize state using attributes on the component, by 
serlizing/deserializing init data in and out of Elm.
Can trigger events on the Component and on the Consumer.
Cannot make a call from the consumer to set state on the component 
dynamically.

Perhaps this limitation is even useful as it will tend to lead to component 
designs that are declarative as they have to be built up front and live 
independently after that.

I can also see some evil way of doing this... also passing an id down the 
port, then using it on the other end to figure out which component to 
'invoke the port' on. I suppose you could even pass javascript as a string 
down a port and run it on the other end so there are definitely going to be 
ways of overcoming limitations.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 11:01:54 PM UTC+1, Richard Feldman wrote:
>
> Has anyone gotten anything doing really complicated DOM stuff (in 
> particular Google Maps comes to mind) working in Elm via web components?
>
> In theory it would Just Work, but in practice I always wonder... ;)
>

I have not yet encountered any scenarios yet where Elm updates to the DOM 
destroy the state of the component. I have been slightly surprised by this, 
given previous discussion around Html.Keyed and where it is sometimes 
needed. I guess Elm mostly is doing a good job of only making changes to 
the DOM that it really needs to. The actual complexity of the compnent 
should not be an issue, it is a 'shadow' encapsulated piece of the DOM 
after all.

I'm interested in expanding on the counter example to add more complexity - 
and I have a component in mind that will be useful to me - the listbox that 
I was working with previously.

The areas to add more complexity to are:

More complex data on initialization - for example, passing a list of items 
to init the list box with. This will be a List (String, String) in the Elm 
application -> json array of string, string -> List (String, String) in the 
Elm component. That is, just needs encoder/decoder written to handle it.

More complex data on update - same as above really, provide a list of 
selected items every time it changes.

More complex internal state on the component - more options on the 
component for things like max items to display before adding a scroll bar, 
the scroll bar and scroll state itself. Ability to fetch the list of items 
from the server, so I can configure a listbox like this , and have the component manage the 
request/response lifecycle itself.

It looks doable and should add up to a meatier example than the counter.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 10:40:25 PM UTC+1, Peter Damoc wrote:
>
> Now, the next challenge is to figure a way to declare all this in Elm and 
> automate as much as possible the process of creating the custom components. 
> :) 
>

I think rolling these Elm web components by hand should continue for a 
while until issues are ironed out and the pattern becomes well established. 
I do think we could get to a point where a web component is just a bit of 
boiler plate around an Elm program, at this point a tool could be written 
to automate the generation of the boilerplate - or perhaps something added 
to the compiler to provide a way of indicating that a module defines a 
webcomponent and should be compiled as such. Perhaps a little to early to 
start down that route?

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Richard Feldman]

Has anyone gotten anything doing really complicated DOM stuff (in
particular Google Maps comes to mind) working in Elm via web components?

In theory it would Just Work, but in practice I always wonder... ;)

On Mon, Oct 10, 2016 at 5:40 PM Peter Damoc  wrote:

> using attached instead of ready did the trick.
>
> Thanks for taking the time to figure this out!
>
> Now, the next challenge is to figure a way to declare all this in Elm and
> automate as much as possible the process of creating the custom components.
> :)
>
>
>
>
> On Tue, Oct 11, 2016 at 12:31 AM, 'Rupert Smith' via Elm Discuss <
> elm-discuss@googlegroups.com> wrote:
>
> On Monday, October 10, 2016 at 3:38:13 PM UTC+1, Peter Damoc wrote:
>
> I have already tried doing this but have run into troubles:
>
> Here is the topic where I have the code and the problem:
> https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
>
>
> I think you just didn't get the lifecycle quite right:
>
> https://www.polymer-project.org/1.0/docs/devguide/registering-elements
>
> I moved the embedding of the elm component to the 'attached' method
> instead. It seems that attribute values are not set on the properties until
> attached, and only have the default values when 'ready' is called.
>
> Needs some tidying up (tomorrow), but what I have checked in seems to be
> working:
>
>
> https://github.com/rupertlssmith/elm-polymer/blob/master/counter-elm-webcomponent/elm-counter.html
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> There is NO FATE, we are the creators.
> blog: http://damoc.ro/
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Elm Discuss" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/elm-discuss/8Q2xwRh6UYc/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> elm-discuss+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

using attached instead of ready did the trick.

Thanks for taking the time to figure this out!

Now, the next challenge is to figure a way to declare all this in Elm and
automate as much as possible the process of creating the custom components.
:)




On Tue, Oct 11, 2016 at 12:31 AM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Monday, October 10, 2016 at 3:38:13 PM UTC+1, Peter Damoc wrote:
>>
>> I have already tried doing this but have run into troubles:
>>
>> Here is the topic where I have the code and the problem:
>> https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
>>
>
> I think you just didn't get the lifecycle quite right:
>
> https://www.polymer-project.org/1.0/docs/devguide/registering-elements
>
> I moved the embedding of the elm component to the 'attached' method
> instead. It seems that attribute values are not set on the properties until
> attached, and only have the default values when 'ready' is called.
>
> Needs some tidying up (tomorrow), but what I have checked in seems to be
> working:
>
> https://github.com/rupertlssmith/elm-polymer/blob/master/counter-elm-
> webcomponent/elm-counter.html
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 3:38:13 PM UTC+1, Peter Damoc wrote:
>
> I have already tried doing this but have run into troubles:
>
> Here is the topic where I have the code and the problem: 
> https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
>

I think you just didn't get the lifecycle quite right:

https://www.polymer-project.org/1.0/docs/devguide/registering-elements

I moved the embedding of the elm component to the 'attached' method 
instead. It seems that attribute values are not set on the properties until 
attached, and only have the default values when 'ready' is called.

Needs some tidying up (tomorrow), but what I have checked in seems to be 
working:

https://github.com/rupertlssmith/elm-polymer/blob/master/counter-elm-webcomponent/elm-counter.html

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 9:31:26 PM UTC+1, Rupert Smith wrote:
>
>
>
> On Monday, October 10, 2016 at 3:38:13 PM UTC+1, Peter Damoc wrote:
>>
>> I have already tried doing this but have run into troubles:
>>
>> Here is the topic where I have the code and the problem: 
>> https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
>>
>
> I have found you can set it like this:
>
> hostAttributes: {
> 'value': '1',
> }, 
>
> as per
>
> https://www.polymer-project.org/1.0/docs/devguide/registering-elements
>
> but that ignores the value in the attribute and also does not set the 
> value in Elm.
>
> Starting to figure out the docs for Polymer - they don't seem very well 
> organized, diving into complex stuff right at the start when we just need 
> the basics. But I'm sure if we keep reading the devguide well get the 
> answers.
>
>
You can also use the promisingly named 'reflectToAttribute' like this:

properties: {
value: {
type: Number,
value: 0,
notify: true,
reflectToAttribute: true
},
}, 

Seems like it might do the trick. Unfortunately it causes a double update, 
as I clink increment it goes 1,2 2,2 3,2 4,2. Possibly Elm is rebuilding 
the DOM and setting it back to 2 each time, so perhaps Html.Keyed.node is 
required here.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 3:38:13 PM UTC+1, Peter Damoc wrote:
>
> I have already tried doing this but have run into troubles:
>
> Here is the topic where I have the code and the problem: 
> https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
>

I have found you can set it like this:

hostAttributes: {
'value': '1',
}, 

as per

https://www.polymer-project.org/1.0/docs/devguide/registering-elements

but that ignores the value in the attribute and also does not set the value 
in Elm.

Starting to figure out the docs for Polymer - they don't seem very well 
organized, diving into complex stuff right at the start when we just need 
the basics. But I'm sure if we keep reading the devguide well get the 
answers.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 2:20:57 PM UTC+1, Rupert Smith wrote:
>
> On Monday, October 10, 2016 at 2:14:55 PM UTC+1, Rupert Smith wrote:
>>
>> On Sunday, October 9, 2016 at 9:41:46 PM UTC+1, Peter Damoc wrote:
>>>
>>> The only thing that remained to be shown with code is how to implement a 
>>> component in Elm and use it in Elm (yo, dawg style) . 
>>>
>>
>> Like this:
>>
>> Take the polymer-elm counter examples.
>> Produce an elm counter.
>> Wrap this as a webcomponent (without polymer). 
>> This will expose just 1 event, which is an update every time the counter 
>> value changes. The up/down events are hidden to the outside and only dealt 
>> with by the counter program internally. 
>> This will expose just 1 data value, an Int giving the counter value. It 
>> would be interesting to expose more complex data structures, but this is a 
>> starting point.
>> Produce a minial API in Elm to interface to this webcomponent. It 
>> provides an 'oncountchanged' Property to its Html constructor, that takes 
>> an Int -> Msg argument, so that it can be set up to trigger an event with 
>> the new value when the counter is clicked.
>> Write a little Elm program to make use of this counter.
>> All the Elm code for the counter and the consuming program to be compiled 
>> together into 1 .js with 2 mains, to maximize code sharing.
>>
>
> I've forked the elm-polymer code to here to use as a starting point for 
> trying the above:
>
> https://github.com/rupertlssmith/elm-polymer 
>

Another aspect to this would be for there to be some way for the 
application using the component to pass some initial/configuration values 
to the component, when creating it. So add a property to the component that 
can be set to some initial value of the counter.

counter [ count 100, oncountchanged Count ]

Might also look at how an function could be added to the API of the counter 
to set it to a particular value at a later time too.

setCount: Int -> Cmd msg

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Monday, October 10, 2016 at 2:14:55 PM UTC+1, Rupert Smith wrote:
>
> On Sunday, October 9, 2016 at 9:41:46 PM UTC+1, Peter Damoc wrote:
>>
>> The only thing that remained to be shown with code is how to implement a 
>> component in Elm and use it in Elm (yo, dawg style) . 
>>
>
> Like this:
>
> Take the polymer-elm counter examples.
> Produce an elm counter.
> Wrap this as a webcomponent (without polymer). 
> This will expose just 1 event, which is an update every time the counter 
> value changes. The up/down events are hidden to the outside and only dealt 
> with by the counter program internally. 
> This will expose just 1 data value, an Int giving the counter value. It 
> would be interesting to expose more complex data structures, but this is a 
> starting point.
> Produce a minial API in Elm to interface to this webcomponent. It provides 
> an 'oncountchanged' Property to its Html constructor, that takes an Int -> 
> Msg argument, so that it can be set up to trigger an event with the new 
> value when the counter is clicked.
> Write a little Elm program to make use of this counter.
> All the Elm code for the counter and the consuming program to be compiled 
> together into 1 .js with 2 mains, to maximize code sharing.
>

I've forked the elm-polymer code to here to use as a starting point for 
trying the above:

https://github.com/rupertlssmith/elm-polymer 

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Saturday, October 8, 2016 at 10:29:27 PM UTC+1, Richard Feldman wrote:
>
> I'm catching up on this thread...so much impressive progress! :D
>
> It seems like:
>
>- registerElement is enough to get node "my-component" and on 
>"my-component-event" (with a custom decoder) working in Elm
>- With the webcomponents-lite.min.js polyfill (16K gzipped), you can 
>get registerElement working on IE11+
>- Polymer components in particular...
>   - Require using Bower
>   - Reuquire at least webcomponents.min.js polyfill (36K gzipped) for 
>   Polymer components which depend on Shadow DOM
>   - Polymer 1.0 components that use Shady DOM should still work with 
>   the smaller webcomponents-lite polyfill
>- If children are involved, you need to configure things like this 
> or 
>else the children will disappear on interaction
>
> This comment about children is specific to Polymer and its shady dom, so 
tuck it under the 'Polymer components in particular' section. Outside of 
Polymer, there is no shady dom.

webcomponents-lite.js seems to work with Firefox - with shady dom or shadow 
dom. So far I've only seen the children dissappear on chrom with shady dom.

Have not tried any IE family browsers yet. They may need webcomponents 
instead of webcomponents-lite - to get a polyfill for the shadow DOM.
 

> Am I missing anything from this list?
>
> This is brilliant, hope someone can write this all up for reference at 
>> some stage. ;)
>
>
> I'm giving a talk in Vienna in a couple weeks, and I'd love to make it 
> around all the work you folks have done here. It's really great stuff! :)
>

Sounds good. Feel free to use any of my writeups or code towards your talk.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Friday, October 7, 2016 at 3:00:17 PM UTC+1, Peter Damoc wrote:
>
>
> On Fri, Oct 7, 2016 at 4:41 PM, 'Rupert Smith' via Elm Discuss <
> elm-d...@googlegroups.com > wrote:
>
>> customelements.io is all built on top of Polymer is it? 
>>
>> Well, I got carried away. :) 
>
> Not all of those libraries rest on Polymer. A lot of them, however, do. :) 
>

So, without Polymer. To integrate Elm with web components would take what? 
How can I make a component in Elm, bind it to some angle brackets 
 and embed that inside another Elm application, such that 
only some of its events and state are exposed to the consumer application, 
and there is a nice simple API in Elm to interact with the embedded 
component. Also the Elm compiler will recognize this component, and 
automatically deal with issues around Html.Keyed for it to be able to 
preserve its internal state. And to do this in a way that the Elm component 
is also a valid Web Components.

To be honest, I don't even know much about the web components spec. What 
does the 'hello world' web component look like?

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

On Fri, Oct 7, 2016 at 4:41 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> customelements.io is all built on top of Polymer is it?
>
> Well, I got carried away. :)

Not all of those libraries rest on Polymer. A lot of them, however, do. :)



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Friday, October 7, 2016 at 9:43:40 AM UTC+1, Peter Damoc wrote:
>
> Yes, we just need web-components, not polymer. Polymer is prividing some 
>> convenience to experiment with web components though.
>>
>>> Well... it's more than just convenience. If this gets really iron out 
> and Elm programmers get easy access to the entirety of 
> https://customelements.io/
> this might make Elm a lot more attractive. 
>

customelements.io is all built on top of Polymer is it? 

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Friday, October 7, 2016 at 8:08:43 AM UTC+1, Peter Damoc wrote:
>
> I was thinking more in terms of having a way to define custom components 
> in Elm and then use them in Elm while avoiding to duplicate the runtime and 
> the rest of the core libraries. :) 
>

Yes, so you can have internal state in the custom component that is not 
visible to the application using it.

I was thinking that using the paper-listbox has not really saved me much - 
I am still dealing with select/deselect events and it has little internal 
state. I may as well write this purely in elm. On the other hand if I add 
more state to the component, such as a scroll bar and scroll state, or have 
it fetch the list of items from a picklist on the server itself, then I am 
getting to the point of having enough internal state that the user of the 
component does not care about in order to use it. 

I think I create my own custom polymer element around what I have so far, 
so that as a consumer of the component I just get notified of what the 
current selection list is, [ (1, "Bold"), (3, "Underline") ] for example, 
every time it changes.
 

> This one, I think, is a polymer component implemented with elm:
>>
>>
>> https://github.com/kevinlebrun/elm-polymer/tree/master/counter-elm-inside-polymer
>>
>
How about taking this example, and using it as a polymer component within 
an elm application? So elm inside polymer inside elm. Sharing the code 
between the two elm parts, just with two separate mains.

Yes, we just need web-components, not polymer. Polymer is prividing some 
convenience to experiment with web components though.

>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

On Fri, Oct 7, 2016 at 6:06 AM, John Mayer 
wrote:

> My view is that we don't need Polymer, just the web components standards.
> If you're deploying to production, that may means that you may need to
> serve browser poly-fills.
>

We don't even need the entire web-components standard, just the custom
elements bit.
Ideally, we should have a custom poly-fill that takes care only of that.



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

I was thinking more in terms of having a way to define custom components in
Elm and then use them in Elm while avoiding to duplicate the runtime and
the rest of the core libraries. :)




On Thu, Oct 6, 2016 at 11:32 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Thursday, October 6, 2016 at 3:54:02 PM UTC+1, Peter Damoc wrote:
>>
>> Next challenge: how to implement Custom Elements in Elm. :)
>>
>>
> These examples cover a variety of different ways of working with elm and
> polymer together:
>
> https://github.com/kevinlebrun/elm-polymer
>
> This one, I think, is a polymer component implemented with elm:
>
> https://github.com/kevinlebrun/elm-polymer/tree/master/counter-elm-inside-
> polymer
>
>> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Aislan de Sousa Maia]

I've heard scary things about Polymer performance, mainly on mobile 
browsers. What you guys think about the state of Polymer at this time?

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 6, 2016 at 3:54:02 PM UTC+1, Peter Damoc wrote:
>
> Next challenge: how to implement Custom Elements in Elm. :) 
>
>
These examples cover a variety of different ways of working with elm and 
polymer together:

https://github.com/kevinlebrun/elm-polymer

This one, I think, is a polymer component implemented with elm:

https://github.com/kevinlebrun/elm-polymer/tree/master/counter-elm-inside-polymer

>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

Next challenge: how to implement Custom Elements in Elm. :)


On Thu, Oct 6, 2016 at 5:42 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Thursday, October 6, 2016 at 12:23:53 PM UTC+1, Peter Damoc wrote:
>>
>> This works for me in both Chrome and Firefox on OS X with
>> the  'webcomponents-lite.js'
>>
>> Thanks for solving this.
>>
>
> After some poking around and a severe lack of documentation on the part of
> Polymer, I have managed to hook into the select events like this:
>
> root : Model -> Html Msg
> root model =
> div
> [ class "layout-fixed-width" ]
> [ div []
> [ h4 [] [ text "Multi-select" ]
> , Html.Keyed.node "div"
> [ class "horizontal-section" ]
> [ ( "listbox"
>   , paperListBox
> [ attribute "multi" ""
> , attribute "attr-for-selected" "value"
> , on "iron-select" (selectedDecoder |> Decode.map
> Selected)
> ]
> [ paperItem [ value "0" ] [ text "Bold" ]
> , paperItem [ value "1" ] [ text "Italic" ]
> , paperItem [ value "2" ] [ text "Underline" ]
> , paperItem [ value "3" ] [ text "Strikethrough" ]
> ]
>   )
> ]
> ]
> ]
>
>
> selectedDecoder : Decode.Decoder (Result String Int)
> selectedDecoder =
> Decode.at [ "detail", "item", "value" ] Decode.string |> Decode.map
> String.toInt
>
> That is, applying "on" to "iron-select", setting values on the items in
> the list, and then using "at" from Json.Decode to drill down to where the
> value is in the event.
>
> There's no stoppin' us now!
>
>> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 6, 2016 at 12:23:53 PM UTC+1, Peter Damoc wrote:
>
> This works for me in both Chrome and Firefox on OS X with 
> the  'webcomponents-lite.js' 
>
> Thanks for solving this. 
>

After some poking around and a severe lack of documentation on the part of 
Polymer, I have managed to hook into the select events like this:

root : Model -> Html Msg
root model =
div
[ class "layout-fixed-width" ]
[ div []
[ h4 [] [ text "Multi-select" ]
, Html.Keyed.node "div"
[ class "horizontal-section" ]
[ ( "listbox"
  , paperListBox
[ attribute "multi" ""
, attribute "attr-for-selected" "value"
, on "iron-select" (selectedDecoder |> Decode.map 
Selected)
]
[ paperItem [ value "0" ] [ text "Bold" ]
, paperItem [ value "1" ] [ text "Italic" ]
, paperItem [ value "2" ] [ text "Underline" ]
, paperItem [ value "3" ] [ text "Strikethrough" ]
]
  )
]
]
]


selectedDecoder : Decode.Decoder (Result String Int)
selectedDecoder =
Decode.at [ "detail", "item", "value" ] Decode.string |> Decode.map 
String.toInt 

That is, applying "on" to "iron-select", setting values on the items in the 
list, and then using "at" from Json.Decode to drill down to where the value 
is in the event.

There's no stoppin' us now!

>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

This works for me in both Chrome and Firefox on OS X with
the  'webcomponents-lite.js'

Thanks for solving this.



On Thu, Oct 6, 2016 at 2:11 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Thursday, October 6, 2016 at 12:07:15 PM UTC+1, Rupert Smith wrote:
>>
>> On Thursday, October 6, 2016 at 11:50:01 AM UTC+1, Rupert Smith wrote:
>>>
>>> On Thursday, October 6, 2016 at 11:14:46 AM UTC+1, Peter Damoc wrote:

 Custom elements also work decently when the custom element takes no
 children but if it does, it stops working.

>>>
>>> Rendering of keyed nodes in the vdom is here:
>>>
>>> https://github.com/elm-lang/virtual-dom/blob/master/src/Nati
>>> ve/VirtualDom.js#L382
>>>
>>> I will try attaching a debug break point there and see if that yields
>>> any insights.
>>>
>>
>> Ok, got it working. I needed to add some global config to polymer like
>> this:
>>
>> > >
>> 
>> window.Polymer = {
>> dom: 'shadow',
>> lazyRegister: true
>> };
>> 
>>
>> As described here:
>>
>> https://www.polymer-project.org/1.0/docs/devguide/settings
>>
>> This was just a guess, I have not played around with different values of
>> the settings, e.g., lazyRegister true/false. But at least the child
>> elements are not dissappearing.
>>
>
> I think this will also necessitate using 'webcomponents.js' instead of
> 'webcomponents-lite.js' for browsers other than Chrome, as the former
> includes the shadow dom polyfill. Actually, I am prepared to be surprised
> if this works outside of chrome...
>
> https://www.polymer-project.org/1.0/docs/browsers
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 6, 2016 at 12:07:15 PM UTC+1, Rupert Smith wrote:
>
> On Thursday, October 6, 2016 at 11:50:01 AM UTC+1, Rupert Smith wrote:
>>
>> On Thursday, October 6, 2016 at 11:14:46 AM UTC+1, Peter Damoc wrote:
>>>
>>> Custom elements also work decently when the custom element takes no 
>>> children but if it does, it stops working. 
>>>
>>
>> Rendering of keyed nodes in the vdom is here:
>>
>>
>> https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L382
>>  
>>
>> I will try attaching a debug break point there and see if that yields any 
>> insights.
>>
>
> Ok, got it working. I needed to add some global config to polymer like 
> this:
>
>  src="bower_components/webcomponentsjs/webcomponents-lite.js">
> 
> window.Polymer = {
> dom: 'shadow',
> lazyRegister: true
> };
>  
>
> As described here:
>
> https://www.polymer-project.org/1.0/docs/devguide/settings
>
> This was just a guess, I have not played around with different values of 
> the settings, e.g., lazyRegister true/false. But at least the child 
> elements are not dissappearing.
>

I think this will also necessitate using 'webcomponents.js' instead of 
'webcomponents-lite.js' for browsers other than Chrome, as the former 
includes the shadow dom polyfill. Actually, I am prepared to be surprised 
if this works outside of chrome...

https://www.polymer-project.org/1.0/docs/browsers 

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 6, 2016 at 11:50:01 AM UTC+1, Rupert Smith wrote:
>
> On Thursday, October 6, 2016 at 11:14:46 AM UTC+1, Peter Damoc wrote:
>>
>> Custom elements also work decently when the custom element takes no 
>> children but if it does, it stops working. 
>>
>
> Rendering of keyed nodes in the vdom is here:
>
>
> https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L382
>  
>
> I will try attaching a debug break point there and see if that yields any 
> insights.
>

Ok, got it working. I needed to add some global config to polymer like this:



window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
 

As described here:

https://www.polymer-project.org/1.0/docs/devguide/settings

This was just a guess, I have not played around with different values of 
the settings, e.g., lazyRegister true/false. But at least the child 
elements are not dissappearing.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Thursday, October 6, 2016 at 11:14:46 AM UTC+1, Peter Damoc wrote:
>
> Custom elements also work decently when the custom element takes no 
> children but if it does, it stops working. 
>

Rendering of keyed nodes in the vdom is here:

https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L382
 

I will try attaching a debug break point there and see if that yields any 
insights.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

I would love some insights from the people who have a better understanding
of what might be happening here.

The custom elements interface looks amazing in theory.

Custom elements also work decently when the custom element takes no
children but if it does, it stops working.

I tried it with paper-buttons-group and it is the same story: it shows up
nicely but as soon as you try to interact with it, the children disappear.
There is no error in the console.



On Thu, Oct 6, 2016 at 12:12 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Wednesday, October 5, 2016 at 4:42:04 PM UTC+1, Rupert Smith wrote:
>>
>> So I can get the select box to appear, but as soon as I click on it, it
>> vanishes. Is this where Html.Keyed helps me out somehow? I did try creating
>> the paper-listbox and paper-item nodes as keyed nodes, but it stills
>> dissapears
>>
>
> So I extracted a minimal polymer listbox + elm example out of my style
> guide and put it here:
>
> https://github.com/rupertlssmith/polymer-elm-listbox
>
> The items dissappear when clicked. As far as I can tell from the listbox
> demo, they should get the style class "iron-selected" added to items when
> they are clicked.
>
> I don't really understand what Html.Keyed does, and whether it can help,
> as its documentation is pretty light on detail and explanation of its
> purpose.
>
> If anyone is able to take a look at this minimal and easy to run example,
> would be much appreciated.
>
> At this stage I am thinking it will be easier to just write my own listbox
> on top of elm-mdl - but the purpose of this thread is to explore whether we
> can integrate polymer and elm succesfully.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Ed Ilyin]

I have created very tiny example of how to use polymer element in Elm:
https://github.com/edvail/double-event-issue

But, dear, why events are duplicated?
Each typed character fires two identical events.

Il giorno mer 5 ott 2016 alle ore 18:18 Peter Damoc  ha
scritto:

> I have no idea what is happening there but I would sure love to see what
> comes up as a solution.
>
>
>
> On Wed, Oct 5, 2016 at 7:00 PM, 'Rupert Smith' via Elm Discuss <
> elm-discuss@googlegroups.com> wrote:
>
> On Wednesday, October 5, 2016 at 4:59:17 PM UTC+1, Rupert Smith wrote:
>
> On Wednesday, October 5, 2016 at 4:48:59 PM UTC+1, Peter Damoc wrote:
>
> This is very interesting.
> Can you share some code so others can look at this?
>
>
> Its here:
>
> https://github.com/rupertlssmith/thesett_style_lab
>
>
> Running here:
>
> http://www.thesett.com/style-lab/#multiselect
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> There is NO FATE, we are the creators.
> blog: http://damoc.ro/
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 4:59:17 PM UTC+1, Rupert Smith wrote:
>
> On Wednesday, October 5, 2016 at 4:48:59 PM UTC+1, Peter Damoc wrote:
>>
>> This is very interesting. 
>> Can you share some code so others can look at this? 
>>
>
> Its here:
>
> https://github.com/rupertlssmith/thesett_style_lab
>

Running here:

http://www.thesett.com/style-lab/#multiselect

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 4:48:59 PM UTC+1, Peter Damoc wrote:
>
> This is very interesting. 
> Can you share some code so others can look at this? 
>

Its here:

https://github.com/rupertlssmith/thesett_style_lab

I have no idea how I hook into the events that it generates using 'on', 
will have to leave that for tomorrow. 

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

This is very interesting.
Can you share some code so others can look at this?




On Wed, Oct 5, 2016 at 6:42 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Wednesday, October 5, 2016 at 11:44:35 AM UTC+1, Rupert Smith wrote:
>>
>> I am going to give this a go, as I need an MDL styles multi-select
>>
>
> So I can get the select box to appear, but as soon as I click on it, it
> vanishes. Is this where Html.Keyed helps me out somehow? I did try creating
> the paper-listbox and paper-item nodes as keyed nodes, but it stills
> dissapears
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

This is discussed in the video that I linked earlier.

In a very simple demo he end up with 65 HTTP requests.
That might be a lot.

Also, in a more advanced app that number could be quite higher.

However, the reason that I said that Polymers do not work like that is that
if they would have worked like that, it would have been made explicit by
Google.

I might be wrong. :)



On Wed, Oct 5, 2016 at 6:03 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>>
>> Polymers do not work like that.
>>
>
> Why do you say this, in relation to using a CDN to fetch the bits? Is it
> because you always use vulcanize to package the component lib up into your
> own customized version of it? There is no option to just fetch it piece by
> piece from the google CDN? Also, I see there are many dependencies as you
> say, so perhaps lots of little CDN downloads does not compare so well with
> downloading the customized pacakge.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>
> Polymers do not work like that. 
>

Why do you say this, in relation to using a CDN to fetch the bits? Is it 
because you always use vulcanize to package the component lib up into your 
own customized version of it? There is no option to just fetch it piece by 
piece from the google CDN? Also, I see there are many dependencies as you 
say, so perhaps lots of little CDN downloads does not compare so well with 
downloading the customized pacakge. 

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

Yes!

Also, if you naively import it without importing the dependencies, the JS
Console will give you clues about missing links.

as for the bower dependencies you listed, yes... they are all needed.

The polymer project has and insane amount of dependencies.
It's like every function in elm-html would become it's own module.




On Wed, Oct 5, 2016 at 5:32 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

>
>
> On Wednesday, October 5, 2016 at 3:28:31 PM UTC+1, Rupert Smith wrote:
>>
>> On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>>>
>>> Polymers do not work like that.
>>> For optimizing the size, see the links I posted in the previous comment.
>>>
>>> I have a personal exploration of polymer that tried to minimize the
>>> output:
>>> https://github.com/pdamoc/polymer-exploration
>>>
>>
>> First hurdle, there is no polymer-paper-listbox bower package, so I guess
>> I need to create one? Are all these bower dependencies really needed to
>> build a functioning date picker?
>>
>>   "dependencies": {
>> "moment-element": "bendavis78/moment-element#^1.1.1",
>> "polymer": "Polymer/polymer#^1.1.0",
>> "iron-icon": "PolymerElements/iron-icon#^1.0.7",
>> "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9",
>> "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
>> "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
>> "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
>> "iron-selector": "PolymerElements/iron-selector#^1.0.0",
>> "neon-animation": "PolymerElements/neon-animation#^1.0.0",
>> "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
>> "paper-styles": "PolymerElements/paper-styles#^1.0.0",
>> "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
>> "iron-list": "PolymerElements/iron-list#^1.2.8"
>>   },
>>
>> from:
>>
>> https://github.com/bendavis78/paper-date-picker
>>
>> Kind of hard to figure out what I need for the listbox...
>>
>
> I guess the html imports for the demo of the listbox gives me some clue:
>
>   
>
>   
>   
>   
>   
>
> from:
>
> https://github.com/PolymerElements/paper-listbox/
> blob/master/demo/index.html
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 3:32:21 PM UTC+1, Rupert Smith wrote:
>
>
>
> On Wednesday, October 5, 2016 at 3:28:31 PM UTC+1, Rupert Smith wrote:
>>
>> On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>>>
>>> Polymers do not work like that. 
>>> For optimizing the size, see the links I posted in the previous comment. 
>>>
>>> I have a personal exploration of polymer that tried to minimize the 
>>> output:
>>> https://github.com/pdamoc/polymer-exploration
>>>
>>
>> First hurdle, there is no polymer-paper-listbox bower package, so I guess 
>> I need to create one? Are all these bower dependencies really needed to 
>> build a functioning date picker?
>>
>
Actually, I think I just need this:

"PolymerElements/paper-listbox#^1.1.2"

plus maybe some of the dependencies from the demo of it. I don't need to 
create a whole package as complex as the date-picker one, that only exists 
because it is building a new component on top of other components from 
PolymerElements which does not already have a date picker.


-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 3:28:31 PM UTC+1, Rupert Smith wrote:
>
> On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>>
>> Polymers do not work like that. 
>> For optimizing the size, see the links I posted in the previous comment. 
>>
>> I have a personal exploration of polymer that tried to minimize the 
>> output:
>> https://github.com/pdamoc/polymer-exploration
>>
>
> First hurdle, there is no polymer-paper-listbox bower package, so I guess 
> I need to create one? Are all these bower dependencies really needed to 
> build a functioning date picker?
>
>   "dependencies": {
> "moment-element": "bendavis78/moment-element#^1.1.1",
> "polymer": "Polymer/polymer#^1.1.0",
> "iron-icon": "PolymerElements/iron-icon#^1.0.7",
> "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9",
> "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
> "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
> "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
> "iron-selector": "PolymerElements/iron-selector#^1.0.0",
> "neon-animation": "PolymerElements/neon-animation#^1.0.0",
> "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
> "paper-styles": "PolymerElements/paper-styles#^1.0.0",
> "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
> "iron-list": "PolymerElements/iron-list#^1.2.8"
>   },
>
> from:
>
> https://github.com/bendavis78/paper-date-picker
>
> Kind of hard to figure out what I need for the listbox...
>

I guess the html imports for the demo of the listbox gives me some clue:

  

  
  
  
  

from: 

https://github.com/PolymerElements/paper-listbox/blob/master/demo/index.html

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 12:54:19 PM UTC+1, Peter Damoc wrote:
>
> Polymers do not work like that. 
> For optimizing the size, see the links I posted in the previous comment. 
>
> I have a personal exploration of polymer that tried to minimize the output:
> https://github.com/pdamoc/polymer-exploration
>

First hurdle, there is no polymer-paper-listbox bower package, so I guess I 
need to create one? Are all these bower dependencies really needed to build 
a functioning date picker?

  "dependencies": {
"moment-element": "bendavis78/moment-element#^1.1.1",
"polymer": "Polymer/polymer#^1.1.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.7",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
"iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"neon-animation": "PolymerElements/neon-animation#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"iron-list": "PolymerElements/iron-list#^1.2.8"
  },

from:

https://github.com/bendavis78/paper-date-picker

Kind of hard to figure out what I need for the listbox...

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

Polymers do not work like that.
For optimizing the size, see the links I posted in the previous comment.

I have a personal exploration of polymer that tried to minimize the output:
https://github.com/pdamoc/polymer-exploration



On Wed, Oct 5, 2016 at 2:01 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

>
>
> On Wednesday, October 5, 2016 at 11:44:35 AM UTC+1, Rupert Smith wrote:
>>
>> On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski
>> wrote:
>>>
>>> I took Peter’s gist as a basis and made a repo out of it:
>>> https://github.com/fredcy/elm-polymer-calendar
>>>
>> I am going to give this a go, as I need an MDL styles multi-select:
>>
>> https://elements.polymer-project.org/elements/paper-listbox?
>> view=demo:demo/index.html=paper-listbox
>>
>> Should be easy enough following your calendar demo.
>>
>
> Also, on the code size issue, presumably all the polymer components are
> hosted on googles CDN? In which case once a particular version has been
> downloaded once there is a good chance users may already have it cached.
> Only the first load of your app will be bloated.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

For what is worth, the approach described here:
https://github.com/Polymer/polycasts/tree/master/ep39-vulcanize/vulcanized-app
https://www.youtube.com/watch?v=EUZWE8EZ0IU=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN=16
might provide some more ideas.



On Wed, Oct 5, 2016 at 1:44 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski
> wrote:
>>
>> I took Peter’s gist as a basis and made a repo out of it:
>> https://github.com/fredcy/elm-polymer-calendar
>>
> I am going to give this a go, as I need an MDL styles multi-select:
>
> https://elements.polymer-project.org/elements/paper-
> listbox?view=demo:demo/index.html=paper-listbox
>
> Should be easy enough following your calendar demo.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[John Mayer]

If I'm reading this right, you may be able to get just the polyfills.

http://webcomponents.org/polyfills/

On Oct 5, 2016 7:01 AM, "'Rupert Smith' via Elm Discuss" <
elm-discuss@googlegroups.com> wrote:

>
>
> On Wednesday, October 5, 2016 at 11:44:35 AM UTC+1, Rupert Smith wrote:
>>
>> On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski
>> wrote:
>>>
>>> I took Peter’s gist as a basis and made a repo out of it:
>>> https://github.com/fredcy/elm-polymer-calendar
>>>
>> I am going to give this a go, as I need an MDL styles multi-select:
>>
>> https://elements.polymer-project.org/elements/paper-listbox?
>> view=demo:demo/index.html=paper-listbox
>>
>> Should be easy enough following your calendar demo.
>>
>
> Also, on the code size issue, presumably all the polymer components are
> hosted on googles CDN? In which case once a particular version has been
> downloaded once there is a good chance users may already have it cached.
> Only the first load of your app will be bloated.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, October 5, 2016 at 11:44:35 AM UTC+1, Rupert Smith wrote:
>
> On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski 
> wrote:
>>
>> I took Peter’s gist as a basis and made a repo out of it: 
>> https://github.com/fredcy/elm-polymer-calendar
>>
> I am going to give this a go, as I need an MDL styles multi-select:
>
>
> https://elements.polymer-project.org/elements/paper-listbox?view=demo:demo/index.html=paper-listbox
>
> Should be easy enough following your calendar demo.
>

Also, on the code size issue, presumably all the polymer components are 
hosted on googles CDN? In which case once a particular version has been 
downloaded once there is a good chance users may already have it cached. 
Only the first load of your app will be bloated.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski 
wrote:
>
> I took Peter’s gist as a basis and made a repo out of it: 
> https://github.com/fredcy/elm-polymer-calendar
>
I am going to give this a go, as I need an MDL styles multi-select:

https://elements.polymer-project.org/elements/paper-listbox?view=demo:demo/index.html=paper-listbox

Should be easy enough following your calendar demo.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, September 28, 2016 at 11:55:06 AM UTC+1, Peter Damoc wrote:
>
> I looked at the entire dist folder as that was the actual result in my 
> perspective. 1MB index.html with about 700k extra JS (elm.js included) 
> Yes, it was not minified. 
>
> The performance details are part of what I mean by integration. 
>
> Should I, the beginner, solve this or should I have some kind of help in 
> this from Elm tools? 
> In other words, should I spend time figuring out how to connect tools 
> (maybe get paralyzed by not being able to figure out if I should use grunt, 
> gulp or webpack)  OR should I invest that time in learning to use Elm? 
>
> This is how constrains liberate. 
> One integration solution (even if sub-optimal for some of the veteran web 
> devs) frees the beginners from all the complexity of making that work from 
> scratch. 
>

You can work solely within Elm, in which case an Elm specific tool could 
help you. But I think there is a very high chance that an Elm project will 
need stuff outside of Elm, in which case you need to learn to use the tools 
that are being used generally for web dev to do this.

To give an example - I have a step in my build to do some optimization on 
all the images that I use. I will almost certainly use some images in any 
site I create and optimizing them seems likely to always remain outside the 
scope of Elm.

It is also true that there is no correct solution - you might concatenate 
all your .js and .css into single files for example, or you might keep them 
split into several files with parts to be loaded on demand so that your 
pages render sooner/progressively.

My advice to a beginner would be - pick a build tool our of grunt, gulp, 
... whatever you feel most drawn to. Knock together a simple build with it, 
it does not need to be perfect. Copy someone elses build file to get 
started, and delete the bits you don't need or understand. Just get your 
site building so that it works. As you learn more about the tool, start 
figuring out how to optimize your build for size/load time/render start 
time as you see fit. If you hate it, try one of the other tools and see if 
you like that better.

I think a tool chain specifically for Elm that covers areas already covered 
by other tools would be a waste of time for the Elm community to invest in 
creating. For the beginner elm-make and elm-reactor are good enough to get 
started.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

I looked at the entire dist folder as that was the actual result in my
perspective. 1MB index.html with about 700k extra JS (elm.js included)
Yes, it was not minified.

The performance details are part of what I mean by integration.

Should I, the beginner, solve this or should I have some kind of help in
this from Elm tools?
In other words, should I spend time figuring out how to connect tools
(maybe get paralyzed by not being able to figure out if I should use grunt,
gulp or webpack)  OR should I invest that time in learning to use Elm?

This is how constrains liberate.
One integration solution (even if sub-optimal for some of the veteran web
devs) frees the beginners from all the complexity of making that work from
scratch.




On Wed, Sep 28, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> On Wednesday, September 28, 2016 at 7:59:55 AM UTC+1, Peter Damoc wrote:
>>
>> I've tried your solution and at least I got to confirm a personal fear:
>>  it's scary big.
>> 1.7MB might not seam much but... I'll be honest, I don't like artifacts
>> this big .
>> The inspector says that it will take 17 seconds over a regular 3G
>> connection to load this.
>>
>
> When I ran 'make dist' I got an index.html about 1MB. Some of its contents
> did not look minified, so I ran minify on it and it went down to about
> 600K, when gzipped it was about 100K.
>
> I think with some attention to detail the polymer library can be split up
> a bit, and various polyfills not loaded on chrome as it does not need them:
>
> https://aerotwist.com/blog/polymer-for-the-performance-obsessed/
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

['Rupert Smith' via Elm Discuss]

On Wednesday, September 28, 2016 at 7:59:55 AM UTC+1, Peter Damoc wrote:
>
> I've tried your solution and at least I got to confirm a personal fear: 
>  it's scary big. 
> 1.7MB might not seam much but... I'll be honest, I don't like artifacts 
> this big . 
> The inspector says that it will take 17 seconds over a regular 3G 
> connection to load this. 
>

When I ran 'make dist' I got an index.html about 1MB. Some of its contents 
did not look minified, so I ran minify on it and it went down to about 
600K, when gzipped it was about 100K.

I think with some attention to detail the polymer library can be split up a 
bit, and various polyfills not loaded on chrome as it does not need them:

https://aerotwist.com/blog/polymer-for-the-performance-obsessed/

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

On Wed, Sep 28, 2016 at 1:10 PM, 'Rupert Smith' via Elm Discuss <
elm-discuss@googlegroups.com> wrote:

> I use grunt based on how I was using grunt with angular prior to trying
> out Elm - but others will have different ways of building that suit their
> preferences. As you say, it is something beyond the elm platform. I think
> that feels right though, Elm is just a transpiler that spits out some
> javascript that I incorporate into my build, same as any other transpiler I
> might care to use.
>
> Exactly my point.
If I were to guess, I would guess that you are one of those people I
mentioned with web-dev experience that already have a set of tools they use
and understand.
You incorporate Elm in your preexisting toolchain.

If you come to Elm from web dev, this is the path that feels right.

If, however, you come to web dev through Elm, the situation is very
different.


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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Frederick Yankowski]

I took Peter’s gist as a basis and made a repo out of it: 
https://github.com/fredcy/elm-polymer-calendar

My version uses a small bit of native code to convert the JS Date value 
from the calendar component (sent as a JS event) into an Elm Date value. 
That avoids the kluge I had before using toString and Date.fromString to do 
the conversion (with manual munging of the string necessary in between).

I spent a little time getting it to work in the latest Chrome, Firefox, and 
IE. I also packaged it up into a near-minimal distribution which can be 
seen at https://fredcy.github.io/elm-polymer-calendar/
​

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Peter Damoc]

I have updated the gist with a version that works for retrieving
information from the web-component
https://gist.github.com/pdamoc/48c6f7dd2f7fec44bdd3262f269f635c
It generates 2 Msg when a date is clicked but it works..
Thank you for the idea with getting the information as a Value.

Now the need is for some kind of structure and way of delivering Elm
products that embed this kind of web-components.





On Mon, Sep 26, 2016 at 11:08 PM, Frederick Yankowski 
wrote:

> Peter,
>
> I played around with the code in your gist. The value returned by the
> "date-changed" event does indeed seem to be a JS Date value (which I
> determined by handling it as a Json.Value value).
>
> I don't see how to convert that Json.Value holding a JS Date into an Elm
> `Time` value. The Json.Decode functions don't seem to handle JS Date values
> at all.
>
> --
> 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+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
>



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

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer

[Frederick Yankowski]

Peter,

I played around with the code in your gist. The value returned by the 
"date-changed" event does indeed seem to be a JS Date value (which I 
determined by handling it as a Json.Value value). 

I don't see how to convert that Json.Value holding a JS Date into an Elm 
`Time` value. The Json.Decode functions don't seem to handle JS Date values 
at all.

-- 
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+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.