feat: Add codemod to migrate to subpaths (adobe#9839)

Author: devongovett

packages/dev/codemods/src/index.ts

@@ -2,6 +2,7 @@
 const {parseArgs} = require('node:util');
 import {s1_to_s2} from './s1-to-s2/src';
 import {use_monopackages} from './use-monopackages/src';
+import {use_subpaths} from './use-subpaths/src';
 
 interface JSCodeshiftOptions {
   /**
@@ -52,9 +53,12 @@ export interface UseMonopackagesCodemodOptions extends JSCodeshiftOptions {
   packages?: string
 }
 
-const codemods: Record<string, (options: S1ToS2CodemodOptions | UseMonopackagesCodemodOptions) => void> = {
+export interface UseSubpathsCodemodOptions extends JSCodeshiftOptions {}
+
+const codemods: Record<string, (options: S1ToS2CodemodOptions | UseMonopackagesCodemodOptions | UseSubpathsCodemodOptions) => void> = {
   's1-to-s2': s1_to_s2,
-  'use-monopackages': use_monopackages
+  'use-monopackages': use_monopackages,
+  'use-subpaths': use_subpaths
 };
 
 // https://github.com/facebook/jscodeshift?tab=readme-ov-file#usage-cli
@@ -103,6 +107,7 @@ async function main() {
     parser: 'tsx',
     ignorePattern: '**/node_modules/**',
     path: '.',
+    extensions: 'js,jsx,mjs,cjs,ts,tsx',
     ...values
   }));
 }

packages/dev/codemods/src/use-monopackages/src/codemod.ts

@@ -1,6 +1,8 @@
 import {API, FileInfo, ImportSpecifier, Options} from 'jscodeshift';
 const fs = require('fs');
 const path = require('path');
+const Module = require('module');
+const url = require('url');
 
 function areSpecifiersAlphabetized(specifiers: ImportSpecifier[]) {
   const specifierNames = specifiers.map(
@@ -54,10 +56,16 @@ const transformer: Transformer = function transformer(file: FileInfo, api: API,
   const monopackageExports: Record<string, string[]> = {};
 
   selectedPackages.forEach((pkg) => {
-    const indexPath = path.join(
-      process.cwd(),
-      `node_modules/${packages[pkg].monopackage}/dist/types.d.ts`
-    );
+    let indexPath: string;
+    try {
+      let pkgPath = path.dirname(Module.findPackageJSON(packages[pkg].monopackage, url.pathToFileURL(file.path || `${process.cwd()}/index`))!);
+      indexPath = `${pkgPath}/dist/types/exports/index.d.ts`;
+      if (!fs.existsSync(indexPath)) {
+        indexPath = `${pkgPath}/exports/index.ts`;
+      }
+    } catch {
+      return;
+    }
 
     if (fs.existsSync(indexPath)) {
       anyIndexFound = true;

packages/dev/codemods/src/use-subpaths/README.md

@@ -0,0 +1,19 @@
+# Codemod to use subpath exports
+
+Replaces monopackage imports with subpaths.
+
+```diff
+- import {Button} from 'react-aria-components';
++ import {Button} from 'react-aria-components/Button';
+```
+
+## Usage
+
+Run `npx @react-spectrum/codemods use-subpaths` from the directory you want to update imports in.
+
+### Options
+
+- `--parser` - The [parser](https://github.com/facebook/jscodeshift?tab=readme-ov-file#parser) to use for parsing the source files. Defaults to `tsx`.
+- `--ignore-pattern` - A [glob pattern](https://github.com/facebook/jscodeshift?tab=readme-ov-file#ignoring-files-and-directories) of files to ignore. Defaults to `**/node_modules/**`.
+- `--dry` - Run the codemod without making changes to the files.
+- `--path` - The path to the directory to run the codemod in. Defaults to the current directory.

packages/dev/codemods/src/use-subpaths/src/codemod.test.ts

@@ -0,0 +1,128 @@
+// @ts-ignore
+import {defineInlineTest} from 'jscodeshift/dist/testUtils';
+import transform from './codemod';
+
+function test(name: string, input: string, output: string) {
+  defineInlineTest(transform, {}, input, output, name);
+}
+
+test(
+  'rewrites a uniquely mapped specifier',
+  `
+import {Accordion} from '@adobe/react-spectrum';
+`,
+  `
+import { Accordion } from '@adobe/react-spectrum/Accordion';
+`
+);
+
+test(
+  'splits mixed uniquely mapped specifiers across subpaths',
+  `
+import {Accordion, Button} from '@adobe/react-spectrum';
+`,
+  `
+import { Accordion } from '@adobe/react-spectrum/Accordion';
+import { Button } from '@adobe/react-spectrum/Button';
+`
+);
+
+test(
+  'groups multi-mapped specifiers with a uniquely mapped import from the same declaration',
+  `
+import {ListView, Item} from '@adobe/react-spectrum';
+`,
+  `
+import { ListView, Item } from '@adobe/react-spectrum/ListView';
+`
+);
+
+test(
+  'handles when Item is available in multiple existing imports',
+  `
+import {ListView, ActionGroup, Item} from '@adobe/react-spectrum';
+`,
+  `
+import { ListView, Item } from '@adobe/react-spectrum/ListView';
+import { ActionGroup } from '@adobe/react-spectrum/ActionGroup';
+`
+);
+
+test(
+  'handles multiple monopackage imports',
+  `
+import {ListView} from '@adobe/react-spectrum';
+import {ActionGroup, Item} from '@adobe/react-spectrum';
+`,
+  `
+import { ListView, Item } from '@adobe/react-spectrum/ListView';
+import { ActionGroup } from '@adobe/react-spectrum/ActionGroup';
+`
+);
+
+test(
+  'reuses an existing matching subpath import elsewhere in the file',
+  `
+import {Item} from '@adobe/react-spectrum';
+import {ListView} from '@adobe/react-spectrum/ListView';
+`,
+  `
+import { ListView, Item } from '@adobe/react-spectrum/ListView';
+`
+);
+
+test(
+  'preserves aliases when moving specifiers',
+  `
+import {ListView as RSListView, Item as RSItem} from '@adobe/react-spectrum';
+`,
+  `
+import { ListView as RSListView, Item as RSItem } from '@adobe/react-spectrum/ListView';
+`
+);
+
+test(
+  'keeps unsupported, default, and namespace imports untouched',
+  `
+import ReactSpectrum, {Accordion, fakeThing} from '@adobe/react-spectrum';
+import * as RAC from 'react-aria-components';
+`,
+  `
+import ReactSpectrum, { fakeThing } from '@adobe/react-spectrum';
+import { Accordion } from '@adobe/react-spectrum/Accordion';
+import * as RAC from 'react-aria-components';
+`
+);
+
+test(
+  'merges into an existing destination import',
+  `
+import {Disclosure} from '@adobe/react-spectrum';
+import {Accordion} from '@adobe/react-spectrum/Accordion';
+`,
+  `
+import { Accordion, Disclosure } from '@adobe/react-spectrum/Accordion';
+`
+);
+
+test(
+  'leaves already subpathed imports unchanged',
+  `
+import {Accordion} from '@adobe/react-spectrum/Accordion';
+`,
+  `
+import {Accordion} from '@adobe/react-spectrum/Accordion';
+`
+);
+
+test(
+  'groups by import kind',
+  `
+import {Button, ButtonContext} from 'react-aria-components';
+import type {ButtonProps} from 'react-aria-components';
+`,
+  `
+import { Button, ButtonContext } from 'react-aria-components/Button';
+import type { ButtonProps } from 'react-aria-components/Button';
+`
+);