[Improvment] Add documentation or template for vite

[BennyAlex]

Hello,

I have problems to get this working with vite. It would be cool to have more documentation for this or have a seperate vite template to start with.

The standard preact template split each files in seperate modules and expects an <div id="app"/> to inject the preact app there. But we want to build a web component wich can be included by a js module and its custom tag.

But we still want to be able to use the vite dev server (best with hot reloading).

Maybe someone can give a example project config for now, please.

Thanks for any help :)

[rschristian]

Can you expound upon what you're after?

The standard preact template split each files in seperate modules and expects an <div id="app"/> to inject the preact app there. But we want to build a web component wich can be included by a js module and its custom tag.

You can just remove the rendering of the Preact app, it's not necessary to keep around.

Here's a dead-simple demo: https://stackblitz.com/edit/vitejs-vite-uxbbae?file=src%2Fmain.jsx

[BennyAlex]

perfect, I also found out you can use the index html as demo site for the custom element by removing the div id=app and use the custom element tag. Inside the build config for vite you can give the output js a static name, and this file can than be used as the custom element script by other sites. Maybe we can add a small explanation on the readme.

[rschristian]

I don't really think this is the place to document building libraries with Vite. If that's what you're after, Vite's docs are the best place to read about it.

[BennyAlex]

yeah but they dont have a section specially for custom elements, and it's different than a normal libary.

[rschristian]

It shouldn't be, no. It's the same as bundling any other side-effectual library (as opposed to providing package exports).