Skip to content

Commit 7e8821e

Browse files
li-jia-nangemini-code-assist[bot]
li-jia-nan
and
gemini-code-assist[bot]
authored
feat: integrated react-compiler (#290)
* feat: integrated react-compiler * Update src/getBabelCommonConfig.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * update type * update * update * update * update * update --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
1 parent 9dcecb4 commit 7e8821e

8 files changed

Lines changed: 53 additions & 30 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ dist
2525
tests/*.css
2626
yarn.lock
2727
package-lock.json
28+
pnpm-lock.yaml
2829
.vscode
2930
lib/
3031
es/

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,19 +102,23 @@
102102
},
103103
"devDependencies": {
104104
"@rc-component/father-plugin": "^2.1.2",
105+
"@types/babel__core": "^7.20.5",
105106
"@types/fs-extra": "^11.0.4",
106107
"@types/glob": "^8.1.0",
107108
"@types/gulp": "^4.0.17",
108109
"@types/gulp-babel": "^6.1.33",
109110
"@types/gulp-watch": "^4.1.39",
110111
"@types/merge2": "^1.4.4",
111112
"@types/minimist": "^1.2.5",
113+
"@types/node": "^24.10.0",
112114
"@types/node-fetch": "^2.6.12",
113115
"@types/rimraf": "^3.0.0",
114116
"@types/through2": "^2.0.41",
117+
"@types/webpack-merge": "^5.0.0",
115118
"@typescript-eslint/eslint-plugin": "^8.29.0",
116119
"@typescript-eslint/parser": "^8.29.0",
117120
"babel-eslint": "^10.0.1",
121+
"babel-plugin-react-compiler": "^1.0.0",
118122
"eslint": "^8.0.0",
119123
"eslint-config-airbnb": "^18.0.1",
120124
"eslint-config-prettier": "^6.0.0",

‎script/prettier.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,13 @@ files.forEach(file => {
3737
fs.writeFileSync(file, output, 'utf8');
3838
console.log(`\x1b[34m ${file} is prettier`);
3939
}
40-
} catch (e) {
40+
} catch {
4141
didError = true;
4242
}
4343
});
4444

4545
if (didError) {
4646
process.exit(1);
4747
}
48+
4849
console.log('\x1b[32m prettier success!');

‎src/getBabelCommonConfig.ts‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import { resolve, isThereHaveBrowserslistConfig } from './utils/projectHelper';
21
import fs from 'fs-extra';
3-
import type { TransformOptions } from '@babel/core';
2+
import type { PluginItem, TransformOptions } from '@babel/core';
3+
import { resolve, isThereHaveBrowserslistConfig } from './utils/projectHelper';
44

5-
export default function getBabelCommonConfig(modules?: boolean): TransformOptions & {
5+
interface BabelConfigOptions {
6+
enabledReactCompiler?: boolean;
7+
}
8+
9+
interface BabelConfig extends TransformOptions {
610
cacheDirectory?: boolean;
7-
} {
8-
const plugins = [
11+
}
12+
13+
function getBabelCommonConfig(modules?: boolean, options: BabelConfigOptions = {}): BabelConfig {
14+
const plugins: PluginItem[] = [
915
[
1016
resolve('@babel/plugin-transform-typescript'),
1117
{
@@ -27,6 +33,14 @@ export default function getBabelCommonConfig(modules?: boolean): TransformOption
2733
resolve('babel-plugin-transform-dev-warning'),
2834
resolve('@babel/plugin-transform-private-methods'),
2935
];
36+
if (options.enabledReactCompiler === true) {
37+
plugins.unshift([
38+
resolve('babel-plugin-react-compiler'),
39+
{
40+
target: '18', // 最低支持的版本是 React 18
41+
},
42+
]);
43+
}
3044
return {
3145
presets: [
3246
resolve('@babel/preset-react'),
@@ -45,3 +59,5 @@ export default function getBabelCommonConfig(modules?: boolean): TransformOption
4559
plugins,
4660
};
4761
}
62+
63+
export default getBabelCommonConfig;

‎src/getWebpackConfig.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,21 @@ const imageOptions = {
2828
};
2929

3030
interface GetWebpackConfigFunction {
31-
(modules?: boolean): Configuration[];
31+
(modules?: boolean, options?: { enabledReactCompiler?: boolean }): Configuration[];
3232
webpack: typeof webpack;
3333
svgRegex: RegExp;
3434
svgOptions: typeof svgOptions;
3535
imageOptions: typeof imageOptions;
3636
}
3737

38-
const getWebpackConfig: GetWebpackConfigFunction = (modules?: boolean): Configuration[] => {
38+
const getWebpackConfig: GetWebpackConfigFunction = (modules, options = {}) => {
39+
const { enabledReactCompiler } = options;
40+
3941
const pkg: PackageJson = readJsonSync(getProjectPath('package.json'));
40-
const babelConfig = getBabelCommonConfig(modules || false);
42+
43+
const babelConfig = getBabelCommonConfig(modules || false, {
44+
enabledReactCompiler: enabledReactCompiler,
45+
});
4146

4247
babelConfig.plugins.push([
4348
resolve('babel-plugin-import'),
@@ -99,13 +104,7 @@ const getWebpackConfig: GetWebpackConfigFunction = (modules?: boolean): Configur
99104
'readline',
100105
'repl',
101106
'tls',
102-
].reduce(
103-
(acc, name) => ({
104-
...acc,
105-
[name]: false,
106-
}),
107-
{}
108-
),
107+
].reduce((acc, name) => ({ ...acc, [name]: false }), {}),
109108
},
110109

111110
module: {

‎src/gulpfile.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import gulp from 'gulp';
1010
import glob from 'glob';
1111
import fs from 'fs-extra';
1212
import rimraf from 'rimraf';
13-
1413
import { getProjectPath, getConfig } from './utils/projectHelper';
1514
import getBabelCommonConfig from './getBabelCommonConfig';
1615
import getTSCommonConfig from './getTSCommonConfig';
1716
import replaceLib from './replaceLib';
1817
import checkDiff from './lint/checkDiff';
1918
import apiCollection from './apiCollection';
2019
import sortApiTable from './sortApiTable';
20+
import type { ICompileStream } from 'gulp-typescript/release/project';
2121

2222
const argv = minimist(process.argv.slice(2));
2323

@@ -27,10 +27,12 @@ const packageJson = fs.readJsonSync(getProjectPath('package.json'));
2727

2828
const tsDefaultReporter = ts.reporter.defaultReporter();
2929
const cwd = process.cwd();
30-
const libDir = getProjectPath('lib');
30+
const cjsDir = getProjectPath('lib');
3131
const esDir = getProjectPath('es');
3232
const localeDir = getProjectPath('locale');
3333

34+
const libDir = process.env.LIB_DIR || 'components';
35+
3436
// FIXME: hard code, not find typescript can modify the path resolution
3537
const localeDts = `import type { Locale } from '../lib/locale';
3638
declare const localeValues: Locale;
@@ -143,14 +145,14 @@ gulp.task(
143145
})
144146
);
145147

146-
function babelify(js, modules) {
147-
const babelConfig = getBabelCommonConfig(modules);
148+
function babelify(js: ICompileStream['js'], modules: boolean) {
149+
const babelConfig = getBabelCommonConfig(modules, { enabledReactCompiler: libDir === 'dist' });
148150
delete babelConfig.cacheDirectory;
149151
if (modules === false) {
150152
babelConfig.plugins.push(replaceLib);
151153
}
152154
const stream = js.pipe(babel(babelConfig as Parameters<typeof babel>[0]));
153-
return stream.pipe(gulp.dest(modules === false ? esDir : libDir));
155+
return stream.pipe(gulp.dest(modules === false ? esDir : cjsDir));
154156
}
155157

156158
function insertUseClient() {
@@ -173,15 +175,15 @@ function insertUseClient() {
173175

174176
async function compile(modules?: boolean) {
175177
const { compile: { transformTSFile, transformFile } = {} } = await getConfig();
176-
rimraf.sync(modules !== false ? libDir : esDir);
178+
rimraf.sync(modules !== false ? cjsDir : esDir);
177179

178180
const assets = gulp
179181
.src(['components/**/*.@(png|svg|json)'])
180-
.pipe(gulp.dest(modules === false ? esDir : libDir));
182+
.pipe(gulp.dest(modules === false ? esDir : cjsDir));
181183
let error = 0;
182184

183185
// =============================== FILE ===============================
184-
let transformFileStream;
186+
let transformFileStream: NodeJS.ReadWriteStream;
185187

186188
if (transformFile) {
187189
transformFileStream = gulp
@@ -194,7 +196,7 @@ async function compile(modules?: boolean) {
194196
next();
195197
})
196198
)
197-
.pipe(gulp.dest(modules === false ? esDir : libDir));
199+
.pipe(gulp.dest(modules === false ? esDir : cjsDir));
198200
}
199201

