add coverage for react-compiler as a rspack.config.js

tools/modern-tests/apps/react-router/babel.config.js

@@ -0,0 +1,17 @@
+const ReactCompilerConfig = {
+  target: '18',
+};
+
+module.exports = function (api) {
+  // required when exporting a function
+  api.cache(true); // cache forever; or api.cache.using(() => process.env.NODE_ENV)
+
+  console.log('babel.config.js: babel-plugin-react-compiler');
+
+  return {
+    plugins: [
+      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
+      '@babel/plugin-syntax-jsx',
+    ],
+  };
+};

tools/modern-tests/apps/react-router/client/main.jsx

@@ -3,8 +3,12 @@ import { createRoot } from 'react-dom/client';
 import { Meteor } from 'meteor/meteor';
 import { App } from '/imports/ui/App';
 
+let root;
+
 Meteor.startup(() => {
-  const container = document.getElementById('react-target');
-  const root = createRoot(container);
+  const container = document.getElementById('react-target'); // your container id
+  if (!root) {
+    root = createRoot(container); // create once
+  }
   root.render(<App />);
 });

tools/modern-tests/apps/react-router/package.json

@@ -11,12 +11,18 @@
     "@babel/runtime": "^7.23.5",
     "@swc/helpers": "^0.5.17",
     "meteor-node-stubs": "^1.2.12",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-compiler-runtime": "^19.1.0-rc.2",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.0"
   },
   "devDependencies": {
-    "playwright": "^1.54.2"
+    "playwright": "^1.54.2",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "babel-loader": "^9.1.3"
   },
   "meteor": {
     "mainModule": {

tools/modern-tests/apps/react-router/rspack.config.js

@@ -0,0 +1,31 @@
+import { defineConfig } from '@meteorjs/rspack';
+
+/**
+ * Rspack configuration for Meteor projects.
+ *
+ * Provides typed flags on the `Meteor` object, such as:
+ * - `Meteor.isClient` / `Meteor.isServer`
+ * - `Meteor.isDevelopment` / `Meteor.isProduction`
+ * - …and other flags available
+ *
+ * Use these flags to adjust your build settings based on environment.
+ */
+export default defineConfig(Meteor => {
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.jsx$/,
+          use: [
+            {
+              loader: 'builtin:swc-loader',
+              options: { jsc: { parser: { syntax: 'ecmascript', jsx: true } } },
+            },
+            { loader: 'babel-loader' },
+          ],
+          type: 'javascript/auto',
+        },
+      ],
+    },
+  };
+});

tools/modern-tests/react-router.test.js

@@ -23,6 +23,7 @@ describe('ReactRouter App Bundling /', () => {
     customAssertions: {
       afterRun: async ({ result, port }) => {
         await waitForReactEnvs(result.outputLines, { isJsxEnabled: true });
+        await waitForMeteorOutput(result.outputLines, /.*babel-plugin-react-compiler.*/);
         await assert404Page(port);
       },
       afterRunRebuildClient: async ({ allConsoleLogs }) => {
@@ -31,6 +32,7 @@ describe('ReactRouter App Bundling /', () => {
       },
       afterRunProduction: async ({ result, port }) => {
         await waitForReactEnvs(result.outputLines, { isJsxEnabled: true });
+        await waitForMeteorOutput(result.outputLines, /.*babel-plugin-react-compiler.*/);
         await assert404Page(port, { isProductionMode: true });
       },
       afterRunProductionRebuildClient: async ({ allConsoleLogs }) => {
@@ -45,6 +47,7 @@ describe('ReactRouter App Bundling /', () => {
       },
       afterBuild: async ({ result }) => {
         await waitForReactEnvs(result.outputLines, { isJsxEnabled: true });
+        await waitForMeteorOutput(result.outputLines, /.*babel-plugin-react-compiler.*/);
       },
     }
   }));