0

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?

Jordan Running
  • 102,619
  • 17
  • 182
  • 182
Maurice
  • 109
  • 1
  • 7
  • You don't really need to compile your lit-element based components, projects using your components can just import your es modules files and the bundler (webpack/rollup/whatever) should take care of bundling everything in a way that there are no repeated dependencies – Alan Dávalos Sep 11 '19 at 05:45
  • Thanks Alan, but each web component is in a different git repo, potentially developed by a different team, each with there own platform system.(webpack browserify etc). Because of this i can't rely on treshaling etc to reduce bundle size. – Maurice Sep 11 '19 at 07:26
  • @AlanDávalos has the right idea here — library code should be simple modern es modules, and it's an anti-pattern to provide bundles/minification/optimizations in your libraries — it is correct for the consuming applications to be left with the responsibility to bundle/transpile/minify code the way their application wants it — it's a disservice for libraries to foist their own transpiled bundles onto consuming applications — bundles will contain external dependencies which will end up being redundantly loaded when two library bundles use the same dependency – ChaseMoskal Sep 14 '19 at 23:53

1 Answers1

3

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

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50