stylex icon indicating copy to clipboard operation
stylex copied to clipboard

[example] add dev and preview for esbuild example

Open RavenColEvol opened this issue 3 months ago • 3 comments

What changed / motivation ?

I was just going over the repo to see if I can make any contribution. Found that esbuild example doesn't have any way for me to preview the build or do dev changes.

Linked PR/Issues

Fixes # (issue)

Additional Context

Screenshots, Tests, Anything Else https://github.com/user-attachments/assets/ce55b1ac-cba1-4844-b7a7-c9e5e620eb8b

  • Tested both dev and preview mode

Pre-flight checklist

RavenColEvol avatar Sep 14 '25 06:09 RavenColEvol

This change will take a little longer for me to review because I'm not super familiar with how esbuild works, but things look pretty good so far. Thank you!

nmn avatar Sep 15 '25 00:09 nmn

Sure @nmn I'm also not super familiar with esbuild. What I did was kept these requirements in mind and simply started exploring how it can be achieved in esbuild through there documentation.

Requirements:

  1. User should be able to use dev mode: I wanted to achieve HMR ( hot module replacement ) but got to learn that esbuild don't support HMR so I used there watch mode + live reload https://esbuild.github.io/api/#live-reload
  2. User should be able to serve the build to test production bundle: They have serve mode https://esbuild.github.io/api/#serve.

RavenColEvol avatar Sep 15 '25 05:09 RavenColEvol

Sorry to butt in here, but curious as I have recently been working in an app that uses ESBuild and StyleX. I thought the StyleX ESBuild plugin was deprecated?

Nice work adding in a watch btw.

BMCwebdev avatar Sep 17 '25 03:09 BMCwebdev