feature #43 [Vite] Add support for React HMR (Kocal)

This PR was squashed before being merged into the main branch.

Discussion
----------

[Vite] Add support for React HMR

| Q              | A
| -------------- | ---
| Bug fix?       | no
| New feature?   | yes <!-- please update CHANGELOG.md file -->
| Deprecations?  | no <!-- if yes, also update UPGRADE-*.md and CHANGELOG.md files -->
| Documentation? | no <!-- required for new features, or documentation updates -->
| Issues         | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License        | MIT

Related to:
- symfony/ux#3714
- symfony/recipes#1546

HMR and page reload are correctly working for React and Vue, with Vite and Rsbuild 🎉

https://github.com/user-attachments/assets/981d8744-e2aa-448a-86d0-21a8020cb527

Do not mind about the cuty kitty!!

Commits
-------

50d5e7d [Vite] Add support for React HMR
7e6ae3e [Playground] Demo UX React and UX Vue with import.meta.glob()

Author: Kocal

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 0.4.0
+
+- Support React Fast Refresh (HMR) with Vite by rendering the `@vitejs/plugin-react` preamble in dev
+
+## 0.3.0
+
+- Fix an entry's CSS being silently dropped under Vite when the entry is emitted as a facade chunk (a top-level `await` in an entry also imported by another entry)
+- Prefer `build.rolldownOptions` over the deprecated `build.rollupOptions` (rolldown-vite / Vite 8)
+
 ## 0.2.0
 
 - Update Unplugin from ^2.3.4 to ^3.3.0

assets/package.json

@@ -89,6 +89,7 @@
     "@rspack/core": "~2.1.3",
     "@tsconfig/node22": "^22.0.5",
     "@types/node": "^26.1.0",
+    "@vitejs/plugin-react": "^6.0.3",
     "jsdom": "^29.1.1",
     "nodemon": "^3.1.14",
     "tsdown": "^0.22.3",

assets/src/index.ts

@@ -127,11 +127,21 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (options, _
                     });
                     server.config.server.origin = origin; // keep Vite's internal URL rewriting in sync
 
-                    // Vite serves `@vite/client` under `base` (publicPath), not at the origin root.
+                    // Vite serves `@vite/client` (and `@react-refresh`) under `base` (publicPath), not
+                    // at the origin root.
                     const urlPrefix = resolvePublicPath(resolved.publicPath, origin);
