From 231505fe4c0937994493751672fa12c8234a2b50 Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 17:04:19 +0800 Subject: [PATCH 1/7] chore: bump check syntax plugin version to support rspack or webpack project --- examples/rspack-minimal/rspack.config.js | 10 ++++++++++ packages/core/package.json | 2 +- pnpm-lock.yaml | 21 +++++++++++++++++++-- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/examples/rspack-minimal/rspack.config.js b/examples/rspack-minimal/rspack.config.js index 7fbfb8a7..6aec073e 100644 --- a/examples/rspack-minimal/rspack.config.js +++ b/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', diff --git a/packages/core/package.json b/packages/core/package.json index 69c9a252..240c1548 100644 --- a/packages/core/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26b61e78..990b90b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -682,8 +682,8 @@ importers: packages/core: dependencies: '@rsbuild/plugin-check-syntax': - specifier: 1.2.0 - version: 1.2.0(@rsbuild/core@1.1.13) + specifier: 1.2.1 + version: 1.2.1 '@rsdoctor/graph': specifier: workspace:* version: link:../graph @@ -5485,6 +5485,7 @@ packages: '@rspack/lite-tapable': 1.0.1 '@swc/helpers': 0.5.15 core-js: 3.39.0 + dev: true /@rsbuild/core@1.1.14: resolution: {integrity: sha512-CHq8LpCMqLLMSq+UeTsmp0keiywovDl2SH521PLG2URWQqcwRn//6VXLYymnyOYELBbc8sVRn++DxqoBrDZ2Zg==} @@ -5536,6 +5537,22 @@ packages: htmlparser2: 9.1.0 picocolors: 1.1.1 source-map: 0.7.4 + dev: true + + /@rsbuild/plugin-check-syntax@1.2.1: + resolution: {integrity: sha512-Ona/YTJPAsY+QGVB0D5lAEgxk/a0TTW6+He2dV7Rew56yW51EjRfEdFbsHdpMEuVA5IK4jjtbgkEHKKaKi+Ojg==} + peerDependencies: + '@rsbuild/core': 1.x + peerDependenciesMeta: + '@rsbuild/core': + optional: true + dependencies: + acorn: 8.14.0 + browserslist-to-es-version: 1.0.0 + htmlparser2: 9.1.0 + picocolors: 1.1.1 + source-map: 0.7.4 + dev: false /@rsbuild/plugin-css-minimizer@1.0.2(@rsbuild/core@1.1.13)(esbuild@0.17.19)(webpack@5.97.1): resolution: {integrity: sha512-x695i5PHWI9uV9VA1Dun66G0DeJMgxbt3wEk4eHZMz9pi6n8Dah6BHG2WcloYAEi7yVoUcPIGXDdag27s2B+4A==} From 5c6e2c2685c7351f1eef717752c8e08ee3437895 Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 17:12:37 +0800 Subject: [PATCH 2/7] chore: unified dep version --- packages/components/package.json | 2 +- pnpm-lock.yaml | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index fd213966..2209720c 100644 --- a/packages/components/package.json +++ b/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:*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 990b90b8..a1e282b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -583,8 +583,8 @@ importers: specifier: 4.6.0 version: 4.6.0(monaco-editor@0.49.0)(react-dom@18.3.1)(react@18.3.1) '@rsbuild/plugin-check-syntax': - specifier: 1.2.0 - version: 1.2.0(@rsbuild/core@1.1.13) + specifier: 1.2.1 + version: 1.2.1 '@rsdoctor/graph': specifier: workspace:* version: link:../graph @@ -5552,7 +5552,6 @@ packages: htmlparser2: 9.1.0 picocolors: 1.1.1 source-map: 0.7.4 - dev: false /@rsbuild/plugin-css-minimizer@1.0.2(@rsbuild/core@1.1.13)(esbuild@0.17.19)(webpack@5.97.1): resolution: {integrity: sha512-x695i5PHWI9uV9VA1Dun66G0DeJMgxbt3wEk4eHZMz9pi6n8Dah6BHG2WcloYAEi7yVoUcPIGXDdag27s2B+4A==} From 85fa6844551c2d2dc93651f907fe3355fe722014 Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 18:14:29 +0800 Subject: [PATCH 3/7] test: add e2e test for linter rule check --- e2e/cases/doctor-rspack/brief.test.ts | 4 +- e2e/cases/doctor-rspack/fixtures/c.js | 1 + .../doctor-rspack/linter-rule-render.test.ts | 152 ++++++++++++++++++ 3 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 e2e/cases/doctor-rspack/fixtures/c.js create mode 100644 e2e/cases/doctor-rspack/linter-rule-render.test.ts diff --git a/e2e/cases/doctor-rspack/brief.test.ts b/e2e/cases/doctor-rspack/brief.test.ts index 65db019b..40b16fce 100644 --- a/e2e/cases/doctor-rspack/brief.test.ts +++ b/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); diff --git a/e2e/cases/doctor-rspack/fixtures/c.js b/e2e/cases/doctor-rspack/fixtures/c.js new file mode 100644 index 00000000..492f10d3 --- /dev/null +++ b/e2e/cases/doctor-rspack/fixtures/c.js @@ -0,0 +1 @@ +const c = 1; diff --git a/e2e/cases/doctor-rspack/linter-rule-render.test.ts b/e2e/cases/doctor-rspack/linter-rule-render.test.ts new file mode 100644 index 00000000..7a5a1951 --- /dev/null +++ b/e2e/cases/doctor-rspack/linter-rule-render.test.ts @@ -0,0 +1,152 @@ +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; + +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: 3, + }, + ], + }, + }, + }), + { + 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, , error] = await page.$$('.box_4a48c'); + 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 <= 3"', + ); + + // 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; + } +} From 424bac84b593b5e20a0fc9522c18e5563bc2b86b Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 18:17:03 +0800 Subject: [PATCH 4/7] chore: optimize code --- e2e/cases/doctor-rspack/linter-rule-render.test.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/e2e/cases/doctor-rspack/linter-rule-render.test.ts b/e2e/cases/doctor-rspack/linter-rule-render.test.ts index 7a5a1951..5b23994c 100644 --- a/e2e/cases/doctor-rspack/linter-rule-render.test.ts +++ b/e2e/cases/doctor-rspack/linter-rule-render.test.ts @@ -8,6 +8,7 @@ import { createRsdoctorPlugin } from './test-utils'; import { devtools } from 'vue'; let reportLoaderStartOrEndTimes = 0; +const ecmaVersion = 3; async function rspackCompile( _tapName: string, @@ -52,7 +53,7 @@ async function rspackCompile( 'ecma-version-check': [ 'Warn', { - ecmaVersion: 3, + ecmaVersion, }, ], }, @@ -129,7 +130,7 @@ test('linter rule render check', async () => { '/cases/doctor-rspack/dist/linter-rule-render/main.js:1:2', ); expect(errorText).toBe( - 'Find some syntax that does not match "ecmaVersion <= 3"', + `Find some syntax that does not match "ecmaVersion <= ${ecmaVersion}"`, ); // Close the page From 812a820572fc1591bad518a0428324690cea76c4 Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 18:28:41 +0800 Subject: [PATCH 5/7] chore: add log for element check --- e2e/cases/doctor-rspack/linter-rule-render.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/e2e/cases/doctor-rspack/linter-rule-render.test.ts b/e2e/cases/doctor-rspack/linter-rule-render.test.ts index 5b23994c..6c0dd9d7 100644 --- a/e2e/cases/doctor-rspack/linter-rule-render.test.ts +++ b/e2e/cases/doctor-rspack/linter-rule-render.test.ts @@ -122,10 +122,13 @@ test('linter rule render check', async () => { const ecmaVersionButton = await page.$('[data-node-key="E1004"]'); await ecmaVersionButton?.click(); + console.log(ecmaVersionButton, 'ecmaVersionButton'); // ignore output text check because there's no .map file for track the source code const [source, , error] = await page.$$('.box_4a48c'); + console.log(source, error, 'errorElement'); const sourceText = await source?.textContent(); const errorText = await error?.textContent(); + console.log(sourceText, errorText, 'errorText'); expect(sourceText).toBe( '/cases/doctor-rspack/dist/linter-rule-render/main.js:1:2', ); From f2cdaaa94844218f3df9fbb6f246fd2f92bf6c7d Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Wed, 22 Jan 2025 18:34:59 +0800 Subject: [PATCH 6/7] test: wait for element render --- e2e/cases/doctor-rspack/linter-rule-render.test.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/e2e/cases/doctor-rspack/linter-rule-render.test.ts b/e2e/cases/doctor-rspack/linter-rule-render.test.ts index 6c0dd9d7..c069c703 100644 --- a/e2e/cases/doctor-rspack/linter-rule-render.test.ts +++ b/e2e/cases/doctor-rspack/linter-rule-render.test.ts @@ -122,13 +122,11 @@ test('linter rule render check', async () => { const ecmaVersionButton = await page.$('[data-node-key="E1004"]'); await ecmaVersionButton?.click(); - console.log(ecmaVersionButton, 'ecmaVersionButton'); + await page.waitForSelector('.box_4a48c'); // ignore output text check because there's no .map file for track the source code const [source, , error] = await page.$$('.box_4a48c'); - console.log(source, error, 'errorElement'); const sourceText = await source?.textContent(); const errorText = await error?.textContent(); - console.log(sourceText, errorText, 'errorText'); expect(sourceText).toBe( '/cases/doctor-rspack/dist/linter-rule-render/main.js:1:2', ); From 6c24e79958926153844157327f86bf84ff0718ea Mon Sep 17 00:00:00 2001 From: nyqykk <1327719263@qq.com> Date: Thu, 23 Jan 2025 11:18:11 +0800 Subject: [PATCH 7/7] fix: test error --- e2e/cases/doctor-rspack/linter-rule-render.test.ts | 4 ++-- .../components/src/components/Alert/ecma-version-check.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/e2e/cases/doctor-rspack/linter-rule-render.test.ts b/e2e/cases/doctor-rspack/linter-rule-render.test.ts index c069c703..8f9e9982 100644 --- a/e2e/cases/doctor-rspack/linter-rule-render.test.ts +++ b/e2e/cases/doctor-rspack/linter-rule-render.test.ts @@ -122,9 +122,9 @@ test('linter rule render check', async () => { const ecmaVersionButton = await page.$('[data-node-key="E1004"]'); await ecmaVersionButton?.click(); - await page.waitForSelector('.box_4a48c'); // ignore output text check because there's no .map file for track the source code - const [source, , error] = await page.$$('.box_4a48c'); + 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( diff --git a/packages/components/src/components/Alert/ecma-version-check.tsx b/packages/components/src/components/Alert/ecma-version-check.tsx index 091f3e30..c758051b 100644 --- a/packages/components/src/components/Alert/ecma-version-check.tsx +++ b/packages/components/src/components/Alert/ecma-version-check.tsx @@ -35,7 +35,7 @@ export const ECMAVersionCheck: React.FC = ({ data }) => { {sourceMessage} @@ -47,7 +47,7 @@ export const ECMAVersionCheck: React.FC = ({ data }) => { {outputMessage} @@ -59,7 +59,7 @@ export const ECMAVersionCheck: React.FC = ({ data }) => { {d.description}