Didnt added an interface to import/require. This is the next step (gonna do it this week). Each element is a class that is added using customElements.define(). Im thinking in export the already defined element (ready to use).
Once i add the import/require interface the Unpkg and Tree Shaking can be a next step.
About bundlers: I tried to keep it as simple as it could be, so i decided to use Gulp. Here is why:
I need to:
Generate CSS files from SCSS code
Run babel on the JS code to guarantee the max of compatibility
Minify all the files
Generate a bundle: .min JS and CSS single files.
With gulp i took 30 minutes to do it and wrote a "create" npm script to add new components. I didnt saw any benefit in add such complex thing as webpack to do some simple tasks at this point. Maybe webpack could give me some fun or freedom, as code the element in a single file (scss + js), i dont know. So i didnt overcomplicate the things.
Anyway, i could be wrong. Now i can scale the elements to a next step, and could be the points that you added. Thinking on the tree shaking, an interface to allow import/require and the package managers to add these elements, maybe webpack would be really useful.
I'd love to hear what you think about. Do you have any tips?
Thank you for your comment.
I added the UMDJS for the bundle and the single elements js files on the "elements" directory. This will allow you to import/require the bundle or a single element, once the elements are just a class and a simple registration. Thinking about the webpack suggestion.
You can try hqjs.org to serve this and optimise your development experience. No need of configuring Parcel / Webpack, and it takes care of modules and polyfills despite of Unpkg
How do I import / require? Unpkg? What about tree shaking to reduce size?
Lastly, what do you think about Parcel / Webpack / Snowpack to bundle this? Are they needed?
Hey Pacharapol, you added some nice points here.
Didnt added an interface to import/require. This is the next step (gonna do it this week). Each element is a class that is added using customElements.define(). Im thinking in export the already defined element (ready to use).
Once i add the import/require interface the Unpkg and Tree Shaking can be a next step.
About bundlers: I tried to keep it as simple as it could be, so i decided to use Gulp. Here is why:
I need to:
With gulp i took 30 minutes to do it and wrote a "create" npm script to add new components. I didnt saw any benefit in add such complex thing as webpack to do some simple tasks at this point. Maybe webpack could give me some fun or freedom, as code the element in a single file (scss + js), i dont know. So i didnt overcomplicate the things.
Anyway, i could be wrong. Now i can scale the elements to a next step, and could be the points that you added. Thinking on the tree shaking, an interface to allow import/require and the package managers to add these elements, maybe webpack would be really useful.
I'd love to hear what you think about. Do you have any tips?
Thank you for your comment.
I added the UMDJS for the bundle and the single elements js files on the "elements" directory. This will allow you to import/require the bundle or a single element, once the elements are just a class and a simple registration. Thinking about the webpack suggestion.
You can try hqjs.org to serve this and optimise your development experience. No need of configuring Parcel / Webpack, and it takes care of modules and polyfills despite of Unpkg
Ill take a look Yuri. Thanks for the tip ;)