Export React or Preact component as Web Component with Vite

[vagrant gyro]

Hey guys!
I’ve been using Vite for a few months and I’m loving it.

I’m now exploring the idea of exporting a Web Component from a React/Preact Component so I can use it in a WordPress website.

Thing is: I have read some articles with some approaches but none of them are using Vite. And honestly, I really like working with Vite (not very proficient with build tools, though).

So I ask: how would you get a React/Preact component, turn it into a web component, compile, export and then access it in plain HTML?

Any insights are helpful 🙏

[vagrant gyro]

Export ReactPreact component as Web Component with Vite

Export React or Preact component as Web Component with Vite

[grave knoll]

Hey, not an expert at all at this. Just found your post because I was curious about vite + wordpress for theme development in general 😉

I think there are two stages in general:

a) Compiling a web component for production, e.g. with Lit: https://lit.dev/docs/tools/production/
They recommend rollup, but I found Lit + Vite here: https://github.com/e111077/vite-lit-element-ts-sass

Don't know about ReactPreact though.

b) Once you have compiled your web component, it should be easy to put it into WordPress? Because it is just HTML + JS + CSS?

https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/

Also saw this talk, guess it comes down on how you want to use the web component in WP. For example as Gutenberg block?
https://wordpress.tv/2021/05/28/craig-west-web-components-in-wordpress-and-gutenberg-and-as-html-plugins/

Much success with that, cheers!