Integrating Elm with Web Components / Polymer

[Peter Damoc]

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/

[Ossi Hanhinen]

I've worked with both Polymer and Elm, so I can maybe help you with some things.

I haven't really put them together apart from one silly proof of concept, though. I should probably try and resurrect that repo.

Anyways, to get the new date: paper-date-picker has the date property set to notify: true, which means it should emit an event called date-changed as per the Polymer specs. In this specific case, you want to be listening with on "date-changed" in Elm. Generally speaking, the event is the "kebab-case", or "dash-case" version of the property name, plus "-changed", so if the property was e.g. weekNumber, the corresponding event would be week-number-changed. Note, however, that it might be tricky to do it this way, since the component likely stores an actual JS Date object as the value. Maybe the easiest way to check the behavior is by listening for the event in plain JS and logging it in the console.

[Peter Damoc]

It's not just me you would be helping, it's a lot of people.
This has the potential to end most of the discussions around components 
You would be doing the Elm community a great favor. :) 

Regarding the `date-changed` this is exactly what I tried. 
I think that my problem might have been due to the fact that I tried to use a Json.string decoder to bring the information and the value is a JS Date. 
I don't have enough knowledge about JS and Elm internals to know what to do next.
So I'm stuck but this is the right kind of stuck because in having a solution to this, a large class of issues is solved. 

Then there is also the issue of packaging everything in a deliverable. 

Once all this is done, maybe someone else will do the research needed to discover how we can implement the web-components in Elm in a way that is size efficient.

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

