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

Discussion:

Peter Damoc

2016-09-23 12:27:42 UTC

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

Ossi Hanhinen

2016-09-23 21:39:51 UTC

Permalink

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
<https://github.com/ohanhi/polymer-in-elm>, 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
<https://www.polymer-project.org/1.0/docs/devguide/properties#notify>. 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.

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

Peter Damoc

2016-09-24 09:07:16 UTC

Permalink

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!

Post by 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
<https://github.com/ohanhi/polymer-in-elm>, 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
<https://www.polymer-project.org/1.0/docs/devguide/properties#notify>. 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.

Post by 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/
- 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
- 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.
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
For more options, visit https://groups.google.com/d/optout.

Frederick Yankowski

2016-09-26 20:08:36 UTC

Permalink

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

2016-09-26 20:32:46 UTC

Permalink

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.

Post by 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
For more options, visit https://groups.google.com/d/optout.

Frederick Yankowski

2016-09-27 22:41:44 UTC

Permalink

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

2016-09-28 05:40:54 UTC

Permalink

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?

Post by Frederick Yankowski
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 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
For more options, visit https://groups.google.com/d/optout.

Peter Damoc

2016-09-28 07:18:06 UTC

Permalink

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.

Post by Ossi Hanhinen
"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?

Post by Frederick Yankowski
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 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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-09-28 10:10:36 UTC

Permalink

Post by Peter Damoc
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

2016-09-28 10:19:31 UTC

Permalink

On Wed, Sep 28, 2016 at 1:10 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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.

Peter Damoc

2016-09-28 06:59:52 UTC

Permalink

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.

Post by Frederick Yankowski
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-09-28 10:35:55 UTC

Permalink

Post by Peter Damoc
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

2016-09-28 10:54:43 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

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

'Rupert Smith' via Elm Discuss

2016-09-28 11:14:41 UTC

Permalink

Post by 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 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

2016-09-28 13:59:21 UTC

Permalink

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.

Post by 'Rupert Smith' via Elm Discuss

'Rupert Smith' via Elm Discuss

2016-10-05 10:44:34 UTC

Permalink

On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
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' via Elm Discuss

2016-10-05 11:01:00 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
https://github.com/fredcy/elm-polymer-calendar

https://elements.polymer-project.org/elements/paper-listbox?view=demo:demo/index.html&active=paper-listbox
Should be easy enough following your calendar demo.

John Mayer

2016-10-05 11:18:32 UTC

Permalink

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

Post by 'Rupert Smith' via Elm Discuss

Post by 'Rupert Smith' via Elm Discuss
On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
https://github.com/fredcy/elm-polymer-calendar

https://elements.polymer-project.org/elements/paper-listbox?
view=demo:demo/index.html&active=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
For more options, visit https://groups.google.com/d/optout.

Peter Damoc

2016-10-05 11:54:16 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by 'Rupert Smith' via Elm Discuss
On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
https://github.com/fredcy/elm-polymer-calendar

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' via Elm Discuss

2016-10-05 14:28:30 UTC

Permalink

Post by Peter Damoc
Polymers do not work like that.
For optimizing the size, see the links I posted in the previous comment.
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' via Elm Discuss

2016-10-05 14:32:21 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
Polymers do not work like that.
For optimizing the size, see the links I posted in the previous comment.
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"
},
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:

<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' via Elm Discuss

2016-10-05 14:35:55 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
Polymers do not work like that.
For optimizing the size, see the links I posted in the previous comment.
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.

'Rupert Smith' via Elm Discuss

2016-10-05 14:39:41 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
"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.

Peter Damoc

2016-10-05 14:36:28 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
Polymers do not work like that.
For optimizing the size, see the links I posted in the previous comment.
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"
},
https://github.com/bendavis78/paper-date-picker
Kind of hard to figure out what I need for the listbox...

'Rupert Smith' via Elm Discuss

2016-10-05 15:03:18 UTC

Permalink

Post by Peter Damoc
Polymers do not work like that.

Peter Damoc

2016-10-05 15:33:19 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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
For more options, visit https://groups.google.com/d/optout.

Peter Damoc

2016-10-05 11:37:42 UTC

Permalink

For what is worth, the approach described here:
https://github.com/Polymer/polycasts/tree/master/ep39-vulcanize/vulcanized-app

might provide some more ideas.

On Wed, Oct 5, 2016 at 1:44 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
https://github.com/fredcy/elm-polymer-calendar

https://elements.polymer-project.org/elements/paper-
listbox?view=demo:demo/index.html&active=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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-05 15:42:03 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
I am going to give this a go, as I need an MDL styles multi-select

Peter Damoc

2016-10-05 15:48:55 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by 'Rupert Smith' via Elm Discuss
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-05 15:59:17 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-05 16:00:49 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

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

https://github.com/rupertlssmith/thesett_style_lab

Running here:

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

Peter Damoc

2016-10-05 16:17:52 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

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

https://github.com/rupertlssmith/thesett_style_lab

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

Ed Ilyin

2016-10-05 20:44:42 UTC

Permalink

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.

