Exporting and building the library
We will export the components we create to be reused later when we distribute the node package via the npm registry. For that, we need first to create an index.ts under the src directory:
That file will export the components via barrels exports like so:
export * from './components/card';
export * from './components/cards';
After we need to set the output of our typescript transpilation for that, we point the outDir in the tsconfig.json for the lib directory in the project root, like so:
Another essential part is to configure the package.json file at the root of the project; we should point the main property to lib/index.js and update all the other properties:
If everything is well configured, we should be able to run the tsc
command and one version of the library in javascript should be generated under the ./lib directory.
Distributing the library
We will use the npm registry to distribute the library via a node package. If you don't have an account, you will need to create one here
After you log in via the console using the npm login command, your package for being uploaded will require the package.json in place, a version, and a name. Also, if you use namespaces, don't forget that they are private by default.
The npm publish command will successfully upload your package with minimum effort and two-factor authentication if everything is in place. You can find the node package from this tutorial here
If you find some difficulty, please follow along with this more detailed tutorial, props to Jon Wood
Usage with Angular
Before every sandbox, we must install the node package using npm i inclusive-web-components.
For using it with Angular, you need to define the CUSTOM_ELEMENTS_SCHEMA in the app.module.ts file to be able to add custom elements to the app.component.html since Angular ignores custom elements named with dashes and throws an error.
After, you will need to import the lib in the app.component.ts and pass the configuration via the [cards] property, and you should have a collection of card components now:
Usage with React
Since custom components are not treated as React components, we need to use JSON.stringify to pass data to the card attribute since the attribute is treated as a string, which will happen to custom events too.
Instead of doing this, let's use the use-custom-element package to have a cleaner approach. npm i use-custom-element.
Next, we pass the configuration using the useCustomElement method and bind the result to the custom element, and we should have the same result as in the previous sandbox:
Usage with Svelte
Well, this was the most straightforward approach since Svelte is the newest framework of the pack and has better support for custom elements.
It was just declaring the lib into the package.json and import in App.svelte passed all the configuration to the custom element et voila we have a web component running 🚀:
This is all in this series, and I hope this tutorial will help you.
Feel free to reach out in any doubt arises.
Follow me on Dev, Medium, Linkedin or Twitter to read more about my tech journey.
Top comments (0)