Thanks a lot, that's exactly what I was looking for! For my application, the webcomponents' state will be concatenated & sent to a server for evaluation, because the server needs the state of all webcomponents to perform that evaluation. What I'll do is ask the webcomponent to generate a JSON on event & Elm will simply send that uninterpreted JSON to the server without even parsing it (although I've had problems with the double quotes being escaped...)
Regarding the component's internal state, I'll regenerate it if it has been erased or is inconsistent with the component's attributes. Once again, thank you: you just saved me a lot of time! On Tuesday, March 28, 2017 at 12:15:35 PM UTC+2, Rupert Smith wrote: > > 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.
