feat: check consistency of JSX between swc and tsconfig

Author: fi3ework

packages/core/src/check.ts

@@ -0,0 +1,51 @@
+import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
+import { color } from './utils/helper';
+import { logger } from './utils/logger';
+
+type PluginReactOptions = {
+  compilerOptions?: Record<string, any>;
+};
+
+const mapTsconfigJsxToSwcJsx = (swcJsx: string): string | null => {
+  switch (swcJsx) {
+    case 'react-jsx':
+    case 'react-jsxdev':
+      return 'automatic';
+    case 'react':
+      return 'classic';
+    default:
+      return 'classic';
+  }
+};
+
+const checkJsx = ({ compilerOptions }: PluginReactOptions): RsbuildPlugin => ({
+  name: 'rsbuild:lib-check',
+  setup(api) {
+    api.onBeforeEnvironmentCompile(({ environment }) => {
+      const envName = environment.name;
+      const config = api.getNormalizedConfig({
+        environment: envName,
+      });
+
+      const swc = config.tools.swc;
+      const tsconfigJsx = compilerOptions?.jsx;
+      // @ts-ignore
+      const swcJsx = swc.jsc.transform.react.runtime;
+      const mapped = mapTsconfigJsxToSwcJsx(tsconfigJsx);
+      if (swcJsx && mapped !== null) {
+        const matched = mapped === swcJsx;
+        if (!matched) {
+          logger.warn(
+            `You're using ${color.green(`"${swcJsx}"`)} JSX runtime in SWC, but ${color.green(`"${mapped}"`)} in tsconfig.json. This may cause unexpected behavior, considering aligning them.`,
+          );
+        }
+      }
+    });
+  },
+});
+
+export const composeCheckConfig = (
+  compilerOptions: Record<string, any>,
+): RsbuildConfig => {
+  return { plugins: [checkJsx({ compilerOptions })] };
+};

packages/core/src/config.ts

@@ -14,6 +14,7 @@ import {
 } from '@rsbuild/core';
 import { glob } from 'tinyglobby';
 import { composeAssetConfig } from './asset/assetConfig';
+import { composeCheckConfig } from './check';
 import {
   DEFAULT_CONFIG_EXTENSIONS,
   DEFAULT_CONFIG_NAME,
@@ -1327,6 +1328,8 @@ async function composeLibRsbuildConfig(
     rootPath,
     config.source?.tsconfigPath,
   );
+
+  const checkConfig = composeCheckConfig({ compilerOptions });
   const cssModulesAuto = config.output?.cssModules?.auto ?? true;
 
   const {
@@ -1438,6 +1441,7 @@ async function composeLibRsbuildConfig(
     dtsConfig,
     bannerFooterConfig,
     decoratorsConfig,
+    checkConfig,
   );
 }
 

packages/core/src/utils/helper.ts

@@ -167,21 +167,23 @@ export function omit<T extends object, U extends keyof T>(
   );
 }
 
-export function isPluginIncluded(
+function findPlugin(pluginName: string, plugins?: RsbuildPlugins) {
+  return plugins?.find((plugin) => {
+    if (Array.isArray(plugin)) {
+      return isPluginIncluded(pluginName, plugin);
+    }
+    if (typeof plugin === 'object' && plugin !== null && 'name' in plugin) {
+      return plugin.name === pluginName;
+    }
+    return false;
+  });
+}
+
+function isPluginIncluded(
   pluginName: string,
   plugins?: RsbuildPlugins,
 ): boolean {
-  return Boolean(
-    plugins?.some((plugin) => {
-      if (Array.isArray(plugin)) {
-        return isPluginIncluded(pluginName, plugin);
-      }
-      if (typeof plugin === 'object' && plugin !== null && 'name' in plugin) {
-        return plugin.name === pluginName;
-      }
-      return false;
-    }),
-  );
+  return Boolean(findPlugin(pluginName, plugins));
 }
 
 export function checkMFPlugin(
@@ -209,6 +211,15 @@ export function checkMFPlugin(
   return added;
 }
 
+export function checkJsxOption(
+  config: LibConfig,
+  sharedPlugins?: RsbuildPlugins,
+): boolean {
+  // console.log('🤬', config);
+  return true;
+  // return reactPlugin;
+}
+
 export function debounce<T extends (...args: any[]) => void>(
   func: T,
   wait: number,

pnpm-lock.yaml

@@ -0,0 +1,22 @@
+import { join } from 'node:path';
+import stripAnsi from 'strip-ansi';
+import { buildAndGetResults, proxyConsole } from 'test-helper';
+import { expect, test } from 'vitest';
+
+test('should receive JSX mismatch warning of SWC with tsconfig', async () => {
+  const { logs, restore } = proxyConsole();
+  const fixturePath = join(__dirname, 'jsx');
+  await buildAndGetResults({ fixturePath });
+  const logStrings = logs
+    .map((log) => stripAnsi(log))
+    .filter((log) => log.startsWith('warn'))
+    .sort()
+    .join('\n');
+
+  expect(logStrings).toMatchInlineSnapshot(`
+    "warn    You're using "automatic" JSX runtime in SWC, but "classic" in tsconfig.json. This may cause unexpected behavior, considering aligning them.
+    warn    You're using "automatic" JSX runtime in SWC, but "classic" in tsconfig.json. This may cause unexpected behavior, considering aligning them."
+  `);
+
+  restore();
+});

tests/integration/check/index.test.ts

@@ -0,0 +1,11 @@
+{
+  "name": "check-jsx-test",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.1.0",
+    "@types/react": "^19.0.6",
+    "react": "^19.0.0"
+  }
+}

tests/integration/check/jsx/package.json

@@ -0,0 +1,8 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(), generateBundleCjsConfig()],
+  plugins: [pluginReact()],
+});

tests/integration/check/jsx/rslib.config.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Foo = <div>foo</div>;

tests/integration/check/jsx/src/index.tsx

@@ -0,0 +1,8 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "jsx": "react"
+  },
+  "include": ["src"]
+}