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
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.
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
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:
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:
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.