Publish standalone and ready-to-use web component

[softdays]

Hi,

The v2 documentation describes how to build a production-ready Lit application but I don't find any guideline to build production-ready component. I know that's not an issue for modern apps which can include ES2029 components in their bundles but it's not the point here. I'm looking for a rollup config which could produce ready-to-use web component, which can be use directly in the browser, i.e. shipped without bare imports on Lit dependencies.

Thanks for your help!

[kevinpschaaf]

Our guidance on publishing components is geared towards publishing modern component source on npm, as this is the best way to leave flexibility to the user of your component regarding what browsers to support, avoid duplication of dependencies, etc., since any choice about downleveling/polyfilling/bundling is left to the user when they build their app.

To publish a standalone component for use directly in the browser, you run headlong into all of these questions-- and it's hard to give one-size-fits-all guidance: What browsers should it support? What polyfills should it assume? What if the user needs more than one component that uses Lit, is it ok to duplicate Lit for each component?

We don't recommend publishing components built for standalone-use to like this to npm, since npm users are pretty much by definition installing dependencies and using build tools to answer all of these questions themselves -- and preemptively making choices about bundling/downleveling for them will likely be sub-optimal for a lot of users. That said, if you did want to make a standalone component bundle for e.g. hosting on a CDN, the tools and configurations described in the Production section of the guide would apply (you would just not use the html plugin and instead point input to a JS file). But the specific output settings you need are very dependant on the browsers/environments you want to support.

Note also that modern CDN's like unpkg.com and skypack.dev can serve ES modules directly from npm with bare imports resolved to CDN url's so that they are loadable in the browser; these won't be bundled and can thus result in a lot of network waterfalls, so it depends on your definition of "production-ready".

[softdays]

Thank you very much for taking the time to answer. I hear your arguments. Your points are very relevant.