feat(plugin-preact): integrate @swc/plugin-prefresh to enhance prefresh (#3861)

Author: chenjiahan

e2e/cases/preact/prefresh-context/index.test.ts

@@ -0,0 +1,61 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { dev, rspackOnlyTest } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+rspackOnlyTest(
+  'HMR should work properly with `createContext`',
+  async ({ page }) => {
+    // HMR cases will fail in Windows
+    if (process.platform === 'win32') {
+      test.skip();
+    }
+
+    const root = __dirname;
+    const compFilePath = path.join(root, 'src/test-temp-B.jsx');
+    const compSourceCode = `const B = (props) => {
+  return <div id="B">B: {props.count}</div>;
+};
+
+export default B;
+`;
+
+    fs.writeFileSync(compFilePath, compSourceCode, 'utf-8');
+
+    const rsbuild = await dev({
+      cwd: root,
+      page,
+    });
+
+    const a = page.locator('#A');
+    const b = page.locator('#B');
+
+    await expect(a).toHaveText('A: 0');
+    await expect(b).toHaveText('B: 0');
+
+    await a.click({ clickCount: 5 });
+    await expect(a).toHaveText('A: 5');
+    await expect(b).toHaveText('B: 5');
+
+    // simulate a change to component B's source code
+    fs.writeFileSync(
+      compFilePath,
+      compSourceCode.replace('B:', 'Beep:'),
+      'utf-8',
+    );
+
+    await page.waitForFunction(() => {
+      const aText = document.querySelector('#A')!.textContent;
+      const bText = document.querySelector('#B')!.textContent;
+
+      return (
+        // the state (count) of A should be kept
+        aText === 'A: 5' &&
+        // content of B changed to `Beep: 5` means HMR has taken effect
+        bText === 'Beep: 5'
+      );
+    });
+
+    await rsbuild.close();
+  },
+);

e2e/cases/preact/prefresh-context/rsbuild.config.ts

@@ -0,0 +1,13 @@
+import { pluginPreact } from '@rsbuild/plugin-preact';
+
+export default {
+  plugins: [
+    pluginPreact({
+      exclude: [
+        /node_modules/,
+        // exclude Rsbuild internal HMR client
+        /packages\/core\/dist/,
+      ],
+    }),
+  ],
+};

e2e/cases/preact/prefresh-context/src/A.jsx

@@ -0,0 +1,34 @@
+import { createContext } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+import B from './test-temp-B';
+
+const MyContext = createContext();
+
+export const MyProvider = ({ children }) => {
+  const [value, setValue] = useState(0);
+  return (
+    <MyContext.Provider value={{ value, setValue }}>
+      {children}
+    </MyContext.Provider>
+  );
+};
+
+const App = () => {
+  const { value, setValue } = useContext(MyContext);
+  return (
+    <>
+      <button id="A" type="button" onClick={() => setValue(value + 1)}>
+        A: {value}
+      </button>
+      <B count={value} />
+    </>
+  );
+};
+
+export default () => {
+  return (
+    <MyProvider>
+      <App />
+    </MyProvider>
+  );
+};

e2e/cases/preact/prefresh-context/src/index.js

@@ -0,0 +1,4 @@
+import { h, render } from 'preact';
+import A from './A';
+
+render(h(A), document.getElementById('root'));

packages/plugin-preact/package.json

@@ -28,7 +28,8 @@
   "dependencies": {
     "@prefresh/core": "^1.5.2",
     "@prefresh/utils": "^1.2.0",
-    "@rspack/plugin-preact-refresh": "^1.1.0"
+    "@rspack/plugin-preact-refresh": "^1.1.0",
+    "@swc/plugin-prefresh": "^3.0.3"
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",

packages/plugin-preact/src/index.ts

@@ -68,6 +68,11 @@ export const pluginPreact = (
         tools: {
           swc: {
             jsc: {
+              experimental: {
+                plugins: usePrefresh
+                  ? [[require.resolve('@swc/plugin-prefresh'), {}]]
+                  : undefined,
+              },
               parser: {
                 syntax: 'typescript',
                 // enable supports for JSX/TSX compilation