Adds a config flag to add React Refresh code #15
Conversation
This makes it possible to use the plugin via a GitHub URL
|
I thought I submitted this review but never pressed confirm - apologies! |
|
Finally got a chance to get back to this - Node.js releasing v22 as LTS cooked my existing NodeCG install. |
|
I don't use react, so not in the best place to review this PR. @Hoishin do you have capacity to help? |
|
I will take a look at this next year! |
| // Capture resolved config for use in injectAssets | ||
| config = resolvedConfig | ||
| // Check to see if one of the plugins is vite:react-refresh | ||
| if (resolvedConfig.plugins.find((plugin) => plugin.name === 'vite:react-refresh')) { |
There was a problem hiding this comment.
.find() returns the found object but this is only used as a boolean. should use .some() instead.
| // Check to see if one of the plugins is vite:react-refresh | ||
| if (resolvedConfig.plugins.find((plugin) => plugin.name === 'vite:react-refresh')) { | ||
| // If it is, import it and get the preamble code from it if possible | ||
| reactPreamble = (await import('@vitejs/plugin-react'))?.default?.preambleCode |
There was a problem hiding this comment.
this part should handle when @vitejs/plugin-react is not installed, in which case it would throw an error
| tags.push( | ||
| `<script type="module">${reactPreamble.replace(/__BASE__/g, `${dSrvProtocol}://${path.posix.join( | ||
| dSrvHost, | ||
| 'bundles', | ||
| bundleName | ||
| )}/`)}</script>` | ||
| ) |
There was a problem hiding this comment.
According to my knowledge and information available online, in order to enable React Refresh, you have to add these lines in HTML:
<script type="module">
import RefreshRuntime from 'http://localhost:5173/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>reference: https://vite.dev/guide/backend-integration
The script lines here is very different. Is there any official documentation about this?
There was a problem hiding this comment.
Looks like the default preamble that plugin-react exports is exactly that: https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/src/fast-refresh.ts#L23-L29
I think that means this is setup correctly?
#11 is caused by a chunk of code that the vitejs/react-plugin plugin adds missing. I'm not sure what the best way to add this is. This PR almost certainly isn't it, but I was able to confirm that it does work with the React code I'm using. (It would probably be possible to pull the "correct" code out of the installed plugin itself, and then only add it if the plugin can be resolved. Or maybe that would be worse.) This is a "simple" fix, though.