This is the first in a series of posts about creating a web component library using Stencil.js
I've been doing frontend development professionally...
For further actions, you may consider blocking this person and/or reporting abuse
I like your tutorial on Stencil, I like that you explain it properly, other sites they just show the code without explaination.
In the 'build' folder, I see many files but you only include 2 files (mountain-ui.js and maountain-ui.esm.js)
the other files are needed for the web components to work?
In the 'dist' folder, I see in the folder button, button.js and button.css. how could I use this in Angular. Do I just import the button.js and use it? Same for the tabs folder?
I see the button have class 'hydrated'. what is this used for and how do you set it up?
And could you explain how the following is working:
button.tsx
private getCssClassMap(): CssClassMap {...
I just want to use Stencil for my library development for web component.
Is there a datepicker web component anywhere?
I found a few that a person did but was not a company(2+ employee) so I'm not sure how reliable it is.
Could you write one ;-)
Thanks Donald! I appreciate your comment, I'm glad it's helpful. I'll attempt to answer you questions as best I can:
You're right, I'm only including two files in the index, but those other files are chunks that are lazy loaded on demand, so yes those are all necessary.
Integration with various frameworks is actually for the most part trivial. You can see their Framework Integration docs to know how to use the components. Specifically for Angular, you can use this page.
a. Stencil components become "hydrated" upon loading them in the DOM, and that class is added when they're ready to be used. (for example, calling the methods on the component from outside) You don't need to do anything for that to take place, that's built in.
b. That
getCssClassMap()method is simply a little helper function I wrote to return an object with class names and whether or not to add those to the element where I'm using it. It's very simple in the button file because I'm always adding them, but it can be more complex if I have, for example, ternary statements determining whether or not to add classes. That's just a matter of preference and you're welcome to do it however you want. :)a. There is a great GitHub repository with a bunch of Stencil resouces, awesome-stenciljs, including existing component libraries. Your guess is as good as mine for how reliable it would be. ¯_(ツ)_/¯
b. Haha, maybe one day! Who knows?
Thanks a lot for your response,
I was looking at your github for easy-calendar.
I cannot see it in the browser, gives errors when build.
Is it supposed to work when I do a npm install and npm start?
github.com/johnbwoodruff/easy-cale...
Unfortunately that's a project that has languished into sadness. :( Haha. I've not touched it in nearly two years so I would imagine it definitely wouldn't work, and it wasn't near being ready anyway. I should probably archive that.
Good grief there are a bunch of things I should be archiving. 🤦♂️
I guess it should be name not-so-easy-calendar. ha ha
for item 4, getCssClassMap(), this you can do this as you are using JSX right?
the problem with stencil is it doesnt have any job market, so if you already have a job its great otherwise if you are looking to learn a tech to find a job then sadly we have top pick a framework like angular or react.
I'm not advocating learning Stencil for the purpose of obtaining a job, but rather suggesting when you build a component library, you look at Stencil as an option instead of locking in to a single framework.
you can actually choose your path with stencil either by using it's pure js approach or adopting angular/vue/react. the result will just compile to pure web component but you'll gain knowledge at the path you chose
Hi,
How to install and use bootstrap and other libraries in stencil.? I'm stuck with installing and use bootstrap in stencil! it will be more useful if you give any solution on this!!
Are you building a full app using Stencil? Or are you wanting to use Bootstrap as a base for your stencil components? Not sure I understand your need.
Sorry for an inconvenience.Yeah I have planned to create a full web app i mean a chat page not exactly but like gmail to integrate it with existing angular and vue applications.But i do not know how install and use bootstrap in stencil.Can you help me on this!?
So if I understand correctly, you're building a web component that you want to include in Angular and Vue applications, and you want to use the Bootstrap styling.
With any library that you include in other applications, I recommend defining dependencies as peerDependencies, so you require the library using your component to install both the component and Bootstrap, or use the already existing Bootstrap if they already have it installed. This way you're not bloating your small web component with the entire Bootstrap package.
I highly recommend joining the Stencil Slack as you have a large community of people there willing to help out with these kinds of issues.
Please help me .. How can I use boostrap... We are planning to develop a few pages application with stencilJs.. We require Bootstrap.. How to use it
Just wondering, when the component is compiled from typescript and published, are you able to use the component without including Stencil.js lib in your project?
Yep! Stencil is purely a compiler, the output is plain JavaScript web components. You add it to an app as simply as adding a script tag! I'm going to go over using these components in various apps and frameworks in a later post. :)
Ah that’s awesome. That’s one benefit over Polymer!
everyday I discover a new Js library or framework
Did you try Svetle? It's not as popular but I read that it's good. Would love to know your thoughts.
I haven't personally tried Svelte, but I've seen comparisons posted on Twitter before. It doesn't look to me like they turn your components into full standards-compliant web components, which is the purpose of Stencil. It appears to just turn them into javascript code. I'm not sure if it uses web component APIs such as the Shadow DOM. It appears as though they have different goals.
I just looked at Svelte, and looks similar to Vue, and I don't see a benefit of using Svelte over Vue.
Stencil (and Polymer and LitElement) work with web components, so they are not really frameworks, more like wrappers around existing web components API.