Stencil: Stencil 'best practices'

[td0m]

After recently discovering stencil, I would love to switch from react to stencil, but the lack of docs regarding the following features stops me and many other developers from using it (now):

• Global/shared state management? (redux for react, services for angular?)
• Element refs (ref={r => this.btn = r} for react, <button #btn> for angular)
• Importing external libraries (fails in many cases)
• Extending HTMLButton or other native html element. I am aware about there lack of full implementation of it, but are there any alternatives?

Basically what I am asking for is a discussion of these features and adding them to the official documentation.
Thanks 💎 😍

[jgw96]

Hey, thanks for being an early adopter of Stencil! Ill try to answer these questions as best I can with the early state that Stencil is in now.

• We are still working on our story for state management best practice for stencil. We are working on something like a stencil-redux.
• For getting a reference to an element we recommend using querySelector.
• importing external libraries is a WIP at the moment, but our plan is to use ES modules like Polymer 3 will use. At this time the best way is to just use script tags
• At this time, unfortunately, you cannot extend native html elements as it is blocked in the standardizing process and is not implemented in any browsers and there arent really any alternatives. What is your use case for wanting to end a native element?

Hopefully the above helps answer your questions!

[KiaraGrouwstra]

@jgw96: is there an issue where we could follow / discuss considerations on the state management lib? These sound like exciting developments!

I thought ngrx was generally pretty cool for combining good ideas like observables and TS, and afaik not strictly tied to Angular.
That said, I feel one bit could be improved on there was the parameter order of reducer function -- if using state last rather than first (example), that would automatically make it friendly to FP libraries (like Ramda and Lodash-fp), leveraging a functional point-free style to cut down on the otherwise verbose reducer boilerplate.