DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Cross-framework web components library πŸ“š using Lit (Part III)
Fausto Braz
Fausto Braz

Posted on

Cross-framework web components library πŸ“š using Lit (Part III)

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

That file will export the components via barrels exports like so:

export * from './components/card';
export * from './components/cards';
Enter fullscreen mode Exit fullscreen mode

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)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›