@react-spectrum/codemods 1.0.0 → 1.1.0

package/dist/s1-to-s2/src/codemods/codemod.js

@@ -59,6 +59,10 @@ availableComponents.add('Section');
 availableComponents.delete('Provider');
 // Replaced by ActionButtonGroup and ToggleButtonGroup
 availableComponents.add('ActionGroup');
+// components renamed between v3 and S2
+let renamedComponents = {
+    ContextualHelpTrigger: 'UnavailableMenuItemTrigger'
+};
 function transformer(file, api, options) {
     let j = api.jscodeshift.withParser({
         parse(source) {
@@ -69,6 +73,8 @@ function transformer(file, api, options) {
     });
     let root = j(file.source);
     let componentsToTransform = options.components ? new Set(options.components.split(',').filter(s => availableComponents.has(s))) : availableComponents;
+    let v3ComponentsToRename = new Set(Object.keys(renamedComponents));
+    let S2ComponentsToImport = new Set();
     let bindings = [];
     let importedComponents = new Map();
     let elements = [];
@@ -87,9 +93,19 @@ function transformer(file, api, options) {
                         if (binding) {
                             let isUsed = false;
                             for (let path of binding.referencePaths) {
-                                if (path.parentPath?.isJSXMemberExpression() && componentsToTransform.has(path.parentPath.node.property.name) && path.parentPath.parentPath.parentPath?.isJSXElement()) {
-                                    importedComponents.set(path.parentPath.node.property.name, clonedSpecifier);
-                                    elements.push([path.parentPath.node.property.name, path.parentPath.parentPath.parentPath]);
+                                let propName = path.parentPath?.isJSXMemberExpression() && path.parentPath.node.property.name;
+                                if (propName && path.parentPath.parentPath?.parentPath?.isJSXElement()) {
+                                    if (componentsToTransform.has(propName)) {
+                                        importedComponents.set(propName, clonedSpecifier);
+                                        elements.push([propName, path.parentPath.parentPath.parentPath]);
+                                    }
+                                    else if (v3ComponentsToRename.has(propName)) {
+                                        S2ComponentsToImport.add(renamedComponents[propName]);
+                                        elements.push([propName, path.parentPath.parentPath.parentPath]);
+                                    }
+                                    else {
+                                        isUsed = true;
+                                    }
                                 }
                                 else {
                                     isUsed = true;
@@ -112,11 +128,16 @@ function transformer(file, api, options) {
                         typeof specifier.local.name === 'string' &&
                         specifier.imported.type === 'Identifier' &&
                         typeof specifier.imported.name === 'string' &&
-                        componentsToTransform.has(specifier.imported.name)) {
-                        // e.g. import {Button} from '@adobe/react-spectrum';
+                        (componentsToTransform.has(specifier.imported.name) || v3ComponentsToRename.has(specifier.imported.name))) {
+                        // e.g. import {Button} from '@adobe/react-spectrum'; or import {ContextualHelpTrigger} from '@adobe/react-spectrum';
                         let binding = path.scope.getBinding(specifier.local.name);
                         if (binding) {
-                            importedComponents.set(specifier.imported.name, specifier);
+                            if (componentsToTransform.has(specifier.imported.name)) {
+                                importedComponents.set(specifier.imported.name, specifier);
+                            }
+                            else {
+                                S2ComponentsToImport.add(renamedComponents[specifier.imported.name]);
+                            }
                             bindings.push(binding);
                             for (let path of binding.referencePaths) {
                                 if (path.parentPath?.isJSXOpeningElement() && path.parentPath.parentPath.isJSXElement()) {
@@ -234,11 +255,14 @@ function transformer(file, api, options) {
         macroImport.assertions = [t.importAttribute(t.identifier('type'), t.stringLiteral('macro'))];
         lastImportPath.insertAfter(macroImport);
     }
-    if (importedComponents.size) {
+    if (importedComponents.size || S2ComponentsToImport.size) {
         // Add imports to existing @react-spectrum/s2 import if it exists, otherwise add a new one.
         let importSpecifiers = new Set([...importedComponents]
             .filter(([c]) => c !== 'Flex' && c !== 'Grid' && c !== 'View' && c !== 'Item' && c !== 'Section' && c !== 'ActionGroup')
             .map(([, specifier]) => specifier));
+        for (let s2Name of S2ComponentsToImport) {
+            importSpecifiers.add(t.importSpecifier(t.identifier(s2Name), t.identifier(s2Name)));
+        }
         let existingImport = root.find(j.ImportDeclaration, {
             source: { value: '@react-spectrum/s2' }
         });

package/dist/s1-to-s2/src/codemods/components/ContextualHelpTrigger/transform.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformContextualHelpTrigger;
+const utils_1 = require("../../shared/utils");
+const getComponents_1 = require("../../../getComponents");
+const t = __importStar(require("@babel/types"));
+let availableComponents = (0, getComponents_1.getComponents)();
+/**
+ * Transforms ContextualHelpTrigger:
+ * - Rename ContextualHelpTrigger to UnavailableMenuItemTrigger.
+ * - Replace the old Dialog with ContextualHelpPopover.
+ */
+function transformContextualHelpTrigger(path) {
+    let program = path.findParent((p) => t.isProgram(p.node));
+    let localName = (0, utils_1.addComponentImport)(program, 'UnavailableMenuItemTrigger');
+    // replace ContextualHelpTrigger with UnavailableMenuItemTrigger
+    path.node.openingElement.name = t.jsxIdentifier(localName);
+    if (path.node.closingElement) {
+        path.node.closingElement.name = t.jsxIdentifier(localName);
+    }
+    // replace Dialog with ContextualHelpPopover
+    let dialog = path.node.children.filter((c) => t.isJSXElement(c))[1];
+    if (dialog && t.isJSXIdentifier(dialog.openingElement.name)) {
+        let name = (0, utils_1.getName)(path, dialog.openingElement.name);
+        if (name === 'Dialog') {
+            let contextualHelpPopover = availableComponents.has('ContextualHelpPopover')
+                ? (0, utils_1.addComponentImport)(program, 'ContextualHelpPopover')
+                : 'ContextualHelpPopover';
+            dialog.openingElement.name = t.jsxIdentifier(contextualHelpPopover);
+            if (dialog.closingElement) {
+                dialog.closingElement.name = t.jsxIdentifier(contextualHelpPopover);
+            }
+        }
+    }
+}

package/dist/s1-to-s2/src/codemods/components/Item/transform.js

@@ -10,16 +10,19 @@ const transforms_1 = require("../../shared/transforms");
  * - If within Breadcrumbs: Update Item to be a Breadcrumb.
  * - If within Picker: Update Item to be a PickerItem.
  * - If within ComboBox: Update Item to be a ComboBoxItem.
+ * - If within ListView: Update Item to be a ListViewItem.
  * - Update key to id (and keep key if rendered inside array.map).
  */
 function transformItem(path) {
     // Update Items based on parent collection component
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Menu', newComponentName: 'MenuItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ActionMenu', newComponentName: 'MenuItem' });
+    (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ContextualHelpTrigger', newComponentName: 'MenuItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'TagGroup', newComponentName: 'Tag' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Breadcrumbs', newComponentName: 'Breadcrumb' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'Picker', newComponentName: 'PickerItem' });
     (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ComboBox', newComponentName: 'ComboBoxItem' });
+    (0, transforms_1.updateComponentWithinCollection)(path, { parentComponentName: 'ListView', newComponentName: 'ListViewItem' });
     // Comment if parent collection not detected
     (0, transforms_1.commentIfParentCollectionNotDetected)(path);
 }

package/dist/s1-to-s2/src/codemods/components/ListView/transform.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformListView;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ListView:
+ * - Comment out density (it has not been implemented yet).
+ * - Comment out dragAndDropHooks (it has not been implemented yet).
+ */
+function transformListView(path) {
+    (0, transforms_1.commentOutProp)(path, { propName: 'density' });
+    (0, transforms_1.commentOutProp)(path, { propName: 'dragAndDropHooks' });
+}

package/dist/s1-to-s2/src/codemods/shared/styleProps.js

@@ -680,7 +680,7 @@ function transformStyleProps(path, element) {
         if (isDOMElement) {
             let index = path.node.openingElement.attributes?.findIndex(a => a.type === 'JSXAttribute' && a.name.name === 'className');
             if (index != null && index >= 0) {
-                classNameAttribute = path.get('openingElement').get('attributes').at(index);
+                classNameAttribute = path.get('openingElement').get('attributes')[index];
             }
         }
         let valueToAST = (v) => {

package/dist/s1-to-s2/src/codemods/shared/transforms.js

@@ -346,9 +346,9 @@ function moveRenderPropsToChild(path, options) {
  */
 function updateComponentWithinCollection(path, options) {
     const { parentComponentName, newComponentName } = options;
-    // Collections currently implemented
-    // TODO: Add 'ActionGroup', 'ListBox', 'ListView' once implemented
-    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'Collection']);
+    // Collections currently implemented.
+    // TODO: Add 'ActionGroup', 'ListBox' once implemented
+    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'ListView', 'TabList', 'TabPanels', 'Collection', 'ContextualHelpTrigger']);
     if (t.isJSXElement(path.node) &&
         t.isJSXIdentifier(path.node.openingElement.name)) {
         // Find closest parent collection component
@@ -377,7 +377,7 @@ function updateComponentWithinCollection(path, options) {
  * Example: If they're declaring declaring Items somewhere above the collection.
  */
 function commentIfParentCollectionNotDetected(path) {
-    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'ActionGroup', 'ActionButtonGroup', 'ToggleButtonGroup', 'ListBox', 'ListView', 'Collection', 'SearchAutocomplete', 'Accordion', 'ActionBar', 'StepList']);
+    const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'ActionGroup', 'ActionButtonGroup', 'ToggleButtonGroup', 'ListBox', 'ListView', 'Collection', 'SearchAutocomplete', 'Accordion', 'ActionBar', 'StepList', 'ContextualHelpTrigger']);
     if (t.isJSXElement(path.node)) {
         // Find closest parent collection component
         let closestParentCollection = path.findParent((p) => t.isJSXElement(p.node) &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/codemods",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "bin": "dist/index.js",
@@ -24,9 +24,9 @@
     "@babel/parser": "^7.24.5",
     "@babel/traverse": "^7.24.5",
     "@babel/types": "^7.24.5",
-    "@react-spectrum/s2": "^1.0.0",
-    "@react-types/shared": "^3.32.1",
-    "@types/node": "^22",
+    "@react-spectrum/s2": "^1.2.0",
+    "@react-types/shared": "^3.33.1",
+    "@types/node": "^24",
     "boxen": "^5.1.2",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
@@ -49,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }