@backstage/eslint-plugin 0.1.6 → 0.1.7-next.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @backstage/eslint-plugin
 
+## 0.1.7-next.0
+
+### Patch Changes
+
+- 9ef572d: fix lint rule fixer for more than one `Component + Prop`
+- 3a7eee7: eslint autofix for mui ThemeProvider
+
 ## 0.1.6
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/eslint-plugin",
+  "version": "0.1.7-next.0",
   "description": "Backstage ESLint plugin",
-  "version": "0.1.6",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,7 @@
     "minimatch": "^9.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.0",
+    "@backstage/cli": "^0.26.3-next.1",
     "eslint": "^8.33.0"
   }
 }

package/rules/no-top-level-material-ui-4-imports.js

@@ -23,6 +23,7 @@ const KNOWN_STYLES = [
   'styled',
   'useTheme',
   'Theme',
+  'ThemeProvider',
 ];
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -73,70 +74,55 @@ module.exports = {
           );
 
           const specifiersMap = specifiers.map(s => {
-            const propsMatch = /^([A-Z]\w+)Props$/.exec(s.local.name);
+            const value = s.local.name;
+            const propsMatch = /^([A-Z]\w+)Props$/.exec(value);
+
+            const emitProp = propsMatch !== null;
+            const emitComponent = !emitProp;
+            const emitComponentAndProp =
+              emitProp && specifiers.some(s => s.local.name === propsMatch[1]);
 
             return {
-              emitComponent: !(propsMatch !== null),
-              emitProp: propsMatch !== null,
-              value: s.local.name,
-              propValue: propsMatch ? propsMatch[1] : undefined,
+              emitComponent: emitComponent || emitComponentAndProp,
+              emitProp,
+              value,
+              componentValue: propsMatch ? propsMatch[1] : undefined,
             };
           });
 
+          // Filter out duplicates where we have both component and component+prop
+          const filteredMap = specifiersMap.filter(
+            f => !specifiersMap.some(s => f.value === s.componentValue),
+          );
+
           // We have 3 cases:
           // 1 - Just Prop: import { TabProps } from '@material-ui/core';
           // 2 - Just Component: import { Box } from '@material-ui/core';
           // 3 - Component and Prop: import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-          const components = specifiersMap
-            .filter(f => {
-              return f.emitComponent;
-            })
-            .map(m => m.value);
-          const props = specifiersMap
-            .filter(f => {
-              return f.emitProp;
-            })
-            .map(m => m.value);
-
-          if (
-            specifiersMap.some(s => s.emitProp) &&
-            !specifiersMap.some(s => s.emitComponent)
-          ) {
-            // 1 - Just Prop
-            const propValue = specifiersMap
-              .filter(f => {
-                return f.emitProp;
-              })
-              .map(m => m.propValue);
-            replacements.push(
-              `import { ${props.join(', ')} } from '@material-ui/core/${
-                propValue[0]
-              }';`,
-            );
-          } else if (
-            !specifiersMap.some(s => s.emitProp) &&
-            specifiersMap.some(s => s.emitComponent)
-          ) {
-            // 2 - Just Component
-            for (const specifier of specifiers) {
-              if (KNOWN_STYLES.includes(specifier.local.name)) {
-                styles.push(specifier.local.name);
+          for (const specifier of filteredMap) {
+            // Just Component
+            if (specifier.emitComponent && !specifier.emitProp) {
+              if (KNOWN_STYLES.includes(specifier.value)) {
+                styles.push(specifier.value);
               } else {
-                const replacement = `import ${specifier.local.name} from '${node.source.value}/${specifier.local.name}';`;
+                const replacement = `import ${specifier.value} from '${node.source.value}/${specifier.value}';`;
                 replacements.push(replacement);
               }
             }
-          } else if (
-            specifiersMap.some(s => s.emitProp) &&
-            specifiersMap.some(s => s.emitComponent)
-          ) {
-            // 3 - Component and Prop
-            replacements.push(
-              `import ${components[0]}, { ${props.join(
-                ', ',
-              )} } from '@material-ui/core/${components[0]}';`,
-            );
+
+            // Just Prop
+            if (specifier.emitProp && !specifier.emitComponent) {
+              const replacement = `import { ${specifier.value} } from '@material-ui/core/${specifier.componentValue}';`;
+              replacements.push(replacement);
+            }
+
+            // Component and Prop
+            if (specifier.emitComponent && specifier.emitProp) {
+              replacements.push(
+                `import ${specifier.componentValue}, { ${specifier.value} } from '@material-ui/core/${specifier.componentValue}';`,
+              );
+            }
           }
 
           if (styles.length > 0) {

package/src/no-top-level-material-ui-4-imports.test.ts

@@ -57,6 +57,23 @@ import Typography from '@material-ui/core/Typography';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Box from '@material-ui/core/Box';`,
     },
+    {
+      code: `import { ThemeProvider } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { ThemeProvider } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { Grid, GridProps, Theme, makeStyles } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Grid, { GridProps } from '@material-ui/core/Grid';
+import { Theme, makeStyles } from '@material-ui/core/styles';`,
+    },
+    {
+      code: `import { Grid, GridProps, SvgIcon, SvgIconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Grid, { GridProps } from '@material-ui/core/Grid';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
+    },
     {
       code: `import {
                   Box,
@@ -65,6 +82,7 @@ import Typography from '@material-ui/core/Typography';`,
                   DialogTitle,
                   Grid,
                   makeStyles,
+                  ThemeProvider,
                 } from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Box from '@material-ui/core/Box';
@@ -72,7 +90,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';`,
+import { makeStyles, ThemeProvider } from '@material-ui/core/styles';`,
     },
     {
       code: `import { Box, Button, makeStyles } from '@material-ui/core';`,