eslint-plugin-primer-react 8.3.0 → 8.4.0-rc.6ac270a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.3.0",
+  "version": "8.4.0-rc.6ac270a",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {

package/src/index.js

@@ -20,6 +20,7 @@ module.exports = {
     'enforce-css-module-identifier-casing': require('./rules/enforce-css-module-identifier-casing'),
     'enforce-css-module-default-import': require('./rules/enforce-css-module-default-import'),
     'use-styled-react-import': require('./rules/use-styled-react-import'),
+    'spread-props-first': require('./rules/spread-props-first'),
   },
   configs: {
     recommended: require('./configs/recommended'),

package/src/rules/__tests__/spread-props-first.test.js

@@ -0,0 +1,123 @@
+const rule = require('../spread-props-first')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('spread-props-first', rule, {
+  valid: [
+    // Spread props before named props
+    `<Example {...rest} className="foo" />`,
+    // Multiple spreads before named props
+    `<Example {...rest} {...other} className="foo" id="bar" />`,
+    // Only spread props
+    `<Example {...rest} />`,
+    // Only named props
+    `<Example className="foo" id="bar" />`,
+    // Empty element
+    `<Example />`,
+    // Spread first, then named props
+    `<Example {...rest} className="foo" onClick={handleClick} />`,
+    // Multiple spreads at the beginning
+    `<Example {...props1} {...props2} {...props3} className="foo" />`,
+  ],
+  invalid: [
+    // Named prop before spread
+    {
+      code: `<Example className="foo" {...rest} />`,
+      output: `<Example {...rest} className="foo" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'className'},
+        },
+      ],
+    },
+    // Multiple named props before spread
+    {
+      code: `<Example className="foo" id="bar" {...rest} />`,
+      output: `<Example {...rest} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+    // Named prop with expression before spread
+    {
+      code: `<Example onClick={handleClick} {...rest} />`,
+      output: `<Example {...rest} onClick={handleClick} />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'onClick'},
+        },
+      ],
+    },
+    // Mixed order with multiple spreads
+    {
+      code: `<Example className="foo" {...rest} id="bar" {...other} />`,
+      output: `<Example {...rest} {...other} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+    // Named prop before multiple spreads
+    {
+      code: `<Example className="foo" {...rest} {...other} />`,
+      output: `<Example {...rest} {...other} className="foo" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'className'},
+        },
+      ],
+    },
+    // Complex example with many props
+    {
+      code: `<Example className="foo" id="bar" onClick={handleClick} {...rest} disabled />`,
+      output: `<Example {...rest} className="foo" id="bar" onClick={handleClick} disabled />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'disabled'},
+        },
+      ],
+    },
+    // Boolean prop before spread
+    {
+      code: `<Example disabled {...rest} />`,
+      output: `<Example {...rest} disabled />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'disabled'},
+        },
+      ],
+    },
+    // Spread in the middle
+    {
+      code: `<Example className="foo" {...rest} id="bar" />`,
+      output: `<Example {...rest} className="foo" id="bar" />`,
+      errors: [
+        {
+          messageId: 'spreadPropsFirst',
+          data: {spreadProp: '{...rest}', namedProp: 'id'},
+        },
+      ],
+    },
+  ],
+})

package/src/rules/spread-props-first.js

@@ -0,0 +1,81 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      spreadPropsFirst:
+        'Spread props should come before other props to avoid unintentional overrides. Move {{spreadProp}} before {{namedProp}}.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const attributes = node.attributes
+
+        // Track if we've seen a named prop before a spread
+        let lastNamedPropIndex = -1
+        let firstSpreadAfterNamedPropIndex = -1
+
+        for (let i = 0; i < attributes.length; i++) {
+          const attr = attributes[i]
+
+          if (attr.type === 'JSXAttribute') {
+            // This is a named prop
+            lastNamedPropIndex = i
+          } else if (attr.type === 'JSXSpreadAttribute' && lastNamedPropIndex !== -1) {
+            // This is a spread prop that comes after a named prop
+            if (firstSpreadAfterNamedPropIndex === -1) {
+              firstSpreadAfterNamedPropIndex = i
+            }
+          }
+        }
+
+        // If we found a spread after a named prop, report it
+        if (firstSpreadAfterNamedPropIndex !== -1) {
+          const sourceCode = context.sourceCode
+          const spreadAttr = attributes[firstSpreadAfterNamedPropIndex]
+          const namedAttr = attributes[lastNamedPropIndex]
+
+          context.report({
+            node: spreadAttr,
+            messageId: 'spreadPropsFirst',
+            data: {
+              spreadProp: sourceCode.getText(spreadAttr),
+              namedProp: namedAttr.name.name,
+            },
+            fix(fixer) {
+              // Collect all spreads and named props
+              const spreads = []
+              const namedProps = []
+
+              for (const attr of attributes) {
+                if (attr.type === 'JSXSpreadAttribute') {
+                  spreads.push(attr)
+                } else if (attr.type === 'JSXAttribute') {
+                  namedProps.push(attr)
+                }
+              }
+
+              // Generate the reordered attributes text
+              const reorderedAttrs = [...spreads, ...namedProps]
+              const fixes = []
+
+              // Replace each attribute with its new position
+              for (let i = 0; i < attributes.length; i++) {
+                const newAttr = reorderedAttrs[i]
+                const oldAttr = attributes[i]
+
+                if (newAttr !== oldAttr) {
+                  fixes.push(fixer.replaceText(oldAttr, sourceCode.getText(newAttr)))
+                }
+              }
+
+              return fixes
+            },
+          })
+        }
+      },
+    }
+  },
+}