From dcf312bc21ac08e9202e110f10572d4df47784b1 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 22 Aug 2024 18:26:04 -0500 Subject: [PATCH] Codemod: remove Section and Items imports if not used elsewhere in file (#6908) --- .../__snapshots__/actionmenu.test.ts.snap | 2 -- .../__snapshots__/breadcrumbs.test.ts.snap | 9 ----- .../__snapshots__/combobox.test.ts.snap | 10 ------ .../__snapshots__/imports.test.ts.snap | 36 ++++++++++++++++++- .../__tests__/__snapshots__/menu.test.ts.snap | 6 ---- .../multi-collection.test.ts.snap | 2 -- .../__snapshots__/picker.test.ts.snap | 7 ---- .../__tests__/__snapshots__/tabs.test.ts.snap | 3 -- .../__snapshots__/taggroup.test.ts.snap | 5 --- .../src/s1-to-s2/__tests__/imports.test.ts | 35 ++++++++++++++++++ .../src/s1-to-s2/src/codemods/codemod.ts | 8 +++-- 11 files changed, 75 insertions(+), 48 deletions(-) diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actionmenu.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actionmenu.test.ts.snap index 73cfca5b005..1bdbbe57620 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actionmenu.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/actionmenu.test.ts.snap @@ -2,7 +2,6 @@ exports[`Dynamic - no change 1`] = ` "import { MenuItem, ActionMenu } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let actionMenuItems = [ {name: 'Cut'}, {name: 'Copy'}, @@ -19,7 +18,6 @@ let actionMenuItems = [ exports[`Static - no change 1`] = ` "import { MenuItem, ActionMenu } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/breadcrumbs.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/breadcrumbs.test.ts.snap index ec3337363c4..0dca1252694 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/breadcrumbs.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/breadcrumbs.test.ts.snap @@ -2,7 +2,6 @@ exports[`Comments out autoFocusCurrent 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; // TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. // TODO(S2-upgrade): autoFocusCurrent has not been implemented yet. @@ -15,7 +14,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Comments out isMultiline 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; // TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. // TODO(S2-upgrade): isMultiline has not been implemented yet. @@ -28,7 +26,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Comments out showRoot 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; // TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. // TODO(S2-upgrade): showRoot has not been implemented yet. @@ -43,7 +40,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Dynamic - Renames Item to Breadcrumb 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let folders = [ {id: 1, label: 'Home'}, {id: 2, label: 'Trendy'}, @@ -59,7 +55,6 @@ let folders = [ exports[`Dynamic - Renames key to id 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const items = [ {id: 1, name: 'News'}, {id: 2, name: 'Travel'}, @@ -84,7 +79,6 @@ const items = [ exports[`Leaves a comment if size prop contains "S" 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; // TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. exports[`Removes size="S" 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; // TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. @@ -107,7 +100,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Static - Renames Item to Breadcrumb and adds import 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
// TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. @@ -121,7 +113,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Static - Renames key to id 1`] = ` "import { Breadcrumb, Breadcrumbs } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let externalKey = 'travel';
// TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap index 27125e3b4e9..0ddb9068e59 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap @@ -2,7 +2,6 @@ exports[`Dynamic - Renames Item to ComboBoxItem 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let options = [ {id: 1, name: 'Aerospace'}, {id: 2, name: 'Mechanical'} @@ -18,7 +17,6 @@ let options = [ exports[`Dynamic - Renames key to id 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const items = [ {id: 1, name: 'News'}, {id: 2, name: 'Travel'}, @@ -46,7 +44,6 @@ const items = [ exports[`Removes isQuiet 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let isQuiet = true; let props = {isQuiet: true};
@@ -80,7 +77,6 @@ let props = {isQuiet: true}; exports[`Removes placeholder 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let placeholder = 'is this actually removed?'; let props = {placeholder: 'is this actually removed?'};
@@ -106,7 +102,6 @@ let props = {placeholder: 'is this actually removed?'}; exports[`Static - Converts menuWidth to px value 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let menuWidth = 'size-10'; let props = {menuWidth: 'size-10'};
@@ -142,7 +137,6 @@ let props = {menuWidth: 'size-10'}; exports[`Static - Renames Item to ComboBoxItem 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
Red Panda @@ -153,7 +147,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Static - Renames key to id 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let externalKey = 'travel';
@@ -165,7 +158,6 @@ let externalKey = 'travel'; exports[`changes validationState to isInvalid or nothing 1`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let validationState = 'invalid'; let props = {validationState: 'invalid'};
@@ -199,7 +191,6 @@ let props = {validationState: 'invalid'}; exports[`changes validationState to isInvalid or nothing 2`] = ` "import { ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let validationState = 'invalid'; let props = {validationState: 'invalid'};
@@ -226,7 +217,6 @@ let props = {validationState: 'invalid'}; exports[`handles sections 1`] = ` "import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2"; -import { Section, Item } from '@adobe/react-spectrum';
Section title
Item one diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap index bf01f164749..46729b75825 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap @@ -100,6 +100,41 @@ import { StatusLight } from "@react-spectrum/s2"; " `; +exports[`should remove unused Item/Section import even if name taken in different scope 1`] = ` +"import { MenuSection, MenuItem, Menu } from "@react-spectrum/s2"; + +function foo() { + let Item = 'something else'; + let Section = 'something else'; +} + +
+ +
Styles
+ Bold + Underline +
+
+
" +`; + +exports[`should remove unused Item/Section import if aliased 1`] = ` +"import { MenuSection, MenuItem, Menu } from "@react-spectrum/s2"; +import {Section, Item} from 'elsewhere'; + +
+
+ Test +
+ +
Styles
+ + Underline +
+
+
" +`; + exports[`should replace named imports 1`] = ` "import { Button } from "@react-spectrum/s2"; @@ -114,7 +149,6 @@ exports[`should replace named imports from individual packages 1`] = ` exports[`should use unique alias if newly imported component name is already in scope 1`] = ` "import { Tag as Tag1, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const Tag = 'something else'; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap index 9b5149b26e1..8d7b1b88efa 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap @@ -2,7 +2,6 @@ exports[`Dynamic - Renames Item to MenuItem with Submenu, Section to MenuSection 1`] = ` "import { MenuItem, MenuSection, Menu, MenuTrigger, SubmenuTrigger, Button } from "@react-spectrum/s2"; -import { Item, Section } from '@adobe/react-spectrum'; const items = [ { id: 'copy', name: 'Copy' }, { id: 'cut', name: 'Cut' }, @@ -68,7 +67,6 @@ const items = [ exports[`Dynamic - Renames key to id 1`] = ` "import { MenuItem, Menu, MenuTrigger, SubmenuTrigger, Button } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const items = [ { key: 'copy', name: 'Copy' }, { key: 'cut', name: 'Cut' }, @@ -164,8 +162,6 @@ exports[`Static - Renames Item to MenuItem, Section to MenuSection 1`] = ` Header, Heading, } from "@react-spectrum/s2"; - -import { Item, Section } from '@adobe/react-spectrum';
@@ -199,8 +195,6 @@ exports[`Static - Renames key to id 1`] = ` Header, Heading, } from "@react-spectrum/s2"; - -import { Item, Section } from '@adobe/react-spectrum';
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap index 27ba5c81e99..d5d02551ae8 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap @@ -55,8 +55,6 @@ exports[`Static - Renames Item to Breadcrumb and adds import 1`] = ` Heading, } from "@react-spectrum/s2"; -import { Item, Section } from '@adobe/react-spectrum'; -
// TODO(S2-upgrade): S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed. diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap index 9c0a3335955..8c42f22c34a 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap @@ -2,7 +2,6 @@ exports[`Dynamic - Renames Item to PickerItem 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let options = [ {id: 1, name: 'Chocolate'}, {id: 2, name: 'Vanilla'} @@ -28,7 +27,6 @@ let options = [ exports[`Static - Converts menuWidth to px value 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let menuWidth = 'size-10'; let props = {menuWidth: 'size-10'};
@@ -64,7 +62,6 @@ let props = {menuWidth: 'size-10'}; exports[`Static - Removes isQuiet 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let isQuiet = true; let props = {isQuiet: true};
@@ -94,7 +91,6 @@ let props = {isQuiet: true}; exports[`Static - Renames Item to PickerItem 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
Chocolate @@ -105,7 +101,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Static - Renames key to id 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
Chocolate @@ -116,7 +111,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`changes validationState to isInvalid or nothing 1`] = ` "import { PickerItem, Picker } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let validationState = 'invalid'; let props = {validationState: 'invalid'};
@@ -147,7 +141,6 @@ let props = {validationState: 'invalid'}; exports[`handles sections 1`] = ` "import { PickerSection, PickerItem, Picker } from "@react-spectrum/s2"; -import { Section, Item } from '@adobe/react-spectrum';
Section title
Item one diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/tabs.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/tabs.test.ts.snap index fc7da05e709..d69fa9a6648 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/tabs.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/tabs.test.ts.snap @@ -30,7 +30,6 @@ let items = [ exports[`Remove isEmphasized 1`] = ` "import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let isEmphasized = true; let props = {isEmphasized: true};
@@ -65,7 +64,6 @@ let props = {isEmphasized: true}; exports[`Remove isQuiet 1`] = ` "import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let isQuiet = true; let props = {isQuiet: true};
@@ -100,7 +98,6 @@ let props = {isQuiet: true}; exports[`Update to use new API 1`] = ` "import { Tab, TabPanel, Tabs, TabList } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; Founding of Rome diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap index cb28f5c4531..b7466aebe0a 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/taggroup.test.ts.snap @@ -2,7 +2,6 @@ exports[`Dynamic - Renames Item to Tag 1`] = ` "import { Tag, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const items = [ {id: 1, name: 'News'}, {id: 2, name: 'Travel'}, @@ -19,7 +18,6 @@ const items = [ exports[`Dynamic - Renames key to id 1`] = ` "import { Tag, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; const items = [ {id: 1, name: 'News'}, {id: 2, name: 'Travel'}, @@ -42,7 +40,6 @@ const items = [ exports[`Static - Renames Item to Tag 1`] = ` "import { Tag, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum';
@@ -56,7 +53,6 @@ import { Item } from '@adobe/react-spectrum'; exports[`Static - Renames key to id 1`] = ` "import { Tag, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let externalKey = 'travel';
@@ -71,7 +67,6 @@ let externalKey = 'travel'; exports[`changes validationState to isInvalid or nothing 1`] = ` "import { Tag, TagGroup } from "@react-spectrum/s2"; -import { Item } from '@adobe/react-spectrum'; let validationState = 'invalid'; let props = {validationState: 'invalid'}; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts index 9d50269b609..539eb2404b7 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts @@ -127,3 +127,38 @@ import {Button} from "@react-spectrum/s2"; Test `); + +test('should remove unused Item/Section import even if name taken in different scope', ` +import {Menu, Section, Item} from '@adobe/react-spectrum'; + +function foo() { + let Item = 'something else'; + let Section = 'something else'; +} + +
+ +
+ Bold + Underline +
+
+
+`); + +test('should remove unused Item/Section import if aliased', ` +import {Menu, Section as RSPSection, Item as RSPItem} from '@adobe/react-spectrum'; +import {Section, Item} from 'elsewhere'; + +
+
+ Test +
+ + + + Underline + + +
+`); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts index b53877eff39..11437f02938 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts @@ -203,9 +203,11 @@ export default function transformer(file: FileInfo, api: API, options: Options) t.isIdentifier(b.path.node.imported) && (b.path.node.imported.name === 'Item' || b.path.node.imported.name === 'Section') ) { - // Keep Item and Section imports - // TODO: remove if they are unused - return; + // Keep Item and Section imports if they are still used + bindings[0]?.path.scope.crawl(); + if (bindings[0]?.path.scope.bindings[b.path.node.local.name]?.referencePaths.length > 0) { + return; + } } b.path.remove();