fix: Add default options for other external official plugins (#3117)

Author: JLHwung

website/src/components/repl/Repl.tsx

@@ -32,10 +32,12 @@ import {
   persistedStateToPresetsOptions,
   persistedStateToShippedProposalsState,
   persistedStateToExternalPluginsState,
+  provideDefaultOptionsForExternalPlugins,
 } from "./replUtils";
 import WorkerApi from "./WorkerApi";
 import scopedEval from "./scopedEval";
 import { media } from "./styles";
+import { toCamelCase, hasOwnProperty } from "./Utils";
 
 import type {
   BabelPresets,
@@ -83,53 +85,6 @@ type State = {
 
 const DEBOUNCE_DELAY = 500;
 
-function toCamelCase(str) {
-  return str
-    .replace(/-/g, " ")
-    .replace(/\//g, "_")
-    .replace(/@/g, "_")
-    .replace(/\s(.)/g, function ($1) {
-      return $1.toUpperCase();
-    })
-    .replace(/\s/g, "")
-    .replace(/^(.)/, function ($1) {
-      return $1.toLowerCase();
-    });
-}
-
-function hasOwnProperty(obj, string) {
-  return Object.prototype.hasOwnProperty.call(obj, string);
-}
-
-function provideDefaultOptionsForExternalPlugins(pluginName, babelVersion) {
-  switch (pluginName) {
-    case "@babel/plugin-proposal-decorators": {
-      if (compareVersions(babelVersion, "7.24.0") >= 0) {
-        return { version: "2023-11" };
-      } else if (compareVersions(babelVersion, "7.22.0") >= 0) {
-        return { version: "2023-05" };
-      } else if (compareVersions(babelVersion, "7.21.0") >= 0) {
-        return { version: "2023-01" };
-      } else if (compareVersions(babelVersion, "7.19.0") >= 0) {
-        return { version: "2022-03" };
-      } else if (compareVersions(babelVersion, "7.17.0") >= 0) {
-        return { version: "2021-12" };
-      } else if (compareVersions(babelVersion, "7.0.0") >= 0) {
-        return { version: "2018-09", decoratorsBeforeExport: true };
-      }
-    }
-    case "@babel/plugin-proposal-pipeline-operator": {
-      if (compareVersions(babelVersion, "7.15.0") >= 0) {
-        return { proposal: "hack", topicToken: "%" };
-      } else {
-        return { proposal: "minimal" };
-      }
-    }
-    default:
-      return {};
-  }
-}
-
 class Repl extends React.Component<Props, State> {
   _numLoadingPlugins = 0;
   _workerApi = new WorkerApi();

website/src/components/repl/Utils.ts

@@ -53,3 +53,21 @@ export function compareVersions(a: string, b: string): 1 | 0 | -1 {
   }
   return 0;
 }
+
+export function toCamelCase(str) {
+  return str
+    .replace(/-/g, " ")
+    .replace(/\//g, "_")
+    .replace(/@/g, "_")
+    .replace(/\s(.)/g, function ($1) {
+      return $1.toUpperCase();
+    })
+    .replace(/\s/g, "")
+    .replace(/^(.)/, function ($1) {
+      return $1.toLowerCase();
+    });
+}
+
+export function hasOwnProperty(obj, string) {
+  return Object.prototype.hasOwnProperty.call(obj, string);
+}

website/src/components/repl/replUtils.ts

@@ -1,6 +1,7 @@
 import { envPresetDefaults, replDefaults } from "./PluginConfig";
 import StorageService from "./StorageService";
 import UriUtils from "./UriUtils";
+import { compareVersions } from "./Utils";
 
 import type {
   BabelState,
@@ -219,3 +220,38 @@ export const persistedStateToExternalPluginsState = (
     return { name, version };
   });
 };
+
+export function provideDefaultOptionsForExternalPlugins(pluginName, babelVersion) {
+  switch (pluginName) {
+    case "@babel/plugin-proposal-decorators": {
+      if (compareVersions(babelVersion, "7.24.0") >= 0) {
+        return { version: "2023-11" };
+      } else if (compareVersions(babelVersion, "7.22.0") >= 0) {
+        return { version: "2023-05" };
+      } else if (compareVersions(babelVersion, "7.21.0") >= 0) {
+        return { version: "2023-01" };
+      } else if (compareVersions(babelVersion, "7.19.0") >= 0) {
+        return { version: "2022-03" };
+      } else if (compareVersions(babelVersion, "7.17.0") >= 0) {
+        return { version: "2021-12" };
+      } else if (compareVersions(babelVersion, "7.0.0") >= 0) {
+        return { version: "2018-09", decoratorsBeforeExport: true };
+      }
+    }
+    case "@babel/plugin-proposal-discard-binding": {
+      return { syntaxType: "void" };
+    }
+    case "@babel/plugin-proposal-optional-chaining-assign": {
+      return { version: "2023-07" };
+    }
+    case "@babel/plugin-proposal-pipeline-operator": {
+      if (compareVersions(babelVersion, "7.15.0") >= 0) {
+        return { proposal: "hack", topicToken: "%" };
+      } else {
+        return { proposal: "minimal" };
+      }
+    }
+    default:
+      return {};
+  }
+}