Post by Peter Damoc
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 <
This is very interesting.
Can you share some code so others can look at this?
https://github.com/rupertlssmith/thesett_style_lab
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
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
For more options, visit https://groups.google.com/d/optout.

Ed Ilyin

2016-10-05 21:14:22 UTC

Permalink

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

Why double events?

Post by Ed Ilyin
https://github.com/edvail/double-event-issue
But, dear, why events are duplicated?
Each typed character fires two identical events.
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 <
This is very interesting.
Can you share some code so others can look at this?
https://github.com/rupertlssmith/thesett_style_lab
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
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-06 09:12:48 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
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

2016-10-06 10:14:42 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

So I extracted a minimal polymer listbox + elm example out of my style
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-06 10:50:01 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-06 11:07:14 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

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

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:

<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' via Elm Discuss

2016-10-06 11:11:50 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

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

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.

Peter Damoc

2016-10-06 11:23:50 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

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

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.

Post by 'Rupert Smith' via Elm Discuss
</script>

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

'Rupert Smith' via Elm Discuss

2016-10-06 14:42:31 UTC

Permalink

Post by Peter Damoc
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

2016-10-06 14:53:37 UTC

Permalink

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

On Thu, Oct 6, 2016 at 5:42 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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
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!

Post by Peter Damoc
--

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

John Orford

2016-10-06 14:57:18 UTC

Permalink

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

Post by 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 <
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
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
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-06 20:32:05 UTC

Permalink

Post by Peter Damoc
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

Peter Damoc

2016-10-07 07:08:39 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
Next challenge: how to implement Custom Elements in Elm. :)

These examples cover a variety of different ways of working with elm and
https://github.com/kevinlebrun/elm-polymer
https://github.com/kevinlebrun/elm-polymer/tree/master/counter-elm-inside-
polymer

Post by Peter Damoc
--

'Rupert Smith' via Elm Discuss

2016-10-07 08:30:16 UTC

Permalink

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

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.

Post by Peter Damoc

Post by 'Rupert Smith' via Elm Discuss
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

2016-10-07 08:43:37 UTC

Permalink

On Fri, Oct 7, 2016 at 11:30 AM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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

Post by 'Rupert Smith' via Elm Discuss
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' via Elm Discuss

2016-10-07 13:41:01 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
Yes, we just need web-components, not polymer. Polymer is prividing some

Post by 'Rupert Smith' via Elm Discuss
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

2016-10-07 13:59:45 UTC

Permalink

On Fri, Oct 7, 2016 at 4:41 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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' via Elm Discuss

2016-10-07 14:37:19 UTC

Permalink

Post by Peter Damoc
On Fri, Oct 7, 2016 at 4:41 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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?

'Rupert Smith' via Elm Discuss

2016-10-05 21:23:03 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
On Tuesday, September 27, 2016 at 11:41:44 PM UTC+1, Frederick Yankowski

Post by Frederick Yankowski
https://github.com/fredcy/elm-polymer-calendar

Found another example here:

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

Aislan de Sousa Maia

2016-10-07 02:45:06 UTC

Permalink

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

2016-10-07 03:06:55 UTC

Permalink

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 <

Post by 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
For more options, visit https://groups.google.com/d/optout.

Peter Damoc

2016-10-07 07:17:38 UTC

Permalink

Post by John Mayer
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.

Richard Feldman

2016-10-08 21:29:27 UTC

Permalink

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
<https://groups.google.com/d/msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ> 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

Post by John Orford
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

2016-10-09 20:41:43 UTC

Permalink

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

On Sun, Oct 9, 2016 at 12:29 AM, Richard Feldman <

Post by Richard Feldman
I'm catching up on this thread...so much impressive progress! :D
- 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
<https://groups.google.com/d/msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ> 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! :)
--
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-10 13:14:55 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-10 13:20:57 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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) .

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

'Rupert Smith' via Elm Discuss

2016-10-10 13:49:50 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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) .

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
https://github.com/rupertlssmith/elm-polymer

Peter Damoc

2016-10-10 14:37:44 UTC

Permalink

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

On Mon, Oct 10, 2016 at 4:49 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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) .

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

'Rupert Smith' via Elm Discuss

2016-10-10 20:31:26 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-10 20:35:51 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU

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.

'Rupert Smith' via Elm Discuss

2016-10-10 21:31:40 UTC

Permalink

Post by Peter Damoc
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

2016-10-10 21:40:13 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU

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

Richard Feldman

2016-10-10 22:01:40 UTC

Permalink

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

Post by 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 <
https://groups.google.com/forum/#!topic/elm-discuss/QI6G6Pd5jPU
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
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
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-11 10:21:04 UTC

Permalink

Post by 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... ;)

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' via Elm Discuss

2016-10-13 11:23:30 UTC

Permalink

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' via Elm Discuss

2016-10-13 21:11:15 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
Which is ok, but what I really want is for the listbox user to be able to
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' via Elm Discuss

2016-10-14 10:35:07 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
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.
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

2016-10-14 13:50:40 UTC

Permalink

On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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' via Elm Discuss

2016-10-17 09:29:52 UTC

Permalink

Post by Peter Damoc
On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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.

