feat: 支持 React 17 (#1527)

Co-authored-by: 谢仁洪 <xierenhong@renrenche.com>

docs/guide/config/babel.md

@@ -30,6 +30,9 @@ module.exports = {
     [
       'remax',
       {
+        react: {
+          runtime: 'automatic',
+        },
         typescript: {
           allowNamespaces: true,
         },

packages/babel-preset-remax/README.md

@@ -8,6 +8,10 @@ Babel preset for remax app.
 
 ## Options
 
+### react
+
+configure react preset. https://babeljs.io/docs/en/babel-preset-react
+
 ### typescript
 
 configure typescript preset. https://babeljs.io/docs/en/babel-preset-typescript
@@ -30,6 +34,9 @@ configure react preset throwIfNamespace option. https://babeljs.io/docs/en/babel
     [
       'remax',
       {
+        react: {
+          runtime: 'classic',
+        },
         typescript: {
           allowNamespaces: true,
         },

packages/babel-preset-remax/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['/esm/', '/cjs/'],
+  testRegex: '.*\\.test\\.tsx?$',
+  coveragePathIgnorePatterns: ['/src/__tests__/'],
+  globals: {
+    'ts-jest': {
+      isolatedModules: true,
+    },
+  },
+};

packages/babel-preset-remax/package.json

@@ -10,7 +10,8 @@
   "scripts": {
     "clean": "rimraf lib tsconfig.tsbuildinfo",
     "prebuild": "npm run clean",
-    "build": "tsc"
+    "build": "tsc",
+    "test": "jest"
   },
   "bugs": {
     "url": "https://github.com/remaxjs/remax/issues"

packages/babel-preset-remax/src/index.test.ts

@@ -0,0 +1,43 @@
+import { transformSync } from '@babel/core';
+import preset from './index';
+
+test('react default', () => {
+  const code = transformSync(
+    `
+    import React from 'react'
+    import { View } from '@remax/one'
+
+    function Demo() {
+      return <View>demo</View>
+    }
+  `.trim(),
+    {
+      filename: 'file.tsx',
+      babelrc: false,
+      presets: [preset],
+    }
+  )!.code;
+
+  expect(code).toMatch(`/*#__PURE__*/_react.default.createElement(_one.View, null, "demo")`);
+});
+
+test('react options', () => {
+  const code = transformSync(
+    `
+    import React from 'react'
+    import { View } from '@remax/one'
+
+    function Demo() {
+      return <View>demo</View>
+    }
+  `.trim(),
+    {
+      filename: 'file.tsx',
+      babelrc: false,
+      presets: [[preset, { react: { development: true } }]],
+    }
+  )!.code;
+
+  expect(code).toMatch(`return /*#__PURE__*/_react.default.createElement(_one.View, {`);
+  expect(code).toMatch(`__self: this,`);
+});

packages/babel-preset-remax/src/index.ts

@@ -1,7 +1,7 @@
 import { declare } from '@babel/helper-plugin-utils';
 
 interface PresetOption {
-  react?: boolean;
+  react?: boolean | { [key: string]: any };
   typescript?: any;
   decorators?: any;
   'class-properties'?: any;
@@ -32,7 +32,10 @@ function preset(api: any, presetOption: PresetOption) {
   }
 
   if (react) {
-    presets.push([require.resolve('@babel/preset-react'), { throwIfNamespace }]);
+    const defaultReactOpt = { throwIfNamespace };
+    const reactOpts = typeof react === 'boolean' ? defaultReactOpt : Object.assign(defaultReactOpt, react);
+
+    presets.push([require.resolve('@babel/preset-react'), reactOpts]);
   }
 
   return {