Skip to content

Commit

Permalink
chore: optimize diff test case (#4950)
Browse files Browse the repository at this point in the history 
* chore: fix diff stats error

* chore: disable webpack concatnationModules

* chore: disable optimization mangle exports

* chore: ignore block statement and swc helpers path

* chore: ignore object property sequence

* chore: css local ident file path name

* chore: css local ident file path name

* chore: css local ident file path name

* chore: css local ident file path name

* chore: css local ident file path name

---------

Co-authored-by: LingyuCoder <--global>
  • Loading branch information
@LingyuCoder
LingyuCoder authored Dec 8, 2023
1 parent 171703c commit 3bc9969
Show file tree
Hide file tree
Showing 13 changed files with 194 additions and 67 deletions.
31 changes: 16 additions & 15 deletions diffcases/arco-pro/rspack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
const path = require("path");
const rspack = require("@rspack/core");
const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
const { default: HtmlPlugin } = require("@rspack/plugin-html");

const prod = process.env.NODE_ENV === "production";

/** @type {import('@rspack/cli').Configuration} */
const config = {
mode: 'development',
mode: 'production',
context: __dirname,
entry: "./src/index.tsx",
target: ["web", "es5"],
devServer: {
port: 5555,
webSocketServer: "sockjs",
historyApiFallback: true
},
module: {
rules: [
{
Expand Down Expand Up @@ -63,8 +55,8 @@ const config = {
transform: {
react: {
runtime: "automatic",
development: !prod,
refresh: !prod
development: false,
refresh: false
}
},
externalHelpers: true
Expand All @@ -87,7 +79,8 @@ const config = {
// expression, which causes stack overflow for swc parser in debug mode.
// Alias to the unminified version mitigates this problem.
// See also <https://github.com/search?q=repo%3Aswc-project%2Fswc+parser+stack+overflow&type=issues>
mockjs: require.resolve("./patches/mock.js")
mockjs: require.resolve("./patches/mock.js"),
"@swc/helpers": require.resolve('@swc/helpers'),
}
},
output: {
Expand All @@ -98,6 +91,7 @@ const config = {
optimization: {
minimize: false, // Disabling minification because it takes too long on CI
realContentHash: true,
usedExports: false,
splitChunks: {
cacheGroups: {
someVendor: {
Expand All @@ -113,16 +107,23 @@ const config = {
template: path.join(__dirname, "index.html"),
favicon: path.join(__dirname, "public", "favicon.ico")
}),
new ReactRefreshPlugin(),
new rspack.ProgressPlugin()
],
infrastructureLogging: {
debug: false
},
experiments: {
css: true,
rspackFuture: {
disableTransformByDefault: true
}
}
},
builtins: {
css: {
modules: {
exportsOnly: true,
localIdentName: "example-arco-design-pro---[path][name][ext]-[local]",
},
},
},
};
module.exports = config;
38 changes: 14 additions & 24 deletions diffcases/arco-pro/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,23 @@
const path = require("path");
const webpack = require("webpack");
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const prod = process.env.NODE_ENV === "production";

/** @type {import('webpack').Configuration} */
const config = {
mode: 'development',
mode: 'production',
context: __dirname,
entry: "./src/index.tsx",
target: ["web", "es5"],
devServer: {
port: 5555,
webSocketServer: "sockjs",
historyApiFallback: true
},
module: {
rules: [
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
exclude: /\.module\.less$/
use: "less-loader",
type: "css"
},
{
test: /\.module\.less$/,
use: ["style-loader", {
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
},
}, "less-loader"],
use: "less-loader",
type: "css/module"
},
{
test: /\.svg$/,
Expand Down Expand Up @@ -68,8 +54,8 @@ const config = {
transform: {
react: {
runtime: "automatic",
development: !prod,
refresh: !prod
development: false,
refresh: false
}
},
externalHelpers: true
Expand All @@ -92,7 +78,7 @@ const config = {
// expression, which causes stack overflow for swc parser in debug mode.
// Alias to the unminified version mitigates this problem.
// See also <https://github.com/search?q=repo%3Aswc-project%2Fswc+parser+stack+overflow&type=issues>
mockjs: require.resolve("./patches/mock.js")
mockjs: require.resolve("./patches/mock.js"),
},
extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
},
Expand All @@ -104,6 +90,7 @@ const config = {
optimization: {
minimize: false, // Disabling minification because it takes too long on CI
realContentHash: true,
usedExports: false,
splitChunks: {
cacheGroups: {
someVendor: {
Expand All @@ -113,14 +100,17 @@ const config = {
}
}
},
experiments: {
css: {
exportsOnly: true
}
},
plugins: [
new HtmlWebpackPlugin({
title: "Arco Pro App",
template: path.join(__dirname, "index.html"),
favicon: path.join(__dirname, "public", "favicon.ico")
}),
new ReactRefreshPlugin(),
new webpack.ProgressPlugin()
],
infrastructureLogging: {
debug: false
Expand Down
8 changes: 4 additions & 4 deletions packages/rspack-test-tools/src/compare/compare.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ export function compareModules(
const renamed = replaceRuntimeModuleName(name);
const sourceContent =
sourceModules.has(renamed) &&
formatCode(sourceModules.get(renamed)!, formatOptions);
formatCode(name, sourceModules.get(renamed)!, formatOptions);
const distContent =
distModules.has(renamed) &&
formatCode(distModules.get(renamed)!, formatOptions);
formatCode(name, distModules.get(renamed)!, formatOptions);

compareResults.push({
...compareContent(sourceContent, distContent),
Expand All @@ -122,9 +122,9 @@ export function compareContent(
source: sourceContent,
dist: distContent,
lines: {
source: lines,
source: 0,
common: lines,
dist: lines
dist: 0
}
};
} else {
Expand Down
100 changes: 98 additions & 2 deletions packages/rspack-test-tools/src/compare/format-code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,22 @@ export interface IFormatCodeOptions {
ignorePropertyQuotationMark: boolean;
ignoreModuleId: boolean;
ignoreModuleArguments: boolean;
ignoreBlockOnlyStatement: boolean;
ignoreSwcHelpersPath: boolean;
ignoreObjectPropertySequence: boolean;
ignoreCssFilePath: boolean;
}

export function formatCode(raw: string, options: IFormatCodeOptions) {
const SWC_HELPER_PATH_REG =
/^_swc_helpers_[a-zA-Z\d_-]+__WEBPACK_IMPORTED_MODULE_xxx__$/;
const CSS_FILE_EXT_REG = /(le|sa|c|sc)ss$/;
const INVALID_PATH_REG = /[<>:"/\\|?*.]/g;

export function formatCode(
name: string,
raw: string,
options: IFormatCodeOptions
) {
const ast = parse(raw, {
sourceType: "unambiguous"
});
Expand All @@ -23,6 +36,15 @@ export function formatCode(raw: string, options: IFormatCodeOptions) {
keyPath.replaceWith(T.stringLiteral(keyPath.node.name));
}
}
if (options.ignoreCssFilePath && CSS_FILE_EXT_REG.test(name)) {
const valuePath = path.get("value");
if (valuePath.isStringLiteral()) {
valuePath.node.value = valuePath.node.value.replace(
INVALID_PATH_REG,
"-"
);
}
}
},
Identifier(path) {
if (options.ignoreModuleId) {
Expand All @@ -31,12 +53,86 @@ export function formatCode(raw: string, options: IFormatCodeOptions) {
"__WEBPACK_IMPORTED_MODULE_xxx__"
);
}
if (options.ignoreSwcHelpersPath) {
if (SWC_HELPER_PATH_REG.test(path.node.name)) {
path.node.name = `$$SWC_HELPERS$$`;
}
}
},
IfStatement(path) {
if (options.ignoreBlockOnlyStatement) {
const consequent = path.get("consequent");
if (
consequent.isBlockStatement() &&
consequent.node.body.length === 1
) {
consequent.node.body[0].leadingComments =
consequent.node.leadingComments;
consequent.replaceWith(
T.cloneNode(consequent.node.body[0], true, false)
);
}
const alternate = path.get("alternate");
if (alternate.isBlockStatement() && alternate.node.body.length === 1) {
alternate.node.body[0].leadingComments =
alternate.node.leadingComments;
alternate.replaceWith(
T.cloneNode(alternate.node.body[0], true, false)
);
}
}
},
For(path) {
if (options.ignoreBlockOnlyStatement) {
const body = path.get("body");
if (body.isBlockStatement() && body.node.body.length === 1) {
body.node.body[0].leadingComments = body.node.leadingComments;
body.replaceWith(T.cloneNode(body.node.body[0], true, false));
}
}
},
ObjectExpression(path) {
if (options.ignoreObjectPropertySequence) {
let result = [];
let safe = [];
while (path.node.properties.length || safe.length) {
const cur = path.node.properties.shift()!;
if (cur && T.isObjectProperty(cur)) {
if (T.isIdentifier(cur.key)) {
safe.push({
name: cur.key.name,
node: cur
});
continue;
}
if (T.isStringLiteral(cur.key)) {
safe.push({
name: cur.key.value,
node: cur
});
continue;
}
}
if (safe.length) {
safe.sort((a, b) => (a.name > b.name ? 1 : -1));
result.push(...safe.map(n => n.node));
safe = [];
}
if (cur) {
result.push(cur);
}
}
path.node.properties = result;
}
}
});
let result = generate(ast, {
comments: false,
compact: false,
concise: false
concise: false,
jsescOption: {
quotes: "double"
}
}).code;

if (options.ignoreModuleArguments) {
Expand Down
4 changes: 3 additions & 1 deletion packages/rspack-test-tools/src/compare/replace-module-argument.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export function replaceModuleArgument(raw: string) {
return raw.trim().replace(/^\(function \([\w_,\s]+\) {/, "(function () {");
return raw
.trim()
.replace(/^\(function\s?\([\w_,\s]+\)\s?{/, "(function () {");
}
11 changes: 11 additions & 0 deletions packages/rspack-test-tools/src/processor/diff.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,10 @@ export class DiffProcessor implements ITestProcessor {
},
path: dist
},
optimization: {
mangleExports: false,
concatenateModules: false
},
plugins: [createModulePlaceholderPlugin(this.options.webpackPath)]
},
{
Expand All @@ -177,6 +181,9 @@ export class DiffProcessor implements ITestProcessor {
output: {
path: dist
},
optimization: {
mangleExports: false
},
experiments: {
rspackFuture: {
disableTransformByDefault: true
Expand All @@ -193,6 +200,10 @@ export class DiffProcessor implements ITestProcessor {
ignoreModuleArguments: this.options.ignoreModuleArguments,
ignoreModuleId: this.options.ignoreModuleId,
ignorePropertyQuotationMark: this.options.ignorePropertyQuotationMark,
ignoreBlockOnlyStatement: this.options.ignoreBlockOnlyStatement,
ignoreSwcHelpersPath: this.options.ignoreSwcHelpersPath,
ignoreObjectPropertySequence: this.options.ignoreObjectPropertySequence,
ignoreCssFilePath: this.options.ignoreCssFilePath,
replacements: this.options.replacements || {}
};
for (let hash of this.hashes) {
Expand Down
13 changes: 9 additions & 4 deletions packages/rspack-test-tools/src/reporter/diff-html.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,23 @@ export class DiffHtmlReporter implements ITestReporter<TModuleCompareResult[]> {
root: id,
data: items
};
const content = template.replace(
DIFF_STATS_PLACEHOLDER,
JSON.stringify(data)
);
const casename = path.basename(id);
const extname = path.extname(viewerFile);
const filename = path.basename(viewerFile, extname);
const content = template.replace(
`<script id="${DIFF_STATS_PLACEHOLDER}"></script>`,
`<script src="${filename}_${casename}.js"></script>`
);
fs.writeFileSync(
path.join(this.options.dist, `${filename}_${casename}${extname}`),
content,
"utf-8"
);
fs.writeFileSync(
path.join(this.options.dist, `${filename}_${casename}.js`),
`window.$$diff_detail$$ = ${JSON.stringify(data)}`,
"utf-8"
);
}
} else {
fs.copyFileSync(sourceFile, path.join(this.options.dist, viewerFile));
Expand Down
Loading

0 comments on commit 3bc9969

Please sign in to comment.