fix(deps): update dependency @freecodecamp/loop-protect to v3 (#46801)

* fix(deps): update dependency @freecodecamp/loop-protect to v3

* refactor: preset definition to getBabelOptions

* refactor: pass in presets

* refactor: simplify getBabelOptions

* fix: use getBabelOptions

* refactor: use simpler names

* chore: update comment

* fix: destructure properly

* fix: remove default object

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/package.json

@@ -44,7 +44,7 @@
     "@fortawesome/free-solid-svg-icons": "6.1.2",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@freecodecamp/curriculum-helpers": "1.0.5",
-    "@freecodecamp/loop-protect": "2.2.1",
+    "@freecodecamp/loop-protect": "3.0.0",
     "@freecodecamp/react-bootstrap": "0.32.3",
     "@freecodecamp/react-calendar-heatmap": "1.0.0",
     "@freecodecamp/strip-comments": "3.0.1",

client/src/templates/Challenges/rechallenge/transformers.js

@@ -38,11 +38,11 @@ function testLoopProtectCB(line) {
   );
 }
 
-// hold Babel, presets and options so we don't try to import them multiple times
+// hold Babel and presets so we don't try to import them multiple times
 
 let Babel;
 let presetEnv, presetReact;
-let babelOptionsJSBase, babelOptionsJS, babelOptionsJSX, babelOptionsJSPreview;
+let presetsJS, presetsJSX;
 
 async function loadBabel() {
   if (Babel) return;
@@ -69,17 +69,9 @@ async function loadPresetEnv() {
     );
   /* eslint-enable no-inline-comments */
 
-  babelOptionsJSBase = {
+  presetsJS = {
     presets: [presetEnv]
   };
-  babelOptionsJS = {
-    ...babelOptionsJSBase,
-    plugins: ['testLoopProtection']
-  };
-  babelOptionsJSPreview = {
-    ...babelOptionsJSBase,
-    plugins: ['loopProtection']
-  };
 }
 
 async function loadPresetReact() {
@@ -93,8 +85,7 @@ async function loadPresetReact() {
       /* webpackChunkName: "@babel/preset-env" */ '@babel/preset-env'
     );
   /* eslint-enable no-inline-comments */
-  babelOptionsJSX = {
-    plugins: ['loopProtection'],
+  presetsJSX = {
     presets: [presetEnv, presetReact]
   };
 }
@@ -132,14 +123,14 @@ function tryTransform(wrap = identity) {
   };
 }
 
-const babelTransformer = options => {
+const babelTransformer = loopProtectOptions => {
   return cond([
     [
       testJS,
       async code => {
         await loadBabel();
         await loadPresetEnv();
-        const babelOptions = getBabelOptions(options);
+        const babelOptions = getBabelOptions(presetsJS, loopProtectOptions);
         return partial(
           transformHeadTailAndContents,
           tryTransform(babelTransformCode(babelOptions))
@@ -151,10 +142,11 @@ const babelTransformer = options => {
       async code => {
         await loadBabel();
         await loadPresetReact();
+        const babelOptions = getBabelOptions(presetsJSX, loopProtectOptions);
         return flow(
           partial(
             transformHeadTailAndContents,
-            tryTransform(babelTransformCode(babelOptionsJSX))
+            tryTransform(babelTransformCode(babelOptions))
           ),
           partial(setExt, 'js')
         )(code);
@@ -164,16 +156,15 @@ const babelTransformer = options => {
   ]);
 };
 
-function getBabelOptions({ preview = false, protect = true }) {
-  let options = babelOptionsJSBase;
+function getBabelOptions(
+  presets,
+  { preview, protect } = { preview: false, protect: true }
+) {
   // we always protect the preview, since it evaluates as the user types and
   // they may briefly have infinite looping code accidentally
-  if (protect) {
-    options = preview ? babelOptionsJSPreview : babelOptionsJS;
-  } else {
-    options = preview ? babelOptionsJSPreview : options;
-  }
-  return options;
+  if (preview) return { ...presets, plugins: ['loopProtection'] };
+  if (protect) return { ...presets, plugins: ['testLoopProtection'] };
+  return presets;
 }
 
 const sassWorker = createWorker(sassCompile);
@@ -197,9 +188,9 @@ async function transformScript(documentElement) {
   await loadPresetEnv();
   const scriptTags = documentElement.querySelectorAll('script');
   scriptTags.forEach(script => {
-    script.innerHTML = tryTransform(babelTransformCode(babelOptionsJS))(
-      script.innerHTML
-    );
+    script.innerHTML = tryTransform(
+      babelTransformCode(getBabelOptions(presetsJS))
+    )(script.innerHTML);
   });
 }
 
@@ -307,9 +298,9 @@ const htmlTransformer = cond([
   [stubTrue, identity]
 ]);
 
-export const getTransformers = options => [
+export const getTransformers = loopProtectOptions => [
   replaceNBSP,
-  babelTransformer(options ? options : {}),
+  babelTransformer(loopProtectOptions),
   partial(compileHeadTail, ''),
   htmlTransformer
 ];

package-lock.json

@@ -448,7 +448,7 @@
         "@fortawesome/free-solid-svg-icons": "6.1.2",
         "@fortawesome/react-fontawesome": "0.2.0",
         "@freecodecamp/curriculum-helpers": "1.0.5",
-        "@freecodecamp/loop-protect": "2.2.1",
+        "@freecodecamp/loop-protect": "3.0.0",
         "@freecodecamp/react-bootstrap": "0.32.3",
         "@freecodecamp/react-calendar-heatmap": "1.0.0",
         "@freecodecamp/strip-comments": "3.0.1",
@@ -3406,7 +3406,9 @@
       "link": true
     },
     "node_modules/@freecodecamp/loop-protect": {
-      "version": "2.2.1"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@freecodecamp/loop-protect/-/loop-protect-3.0.0.tgz",
+      "integrity": "sha512-5zIULL5pm7Ylkk2dPq1f/4KJTAV5KQZEAFQg/qFj0t18EBSNO3fjn3HdfE1sPocXhXom3DVvZO3Rl2sqifMFYQ=="
     },
     "node_modules/@freecodecamp/loopback-component-passport": {
       "version": "1.2.0",
@@ -56322,7 +56324,7 @@
         "@fortawesome/free-solid-svg-icons": "6.1.2",
         "@fortawesome/react-fontawesome": "0.2.0",
         "@freecodecamp/curriculum-helpers": "1.0.5",
-        "@freecodecamp/loop-protect": "2.2.1",
+        "@freecodecamp/loop-protect": "3.0.0",
         "@freecodecamp/react-bootstrap": "0.32.3",
         "@freecodecamp/react-calendar-heatmap": "1.0.0",
         "@freecodecamp/strip-comments": "3.0.1",
@@ -56568,7 +56570,9 @@
       "version": "file:client/plugins/gatsby-remark-node-identity"
     },
     "@freecodecamp/loop-protect": {
-      "version": "2.2.1"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@freecodecamp/loop-protect/-/loop-protect-3.0.0.tgz",
+      "integrity": "sha512-5zIULL5pm7Ylkk2dPq1f/4KJTAV5KQZEAFQg/qFj0t18EBSNO3fjn3HdfE1sPocXhXom3DVvZO3Rl2sqifMFYQ=="
     },
     "@freecodecamp/loopback-component-passport": {
       "version": "1.2.0",