fix(no-wildcard-imports): use local name when changing imports (#234)

* fix(no-wildcard-imports): use local name when changing imports * chore: remove unused sourceCode * chore: add changeset * chore: fix imports for hooks * chore: add fix for when we insert multiple imports * fix: move SelectPanel import to deprecated * chore: add to stable * test: update test * test: update expected output
primer · Sep 24, 2024 · 9a58afb · 9a58afb
1 parent e613e00
commit 9a58afb
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/.changeset/shy-news-care.md b/.changeset/shy-news-care.md
@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': patch
+---
+
+Update no-wildcard-imports rule to use local name for updated imports
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/rules/__tests__/no-wildcard-imports.test.js b/src/rules/__tests__/no-wildcard-imports.test.js
@@ -71,22 +71,22 @@ ruleTester.run('no-wildcard-imports', rule, {
 
     // Test default import
     {
-      code: `import useIsomorphicLayoutEffect from '@primer/react/lib-esm/useIsomorphicLayoutEffect'`,
+      code: `import useIsomorphicLayoutEffect from '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect'`,
       output: `import {useIsomorphicLayoutEffect} from '@primer/react'`,
       errors: [
         {
           messageId: 'wildcardMigration',
           data: {
-            wildcardEntrypoint: '@primer/react/lib-esm/useIsomorphicLayoutEffect',
+            wildcardEntrypoint: '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
           },
         },
       ],
     },
 
     // Test multiple wildcard imports into single entrypoint
     {
-      code: `import useResizeObserver from '@primer/react/lib-esm/hooks/useResizeObserver'
-    import useIsomorphicLayoutEffect from '@primer/react/lib-esm/useIsomorphicLayoutEffect'`,
+      code: `import {useResizeObserver} from '@primer/react/lib-esm/hooks/useResizeObserver'
+    import useIsomorphicLayoutEffect from '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect'`,
       output: `import {useResizeObserver} from '@primer/react'
     import {useIsomorphicLayoutEffect} from '@primer/react'`,
       errors: [
@@ -99,7 +99,21 @@ ruleTester.run('no-wildcard-imports', rule, {
         {
           messageId: 'wildcardMigration',
           data: {
-            wildcardEntrypoint: '@primer/react/lib-esm/useIsomorphicLayoutEffect',
+            wildcardEntrypoint: '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
+          },
+        },
+      ],
+    },
+
+    // Test renamed wildcard imports
+    {
+      code: `import type {ItemProps} from '@primer/react/lib-esm/deprecated/ActionList/Item'`,
+      output: `import type {ActionListItemProps as ItemProps} from '@primer/react/deprecated'`,
+      errors: [
+        {
+          messageId: 'wildcardMigration',
+          data: {
+            wildcardEntrypoint: '@primer/react/lib-esm/deprecated/ActionList/Item',
           },
         },
       ],
@@ -154,7 +168,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import {SelectPanel} from '@primer/react/lib-esm/SelectPanel/SelectPanel'`,
-      output: `import {SelectPanel} from '@primer/react/experimental'`,
+      output: `import {SelectPanel} from '@primer/react'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -166,7 +180,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import type {SelectPanelProps} from '@primer/react/lib-esm/SelectPanel/SelectPanel'`,
-      output: `import type {SelectPanelProps} from '@primer/react/experimental'`,
+      output: `import type {SelectPanelProps} from '@primer/react'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -226,7 +240,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import type {ItemProps} from '@primer/react/lib-esm/deprecated/ActionList'`,
-      output: `import type {ActionListItemProps} from '@primer/react/deprecated'`,
+      output: `import type {ActionListItemProps as ItemProps} from '@primer/react/deprecated'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -238,7 +252,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import type {GroupedListProps} from '@primer/react/lib-esm/deprecated/ActionList/List'`,
-      output: `import type {ActionListGroupedListProps} from '@primer/react/deprecated'`,
+      output: `import type {ActionListGroupedListProps as GroupedListProps} from '@primer/react/deprecated'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -250,7 +264,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import {ItemInput} from '@primer/react/lib-esm/deprecated/ActionList/List'`,
-      output: `import {ActionListItemInput} from '@primer/react/deprecated'`,
+      output: `import {ActionListItemInput as ItemInput} from '@primer/react/deprecated'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -262,7 +276,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
     },
     {
       code: `import type {ItemProps} from '@primer/react/lib-esm/deprecated/ActionList/Item'`,
-      output: `import type {ActionListItemProps} from '@primer/react/deprecated'`,
+      output: `import type {ActionListItemProps as ItemProps} from '@primer/react/deprecated'`,
       errors: [
         {
           messageId: 'wildcardMigration',
@@ -277,21 +291,21 @@ import type {ButtonBaseProps} from '@primer/react'`,
 
     // @primer/react/lib-esm/useIsomorphicLayoutEffect
     {
-      code: `import useIsomorphicLayoutEffect from '@primer/react/lib-esm/useIsomorphicLayoutEffect'`,
+      code: `import useIsomorphicLayoutEffect from '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect'`,
       output: `import {useIsomorphicLayoutEffect} from '@primer/react'`,
       errors: [
         {
           messageId: 'wildcardMigration',
           data: {
-            wildcardEntrypoint: '@primer/react/lib-esm/useIsomorphicLayoutEffect',
+            wildcardEntrypoint: '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
           },
         },
       ],
     },
 
     // @primer/react/lib-esm/hooks/useResizeObserver
     {
-      code: `import useResizeObserver from '@primer/react/lib-esm/hooks/useResizeObserver'`,
+      code: `import {useResizeObserver} from '@primer/react/lib-esm/hooks/useResizeObserver'`,
       output: `import {useResizeObserver} from '@primer/react'`,
       errors: [
         {
@@ -305,7 +319,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
 
     // @primer/react/lib-esm/hooks/useProvidedRefOrCreate
     {
-      code: `import useProvidedRefOrCreate from '@primer/react/lib-esm/hooks/useProvidedRefOrCreate'`,
+      code: `import {useProvidedRefOrCreate} from '@primer/react/lib-esm/hooks/useProvidedRefOrCreate'`,
       output: `import {useProvidedRefOrCreate} from '@primer/react'`,
       errors: [
         {
@@ -319,7 +333,7 @@ import type {ButtonBaseProps} from '@primer/react'`,
 
     // @primer/react/lib-esm/hooks/useResponsiveValue
     {
-      code: `import useResponsiveValue from '@primer/react/lib-esm/hooks/useResponsiveValue'`,
+      code: `import {useResponsiveValue} from '@primer/react/lib-esm/hooks/useResponsiveValue'`,
       output: `import {useResponsiveValue} from '@primer/react'`,
       errors: [
         {

diff --git a/src/rules/no-wildcard-imports.js b/src/rules/no-wildcard-imports.js
@@ -35,19 +35,24 @@ const wildcardImports = new Map([
         name: 'Dialog',
         from: '@primer/react/experimental',
       },
+      {
+        name: 'DialogHeaderProps',
+        from: '@primer/react/experimental',
+        type: 'type',
+      },
     ],
   ],
   [
     '@primer/react/lib-esm/SelectPanel/SelectPanel',
     [
       {
         name: 'SelectPanel',
-        from: '@primer/react/experimental',
+        from: '@primer/react',
       },
       {
         type: 'type',
         name: 'SelectPanelProps',
-        from: '@primer/react/experimental',
+        from: '@primer/react',
       },
     ],
   ],
@@ -132,7 +137,7 @@ const wildcardImports = new Map([
 
   // Hooks
   [
-    '@primer/react/lib-esm/useIsomorphicLayoutEffect',
+    '@primer/react/lib-esm/utils/useIsomorphicLayoutEffect',
     [
       {
         name: 'default',
@@ -145,29 +150,26 @@ const wildcardImports = new Map([
     '@primer/react/lib-esm/hooks/useResizeObserver',
     [
       {
-        name: 'default',
+        name: 'useResizeObserver',
         from: '@primer/react',
-        as: 'useResizeObserver',
       },
     ],
   ],
   [
     '@primer/react/lib-esm/hooks/useProvidedRefOrCreate',
     [
       {
-        name: 'default',
+        name: 'useProvidedRefOrCreate',
         from: '@primer/react',
-        as: 'useProvidedRefOrCreate',
       },
     ],
   ],
   [
     '@primer/react/lib-esm/hooks/useResponsiveValue',
     [
       {
-        name: 'default',
+        name: 'useResponsiveValue',
         from: '@primer/react',
-        as: 'useResponsiveValue',
       },
     ],
   ],
@@ -282,7 +284,7 @@ module.exports = {
           }
 
           if (migration.as) {
-            changes.get(migration.from).push([migration.as, migration.as, migration.type])
+            changes.get(migration.from).push([migration.as, specifier.local.name, migration.type])
           } else {
             changes.get(migration.from).push([migration.name, specifier.local.name, migration.type])
           }
@@ -357,7 +359,7 @@ module.exports = {
                   }
                   return imported
                 })
-                yield fixer.insertTextAfter(node, `import type {${specifiers.join(', ')}} from '${entrypoint}'`)
+                yield fixer.insertTextAfter(node, `\nimport type {${specifiers.join(', ')}} from '${entrypoint}'`)
               }
             }
           },