chore: replace forEach with for..of (#2251)

resolves #2247

Author: Barsnes

biome.jsonc

@@ -63,9 +63,6 @@
         "noNoninteractiveTabindex": "off",
         "useAriaPropsForRole": "off"
       },
-      "complexity": {
-        "noForEach": "off" // TODO: Enable this rule
-      },
       "correctness": {
         "useExhaustiveDependencies": "off"
       },

packages/cli/bin/designsystemet.ts

@@ -34,9 +34,9 @@ program
     const { glob, list } = opts;
 
     if (list) {
-      Object.keys(migrations).forEach((key) => {
+      for (const key of Object.keys(migrations)) {
         console.log(key);
-      });
+      }
     } else if (migrationKey) {
       const migration = migrations[migrationKey as keyof typeof migrations];
       if (!migration) {

packages/cli/src/migrations/codemods/css/plugins.ts

@@ -17,13 +17,13 @@ export const cssClassRename: PluginGenerator = (dictionary) => ({
 
     if (!selector) return;
 
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!selector.includes(from)) return;
 
       const newSelector = selector.replace(new RegExp(from, 'g'), to);
 
       rule.selector = newSelector;
-    });
+    }
   },
 });
 
@@ -34,23 +34,21 @@ export const cssVarRename: PluginGenerator = (dictionary) => ({
 
     const deleted = new Set<string>();
 
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!R.isEmpty(to)) {
-        switch (true) {
-          case R.includes(from, value):
-            to === '[delete]' && deleted.add(deleteMsg(decl, from));
-            decl.value = value.replace(from, to);
-            break;
-
-          case R.includes(from, prop):
-            if (decl.variable) {
-              to === '[delete]' && deleted.add(deleteMsg(decl, from));
-              decl.prop = prop.replace(from, to);
-              break;
-            }
+        if (R.includes(from, value)) {
+          if (to === '[delete]') {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.value = value.replace(from, to);
+        } else if (R.includes(from, prop) && decl.variable) {
+          if (to === '[delete]') {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.prop = prop.replace(from, to);
         }
       }
-    });
+    }
 
     if (deleted.size > 0) {
       Array.from(deleted).forEach(printDelete);

packages/cli/src/migrations/codemods/jsx/classname-prefix.ts

@@ -25,11 +25,11 @@ const replaceInLiteral = (node: string) => {
 };
 
 const replaceInTemplateLiteral = (node: TemplateElement[]) => {
-  node.forEach((element) => {
+  for (const element of node) {
     const value = element.value.raw;
-    if (typeof value !== 'string') return;
+    if (typeof value !== 'string') continue;
     element.value.raw = replaceInLiteral(value);
-  });
+  }
 };
 
 const processNode = (node: Node) => {
@@ -76,13 +76,13 @@ function replaceClassNamePrefix(file: FileInfo, api: API): string | undefined {
   const j = api.jscodeshift;
   const root = j(file.source);
 
-  root.find(j.JSXElement).forEach((path) => {
-    j(path)
-      .find(j.JSXAttribute, { name: { name: 'className' } })
-      .forEach((nodePath) => {
-        processNode(nodePath.value.value as Node);
-      });
-  });
+  for (const path of root.find(j.JSXElement).paths()) {
+    const nodes = j(path).find(j.JSXAttribute, { name: { name: 'className' } });
+
+    for (const nodePath of nodes.paths()) {
+      processNode(nodePath.value.value as Node);
+    }
+  }
 
   return root.toSource({
     quote: 'single',

packages/cli/src/tokens/utils/permutateThemes.ts

@@ -28,15 +28,15 @@ export function permutateThemes(themes: ThemeObject[], { separator = '-' } = {}
   }
   // Sort themes by groups
   const groups: Record<string, ThemeObject[]> = {};
-  themes.forEach((theme) => {
+  for (const theme of themes) {
     if (theme.group) {
       groups[theme.group] = [...(groups[theme.group] ?? []), theme];
     } else {
       throw new Error(
         `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`,
       );
     }
-  });
+  }
 
   if (Object.keys(groups).length <= 1) {
     return mapThemesToSetsObject(themes);

packages/react/src/components/form/Combobox/Combobox.tsx

@@ -268,9 +268,9 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
         inputRef.current?.focus();
       } else {
         /* clear newSelectedOptions */
-        Object.keys(newSelectedOptions).forEach((key) => {
+        for (const key of Object.keys(newSelectedOptions)) {
           delete newSelectedOptions[key];
-        });
+        }
         newSelectedOptions[prefix(option.value)] = option;
         setInputValue(option?.label || '');
         // move cursor to the end of the input

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx

@@ -72,13 +72,13 @@ const ComboboxInput = ({
     setActiveIndex(0);
 
     // check if input value is the same as a label, if so, select it
-    Object.values(options).forEach((option) => {
+    for (const option of Object.values(options)) {
       if (option.label.toLowerCase() === value.toLowerCase()) {
         /* if option is already selected, discard selecting it, since it would de-select */
-        if (selectedOptions[prefix(option.value)]) return;
-        handleSelectOption({ option: option });
+        if (selectedOptions[prefix(option.value)]) continue;
+        handleSelectOption({ option });
       }
-    });
+    }
   };
 
   const showClearButton =

packages/react/src/components/form/NativeSelect/NativeSelect.test.tsx

@@ -54,9 +54,9 @@ describe('NativeSelect', () => {
 
   it('Renders all options', () => {
     render();
-    options.forEach(({ label, value }) => {
+    for (const { label, value } of options) {
       expect(screen.getByRole('option', { name: label })).toHaveValue(value);
-    });
+    }
   });
 
   it('Lets the user select a value', async () => {