fix: #1478 support react class-component hot-update

crates/mako/src/visitors/react.rs

@@ -160,8 +160,17 @@ fn react_refresh_module_postfix(context: &Arc<Context>) -> Box<dyn VisitMut> {
         code: r#"
 if (prevRefreshReg) self.$RefreshReg$ = prevRefreshReg;
 if (prevRefreshSig) self.$RefreshSig$ = prevRefreshSig;
+function registerExportsForReactRefresh(filename, moduleExports) {
+  for (const key in moduleExports) {
+    if (key === "__esModule") continue;
+    const exportValue = moduleExports[key];
+    if (RefreshRuntime.isLikelyComponentType(exportValue)) {
+      RefreshRuntime.register(exportValue, filename + " " + key);
+    }
+  }
+}
 function $RefreshIsReactComponentLike$(moduleExports) {
-  if (RefreshRuntime.isLikelyComponentType(moduleExports.default || moduleExports)) {
+  if (RefreshRuntime.isLikelyComponentType(moduleExports || moduleExports.default)) {
     return true;
   }
   for (var key in moduleExports) {
@@ -175,6 +184,7 @@ function $RefreshIsReactComponentLike$(moduleExports) {
   }
   return false;
 }
+registerExportsForReactRefresh(module.id, module.exports);
 if ($RefreshIsReactComponentLike$(module.exports)) {
     module.meta.hot.accept();
     RefreshRuntime.performReactRefresh();

e2e/fixtures/tree-shaking.failed.remove-unused-imports/expect.js

@@ -6,5 +6,5 @@ import 'b'
 import 'c'
 import 'd'
 
- * but actucally: a, b, c imports are removed
+ * but actually: a, b, c imports are removed
  */

examples/react/src/App.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
+import ClassCmp, { ChildFnCmp, ClassCmp2 } from './ClassCmp';
 import { foo } from './foo';
 export function App() {
-  return <h1>App {foo}</h1>;
+  return (
+    <h1>
+      App {foo} <ClassCmp />
+      <ChildFnCmp />
+      <ClassCmp2 />
+    </h1>
+  );
 }

examples/react/src/ClassCmp.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class ClassCmp extends React.Component {
+  render() {
+    return <div>Hot update default class component.</div>;
+  }
+}
+
+export class ClassCmp2 extends React.Component {
+  render() {
+    return <div>Hot update export class component.</div>;
+  }
+}
+
+export function ChildFnCmp() {
+  return <b>Hot update export function component.</b>;
+}