'Rupert Smith' via Elm Discuss

2016-10-17 09:51:15 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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.

Richard Feldman

2016-11-03 16:54:11 UTC

Permalink

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

Peter Damoc

2016-11-03 22:45:40 UTC

Permalink

This is pretty awesome.

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

Post by Richard Feldman
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
For more options, visit https://groups.google.com/d/optout.

Richard Feldman

2016-11-04 01:36:29 UTC

Permalink

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

Post by 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 <

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

Ed Ilyin

2016-11-04 04:14:48 UTC

Permalink

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 <

Post by Richard Feldman
Yes and yes! I'll post when the video is up.
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 <
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
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
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
For more options, visit https://groups.google.com/d/optout.

Simon

2016-12-04 16:06:27 UTC

Permalink

Is the video available now?

Post by Richard Feldman
Yes and yes! I'll post when the video is up.

Post by Peter Damoc
This is pretty awesome.
Have you given the talk in Vienna?
Is this part of that talk? :)

Post by Richard Feldman
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
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
For more options, visit https://groups.google.com/d/optout.

dedo

2016-12-04 21:43:08 UTC

Permalink

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

Post by Richard Feldman
https://github.com/rtfeldman/elm-google-maps

Richard Feldman

2016-12-04 22:37:43 UTC

Permalink

Simon - video is not up yet.

dedo - I haven't tried that, but try what Rupert did here
<https://groups.google.com/d/msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ> -
seemed to help with children of lists!

Post by dedo
@Richard, I tried to use your google-maps / polymer version but had
trouble getting google-map-marker
<https://elements.polymer-project.org/elements/google-map>s to work as
children of the map element. Did map markers work for you?

dedo

2016-12-04 23:41:00 UTC

Permalink

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

Post by Richard Feldman
Simon - video is not up yet.
dedo - I haven't tried that, but try what Rupert did here
<https://groups.google.com/d/msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ> -
seemed to help with children of lists!

'Rupert Smith' via Elm Discuss

2016-10-11 10:07:46 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-12 12:34:31 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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

2016-10-12 12:54:56 UTC

Permalink

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 <

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
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?
app.ports.setCount.subscribe(count => {
this.count = count;
});
I exposed this port in my API module, so the user of the component could
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
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
For more options, visit https://groups.google.com/d/optout.

'Rupert Smith' via Elm Discuss

2016-10-12 14:02:14 UTC

Permalink

Post by Peter Damoc
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.

Post by Peter Damoc
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' via Elm Discuss

2016-10-12 14:03:55 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

I'll have to correct you here. The event is triggered by using an on-event
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' via Elm Discuss

2016-10-12 15:57:44 UTC

Permalink

Post by Peter Damoc
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' via Elm Discuss

2016-10-12 16:03:44 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
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

2016-10-12 16:34:33 UTC

Permalink

On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <

Post by 'Rupert Smith' via Elm Discuss
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' via Elm Discuss

2016-10-13 08:33:18 UTC

Permalink

Post by Peter Damoc
On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <

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
<http://www.google.com/url?q=http%3A%2F%2Fmyvids.com%2Fcute_cats.mpg&sa=D&sntz=1&usg=AFQjCNGiW_qrqfzOjZaj4nXSwqtxzPhI2w>"
]
[ 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' via Elm Discuss

2016-10-13 08:38:03 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss

Post by Peter Damoc
On Wed, Oct 12, 2016 at 6:57 PM, 'Rupert Smith' via Elm Discuss <

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.
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
type alias Model =
{ ...
, vidState : Video.Model
}
video model.vidstate [ src "http://myvids.com/cute_cats.mpg
<http://www.google.com/url?q=http%3A%2F%2Fmyvids.com%2Fcute_cats.mpg&sa=D&sntz=1&usg=AFQjCNGiW_qrqfzOjZaj4nXSwqtxzPhI2w>"
]
[ 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

'Rupert Smith' via Elm Discuss

2016-10-13 15:54:46 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
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' via Elm Discuss

2016-10-10 13:17:58 UTC

Permalink

Post by Richard Feldman
I'm catching up on this thread...so much impressive progress! :D
- 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
<https://groups.google.com/d/msg/elm-discuss/8Q2xwRh6UYc/tGem48QjAQAJ> 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.

Post by Richard Feldman
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' via Elm Discuss

2016-10-11 13:00:42 UTC

Permalink

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' via Elm Discuss

2016-10-11 13:18:34 UTC

Permalink

Post by 'Rupert Smith' via Elm Discuss
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

Simon

2017-05-31 12:02:44 UTC

Permalink

One interesting thing I found as I experimented this morning is that React
components can be wrapped up
<https://facebook.github.io/react/docs/web-components.html> to be web
components, which might make react components more accessible from Elm (at
present it is not straightforward
<https://github.com/elm-lang/virtual-dom/pull/28#issuecomment-233005968>).
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.

Post by Peter Damoc
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/
- 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
- 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.
https://gist.github.com/pdamoc/48c6f7dd2f7fec44bdd3262f269f635c
--
There is NO FATE, we are the creators.
blog: http://damoc.ro/