Cross-framework web components library 📚 using Lit (Part III)
Tags: typescript, webcomponents, webdev, programming
Published: 2022-09-05 14:55:38

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

![Creating index.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0stzq044hcqptxsrn6s.png)

That file will export the components via barrels exports like so:
   
```javascript
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:

{% embed https://gist.github.com/fstbraz/51a702d9e3c33e95181dd50e38b652c0 %}

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:

{% embed https://gist.github.com/fstbraz/fc9e6d733415e9444e1458aadaac3b70 %}

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.<br/><br/>

##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](https://www.npmjs.com/signup)

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](https://www.npmjs.com/package/inclusive-web-components)

If you find some difficulty, please follow along with [this more detailed tutorial](https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/), props to [Jon Wood](https://twitter.com/Bamblehorse)<br/><br/>


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

{% codesandbox 5ueu7g %}
<br/><br/>

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

{% codesandbox xdtj1s %}
<br/><br/>

##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 🚀:

{% codesandbox w7tt1w %}

<br/> <br/>

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](https://dev.to/fstbraz), [Medium](https://medium.com/@fstbraz), [Linkedin](https://www.linkedin.com/in/fstbraz/) or [Twitter](https://twitter.com/fstbraz) to read more about my tech journey.