[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.

[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. 

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

[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/

​

[Ossi Hanhinen]

Peter, what exactly do you mean by this:

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

How do you deliver applications without Web Components? How do you think using WCs makes it different?

--
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.

[Peter Damoc]

Thanks Fred! 

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. 

This also feels like a glorious opportunity. 





 

--

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

[Peter Damoc]

People are coming to Elm from different backgrounds. 
Some have years of front-end development experience and have grown with the current tools, mastering them as they appeared.

Some, like myself, have very little front-end know how (My main experience was in GUI programming).

One of the issues I face when approaching a project in web-dev is that I need to be able to produce a stable deliverable, something I can give to a client. 
This might be transparent to a person with experience but to a beginner it could be a big hurdle. 

For example, I learned about vulcanize by reading Fred's makefile. I had to figure out to install it. 

Playing with Elm is simple when all you need to do is go to elm-lang.org/try , copy&paste some code there and then change some things.
After one plays a little bit more, they run into the issue of not having some library installed on elm/try and they need to solve the issue of installing Elm on their system.
After that's done and everything hums along with the help of elm-package/elm-reactor, there comes the issue of starting to need functionality that is beyond the elm-platform

There comes a point when you start needing to install tools with npm or bower.
One starts to need makefiles (like Fred used) or gulp/webpack.

Again, this might be transparent to a veteran but to a beginner it might be a big hurdle.
Some assistance here would help a lot.

What I want is to edit some Elm files and have an experience similar to "elm-make"... one command and I get a deliverable. 
In order for this to happen, I have to be constrained by the environment, in other words, there needs to be a system I can trust that does all the wiring of the needed tools in the most efficient way. 



 

To unsubscribe from this group and all its topics, send an email to elm-discuss+unsubscribe@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+unsubscribe@googlegroups.com.

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

[Rupert Smith]

On Wednesday, September 28, 2016 at 8:18:26 AM UTC+1, Peter Damoc wrote:

After that's done and everything hums along with the help of elm-package/elm-reactor, there comes the issue of starting to need functionality that is beyond the elm-platform

There comes a point when you start needing to install tools with npm or bower.
One starts to need makefiles (like Fred used) or gulp/webpack.

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.

[Peter Damoc]

On Wed, Sep 28, 2016 at 1:10 PM, 'Rupert Smith' via Elm Discuss <elm-d...@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. 

[Rupert Smith]

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/

[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. 

--

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

[Rupert Smith]

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.

[Frederick Yankowski]

I agree that it seems like overly big. I'm glad that Rupert was able to minimize and zip it to a reasonable size.

I tried loading the webcomponent polyfill conditionally, per the comment in index.html. That works fine in Chrome and Firefox with the bare code but I could not get it to work with the "vulcanized" version. I just couldn't get the load order right such that the webcomponent API would be ready before it is called. 

I'm old-school and prefer working with 'make' but my resistance to the gulp/grunt/webpack tools may be futile.

[Rupert Smith]

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&active=paper-listbox

Should be easy enough following your calendar demo.

[Rupert Smith]

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.

[John Mayer]

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

http://webcomponents.org/polyfills/

--

[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&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=16
might provide some more ideas. 

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

[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

--

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

[Rupert Smith]

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...

[Rupert Smith]

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

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../paper-item/paper-item.html">

  <link rel="import" href="../../iron-collapse/iron-collapse.html">

  <link rel="import" href="../paper-listbox.html">

  <link rel="import" href="../../paper-styles/demo-pages.html">

from: 

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

[Rupert Smith]

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.

[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.
 

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

[Rupert Smith]

On Wednesday, October 5, 2016 at 3:35:55 PM UTC+1, Rupert Smith wrote:

"PolymerElements/paper-listbox#^1.1.2"

Including this in the bower.json seems to have recursively fetched a load of other polymer libs, which seems to make it easier to figure out what I need. I guess when I run it through the vulcanize it is going to trim off any unused bits for me.

[Rupert Smith]

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. 

[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. :)  

--

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

[Rupert Smith]

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.... 

[Peter Damoc]

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

--

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

[Rupert Smith]

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. 

[Rupert Smith]

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

[Peter Damoc]

I have no idea what is happening there but I would sure love to see what comes up as a solution. 

--

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

[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 <pda...@gmail.com> 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-d...@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...@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...@googlegroups.com.

[Ed Ilyin]

Pushed elm-polymer-double-event-issue example also as a gist: https://gist.github.com/edvail/3a495d6b7c71df2a335a5373bc494190

Why double events?

[Rupert Smith]

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:

Found another example here:

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

[Rupert Smith]

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.

[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. 

--

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+unsubscribe@googlegroups.com.

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

[Rupert Smith]

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.

[Rupert Smith]

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

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <script>

        window.Polymer = {

            dom: 'shadow',

            lazyRegister: true

        };

    </script> 

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.

[Rupert Smith]

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 

[Peter Damoc]

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

Thanks for solving this. 

--

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

[Rupert Smith]

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!

[Peter Damoc]

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

--

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

[John Orford]

This is brilliant, hope someone can write this all up for reference at some stage. ;)

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 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.

[Rupert Smith]

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

[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?

[John Mayer]

It's difficult to assess the performance anecdotally (benchmarks are preferred, see Evan's meticulous blog posts around Elm's performance relative to other languages/libraries/frameworks)

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.

Regardless, later phases of the Elm/Web Component experiment will have a few simple benchmarks.

On Thu, Oct 6, 2016 at 10:45 PM, Aislan de Sousa Maia <aislan.s...@gmail.com> wrote:

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+unsubscribe@googlegroups.com.

[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. :) 

--

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

[Peter Damoc]

On Fri, Oct 7, 2016 at 6:06 AM, John Mayer <john.p....@gmail.com> 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. 

[Rupert Smith]

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.

[Peter Damoc]

On Fri, Oct 7, 2016 at 11:30 AM, 'Rupert Smith' via Elm Discuss <elm-d...@googlegroups.com> wrote:

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.

Hmm... actually, I think you are right... this might work. 
I still fear that this might not scale well but... fear is the mind killer :) 

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. 

[Rupert Smith]

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? 

[Peter Damoc]

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. :) 

[Rupert Smith]

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 <my-component> 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?

[Richard Feldman]

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

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! :)

[Peter Damoc]

You seam to have summarized the discussion pretty well. 

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) . 

--

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

[Rupert Smith]

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.

[Rupert Smith]

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.

[Rupert Smith]

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 

[Rupert Smith]

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

[Peter Damoc]

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

--

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

[Rupert Smith]

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.

[Rupert Smith]

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.

[Rupert Smith]

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

[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. :) 

--

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

[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 <pda...@gmail.com> 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-d...@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...@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.

[Rupert Smith]

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?

[Rupert Smith]

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 <elm-listbox href="http:/.../picklists/somelist">, and have the component manage the request/response lifecycle itself.

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

[Rupert Smith]

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

Chrome has support for webcomponents built in, so you do not even need webcomponents.js at all.

Firefox seems ok with the shady DOM version, so works with webcomponents-lite.js.

Also, I looked a bit into creation webcomponents without polymer, but you really are starting with basics that polymer provides for you. Polymer comes in -micro, and -mini flavours too, the feature of the various flavours are listed here:

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

We are currently using the full version, so that we can do:

app = Elm.Component.embed(this.$.embed, {

                        count: this.count

                    });

and Polymer knows from this.$ which DOM node to attach Elm too.

Also we are using proeprty change notifications from the full version, so it looks likely that the full version of polymer is needed if using polymer, and that polymer is a very useful library for basing this on.

Next up, run vulcanize to assess the size cost of full polymer and the various webcomponents.js if they are also bundled.

[Rupert Smith]

On Tuesday, October 11, 2016 at 2:00:42 PM UTC+1, Rupert Smith wrote:

Next up, run vulcanize to assess the size cost of full polymer and the various webcomponents.js if they are also bundled.

Without webcomponents.js

Vulcanized to 409K, of which 199K is Elm js output. Minfies to 210K, and gzips to 58K.

With webcomponents-lite.js

Vulcanized to 449K, of which 194K is Elm js output. Minfies to 250K, and gzips to 70K.

With webcomponents.js

Vulcanized to 527K, of which 194K is Elm js output. Minfies to 328K, and gzips to 91K.

Removing all polymer .js just to get an idea of the Elm code on its own:

Vulcanized to 195K, of which 194K is Elm js output. Minfies to 67K, and gzips to 19K.

This means that the overheads for using polymer are:

no webcomponents.js: 58 - 19 = 39K

webcomponents-lite.js: 70 - 19 = 51K

webcomponents.js: 91 - 19 = 72K

 

[Rupert Smith]

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.

[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?

--

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

[Rupert Smith]

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.

[Rupert Smith]

On Wednesday, October 12, 2016 at 3:02:14 PM UTC+1, Rupert Smith wrote:

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 is an area where compiler integration could help. If there were say a special 'program' type for building webcomponents - pushing parts of the Elm state out to the component could be boilerplate that is generated. But I'll just park this idea for now. 

[Rupert Smith]

On Wednesday, October 12, 2016 at 1:55:02 PM UTC+1, Peter Damoc wrote:

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

I agree in that I haven't thought of a use case for it yet that is better than the declarative alternative. But worth pointing out as a limitation on Elm webcomponents, vs webcomponents without Elm as this is something that can easily be done in javascript.

Also if a webcompnent written in Elm is to be used outside of Elm as a true webcomponent, it will be possible to provide methods to read and write its state from javascript, because we have the port to set state on it from Elm, and can use a subscription to read state into Elm (haven't tried that one yet, I took the reset method out for now).

There was one area I was thinking it might be needed relating to lifecycle events on the component. Suppose a consumer of a component wants to close it down - does it need to be able to set "state = closed" on it? 

But I think simply removing it from the view should trigger the 'detached()' state transition on the component? In which case that solves that issue. 

I should try that one out by putting some logging code in the detached() lifecycle method.

===

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. Sounds ok though, it means that a component is more truly independant. 

I think though it might make letting the consumer of the video component customize its control bar difficult. I might like to do something like this

video [ src "http://myvids.com/cute_cats.mpg" ]

[ videoControl [] [ button [ onclick Pause ] [ text "pause" ] ] ]

Now how does the Pause action tell the video to pause?

So perhaps some way of passing an id into a port and having it look up the component to invoke might be needed.

[Rupert Smith]

On Wednesday, October 12, 2016 at 4:57:45 PM UTC+1, Rupert Smith wrote:

I think though it might make letting the consumer of the video component customize its control bar difficult. I might like to do something like this

video [ src "http://myvids.com/cute_cats.mpg" ]

[ videoControl [] [ button [ onclick Pause ] [ text "pause" ] ] ]

Now how does the Pause action tell the video to pause?

Perhaps creating the video component needs to be done by first getting some kind of id to reference it by, then passing that id around:

In the model:

init = {

  videoComponent = Video.component

}

In the view:

let

 vidId = model.videoComponent

in

 video vidId [ src "http://myvids.com/cute_cats.mpg" ]

[ videoControl [] [ button [ onclick Pause vidId ] [ text "pause" ] ] ]

in the update

 

  Pause vidId -> (model, Video.pause vidId)

with 

Video.pause : ComponentId -> Cmd msg

The ComponentId can be an opaque type that has to get passed around and through every port call communicating with the component.

[Peter Damoc]

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.
 

 

[Rupert Smith]

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.

[Rupert Smith]

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

[Rupert Smith]

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.

[Rupert Smith]

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.

[Rupert Smith]

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 <content> 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 <content> within it using the Html library and Html.Events.

[Rupert Smith]

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 <elm-listbox 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.

[Peter Damoc]

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.  

[Rupert Smith]

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.

[Rupert Smith]

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.

[Richard Feldman]

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

[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 <richard....@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+unsubscribe@googlegroups.com.

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

[Richard Feldman]

Yes and yes! I'll post when the video is up.

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+unsubscribe@googlegroups.com.

[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....@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 <pda...@gmail.com> 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....@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...@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...@googlegroups.com.

[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 <pda...@gmail.com> 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....@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...@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.

[dedo]

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

[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!

[dedo]

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

[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(<h4>{name}</h4>);
        }
    },
    attributeChangedCallback: {
        value: (attrName, oldVal, newVal) => {
            if (attrName == "name") {
                myRender(<h4>{newVal}</h4>);
            }
        }
    }
});

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

​