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. ¯_(ツ)_/¯
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.
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?