[Refactor] reduce egregious use of array spread, in favor of [].concat idiom

Author: ljharb

__tests__/src/rules/no-static-element-interactions-test.js

@@ -348,8 +348,8 @@ const neverValid = [
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
 ruleTester.run(`${ruleName}:recommended`, rule, {
-  valid: [
-    ...alwaysValid,
+  valid: [].concat(
+    alwaysValid,
     // All the possible handlers
     { code: '<div onCopy={() => {}} />;' },
     { code: '<div onCut={() => {}} />;' },
@@ -417,22 +417,22 @@ ruleTester.run(`${ruleName}:recommended`, rule, {
     // Expressions should pass in recommended mode
     { code: '<div role={ROLE_BUTTON} onClick={() => {}} />;' },
     { code: '<div  {...this.props} role={this.props.role} onKeyPress={e => this.handleKeyPress(e)}>{this.props.children}</div>' },
-  ]
+  )
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
-  invalid: [
-    ...neverValid,
-  ]
+  invalid: [].concat(
+    neverValid,
+  )
     .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
 });
 
 ruleTester.run(`${ruleName}:strict`, rule, {
-  valid: [
-    ...alwaysValid,
-  ].map(parserOptionsMapper),
-  invalid: [
-    ...neverValid,
+  valid: [].concat(
+    alwaysValid,
+  ).map(parserOptionsMapper),
+  invalid: [].concat(
+    neverValid,
     // All the possible handlers
     { code: '<div onContextMenu={() => {}} />;', errors: [expectedError] },
     { code: '<div onDblClick={() => {}} />;', errors: [expectedError] },
@@ -453,5 +453,5 @@ ruleTester.run(`${ruleName}:strict`, rule, {
     // Expressions should fail in strict mode
     { code: '<div role={ROLE_BUTTON} onClick={() => {}} />;', errors: [expectedError] },
     { code: '<div  {...this.props} role={this.props.role} onKeyPress={e => this.handleKeyPress(e)}>{this.props.children}</div>', errors: [expectedError] },
-  ].map(parserOptionsMapper),
+  ).map(parserOptionsMapper),
 });

src/rules/alt-text.js

@@ -212,15 +212,15 @@ export default {
         (components, customComponentsForElement) => components.concat(customComponentsForElement || []),
         [],
       );
-    const typesToValidate = new Set([]
-      .concat(customComponents, ...elementOptions)
-      .map((type) => {
-        if (type === 'input[type="image"]') { return 'input'; }
-        return type;
-      }));
+    const typesToValidate = new Set(
+      [].concat(
+        customComponents,
+        elementOptions,
+      ).map((type) => (type === 'input[type="image"]' ? 'input' : type)),
+    );
 
     return {
-      JSXOpeningElement: (node) => {
+      JSXOpeningElement(node) {
         const nodeType = elementType(node);
         if (!typesToValidate.has(nodeType)) { return; }
 

src/rules/aria-unsupported-elements.js

@@ -44,7 +44,7 @@ export default {
         return;
       }
 
-      const invalidAttributes = [...aria.keys()].concat('role');
+      const invalidAttributes = [...aria.keys(), 'role'];
 
       node.attributes.forEach((prop) => {
         if (prop.type === 'JSXSpreadAttribute') {

src/rules/autocomplete-valid.js

@@ -27,7 +27,7 @@ export default {
     JSXOpeningElement: (node) => {
       const options = context.options[0] || {};
       const { inputComponents = [] } = options;
-      const inputTypes = ['input', ...inputComponents];
+      const inputTypes = ['input'].concat(inputComponents);
 
       const elType = elementType(node);
       const autocomplete = getLiteralPropValue(getProp(node.attributes, 'autocomplete'));

src/rules/control-has-associated-label.js

@@ -51,7 +51,7 @@ export default ({
       ignoreRoles = [],
     } = options;
 
-    const newIgnoreElements = new Set([...ignoreElements, ...ignoreList]);
+    const newIgnoreElements = new Set([].concat(ignoreElements, ignoreList));
 
     const rule = (node: JSXElement): void => {
       const tag = elementType(node.openingElement);

src/rules/interactive-supports-focus.js

@@ -42,10 +42,10 @@ const schema = generateObjSchema({
 });
 const domElements = [...dom.keys()];
 
-const interactiveProps = [
-  ...eventHandlersByType.mouse,
-  ...eventHandlersByType.keyboard,
-];
+const interactiveProps = [].concat(
+  eventHandlersByType.mouse,
+  eventHandlersByType.keyboard,
+);
 
 export default ({
   meta: {

src/rules/label-has-for.js

@@ -28,7 +28,7 @@ const schema = {
 };
 // Breadth-first search, assuming that HTML for forms is shallow.
 function validateNesting(node) {
-  let queue = [...node.parent.children];
+  let queue = node.parent.children.slice();
   let child;
   let opener;
   while (queue.length) {

src/rules/no-noninteractive-element-interactions.js

@@ -32,12 +32,12 @@ import isPresentationRole from '../util/isPresentationRole';
 const errorMessage = 'Non-interactive elements should not be assigned mouse or keyboard event listeners.';
 
 const domElements = [...dom.keys()];
-const defaultInteractiveProps = [
-  ...eventHandlersByType.focus,
-  ...eventHandlersByType.image,
-  ...eventHandlersByType.keyboard,
-  ...eventHandlersByType.mouse,
-];
+const defaultInteractiveProps = [].concat(
+  eventHandlersByType.focus,
+  eventHandlersByType.image,
+  eventHandlersByType.keyboard,
+  eventHandlersByType.mouse,
+);
 const schema = generateObjSchema({
   handlers: arraySchema,
 });

src/rules/no-static-element-interactions.js

@@ -32,11 +32,11 @@ import isPresentationRole from '../util/isPresentationRole';
 const errorMessage = 'Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.';
 
 const domElements = [...dom.keys()];
-const defaultInteractiveProps = [
-  ...eventHandlersByType.focus,
-  ...eventHandlersByType.keyboard,
-  ...eventHandlersByType.mouse,
-];
+const defaultInteractiveProps = [].concat(
+  eventHandlersByType.focus,
+  eventHandlersByType.keyboard,
+  eventHandlersByType.mouse,
+);
 const schema = generateObjSchema({
   handlers: arraySchema,
 });

src/util/mayHaveAccessibleLabel.js

@@ -16,12 +16,12 @@ function hasLabellingProp(
   openingElement: JSXOpeningElement,
   additionalLabellingProps?: Array<string> = [],
 ) {
-  const labellingProps = [
+  const labellingProps = [].concat(
     'alt', // Assume alt is used correctly on an image
     'aria-label',
     'aria-labelledby',
-    ...additionalLabellingProps,
-  ];
+    additionalLabellingProps,
+  );
   return openingElement.attributes.some((attribute): boolean => {
     // We must assume that a spread value contains a labelling prop.
     if (attribute.type !== 'JSXAttribute') {