200202
// ================================ TS ================================
@@ -247,7 +249,7 @@ async function compile(modules?: boolean) {
247249
tsResult.on('finish', check);
248250
tsResult.on('end', check);
249251
const tsFilesStream = babelify(tsResult.js, modules);
250-
const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : libDir));
252+
const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : cjsDir));
251253
return merge2([tsFilesStream, tsd, assets, transformFileStream].filter(s => s));
252254
}
253255

‎src/jest/demoPreprocessor.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ function transform(src: string, pathFilename: string): ProcessResult {
121121
global.__clearBabelAntdPlugin && global.__clearBabelAntdPlugin(); // eslint-disable-line
122122

123123
const babelConfig = getBabelCommonConfig();
124+
124125
babelConfig.plugins = [...babelConfig.plugins];
125126
babelConfig.plugins.push(createDemo);
126127

‎src/jest/rewriteSource.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import type { NodePath } from '@babel/traverse';
2-
import type { ImportDeclaration } from '@babel/types';
1+
import * as babel from '@babel/core';
32

43
function rewriteSource(
5-
t: typeof import('@babel/types'),
6-
path: NodePath<ImportDeclaration>,
4+
t: typeof babel.types,
5+
path: babel.NodePath<babel.types.ImportDeclaration>,
76
libDir: string
87
): void {
98
if (libDir === 'dist') {

0 commit comments

Comments
 (0)