feat: add react refresh

[fahmifan]

[torenware]

@fahmifan Could you explain a bit about what you're doing. It used to be that the easiest way to integrate Meta's hot reloading that you needed to use a chunk of their code; that's what the current code is intended to do. I do this by downloading the code during a make process.

If your approach works, I'm inclined to use it. I'm not sure how to test that your code works correctly as well; do you have any suggestions how to do that?

I suspect your approach may fix #3; would you please take a look at that bug report and see if you've fixed it with this patch?

[fahmifan]

@torenware sorry I'm didn't create this PR with clear explanation.

So, actually I face similar issue with #3 and hack around the solution. Turns out the preamble.js is not serve by the server (I'm using echo) ? I inspected the browser and compare the header from vite-server and vite-go, and in vite-go it miss the line in PR. I then modify it and test in my local.

And, I think instead of depending on preamble.js file it self, dynamically import it from the vite server is easier. But yeah, I haven't find a way to easily test it, without start a vite dev-server

[torenware]

Turns out the preamble.js is not serve by the server

Actually, if you're using vite-go, then the assets server code in the module will server the preamble. If you use your network tools in your browser, you should be able to see it being served out. If you don't, there could be a misconfiguration of your use of vite-go, or alternatively, there's a bug in vite-go. But you should look at what's getting served to you.

[fahmifan]

Yup @torenware , I try using the vit-go master branch, but only main.tsx got serve here, the preamble.js got 404

This is my setup

viteCfg := &vueglue.ViteConfig{
	Environment:   config.Env(),
	JSProjectPath: "frontend",
	EntryPoint:    "src/main.tsx",
	Platform:      "react",
	FS:            os.DirFS("../frontend"),
	DevServerPort: "3000",
}

err = viteCfg.SetDevelopmentDefaults()
if err != nil {
	fmt.Println("viteCfg.SetDevelopmentDefaults() error:", err)
	return err
}

viteGlue, err := vueglue.NewVueGlue(viteCfg)
if err != nil {
	return err
}
viteGlue.Debug = true

viteFileSrv, err := viteGlue.FileServer()
if err != nil {
	return err
}

staticGroup := server.echo.Group("")
{
	staticGroup.GET("/assets/*", echo.WrapHandler(viteFileSrv))
	staticGroup.StaticFS("/favicons", faviconFS)
}

[fahmifan]

I think I got the answer, so my code doesn't serve the /src/preamble.js routes, when I added it, it's working

	staticGroup := server.echo.Group("")
	{
		staticGroup.GET("/src/preamble.js", echo.WrapHandler(viteFileSrv))
		staticGroup.GET("/assets/*", echo.WrapHandler(viteFileSrv))
		staticGroup.StaticFS("/favicons", faviconFS)
	}

I will close this PR then @torenware

[fahmifan]

Wait, but after further testing the HMR is not working like describe here https://github.com/torenware/vite-go/issues/3 When, I apply this patch, It worked. But I'm not sure how the HMR work, so I don't know how to test it. I'll reopen this PR then.

Another note, with this PR, serving the preamble.js is not necessary anymore

[torenware]

@fahmifan I've experimented a bit with @mengtongun's repo. The fun thing is that I just took his repo and did the following:

• git clone the repo
• cd into the directory where the makefile is.
• started his app with make by doing make dev
• edit the App.jsx file and same the change.

Here's the thing. HR works fine if I start it that way. The UI updates immediately. Moreover, the network indicates that all the assets of the app initially loaded with 200, except for websocket, which loads as 101, as expected.

If you have a repo where you're not seeing things work, start it exactly that way. If it works, then I probably need to document better how to start things up in dev mode. I'm assuming that your repo is structured similar to his and you can do this.

It may also help for you to put up a repo with your app so I can help you debug it.