fix: upgrade check syntax plugin to support rspack or webpack project

e2e/cases/doctor-rspack/brief.test.ts

@@ -25,7 +25,7 @@ async function rspackCompile(
       extensions: ['.ts', '.js'],
     },
     output: {
-      path: path.join(__dirname, '../doctor-rspack/dist'),
+      path: path.join(__dirname, '../doctor-rspack/dist/brief'),
     },
     module: {
       rules: [
@@ -106,7 +106,7 @@ test('rspack brief mode', async () => {
 
   const reportPath = path.join(
     __dirname,
-    './dist/.rsdoctor/rsdoctor-report.html',
+    './dist/brief/.rsdoctor/rsdoctor-report.html',
   );
 
   fileExists(reportPath);

e2e/cases/doctor-rspack/fixtures/c.js

@@ -0,0 +1 @@
+const c = 1;

e2e/cases/doctor-rspack/linter-rule-render.test.ts

@@ -0,0 +1,154 @@
+import { expect, test, webkit } from '@playwright/test';
+import { getSDK, setSDK } from '@rsdoctor/core/plugins';
+import { compileByRspack } from '@scripts/test-helper';
+import { Compiler } from '@rspack/core';
+import path from 'path';
+import fs from 'fs';
+import { createRsdoctorPlugin } from './test-utils';
+import { devtools } from 'vue';
+
+let reportLoaderStartOrEndTimes = 0;
+const ecmaVersion = 3;
+
+async function rspackCompile(
+  _tapName: string,
+  compile: typeof compileByRspack,
+) {
+  const file = path.resolve(__dirname, './fixtures/c.js');
+
+  const res = await compile(file, {
+    resolve: {
+      extensions: ['.ts', '.js'],
+    },
+    output: {
+      path: path.join(__dirname, '../doctor-rspack/dist/linter-rule-render'),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.[jt]s$/,
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              sourceMap: true,
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                },
+                externalHelpers: true,
+                preserveAllComments: false,
+              },
+            },
+          },
+          type: 'javascript/auto',
+        },
+      ],
+    },
+    plugins: [
+      // @ts-ignore
+      createRsdoctorPlugin({
+        mode: 'brief',
+        linter: {
+          rules: {
+            'ecma-version-check': [
+              'Warn',
+              {
+                ecmaVersion,
+              },
+            ],
+          },
+        },
+      }),
+      {
+        name: 'Foo',
+        apply(compiler: Compiler) {
+          compiler.hooks.beforeRun.tapPromise(
+            { name: 'Foo', stage: 99999 },
+            async () => {
+              const sdk = getSDK();
+              setSDK(
+                new Proxy(sdk, {
+                  get(target, key, receiver) {
+                    switch (key) {
+                      case 'reportLoader':
+                        return null;
+                      case 'reportLoaderStartOrEnd':
+                        return (_data: any) => {
+                          reportLoaderStartOrEndTimes += 1;
+                        };
+                      default:
+                        return Reflect.get(target, key, receiver);
+                    }
+                  },
+                  set(target, key, value, receiver) {
+                    return Reflect.set(target, key, value, receiver);
+                  },
+                  defineProperty(target, p, attrs) {
+                    return Reflect.defineProperty(target, p, attrs);
+                  },
+                }),
+              );
+            },
+          );
+        },
+      },
+    ],
+  });
+
+  return res;
+}
+
+test('linter rule render check', async () => {
+  const tapName = 'Foo';
+  await rspackCompile(tapName, compileByRspack);
+
+  const reportPath = path.join(
+    __dirname,
+    './dist/linter-rule-render/.rsdoctor/rsdoctor-report.html',
+  );
+
+  fileExists(reportPath);
+
+  const browser = await webkit.launch();
+
+  // Create a new browser context
+  const context = await browser.newContext();
+
+  // Open a new page
+  const page = await context.newPage();
+
+  // Navigate to a URL
+  await page.goto(`file:///${reportPath}`);
+
+  const ecmaVersionButton = await page.$('[data-node-key="E1004"]');
+  await ecmaVersionButton?.click();
+  // ignore output text check because there's no .map file for track the source code
+  const source = await page.$('.e2e-ecma-source');
+  const error = await page.$('.e2e-ecma-error');
+  const sourceText = await source?.textContent();
+  const errorText = await error?.textContent();
+  expect(sourceText).toBe(
+    '/cases/doctor-rspack/dist/linter-rule-render/main.js:1:2',
+  );
+  expect(errorText).toBe(
+    `Find some syntax that does not match "ecmaVersion <= ${ecmaVersion}"`,
+  );
+
+  // Close the page
+  await page.close();
+
+  // Close the browser context
+  await context.close();
+
+  // Close the browser
+  await browser.close();
+});
+
+async function fileExists(filePath: string) {
+  try {
+    await fs.existsSync(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}

examples/rspack-minimal/rspack.config.js

@@ -91,6 +91,16 @@ const config = {
       disableClientServer: process.env.ENABLE_CLIENT_SERVER === 'false',
       features: ['bundle', 'plugins', 'loader'],
       mode: 'brief',
+      linter: {
+        rules: {
+          'ecma-version-check': [
+            'Warn',
+            {
+              ecmaVersion: 3,
+            },
+          ],
+        },
+      },
     }),
     new rspack.HtmlRspackPlugin({
       template: './index.html',

packages/components/package.json

@@ -51,7 +51,7 @@
   ],
   "devDependencies": {
     "@ant-design/icons": "5.5.2",
-    "@rsbuild/plugin-check-syntax": "1.2.0",
+    "@rsbuild/plugin-check-syntax": "1.2.1",
     "@monaco-editor/react": "4.6.0",
     "@rsdoctor/graph": "workspace:*",
     "@rsdoctor/types": "workspace:*",

packages/components/src/components/Alert/ecma-version-check.tsx

@@ -35,7 +35,7 @@ export const ECMAVersionCheck: React.FC<LinkAlertProps> = ({ data }) => {
             <Icon component={SourceSvg} />
             <Text
               ellipsis={{ tooltip: sourceMessage }}
-              className={styles.content}
+              className={`${styles.content} e2e-ecma-source`}
             >
               {sourceMessage}
             </Text>
@@ -47,7 +47,7 @@ export const ECMAVersionCheck: React.FC<LinkAlertProps> = ({ data }) => {
             <Icon component={OutputSvg} />
             <Text
               ellipsis={{ tooltip: outputMessage }}
-              className={styles.content}
+              className={`${styles.content} e2e-ecma-output`}
             >
               {outputMessage}
             </Text>
@@ -59,7 +59,7 @@ export const ECMAVersionCheck: React.FC<LinkAlertProps> = ({ data }) => {
             <Icon component={ErrorSvg} />
             <Text
               ellipsis={{ tooltip: d.description }}
-              className={styles.content}
+              className={`${styles.content} e2e-ecma-error`}
             >
               {d.description}
             </Text>

packages/core/package.json

@@ -81,7 +81,7 @@
     "semver": "^7.6.3",
     "source-map": "^0.7.4",
     "webpack-bundle-analyzer": "^4.10.2",
-    "@rsbuild/plugin-check-syntax": "1.2.0",
+    "@rsbuild/plugin-check-syntax": "1.2.1",
     "browserslist-load-config": "^1.0.0"
   },
   "devDependencies": {