@react-spectrum/codemods 1.2.1 → 1.2.3

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

@@ -20,7 +20,10 @@ function transformUnsafeStyle(value, element) {
                 if (consequent && alternate) {
                     let test = property.value.test;
                     // eslint-disable-next-line max-depth
-                    if (test.type === 'BinaryExpression' && test.operator === '===' && test.left.type === 'Identifier' && test.right.type === 'StringLiteral') {
+                    if (test.type === 'BinaryExpression' &&
+                        test.operator === '===' &&
+                        test.left.type === 'Identifier' &&
+                        test.right.type === 'StringLiteral') {
                         res.macroValues.push({
                             key: prop,
                             value: { default: alternate, [test.left.name]: { [test.right.value]: consequent } }
@@ -99,7 +102,8 @@ function handleProperty(element, property, value) {
         case 'outlineColor':
         case 'fill':
         case 'stroke': {
-            if ((element === 'View' || element === 'Flex' || element === 'Grid') && value.type === 'StringLiteral') {
+            if ((element === 'View' || element === 'Flex' || element === 'Grid') &&
+                value.type === 'StringLiteral') {
                 return (0, colors_1.convertUnsafeStyleColor)(property, value.value);
             }
             break;
@@ -139,12 +143,18 @@ function handleProperty(element, property, value) {
                 }
                 if (value.type === 'NumericLiteral') {
                     switch (value.value) {
-                        case 0: return 'none';
-                        case 2: return 'sm';
-                        case 4: return 'default';
-                        case 8: return 'lg';
-                        case 16: return 'xl';
-                        default: return `[${value.value}px]`;
+                        case 0:
+                            return 'none';
+                        case 2:
+                            return 'sm';
+                        case 4:
+                            return 'default';
+                        case 8:
+                            return 'lg';
+                        case 16:
+                            return 'xl';
+                        default:
+                            return `[${value.value}px]`;
                     }
                 }
                 else if (value.type === 'StringLiteral') {
@@ -213,37 +223,63 @@ function handleProperty(element, property, value) {
                 }
                 if (value.type === 'NumericLiteral') {
                     switch (value.value) {
-                        case 11: return 'ui-xs';
-                        case 12: return 'ui-sm';
-                        case 14: return 'ui';
-                        case 16: return 'ui-lg';
-                        case 18: return 'ui-xl';
-                        case 20: return 'ui-2xl';
-                        case 22: return 'ui-3xl';
-                        default: return `[${value.value / 16}rem]`;
+                        case 11:
+                            return 'ui-xs';
+                        case 12:
+                            return 'ui-sm';
+                        case 14:
+                            return 'ui';
+                        case 16:
+                            return 'ui-lg';
+                        case 18:
+                            return 'ui-xl';
+                        case 20:
+                            return 'ui-2xl';
+                        case 22:
+                            return 'ui-3xl';
+                        default:
+                            return `[${value.value / 16}rem]`;
                     }
                 }
                 else if (value.type === 'StringLiteral') {
                     let m = value.value.match(/^var\(--spectrum-global-dimension-font-size-(.+)\)$/);
                     if (m) {
+                        // oxlint-disable-next-line max-depth
                         switch (m[1]) {
-                            case '25': return `[${10 / 16}rem]`;
-                            case '50': return 'xs';
-                            case '75': return 'ui-sm';
-                            case '100': return 'ui';
-                            case '150': return `[${15 / 16}rem]`;
-                            case '200': return 'ui-lg';
-                            case '300': return 'ui-xl';
-                            case '400': return 'body-xl';
-                            case '500': return 'body-2xl';
-                            case '600': return 'body-3xl';
-                            case '700': return 'heading-lg';
-                            case '800': return `[${32 / 16}rem]`;
-                            case '900': return 'heading-xl';
-                            case '1000': return `[${40 / 16}rem]`;
-                            case '1100': return 'heading-2xl';
-                            case '1200': return `[${50 / 16}rem]`;
-                            case '1300': return 'heading-3xl';
+                            case '25':
+                                return `[${10 / 16}rem]`;
+                            case '50':
+                                return 'xs';
+                            case '75':
+                                return 'ui-sm';
+                            case '100':
+                                return 'ui';
+                            case '150':
+                                return `[${15 / 16}rem]`;
+                            case '200':
+                                return 'ui-lg';
+                            case '300':
+                                return 'ui-xl';
+                            case '400':
+                                return 'body-xl';
+                            case '500':
+                                return 'body-2xl';
+                            case '600':
+                                return 'body-3xl';
+                            case '700':
+                                return 'heading-lg';
+                            case '800':
+                                return `[${32 / 16}rem]`;
+                            case '900':
+                                return 'heading-xl';
+                            case '1000':
+                                return `[${40 / 16}rem]`;
+                            case '1100':
+                                return 'heading-2xl';
+                            case '1200':
+                                return `[${50 / 16}rem]`;
+                            case '1300':
+                                return 'heading-3xl';
                         }
                     }
                 }
@@ -255,6 +291,7 @@ function handleProperty(element, property, value) {
                 if (value.type === 'StringLiteral') {
                     let m = value.value.match(/^var\(--spectrum-global-font-weight-(.+)\)$/);
                     if (m) {
+                        // oxlint-disable-next-line max-depth
                         switch (m[1]) {
                             case 'light':
                             case 'medium':
@@ -267,6 +304,7 @@ function handleProperty(element, property, value) {
                         }
                     }
                     else {
+                        // oxlint-disable-next-line max-depth
                         switch (value.value) {
                             case 'normal':
                             case 'bold':
@@ -288,7 +326,8 @@ function handleProperty(element, property, value) {
         case 'gridRow':
         case 'gridRowEnd':
         case 'gridRowStart': {
-            if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) || value.type === 'NumericLiteral') {
+            if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) ||
+                value.type === 'NumericLiteral') {
                 return value.value;
             }
             break;
@@ -385,7 +424,8 @@ function handleProperty(element, property, value) {
         case 'transitionTimingFunction':
         case 'transitionDelay': {
             if (element === 'Flex' || element === 'Grid' || element === 'View') {
-                if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) || value.type === 'NumericLiteral') {
+                if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) ||
+                    value.type === 'NumericLiteral') {
                     return value.value;
                 }
             }
@@ -397,20 +437,34 @@ function handleProperty(element, property, value) {
                 if (value.type === 'StringLiteral') {
                     let m = value.value.match(/^var\(--spectrum-global-animation-duration-(.+)\)$/);
                     if (m) {
+                        // oxlint-disable-next-line max-depth
                         switch (m[1]) {
-                            case '0': return 0;
-                            case '100': return 130;
-                            case '200': return 160;
-                            case '300': return 190;
-                            case '400': return 220;
-                            case '500': return 250;
-                            case '600': return 300;
-                            case '700': return 350;
-                            case '800': return 400;
-                            case '900': return 450;
-                            case '1000': return 500;
-                            case '2000': return 1000;
-                            case '4000': return 2000;
+                            case '0':
+                                return 0;
+                            case '100':
+                                return 130;
+                            case '200':
+                                return 160;
+                            case '300':
+                                return 190;
+                            case '400':
+                                return 220;
+                            case '500':
+                                return 250;
+                            case '600':
+                                return 300;
+                            case '700':
+                                return 350;
+                            case '800':
+                                return 400;
+                            case '900':
+                                return 450;
+                            case '1000':
+                                return 500;
+                            case '2000':
+                                return 1000;
+                            case '4000':
+                                return 2000;
                         }
                     }
                     else if (/^\d+(s|ms)$/.test(value.value)) {

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

@@ -80,7 +80,9 @@ function nameFromExpression(expr) {
         case 'ParenthesizedExpression':
             return nameFromExpression(expr.expression);
         case 'JSXExpressionContainer':
-            return expr.expression.type !== 'JSXEmptyExpression' ? nameFromExpression(expr.expression) : '';
+            return expr.expression.type !== 'JSXEmptyExpression'
+                ? nameFromExpression(expr.expression)
+                : '';
         case 'BinaryExpression':
         case 'LogicalExpression':
         case 'AssignmentExpression':
@@ -110,9 +112,9 @@ function addComment(node, comment) {
     });
 }
 function addComponentImport(path, newComponentName) {
-    let existingImport = path.node.body.find((node) => t.isImportDeclaration(node) && node.source.value === '@react-spectrum/s2');
+    let existingImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === '@react-spectrum/s2');
     if (existingImport && t.isImportDeclaration(existingImport)) {
-        let existingSpecifier = existingImport.specifiers.find((specifier) => {
+        let existingSpecifier = existingImport.specifiers.find(specifier => {
             return (t.isImportSpecifier(specifier) &&
                 specifier.imported.type === 'Identifier' &&
                 specifier.imported.name === newComponentName);
@@ -137,44 +139,43 @@ function addComponentImport(path, newComponentName) {
         existingImport.specifiers.push(t.importSpecifier(t.identifier(localName), t.identifier(newComponentName)));
     }
     else {
-        let importDeclaration = t.importDeclaration([
-            t.importSpecifier(t.identifier(localName), t.identifier(newComponentName))
-        ], t.stringLiteral('@react-spectrum/s2'));
+        let importDeclaration = t.importDeclaration([t.importSpecifier(t.identifier(localName), t.identifier(newComponentName))], t.stringLiteral('@react-spectrum/s2'));
         path.node.body.unshift(importDeclaration);
     }
     return localName;
 }
 function removeComponentImport(path, component) {
     let imports = path.node.body.filter((node) => {
-        return t.isImportDeclaration(node)
-            && (node.source.value === '@adobe/react-spectrum'
-                || (node.source.value.startsWith('@react-spectrum/') && node.source.value !== '@react-spectrum/s2'));
+        return (t.isImportDeclaration(node) &&
+            (node.source.value === '@adobe/react-spectrum' ||
+                (node.source.value.startsWith('@react-spectrum/') &&
+                    node.source.value !== '@react-spectrum/s2')));
     });
     for (let importDecl of imports) {
         let previousLength = importDecl.specifiers.length;
-        importDecl.specifiers = importDecl.specifiers.filter((specifier) => {
-            return !(t.isImportSpecifier(specifier)
-                && specifier.imported.type === 'Identifier'
-                && specifier.imported.name === component);
+        importDecl.specifiers = importDecl.specifiers.filter(specifier => {
+            return !(t.isImportSpecifier(specifier) &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === component);
         });
         if (importDecl.specifiers.length === 0 && previousLength > 0) {
-            path.node.body = path.node.body.filter((node) => node !== importDecl);
+            path.node.body = path.node.body.filter(node => node !== importDecl);
         }
     }
 }
 function removeComponentImportIfUnused(path, component) {
     path.scope.crawl();
     let imports = path.node.body.filter((node) => {
-        return t.isImportDeclaration(node)
-            && (node.source.value === '@adobe/react-spectrum'
-                || node.source.value.startsWith('@react-spectrum/'));
+        return (t.isImportDeclaration(node) &&
+            (node.source.value === '@adobe/react-spectrum' ||
+                node.source.value.startsWith('@react-spectrum/')));
     });
     for (let importDecl of imports) {
         let previousLength = importDecl.specifiers.length;
-        importDecl.specifiers = importDecl.specifiers.filter((specifier) => {
-            if (t.isImportSpecifier(specifier)
-                && specifier.imported.type === 'Identifier'
-                && specifier.imported.name === component) {
+        importDecl.specifiers = importDecl.specifiers.filter(specifier => {
+            if (t.isImportSpecifier(specifier) &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === component) {
                 let localName = specifier.local?.name ?? specifier.imported.name;
                 let binding = path.scope.getBinding(localName);
                 return !!binding?.referencePaths.length;
@@ -182,7 +183,7 @@ function removeComponentImportIfUnused(path, component) {
             return true;
         });
         if (importDecl.specifiers.length === 0 && previousLength > 0) {
-            path.node.body = path.node.body.filter((node) => node !== importDecl);
+            path.node.body = path.node.body.filter(node => node !== importDecl);
         }
     }
 }
@@ -194,17 +195,17 @@ function removeUnusedImports(path, sources) {
     });
     for (let importDecl of imports) {
         let previousLength = importDecl.specifiers.length;
-        importDecl.specifiers = importDecl.specifiers.filter((specifier) => {
-            if (t.isImportSpecifier(specifier)
-                || t.isImportDefaultSpecifier(specifier)
-                || t.isImportNamespaceSpecifier(specifier)) {
+        importDecl.specifiers = importDecl.specifiers.filter(specifier => {
+            if (t.isImportSpecifier(specifier) ||
+                t.isImportDefaultSpecifier(specifier) ||
+                t.isImportNamespaceSpecifier(specifier)) {
                 let binding = path.scope.getBinding(specifier.local.name);
                 return !!binding?.referencePaths.length;
             }
             return true;
         });
         if (importDecl.specifiers.length === 0 && previousLength > 0) {
-            path.node.body = path.node.body.filter((node) => node !== importDecl);
+            path.node.body = path.node.body.filter(node => node !== importDecl);
         }
     }
 }
@@ -214,7 +215,9 @@ function removeUnusedImports(path, sources) {
  */
 function getName(path, identifier) {
     let binding = path.scope.getBinding(identifier.name);
-    if (binding && t.isImportSpecifier(binding.path.node) && t.isIdentifier(binding.path.node.imported)) {
+    if (binding &&
+        t.isImportSpecifier(binding.path.node) &&
+        t.isIdentifier(binding.path.node.imported)) {
         return binding.path.node.imported.name;
     }
     return identifier.name;

package/dist/s1-to-s2/src/getComponents.js

@@ -10,12 +10,7 @@ const path = require('path');
 const traverse_1 = __importDefault(require("@babel/traverse"));
 // These are exported but there are no codemods written for them yet.
 // Don't replace imports yet.
-const skipped = new Set([
-    'Accordion',
-    'Card',
-    'CardView',
-    'ActionBar'
-]);
+const skipped = new Set(['Accordion', 'Card', 'CardView', 'ActionBar']);
 function getComponents() {
     // Determine list of available components in S2 from index.ts
     let availableComponents = new Set();
@@ -31,12 +26,17 @@ function getComponents() {
         }
         indexPath = workspaceIndexPath;
     }
-    let index = (0, parser_1.parse)((0, fs_1.readFileSync)(indexPath, 'utf8'), { sourceType: 'module', plugins: ['typescript'] });
+    let index = (0, parser_1.parse)((0, fs_1.readFileSync)(indexPath, 'utf8'), {
+        sourceType: 'module',
+        plugins: ['typescript']
+    });
     (0, traverse_1.default)(index, {
         ExportNamedDeclaration(path) {
             if (path.node.exportKind === 'value') {
                 for (let specifier of path.node.specifiers) {
-                    let name = specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value;
+                    let name = specifier.exported.type === 'Identifier'
+                        ? specifier.exported.name
+                        : specifier.exported.value;
                     if (!skipped.has(name)) {
                         availableComponents.add(name);
                     }

package/dist/s1-to-s2/src/index.js

@@ -12,7 +12,11 @@ const transform_js_1 = require("./transform.js");
 const waitForKeypress_js_1 = require("./utils/waitForKeypress.js");
 const boxen = require('boxen');
 function printNextSteps(nextSteps) {
-    console.log(boxen(`Next steps:\n\n ${nextSteps.map((step, i) => `${i + 1}. ${step}`).join('\n\n\n')}`, { borderStyle: 'round', padding: 1, borderColor: 'green' }));
+    console.log(boxen(`Next steps:\n\n ${nextSteps.map((step, i) => `${i + 1}. ${step}`).join('\n\n\n')}`, {
+        borderStyle: 'round',
+        padding: 1,
+        borderColor: 'green'
+    }));
 }
 async function s1_to_s2(options) {
     if (options.agent) {
@@ -23,7 +27,7 @@ async function s1_to_s2(options) {
         printNextSteps([
             `Ensure ${chalk_1.default.bold('@react-spectrum/s2')} is installed.`,
             `If your bundler is not Parcel v2.12.0+, configure the Spectrum 2 style macro support. See: ${chalk_1.default.underline('https://react-spectrum.adobe.com/getting-started#framework-setup')}`,
-            `Add ${chalk_1.default.bold('import \'@react-spectrum/s2/page.css\';')} to your entry component if needed.`,
+            `Add ${chalk_1.default.bold("import '@react-spectrum/s2/page.css';")} to your entry component if needed.`,
             `Search for ${chalk_1.default.bold('TODO(S2-upgrade)')} and resolve remaining manual migration updates.`,
             `Reference the migration guide: ${chalk_1.default.underline('https://react-spectrum.adobe.com/migrating')}`
         ]);
@@ -47,7 +51,7 @@ async function s1_to_s2(options) {
     logger_js_1.default.success('Upgrade complete!');
     let nextSteps = [
         'Add the following import to the entry component of your app: \n\n' +
-            `${chalk_1.default.bold('import \'@react-spectrum/s2/page.css\';')}\n\n` +
+            `${chalk_1.default.bold("import '@react-spectrum/s2/page.css';")}\n\n` +
             'Note that unlike React Spectrum v3, a Provider is not required.'
     ];
     if (!isS2PackageInstalled) {
@@ -63,11 +67,11 @@ async function s1_to_s2(options) {
             `  - ESBuild: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app')}\n\n` +
             `or view documentation here: ${chalk_1.default.underline('https://react-spectrum.adobe.com/getting-started#framework-setup')}`);
     }
-    nextSteps.push('Handle remaining upgrades and run your project\'s linter or formatter.\n\n' +
-        'There may have been some upgrades that we couldn\'t handle automatically. We marked these with comments containing:\n\n' +
+    nextSteps.push("Handle remaining upgrades and run your project's linter or formatter.\n\n" +
+        "There may have been some upgrades that we couldn't handle automatically. We marked these with comments containing:\n\n" +
         `${chalk_1.default.bold('TODO(S2-upgrade)')}\n\n` +
         'You should be able to search your codebase and handle these manually. \n\n' +
-        'We also recommend running your project\'s code formatter (i.e. Prettier, ESLint) after the upgrade process to clean up any extraneous formatting from the codemod.\n\n' +
+        "We also recommend running your project's code formatter (i.e. Prettier, ESLint) after the upgrade process to clean up any extraneous formatting from the codemod.\n\n" +
         `For additional help, reference the Spectrum 2 Migration Guide: ${chalk_1.default.underline('https://react-spectrum.adobe.com/migrating')}`);
     printNextSteps(nextSteps);
     process.exit(0);

package/dist/s1-to-s2/src/utils/installPackage.js

@@ -39,7 +39,11 @@ async function installPackage(packageName, options) {
     try {
         logger_js_1.default.info(`Installing ${chalk_1.default.bold(packageName)} using ${chalk_1.default.bold(packageManager.name)}...`);
         const devFlag = options?.dev ? ['-D'] : [];
-        await execa(packageManager.name, [packageManager.installCommand, `${packageName}@latest`, ...devFlag]);
+        await execa(packageManager.name, [
+            packageManager.installCommand,
+            `${packageName}@latest`,
+            ...devFlag
+        ]);
         logger_js_1.default.success(`Successfully installed ${chalk_1.default.bold(packageName)}!\n`);
         return true;
     }

package/dist/s1-to-s2/src/utils/waitForKeypress.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForKeypress = waitForKeypress;
 async function waitForKeypress() {
-    await new Promise((resolve) => {
+    await new Promise(resolve => {
         process.stdin.once('data', () => {
             resolve();
         });