Vite-based template?

[tony]

In re: https://github.com/lit/lit-element-starter-ts

Has anyone tried publishing lit components via vite-based starter?

Any examples?

Any potential pitfalls?

[e111077]

Vite seems to have two types of publishing modes, reusable library and application. The default Vite setup seems to be in reusable library mode. You can see the comments in my vite config in this one:

https://github.com/e111077/vite-lit-element-ts-sass

I also wrote the lit cli's element starter you can invoke with npx @lit-labs/cli init element --help:

https://github.com/lit/lit/tree/main/packages/labs/cli/src/lib/init/element-starter/templates

It makes a minimal shareable element without all the docs stuff in the repo you posted above.

The reason we created the lit init command is that Vite does a bit too much for our taste as an "official" recommendation (do not get me wrong, Vite is great and I love it but it's a bit too opinionated in its build). For example, one of the pitfalls is that Vite allows non-standard CSS and Sass import syntax out of the box which may conflict with users also using Sass or CSS but not Vite.

Regardless, Vite is generally a good solution for publishing your components. Just make sure to serve your build output to the user on NPM. Justin on the team has an old article that has excellent checks before you publish which still hold up to this day.

[tony]

Thank you! For everything above:

• The example of lit element and vite at https://github.com/e111077/vite-lit-element-ts-sass
• The minimal example at https://github.com/lit/lit/tree/main/packages/labs/cli/src/lib/init/element-starter/templates available through npx @lit-labs/cli init element
• And the details on potential pitfalls with vite + article about checks before publishing

I will chew on this - assuming vite stays around and there's a clean development loop (including tests that verify the component will work when published) - it is a serious contender to simplify development of an initial component of mine (https://github.com/social-embed/social-embed).