feat(babel): 添加react代码性能优化转换 (#261)

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 node scripts/check-deps.mjs
-lerna run --exclude-dependents --since HEAD lint
+npx lerna run --exclude-dependents --since HEAD lint

packages/config-babel/package.json

@@ -50,6 +50,8 @@
     "@babel/plugin-proposal-throw-expressions": "^7.16.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-react-constant-elements": "^7.16.7",
+    "@babel/plugin-transform-react-inline-elements": "^7.16.7",
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",

packages/config-babel/src/transform.ts

@@ -1,5 +1,7 @@
 import {PluginItem, TransformOptions} from '@babel/core';
 import pluginLodash from 'babel-plugin-lodash';
+import pluginReactConstantElement from '@babel/plugin-transform-react-constant-elements';
+import pluginReactInlineElement from '@babel/plugin-transform-react-inline-elements';
 import {compact} from '@reskript/core';
 import addReactDisplayName from '@reskript/babel-plugin-add-react-display-name';
 import {shouldEnable} from './utils.js';
@@ -28,6 +30,12 @@ export default (options: BabelConfigOptionsFilled): TransformOptions => {
                 id: ['lodash', 'lodash-decorators'],
             },
         ],
+        // https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements
+        // https://github.com/facebook/react/issues/3226
+        pluginReactConstantElement,
+        // https://babeljs.io/docs/en/babel-plugin-transform-react-inline-elements
+        // https://github.com/facebook/react/issues/3228
+        pluginReactInlineElement,
     ];
 
     return {

packages/config-babel/src/types/babel.d.ts

@@ -96,6 +96,20 @@ declare module '@babel/plugin-syntax-import-meta' {
     export default target;
 }
 
+declare module '@babel/plugin-transform-react-constant-elements' {
+    import {PluginTarget} from '@babel/core';
+
+    const target: PluginTarget;
+    export default target;
+}
+
+declare module '@babel/plugin-transform-react-inline-elements' {
+    import {PluginTarget} from '@babel/core';
+
+    const target: PluginTarget;
+    export default target;
+}
+
 declare module 'babel-plugin-styled-components' {
     import {PluginTarget} from '@babel/core';