RFC：react 支持 classical 的 runtime 配置

[sorrycc]

问题

#828

分析

runtime 有两个配置，automatic 和 classic。参考 https://babeljs.io/docs/babel-plugin-transform-react-jsx#runtime

比如

function App() {
  return <div>1</div>;
}

automatic 时的产物如下，

import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return /*#__PURE__*/_jsx("div", {
    children: "1"
  });
}

classic 的产物如下，

function App() {
  return /*#__PURE__*/React.createElement("div", null, "1");
}

Umi 里是基于项目的 React 版本会自动判断，runtime: isGTEReact17 ? "automatic" : "classic",，参考 https://github.com/umijs/umi/blob/6f63435/packages/preset-umi/src/commands/dev/getBabelOpts.ts#L12 。

方案

Mako 层提供配置，Umi 层和现有逻辑保持一致。

1、Mako 层提供 react 配置，包含 runtime、import_source、pragma 三个配置。

runtime: "automatic" | "classic",
pragma: string,
import_source: string,

默认值是：

runtime: "automatic",
pragma: "React.createElement"
import_source: "react"

emotion 插件修改配置项：

pragma: "jsx"
import_source: "@emotion/react"

2、bundler-okam 层基于透传 react opts，这个目前没有，需在 umi 层新增。

const isGTEReact17 = semver.gte(opts.api.appData.react.version, '17.0.0');
react: {
  runtime: isGTEReact17 ? "automatic" : "classic",
}