Polymer 3

[rwestlund]

This needs to be run through the modulizer and pushed to npm.

[Hunsin]

Will there be a lit-element version of chartjs also?

[trading-peter]

I'm not uncertain what the Polymer team plans to favor in the future. It seems to me that they maybe go all in on lit-element and ditch the polymer binding syntax in the long run. I would like know that in order to make a future proof version of the element.

Does anybody already have a definitiv statement on that subject? @robdodson, you maybe?

[rwestlund]

They said so on the Polymer blog: https://www.polymer-project.org/blog/2018-05-02-roadmap-update.html Also see the FAQ linked at the bottom.

They're not only dropping the Polymer 2 syntax, they're going to deprecate all the iron-*, paper-*, etc elements in favor of new lit-element implementations. Their new implementations are beautifully minimal.

[trading-peter]

Thanks @rwestlund! Where did you read that they will deprecate iron-elements? I've read the team will for now continue to maintain them while building a new set of lit-html based elements. Just asking, because "deprecate" sounds like "death is near".

Anyway I will take a look and try to rewrite the elements with lit-html tomorrow. Can't however promise that I will be able to finish them this weekend.

[rwestlund]

I'm inferring it.

In the FAQ from that blog post, they say:

• Use lit-element for new projects.
• You can keep using the Polymer data system features "provided you understand that they won't see active development going forward."

In their Google IO talks they've been clear that Polymer's end goal is to disappear. The new starter kit even uses redux for state management rather that Polymer. It looks like the only difference between Polymer and React will be native vs virtual DOM. Seems like a good thing to me. https://github.com/Polymer/pwa-starter-kit

The starter kit's README has a TODO for moving to the new lit-element-based element set which is being developed here: https://github.com/material-components/material-components-web-components/tree/master/packages

I expect they'll formally deprecate Polymer's state management and the the old element set once the lit-element stuff reaches 1.0.

[trading-peter]

I have a prototype based on lit-element ready. It's on the polymer-3.0-lit-element branch. I would really appreciate if you guys could give it a try and give me feedback.

It's a near re-write and comes without iron-resize-behavior, so I guess there will probably unwanted side effects.

[RoXuS]

Hi @pkaske,

We did some tests on polymer 3, Chart.js doesn't offer an esm import so we have used a basic script import like this : https://github.com/RoXuS/chart-elements/blob/polymer3/chart-js-import.js .

We have tried on the chart-line element like this: https://github.com/RoXuS/chart-elements/blob/polymer3/chart-line.js and is work good with a simple import: import '@pkaske/chart-elements/chart-line';.

Do you think that is the good way to go ?

[trading-peter]

Hey @RoXuS,

I saw your comment and was confused why you'd use the legacy polymer lib if I had a lit-element based version already in the polymer-3.0-lit-element branch. Then I realized that somehow I didn't push the new code into the branch or it was somehow lost when rob dodson transfered ownership to me. Probably the first reason.

Anyways, you'll now find a lit-element base implementation in the branch. Please try those out. The new version also doesn't load chart.js by itself. So you can do that how ever you want or need to.

Let me know if that helps.

[RoXuS]

Oh yeah, now I understand you polymer-3.0-lit-element branch ! (Thx for this work).

You do not think it would be better to load chart.js in the component while waiting for the esm import from the chart.js team ?

[trading-peter]

Yeah I thinks it's better to not load chart.js in the component. Reasons for that are

1. people my want or need to use a different version of chart.js
2. maybe chart.js is already loaded in the project when the chart-elements are introduced
3. probably better for people in regards to their bundling strategy (don't know about that, I'm new to that because till recently polymer build did everything for me)
4. i don't have to track chart.js to timely remove the import again when chart.js gets an esm version

If you feel my views are wrong or I overlook other arguments that speak for import inside the component, tell me. Definitely interested in your opinion.

Edit: Now that I think about it. Having an import in the components is probably totally OK as soon as an esm version is out, right?

[RoXuS]

Hum ok ok I understand.

It's just a shame not to be able to do: import '@pkaske/chart-elements/chart-line'; without import chart.js.

We use chart-line in a component (without any html file) so we have to dynamically load chart.js like here https://github.com/RoXuS/chart-elements/blob/polymer3/chart-js-import.js. Then dynamically load chart-line with the same way, because if we import chart-line directly we will have a Chart is not defined (context-mixin.js:40)....

So the component isn't usable in a component without a lot of stuff.

[trading-peter]

That sucks, I understand you. As soon as there is an official esm version, I'll reconsider this.

In the meantime: Somebody converted chart.js to esm format using rollup. Maybe that helps? https://github.com/chartjs/Chart.js/issues/5179#issuecomment-417889559

[RoXuS]

Thx for your response, we will test this solution.

And yeah, when official esm version will be available it would be great to have this in the repo !

[emersonbottero]

@pkaske @RoXuS Is it a bad practice? I like it because you still keep everything in one file without the 'is not loaded' problem.

  ready()
  {
    //load the cdn library
    const ioscript = document.createElement('script');
    ioscript.src = 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js';
    document.getElementsByTagName("head")[0].appendChild(ioscript);

    ioscript.addEventListener ("load", ()=>{
        if(this.auto) this.connect( );
    });
  }

[trading-peter]

chart-elements are now migrated to the latest version of lit-element and is available on npm.

Use npm install --save chart-elements. Chart.js still needs to be loaded manually as there is no esm version to my knowledge.

[rwestlund]

@pkaske Thanks, you made my day! I think this was the last thing keeping my app on Polymer 2. Big weekend ahead...

[trading-peter]

@rwestlund cool! Let me know if any issues arise. Sorry that I was no inactive about this.