On Tuesday, March 28, 2017 at 10:21:02 AM UTC+1, Rupert Smith wrote: > > On Tuesday, March 28, 2017 at 7:26:37 AM UTC+1, Charles-Edouard Cady wrote: >> >> (2) the ability to write webcomponents in Elm. >> >> I'm not too sure about number 2: what I've seen in the list so far is >> mainly interest in using webcomponents but not so much in writing them. >> Does anybody have more information on this? Any help would be greatly >> appreciated! >> > > I have implemented a list box as a webcomponent in Elm (and consumed it in > Elm too). I'll see what state it is currently in and get back to you. But > first, coffee... >
Here it is, freshly upgraded to Elm 0.18: https://github.com/rupertlssmith/wood-polymer I gave my Elm Polymer components based on Polymer 'paper' the name 'wood'. Because wood is related to paper and Elm is wood. The main files of interest are: https://github.com/rupertlssmith/wood-polymer/blob/master/src/elm/Listbox/Listbox.elm https://github.com/rupertlssmith/wood-polymer/blob/master/src/webcomponents/wood-listbox.html You can see how the web component is initialized by passing a property (the 'items' function builds this property). You can see how the web component triggers an event in elm by using a property change event handler. You can see where I make use of the Polymer life-cycle to attach Elm into the Dom in the attached() method. One thing that turned out strange with this is that to make use of Polymers automatic ability to notify on changed properties, I had to keep a copy of the list box state on the javascript side. I also have its state on the Elm side in the Model. This is rather unfortunate, as you can see various ports and subscriptions that are need to keep the two sides in sync. This feature of Polymer is convenient for working with it in javascript, but not for Elm. The Polymer component would also tend to fire off _itemsChanged, when the items have not changed. So you can see I tried to filter out some of these spurious firings with arrays equal tests. I used Polymer as a convenient way of getting started with web components, but I think perhaps it is the wrong library. Really Elm needs some support for web components added to it that is better attuned to how Elm works. My suggestion is a new Program type in Elm, that helps you build an Elm Program-as-webcomponent. However, to begin with we just figure out how to code Elm webcomponents by hand then figure out what bits of that can be extracted as helper code to be incorporated into Elm :-) Also important, configure Polymer with these settings in index.html: <script> window.Polymer = { dom: 'shadow', lazyRegister: true }; </script> ======= For your application, how much interaction is there between the web components and the main page? I expect from your description that the components are fairly self-contained - I think this makes them a reasonable candidate for implementing as web components within Elm. The one problem you may have is if the Elm managed virtual DOM decides to re-render your webcomponent, it will be re-initialized and lose its internal state. This may not be so much of a problem. The situation where it may occur is if you have a list of these components within some div and you add another one and the whole div is re-rendered. Html.Keyed will help you out here. ======= Peter says you may find dynamically importing the components tricky? I don't think it will be so hard, as you can always import the necessary stuff inline in the Html body, you don't need to declare all imports up-front in the head. -- 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 [email protected]. For more options, visit https://groups.google.com/d/optout.
