CODEWITHSUNDEEP
typescriptwebpacklit-elementlit-html
Maurice
Maurice

Reputation: 109

How to share 1 instance of lit-element across many web components

I have many web components (each in its own repo) and would like to share one instance of lit-element/lit-html across them all. The idea is to reduce bundle size. I do not want a separate instance in each bundle

I made a Webpack UMD library of lit-element(transpiled to ES5 for IE11) and then in the main application HEAD i have a script tag pointing to my lit-element library. It is marked as an external in Webpack.

This worked great until i started to use typescript and ran into typing issues.

Is there an official typing's file that can be installed on its own? I couldn't find one?

Upvotes: 0

Views: 1446

Answers (1)

ChaseMoskal
ChaseMoskal

Reputation: 7661

this is a peer dependency situation you're describing

you have multiple libraries which depend on lit-element

each of your applications will have their own bundler, which will be able to resolve the dependency graph into a bundle without any dependency duplication, and will also perform any needed transpilation (like for ie11) and optimizations like minification

this means there is no need for your web component libraries to provide any bundles — doing so would actually be a disservice, making code duplication likely, as you described

applications want to consume pure, clean, modern es modules — and each application has its own setup and preferences for how bundling and transpilation should happen

Upvotes: 3

Related Questions