@backstage/eslint-plugin 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @backstage/eslint-plugin
 
+## 0.1.7
+
+### Patch Changes
+
+- 9ef572d: fix lint rule fixer for more than one `Component + Prop`
+- 3a7eee7: eslint autofix for mui ThemeProvider
+- d55828d: add fixer logic for import aliases
+
+## 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",
   "description": "Backstage ESLint plugin",
-  "version": "0.1.6",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,8 @@
     "minimatch": "^9.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.0",
+    "@backstage/cli": "^0.26.3",
+    "@types/estree": "^1.0.5",
     "eslint": "^8.33.0"
   }
 }

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

@@ -16,15 +16,75 @@
 
 // @ts-check
 
+/**
+ * @typedef {object} FixerValues
+ * @property {string} value
+ * @property {string} [alias]
+ * @property {string} [componentValue]
+ * @property {string} [componentAlias]
+ * @property {boolean} emitComponent
+ * @property {boolean} emitProp
+ */
+
 const KNOWN_STYLES = [
+  // TODO: add exports from colorManipulator and transitions
+  'createTheme',
+  'unstable_createMuiStrictModeTheme',
+  'createMuiTheme',
+  'ThemeOptions',
+  'Theme',
+  'Direction',
+  'PaletteColorOptions',
+  'SimplePaletteColorOptions',
+  'createStyles',
+  'TypographyStyle',
+  'TypographyVariant',
   'makeStyles',
+  'responsiveFontSizes',
+  'ComponentsPropsList',
+  'useTheme',
   'withStyles',
-  'createStyles',
+  'WithStyles',
+  'StyleRules',
+  'StyleRulesCallback',
+  'StyledComponentProps',
+  'withTheme',
+  'WithTheme',
   'styled',
-  'useTheme',
-  'Theme',
+  'ComponentCreator',
+  'StyledProps',
+  'createGenerateClassName',
+  'jssPreset',
+  'ServerStyleSheets',
+  'StylesProvider',
+  'MuiThemeProvider',
+  'ThemeProvider',
+  'ThemeProviderProps',
 ];
 
+/**
+ * filter function to keep only ImportSpecifier nodes
+ * @param {import('estree').ImportSpecifier | import('estree').ImportDefaultSpecifier| import('estree').ImportNamespaceSpecifier} specifier
+ * @returns {specifier is import('estree').ImportSpecifier}
+ */
+function importSpecifiersFilter(specifier) {
+  return specifier.type === 'ImportSpecifier';
+}
+
+/**
+ * Gets the value of the named import depending on if it has an alias or not
+ * @param {FixerValues} values
+ * @returns {string}
+ * @example
+ * `import { ${getNamedImportValue({ value: 'SvgIcon', alias: 'Icon' })} } from 'x'` // import { Icon as SvgIcon } from 'x'
+ * `import { ${getNamedImportValue({ value: 'SvgIcon' })} } from 'x'` // import { SvgIcon } from 'x'
+ */
+function getNamedImportValue(values) {
+  return values.alias
+    ? `${values.value} as ${values.alias}`
+    : `${values.value}`;
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -68,77 +128,83 @@ module.exports = {
           const replacements = [];
           const styles = [];
 
-          const specifiers = node.specifiers.filter(
-            s => s.type === 'ImportSpecifier',
-          );
+          const specifiers = node.specifiers.filter(importSpecifiersFilter);
+
+          const specifiersMap = specifiers.map(
+            /**
+             * transform ImportSpecifier to FixerValues to have a simpler object to work with
+             * @returns {FixerValues}
+             */
+            s => {
+              const value = s.imported.name;
+              const alias = s.local.name === value ? undefined : s.local.name;
 
-          const specifiersMap = specifiers.map(s => {
-            const propsMatch = /^([A-Z]\w+)Props$/.exec(s.local.name);
+              const propsMatch = /^([A-Z]\w+)Props$/.exec(value);
 
-            return {
-              emitComponent: !(propsMatch !== null),
-              emitProp: propsMatch !== null,
-              value: s.local.name,
-              propValue: propsMatch ? propsMatch[1] : undefined,
-            };
-          });
+              const emitProp = propsMatch !== null;
+              const emitComponent = !emitProp;
+              const emitComponentAndProp =
+                emitProp &&
+                specifiers.find(s => s.imported.name === propsMatch[1])?.local
+                  .name;
+
+              return {
+                emitComponent: emitComponent || Boolean(emitComponentAndProp),
+                emitProp,
+                value,
+                componentValue: propsMatch ? propsMatch[1] : undefined,
+                componentAlias: emitComponentAndProp
+                  ? emitComponentAndProp
+                  : undefined,
+                alias,
+              };
+            },
+          );
+
+          // 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(getNamedImportValue(specifier));
               } else {
-                const replacement = `import ${specifier.local.name} from '${node.source.value}/${specifier.local.name}';`;
+                const replacement = `import ${
+                  specifier.alias ?? 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 { ${getNamedImportValue(
+                specifier,
+              )} } from '@material-ui/core/${specifier.componentValue}';`;
+              replacements.push(replacement);
+            }
+
+            // Component and Prop
+            if (specifier.emitComponent && specifier.emitProp) {
+              replacements.push(
+                `import ${
+                  specifier.componentAlias ?? specifier.componentValue
+                }, { ${getNamedImportValue(
+                  specifier,
+                )} } from '@material-ui/core/${specifier.componentValue}';`,
+              );
+            }
           }
 
+          // if we imports that should be moved to styles we added them here
           if (styles.length > 0) {
             const stylesReplacement = `import { ${styles.join(
               ', ',

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

@@ -35,6 +35,9 @@ ruleTester.run('path-imports-rule', rule, {
     {
       code: `import { styled, withStyles } from '@material-ui/core/styles';`,
     },
+    {
+      code: `import { WithStyles } from '@material-ui/core/styles';`,
+    },
     {
       code: `import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';`,
     },
@@ -57,6 +60,28 @@ 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 { WithStyles } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { WithStyles } 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 +90,9 @@ import Typography from '@material-ui/core/Typography';`,
                   DialogTitle,
                   Grid,
                   makeStyles,
+                  ThemeProvider,
+                  WithStyles,
+                  Tooltip as MaterialTooltip,
                 } from '@material-ui/core';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import Box from '@material-ui/core/Box';
@@ -72,7 +100,8 @@ 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 MaterialTooltip from '@material-ui/core/Tooltip';
+import { makeStyles, ThemeProvider, WithStyles } from '@material-ui/core/styles';`,
     },
     {
       code: `import { Box, Button, makeStyles } from '@material-ui/core';`,
@@ -103,5 +132,25 @@ import { styled, withStyles } from '@material-ui/core/styles';`,
       errors: [{ messageId: 'topLevelImport' }],
       output: `import { TabProps } from '@material-ui/core/Tab';`,
     },
+    {
+      code: `import { Tooltip as MaterialTooltip, } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import MaterialTooltip from '@material-ui/core/Tooltip';`,
+    },
+    {
+      code: `import { SvgIcon as Icon, SvgIconProps as IconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import Icon, { SvgIconProps as IconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { SvgIconProps as IconProps } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { SvgIconProps as IconProps } from '@material-ui/core/SvgIcon';`,
+    },
+    {
+      code: `import { styled as s } from '@material-ui/core';`,
+      errors: [{ messageId: 'topLevelImport' }],
+      output: `import { styled as s } from '@material-ui/core/styles';`,
+    },
   ],
 });