+                    // `@vitejs/plugin-react` (and `-react-swc`) register plugins named `vite:react-*`.
+                    // When present, Symfony must emit the Fast Refresh preamble itself (it can't touch the HTML).
+                    const usesReactPlugin = server.config.plugins.some((plugin) =>
+                        plugin.name?.startsWith('vite:react')
+                    );
                     const ctx: BuildContext = {
                         isProd: false,
-                        devServer: { origin, client: joinUrl(urlPrefix, '@vite/client') },
+                        devServer: {
+                            origin,
+                            client: joinUrl(urlPrefix, '@vite/client'),
+                            reactRefresh: usesReactPlugin ? joinUrl(urlPrefix, '@react-refresh') : null,
+                        },
                         publicPath: resolved.publicPath,
                         urlPrefix,
                         manifestKeyPrefix: resolved.manifestKeyPrefix,

assets/src/types.ts

@@ -185,6 +185,13 @@ export interface DevServer {
      * into the entry (Rsbuild) so nothing extra needs to be rendered.
      */
     client: string | null;
+    /**
+     * URL of Vite's React Fast Refresh runtime (`@react-refresh`) to inject as a preamble before
+     * the entry in dev, set when `@vitejs/plugin-react` is used. `@vitejs/plugin-react` cannot inject
+     * this itself when Symfony renders the HTML (backend integration). `null`/absent otherwise, and
+     * always under Rsbuild, which wires React refresh into the bundle itself.
+     */
+    reactRefresh?: string | null;
 }
 
 export interface AssetEntry {

assets/test/integration/vite-dev.test.ts

@@ -1,6 +1,7 @@
 import { mkdtempSync, readFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
+import react from '@vitejs/plugin-react';
 import { createServer } from 'vite';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import Symfony from '../../src/vite';
@@ -36,9 +37,29 @@ describe('vite serve writes a dev entrypoints.json', () => {
         expect(origin).toMatch(/^http:\/\/127\.0\.0\.1:\d+$/);
         // The HMR client is served under `base` (our publicPath), so its URL carries `/build/`.
         expect(entry.devServer.client).toBe(`${origin}/build/@vite/client`);
+        // No React plugin in this fixture, so no Fast Refresh preamble URL.
+        expect(entry.devServer.reactRefresh ?? null).toBe(null);
 
         expect(Object.keys(entry.entryPoints).sort()).toEqual(['admin', 'app']);
         expect(entry.entryPoints.app.js).toEqual([`${origin}/build/app.js`]);
         expect(entry.entryPoints.app.css).toEqual([]);
     });
+
+    it('exposes the React Fast Refresh URL when a React plugin is present', async () => {
+        const reactOut = mkdtempSync(join(tmpdir(), 'ups-dev-react-'));
+        const reactServer = await createServer({
+            root: fixture,
+            logLevel: 'silent',
+            server: { port: 0, host: '127.0.0.1' },
+            build: { rollupOptions: { input: { app: join(fixture, 'app.js') } } },
+            plugins: [react(), Symfony({ outputPath: reactOut, publicPath: '/build/' })],
+        });
+        await reactServer.listen();
+        try {
+            const entry = JSON.parse(readFileSync(join(reactOut, 'entrypoints.json'), 'utf8'));
+            expect(entry.devServer.reactRefresh).toBe(`${entry.devServer.origin}/build/@react-refresh`);
+        } finally {
+            await reactServer.close();
+        }
+    });
 });

playground/assets/app.js

@@ -1,9 +1,16 @@
 import './stimulus_bootstrap.js';
 import { startStimulusApp } from '@symfony/reprise/stimulus'
+import { registerReactControllerComponents } from '@symfony/ux-react'
+import { registerVueControllerComponents } from '@symfony/ux-vue'
 import './styles/app.css'
 import { add, subtract } from './calc'
 import krkr from './images/krkr.webp';
 
+// UX React and UX Vue read their components from Vite's / Rsbuild's import.meta.glob()
+// instead of Webpack's require.context(). The "eager" option is required.
+registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.{jsx,tsx}', { eager: true }))
+registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue', { eager: true }))
+
 const app = startStimulusApp()
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

playground/assets/controllers.json

@@ -5,6 +5,18 @@
                 "enabled": true,
                 "fetch": "lazy"
             }
+        },
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-vue": {
+            "vue": {
+                "enabled": true,
+                "fetch": "eager"
+            }
         }
     },
     "entrypoints": []

playground/assets/react/Counter.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const step = 1;
+
+export function Counter() {
+    const [count, setCount] = React.useState(0);
+
+    return (
+        <>
+            Counter: {count}
+            <button type="button" onClick={() => setCount(count - step)}>-</button>
+            <button type="button" onClick={() => setCount(count + step)}>+</button>
+        </>
+    )
+}

playground/assets/react/controllers/Hello.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {Counter} from '../Counter.jsx';
+
+export default function (props) {
+    return <div>
+        <div>Hello {props.fullName} (rendered by UX React)!</div>
+        <Counter />
+    </div>;
+}

playground/assets/vue/Counter.vue

@@ -0,0 +1,12 @@
+<script setup>
+import {ref} from "vue";
+
+const step = 1;
+const count = ref(0);
+</script>
+
+<template>
+    Counter: {{ count }}
+    <button type="button" @click="count -= step">-</button>
+    <button type="button" @click="count += step">+</button>
+</template>