From 72b1e2f1e465e4772c25302669b100327dbdeec4 Mon Sep 17 00:00:00 2001
From: liuxingbaoyu <30521560+liuxingbaoyu@users.noreply.github.com>
Date: Fri, 27 Sep 2024 01:56:40 +0800
Subject: [PATCH 1/2] fix

---
 js/repl/PluginConfig.ts |  4 +--
 js/repl/ReplOptions.tsx | 67 ++++++++++++++++++++++-------------------
 js/repl/compile.ts      | 41 ++++++++++++++-----------
 js/repl/types.ts        |  2 +-
 4 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/js/repl/PluginConfig.ts b/js/repl/PluginConfig.ts
index 940951d048..c18a56c10e 100644
--- a/js/repl/PluginConfig.ts
+++ b/js/repl/PluginConfig.ts
@@ -66,7 +66,7 @@ const envPresetDefaults = {
     default: "3.21",
   },
   modules: {
-    default: false,
+    default: "false",
   },
 } as const;
 
@@ -109,7 +109,7 @@ const replDefaults: ReplState = {
     compiledSize: 0,
     rawSize: 0,
   },
-  modules: false,
+  modules: "false",
   presets: "react,stage-2,env",
   prettier: false,
   showSidebar: true,
diff --git a/js/repl/ReplOptions.tsx b/js/repl/ReplOptions.tsx
index faacc0db5a..5c47c19f6d 100644
--- a/js/repl/ReplOptions.tsx
+++ b/js/repl/ReplOptions.tsx
@@ -531,7 +531,6 @@ class ExpandedContainer extends Component<Props, State> {
                 />
                 Enabled
               </label>
-
               <label className={styles.envPresetRow}>
                 <LinkToDocs
                   className={`${styles.envPresetLabel} ${styles.highlight}`}
@@ -648,36 +647,42 @@ class ExpandedContainer extends Component<Props, State> {
                   <option value="commonjs">commonjs</option>
                 </select>
               </label>
-              <label className={styles.envPresetRow}>
-                <LinkToDocs
-                  className={`${styles.envPresetLabel} ${styles.highlight}`}
-                  section="spec"
-                >
-                  Spec
-                </LinkToDocs>
-                <input
-                  checked={envConfig.isSpecEnabled}
-                  className={styles.envPresetCheckbox}
-                  disabled={!envConfig.isEnvPresetEnabled}
-                  onChange={this._onEnvPresetSettingCheck("isSpecEnabled")}
-                  type="checkbox"
-                />
-              </label>
-              <label className={styles.envPresetRow}>
-                <LinkToDocs
-                  className={`${styles.envPresetLabel} ${styles.highlight}`}
-                  section="loose"
-                >
-                  Loose
-                </LinkToDocs>
-                <input
-                  checked={envConfig.isLooseEnabled}
-                  className={styles.envPresetCheckbox}
-                  disabled={!envConfig.isEnvPresetEnabled}
-                  onChange={this._onEnvPresetSettingCheck("isLooseEnabled")}
-                  type="checkbox"
-                />
-              </label>
+              {(!babelVersion ||
+                compareVersions(babelVersion, "8.0.0") === -1) && (
+                <label className={styles.envPresetRow}>
+                  <LinkToDocs
+                    className={`${styles.envPresetLabel} ${styles.highlight}`}
+                    section="spec"
+                  >
+                    Spec
+                  </LinkToDocs>
+                  <input
+                    checked={envConfig.isSpecEnabled}
+                    className={styles.envPresetCheckbox}
+                    disabled={!envConfig.isEnvPresetEnabled}
+                    onChange={this._onEnvPresetSettingCheck("isSpecEnabled")}
+                    type="checkbox"
+                  />
+                </label>
+              )}
+              {(!babelVersion ||
+                compareVersions(babelVersion, "8.0.0") === -1) && (
+                <label className={styles.envPresetRow}>
+                  <LinkToDocs
+                    className={`${styles.envPresetLabel} ${styles.highlight}`}
+                    section="loose"
+                  >
+                    Loose
+                  </LinkToDocs>
+                  <input
+                    checked={envConfig.isLooseEnabled}
+                    className={styles.envPresetCheckbox}
+                    disabled={!envConfig.isEnvPresetEnabled}
+                    onChange={this._onEnvPresetSettingCheck("isLooseEnabled")}
+                    type="checkbox"
+                  />
+                </label>
+              )}
               {isBugfixesSupported && (
                 <label className={styles.envPresetRow}>
                   <LinkToDocs
diff --git a/js/repl/compile.ts b/js/repl/compile.ts
index 4238cb7177..80da0a1603 100644
--- a/js/repl/compile.ts
+++ b/js/repl/compile.ts
@@ -56,9 +56,6 @@ export default function compile(code: string, config: CompileConfig): Return {
   let envPresetDebugInfo = null;
   let sourceMap = null;
   let useBuiltIns: false | "entry" | "usage" = false;
-  let spec = false;
-  let loose = false;
-  let bugfixes = false;
   let corejs = "3.21";
   const transitions = new Transitions();
   const meta = {
@@ -66,7 +63,17 @@ export default function compile(code: string, config: CompileConfig): Return {
     rawSize: new Blob([code], { type: "text/plain" }).size,
   };
 
-  let presetEnvOptions = {};
+  let presetEnvOptions: {
+    targets: any;
+    modules: any;
+    forceAllTransforms: boolean;
+    shippedProposals: boolean;
+    useBuiltIns: false | "entry" | "usage";
+    corejs: string;
+    spec?: boolean;
+    loose?: boolean;
+    bugfixes?: boolean;
+  };
 
   if (envConfig && envConfig.isEnvPresetEnabled) {
     const targets: any = {};
@@ -93,15 +100,6 @@ export default function compile(code: string, config: CompileConfig): Return {
     if (envConfig.isNodeEnabled) {
       targets.node = envConfig.node;
     }
-    if (envConfig.isSpecEnabled) {
-      spec = envConfig.isSpecEnabled;
-    }
-    if (envConfig.isLooseEnabled) {
-      loose = envConfig.isLooseEnabled;
-    }
-    if (envConfig.isBugfixesEnabled) {
-      bugfixes = envConfig.isBugfixesEnabled;
-    }
 
     presetEnvOptions = {
       targets,
@@ -110,16 +108,23 @@ export default function compile(code: string, config: CompileConfig): Return {
       shippedProposals,
       useBuiltIns,
       corejs: undefined,
-      spec,
-      loose,
     };
 
+    if (Babel.version && compareVersions(Babel.version, "8.0.0") === -1) {
+      presetEnvOptions.spec = envConfig.isSpecEnabled;
+      presetEnvOptions.loose = envConfig.isLooseEnabled;
+    }
+
     if (useBuiltIns) {
-      (presetEnvOptions as any).corejs = corejs;
+      presetEnvOptions.corejs = corejs;
     }
 
-    if (Babel.version && compareVersions(Babel.version, "7.9.0") !== -1) {
-      (presetEnvOptions as any).bugfixes = bugfixes;
+    if (
+      envConfig.isBugfixesEnabled &&
+      Babel.version &&
+      compareVersions(Babel.version, "7.9.0") !== -1
+    ) {
+      presetEnvOptions.bugfixes = envConfig.isBugfixesEnabled;
     }
   }
 
diff --git a/js/repl/types.ts b/js/repl/types.ts
index 1f18be6ed8..404d036cf2 100644
--- a/js/repl/types.ts
+++ b/js/repl/types.ts
@@ -32,7 +32,7 @@ export type EnvConfig = {
   isSpecEnabled: boolean;
   isLooseEnabled: boolean;
   builtIns: false | "entry" | "usage";
-  modules: false | "amd" | "umd" | "systemjs" | "commonjs";
+  modules: "false" | "amd" | "umd" | "systemjs" | "commonjs";
   corejs: string | false;
   forceAllTransforms: boolean;
   shippedProposals: boolean;

From a4798ed44e3b9d857ab2d60703f7e5e989abbe75 Mon Sep 17 00:00:00 2001
From: liuxingbaoyu <30521560+liuxingbaoyu@users.noreply.github.com>
Date: Fri, 27 Sep 2024 06:40:14 +0800
Subject: [PATCH 2/2] fix

---
 js/repl/PluginConfig.ts | 4 ++--
 js/repl/ReplOptions.tsx | 2 +-
 js/repl/types.ts        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/repl/PluginConfig.ts b/js/repl/PluginConfig.ts
index c18a56c10e..940951d048 100644
--- a/js/repl/PluginConfig.ts
+++ b/js/repl/PluginConfig.ts
@@ -66,7 +66,7 @@ const envPresetDefaults = {
     default: "3.21",
   },
   modules: {
-    default: "false",
+    default: false,
   },
 } as const;
 
@@ -109,7 +109,7 @@ const replDefaults: ReplState = {
     compiledSize: 0,
     rawSize: 0,
   },
-  modules: "false",
+  modules: false,
   presets: "react,stage-2,env",
   prettier: false,
   showSidebar: true,
diff --git a/js/repl/ReplOptions.tsx b/js/repl/ReplOptions.tsx
index 5c47c19f6d..dd05ae50b6 100644
--- a/js/repl/ReplOptions.tsx
+++ b/js/repl/ReplOptions.tsx
@@ -635,7 +635,7 @@ class ExpandedContainer extends Component<Props, State> {
                   Modules
                 </LinkToDocs>
                 <select
-                  value={envConfig.modules}
+                  value={envConfig.modules + ""}
                   className={styles.envPresetSelect}
                   onChange={this._onEnvPresetSettingChange("modules")}
                   disabled={!envConfig.isEnvPresetEnabled}
diff --git a/js/repl/types.ts b/js/repl/types.ts
index 404d036cf2..1f18be6ed8 100644
--- a/js/repl/types.ts
+++ b/js/repl/types.ts
@@ -32,7 +32,7 @@ export type EnvConfig = {
   isSpecEnabled: boolean;
   isLooseEnabled: boolean;
   builtIns: false | "entry" | "usage";
-  modules: "false" | "amd" | "umd" | "systemjs" | "commonjs";
+  modules: false | "amd" | "umd" | "systemjs" | "commonjs";
   corejs: string | false;
   forceAllTransforms: boolean;
   shippedProposals: boolean;