D3-Stencil with Ionic/Angular

[peterennis]

@edgarordonez

I have done some testing on this.

1. I found that names such as horizontal-bar-chart would cause breakage when used with Ionic/Angular. So renamed to horizontal-barchart etc.
2. Polyfills and CustomElements definitions needed adding.
3. Custom schema needed adding.

I created a POC here for D3-Stencil: https://github.com/peterennis/d3-stencil/tree/ae-d3-stencil

I created an Ionic/Angular app here: https://github.com/peterennis/d3-stencil-angular-typescript

I created npm packages to test here: https://www.npmjs.com/package/ae-d3-stencil

Results:

I am using the latest Stencil 1.9.0-3 so still very much bleeding edge.

The app fails due to wrong injected data.

Can you take a look? Any debugging ideas?

If it is Stencil at fault then I can open a ticket upstream. I am not familiar enough with debugging at this level for D3-Stencil.

Once this is working we can discuss how to pull it to D3-Stencil directly and I can continue with React and Vue integration testing.

NOTE: The ae-d3-stencil package appears to work with Stencil.

There are some warnings about using appropriate events that I can look into.

index-0619c45a.js:2471 stencil The state/prop "tooltipEl" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()" 
Element <horizontal-barchart class=​"hydrated">​…​</horizontal-barchart>​ 
New value <tooltip-chart slot=​"tooltip" class=​"hydrated">​…​</tooltip-chart>​ 
Old value undefined

I am thinking that these breaking changes would mean bumping to D3-Stencil v3.0

Let me know your thoughts.