feat: add react config and support runtime: classical

crates/mako/src/config.rs

@@ -153,6 +153,7 @@ pub enum CodeSplittingStrategy {
     #[serde(untagged)]
     Advanced(OptimizeChunkOptions),
 }
+
 #[derive(Deserialize, Serialize, Clone, Copy, Debug)]
 pub enum TreeShakingStrategy {
     #[serde(rename = "basic")]
@@ -273,6 +274,24 @@ pub struct InjectItem {
     pub prefer_require: Option<bool>,
 }
 
+#[derive(Deserialize, Serialize, Debug)]
+pub enum ReactRuntimeConfig {
+    #[serde(rename = "automatic")]
+    Automatic,
+    #[serde(rename = "classic")]
+    Classic,
+}
+
+#[derive(Deserialize, Serialize, Debug)]
+pub struct ReactConfig {
+    pub pragma: String,
+    #[serde(rename = "importSource")]
+    pub import_source: String,
+    pub runtime: ReactRuntimeConfig,
+    #[serde(rename = "pragmaFrag")]
+    pub pragma_frag: String,
+}
+
 #[derive(Deserialize, Serialize, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct MinifishConfig {
@@ -349,6 +368,7 @@ pub struct Config {
     pub flex_bugs: bool,
     #[serde(deserialize_with = "deserialize_optimization")]
     pub optimization: Option<OptimizationConfig>,
+    pub react: ReactConfig,
 }
 
 pub(crate) fn hash_config(c: &Config) -> u64 {
@@ -496,7 +516,13 @@ const DEFAULT_CONFIG: &str = r#"
     "optimizePackageImports": false,
     "emotion": false,
     "flexBugs": false,
-    "optimization": { "skipModules": false }
+    "optimization": { "skipModules": false },
+    "react": {
+      "pragma": "React.createElement",
+      "importSource": "react",
+      "runtime": "automatic",
+      "pragmaFrag": "React.Fragment"
+    },
 }
 "#;
 

crates/mako/src/transformers/transform_react.rs

@@ -11,7 +11,7 @@ use mako_core::swc_emotion::{emotion, EmotionOptions};
 
 use crate::ast::build_js_ast;
 use crate::compiler::Context;
-use crate::config::Mode;
+use crate::config::{Mode, ReactRuntimeConfig};
 use crate::task::Task;
 
 pub struct PrefixCode {
@@ -51,7 +51,15 @@ pub fn mako_react(
     let (import_source, pragma) = if context.config.emotion {
         ("@emotion/react", "jsx")
     } else {
-        ("react", "React.createElement")
+        (
+            context.config.react.import_source.as_str(),
+            context.config.react.pragma.as_str(),
+        )
+    };
+    let runtime = if matches!(context.config.react.runtime, ReactRuntimeConfig::Automatic) {
+        Runtime::Automatic
+    } else {
+        Runtime::Classic
     };
 
     let emotion = if context.config.emotion {
@@ -72,10 +80,10 @@ pub fn mako_react(
             Some(origin_comments.get_swc_comments().clone()),
             Options {
                 import_source: Some(import_source.to_string()),
-                pragma: Some(pragma.into()),
-                pragma_frag: Some("React.Fragment".into()),
+                pragma: Some(pragma.to_string()),
+                pragma_frag: Some(context.config.react.pragma_frag.clone()),
                 // support react 17 + only
-                runtime: Some(Runtime::Automatic),
+                runtime: Some(runtime),
                 development: Some(is_dev),
                 // to avoid throw error for svg namespace element
                 throw_if_namespace: Some(false),

crates/node/src/lib.rs

@@ -103,6 +103,12 @@ pub struct BuildParams {
     optimization?: false | {
         skipModules?: boolean;
     };
+    react?: {
+        runtime?: "automatic" | "classic";
+        pragma?: string;
+        importSource?: string;
+        pragmaFrag?: string;
+    };
 }"#)]
     pub config: serde_json::Value,
     pub hooks: JsHooks,

docs/config.md

@@ -325,6 +325,40 @@ publicPath 配置。注：有个特殊值 `"runtime"`，表示会切换到 runti
 - `selectorBlackList`，选择器黑名单
 - `selectorWhiteList`，选择器白名单
 
+## react
+
+- 类型：`{ runtime: "automatic" | "classic", pragma: string, import_source: string, pragma_frag: string }`
+- 默认值：`{ runtime: "automatic", pragma: "React.createElement", import_source: "react", pragma_frag: "React.Fragment" }`
+
+react 编译相关配置。
+
+比如。
+
+```tsx
+function App() {
+  return <div>1</div>;
+}
+```
+
+runtime 为 automatic 时的产物如下，
+
+```ts
+import { jsx as _jsx } from "react/jsx-runtime";
+function App() {
+  return /*#__PURE__*/_jsx("div", {
+    children: "1"
+  });
+}
+```
+
+runtime 为 classic 时的产物如下，
+
+```ts
+function App() {
+  return /*#__PURE__*/React.createElement("div", null, "1");
+}
+```
+
 ## resolve
 
 - 类型：`{ alias: Record<string, string>, extensions: string[] }`

e2e/fixtures/config.react.runtime.classic/expect.js

@@ -0,0 +1,7 @@
+const assert = require("assert");
+const { parseBuildResult, string2RegExp } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+const content = files["index.js"];
+
+assert(content.includes(`React.createElement("div", {`), `use classic runtime`);

e2e/fixtures/config.react.runtime.classic/mako.config.json

@@ -0,0 +1,9 @@
+{
+  "minify": false,
+  "externals": {
+    "react": "React"
+  },
+  "react": {
+    "runtime": "classic"
+  }
+}

e2e/fixtures/config.react.runtime.classic/src/index.tsx

@@ -0,0 +1,5 @@
+function App() {
+  return <div>'Hello World'</div>;
+}
+
+export { App };