@react-spectrum/codemods 0.1.0

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

@@ -0,0 +1,420 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformUnsafeStyle = transformUnsafeStyle;
+const styleProps_1 = require("./styleProps");
+const utils_1 = require("./utils");
+const dimensions_1 = require("./dimensions");
+const colors_1 = require("./colors");
+function transformUnsafeStyle(value, element) {
+    let res = {
+        macroValues: [],
+        dynamicValues: [],
+        conditions: []
+    };
+    for (let property of value.properties) {
+        if (property.type === 'ObjectProperty' && property.key.type === 'Identifier') {
+            let prop = propertyMapping[property.key.name] || property.key.name;
+            if (property.value.type === 'ConditionalExpression') {
+                let consequent = handleProperty(element, property.key.name, property.value.consequent);
+                let alternate = handleProperty(element, property.key.name, property.value.alternate);
+                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') {
+                        res.macroValues.push({
+                            key: prop,
+                            value: { default: alternate, [test.left.name]: { [test.right.value]: consequent } }
+                        });
+                        res.conditions?.push({
+                            key: test.left.name,
+                            value: test.left
+                        });
+                    }
+                    else {
+                        let condition = (0, utils_1.nameFromExpression)(test) || `isCondition${res.conditions.length}`;
+                        // eslint-disable-next-line max-depth
+                        if (!/^is[A-Z]/.test(condition)) {
+                            condition = `is${(0, utils_1.capitalize)(condition)}`;
+                        }
+                        res.macroValues.push({
+                            key: prop,
+                            value: { default: alternate, [condition]: consequent }
+                        });
+                        res.conditions?.push({
+                            key: condition,
+                            value: test
+                        });
+                    }
+                    continue;
+                }
+            }
+            let value = handleProperty(element, prop, property.value);
+            if (value != null) {
+                res.macroValues.push({ key: prop, value });
+            }
+            else {
+                res.dynamicValues?.push({ key: prop, value: property.value });
+            }
+        }
+        else {
+            // Bail
+            return null;
+        }
+    }
+    return res;
+}
+const propertyMapping = {
+    background: 'backgroundColor',
+    borderInlineStartWidth: 'borderStartWidth',
+    borderInlineEndWidth: 'borderEndWidth',
+    borderInlineWidth: 'borderXWidth',
+    borderBlockWidth: 'borderYWidth',
+    borderLeftWidth: 'borderStartWidth',
+    borderRightWidth: 'borderEndWidth',
+    marginInlineStart: 'marginStart',
+    marginInlineEnd: 'marginEnd',
+    marginInline: 'marginX',
+    marginBlock: 'marginY',
+    marginLeft: 'marginStart',
+    marginRight: 'marginEnd',
+    paddingInlineStart: 'paddingStart',
+    paddingInlineEnd: 'paddingEnd',
+    paddingInline: 'paddingX',
+    paddingBlock: 'paddingY',
+    paddingLeft: 'paddingStart',
+    paddingRight: 'paddingEnd',
+    insetInlineStart: 'insetStart',
+    insetInlineEnd: 'insetEnd',
+    borderStartStartRadius: 'borderTopStartRadius',
+    borderStartEndRadius: 'borderTopEndRadius',
+    borderEndStartRadius: 'borderBottomStartRadius',
+    borderEndEndRadius: 'borderBottomEndRadius'
+};
+function handleProperty(element, property, value) {
+    switch (property) {
+        case 'color':
+        case 'background':
+        case 'backgroundColor':
+        case 'borderColor':
+        case 'outlineColor':
+        case 'fill':
+        case 'stroke': {
+            if ((element === 'View' || element === 'Flex' || element === 'Grid') && value.type === 'StringLiteral') {
+                return (0, colors_1.convertUnsafeStyleColor)(property, value.value);
+            }
+            break;
+        }
+        case 'borderWidth':
+        case 'borderInlineStartWidth':
+        case 'borderInlineEndWidth':
+        case 'borderInlineWidth':
+        case 'broderBlockWidth':
+        case 'borderLeftWidth':
+        case 'borderRightWidth':
+        case 'borderTopWidth':
+        case 'borderBottomWidth':
+            if (element === 'View' || element === 'Flex' || element === 'Grid') {
+                if (value.type === 'NumericLiteral' && value.value >= 0 && value.value <= 4) {
+                    return value.value;
+                }
+                else if (value.type === 'StringLiteral') {
+                    if (/^[0-4]px$/.test(value.value)) {
+                        return parseInt(value.value, 10);
+                    }
+                    let m = value.value.match(/^var\(--spectrum-alias-border-size-(.+)\)$/);
+                    if (m) {
+                        return styleProps_1.borderWidths[m[1]];
+                    }
+                }
+            }
+            break;
+        case 'borderStartStartRadius':
+        case 'borderStartEndRadius':
+        case 'borderEndStartRadius':
+        case 'borderEndEndRadius':
+        case 'borderRadius':
+            if (element === 'View' || element === 'Flex' || element === 'Grid') {
+                if (value.type === 'StringLiteral' && /^[0-4]px$/.test(value.value)) {
+                    value = { type: 'NumericLiteral', value: parseInt(value.value, 10) };
+                }
+                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]`;
+                    }
+                }
+                else if (value.type === 'StringLiteral') {
+                    let m = value.value.match(/^var\(--spectrum-alias-border-radius-(.+)\)$/);
+                    if (m) {
+                        return styleProps_1.borderRadius[m[1]];
+                    }
+                }
+            }
+            break;
+        case 'width':
+        case 'minWidth':
+        case 'maxWidth':
+        case 'height':
+        case 'minHeight':
+        case 'maxHeight':
+        case 'margin':
+        case 'marginInlineStart':
+        case 'marginInlineEnd':
+        case 'marginInline':
+        case 'marginBlock':
+        case 'marginLeft':
+        case 'marginRight':
+        case 'marginTop':
+        case 'marginBottom':
+        case 'top':
+        case 'bottom':
+        case 'left':
+        case 'right':
+        case 'insetInlineStart':
+        case 'insetInlineEnd':
+        case 'flexBasis': {
+            if (value.type === 'NumericLiteral' || value.type === 'StringLiteral') {
+                return (0, dimensions_1.convertUnsafeDimension)(value.value);
+            }
+            break;
+        }
+        case 'padding':
+        case 'paddingInlineStart':
+        case 'paddingInlineEnd':
+        case 'paddingInline':
+        case 'paddingBlock':
+        case 'paddingLeft':
+        case 'paddingRight':
+        case 'paddingTop':
+        case 'paddingBottom':
+        case 'gap':
+        case 'rowGap':
+        case 'columnGap': {
+            if (element === 'View' || element === 'Flex' || element === 'Grid') {
+                if (value.type === 'NumericLiteral' || value.type === 'StringLiteral') {
+                    return (0, dimensions_1.convertUnsafeDimension)(value.value);
+                }
+            }
+            break;
+        }
+        case 'fontSize': {
+            if (element === 'View' || element === 'Flex' || element === 'Grid') {
+                if (value.type === 'StringLiteral' && /^[0-4]px$/.test(value.value)) {
+                    value = { type: 'NumericLiteral', value: parseInt(value.value, 10) };
+                }
+                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]`;
+                    }
+                }
+                else if (value.type === 'StringLiteral') {
+                    let m = value.value.match(/^var\(--spectrum-global-dimension-font-size-(.+)\)$/);
+                    if (m) {
+                        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';
+                        }
+                    }
+                }
+            }
+            break;
+        }
+        case 'fontWeight':
+            if (element === 'View' || element === 'Flex' || element === 'Grid') {
+                if (value.type === 'StringLiteral') {
+                    let m = value.value.match(/^var\(--spectrum-global-font-weight-(.+)\)$/);
+                    if (m) {
+                        switch (m[1]) {
+                            case 'light':
+                            case 'medium':
+                            case 'bold':
+                            case 'black':
+                            case 'extra-bold':
+                                return m[1];
+                            case 'regular':
+                                return 'normal';
+                        }
+                    }
+                    else {
+                        switch (value.value) {
+                            case 'normal':
+                            case 'bold':
+                                return value.value;
+                        }
+                    }
+                }
+            }
+            break;
+        case 'alignSelf':
+        case 'justifySelf':
+        case 'position':
+        case 'zIndex':
+        case 'order':
+        case 'flexGrow':
+        case 'flexShrink':
+        case 'gridArea':
+        case 'gridColumn':
+        case 'gridRow':
+        case 'gridRowEnd':
+        case 'gridRowStart': {
+            if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) || value.type === 'NumericLiteral') {
+                return value.value;
+            }
+            break;
+        }
+        case 'gridTemplateAreas': {
+            if (element === 'Flex' || element === 'Grid' || element === 'View') {
+                if (value.type === 'StringLiteral' && !value.value.startsWith('var(')) {
+                    let rows = value.value.match(/"(.+?)"/g);
+                    if (rows) {
+                        return rows.map(r => r.slice(1, -1));
+                    }
+                }
+            }
+            break;
+        }
+        case 'display':
+        case 'justifyContent':
+        case 'alignContent':
+        case 'alignItems':
+        case 'justifyItems':
+        case 'placeItems':
+        case 'placeContent':
+        case 'placeSelf':
+        case 'flexDirection':
+        case 'flexWrap':
+        case 'flex':
+        case 'gridAutoFlow':
+        case 'gridAutoRows':
+        case 'gridAutoColumns':
+        case 'gridTemplateColumns':
+        case 'gridTemplateRows':
+        case 'float':
+        case 'clear':
+        case 'contain':
+        case 'boxSizing':
+        case 'tableLayout':
+        case 'captionSide':
+        case 'borderCollapse':
+        case 'overflow':
+        case 'overflowX':
+        case 'overflowY':
+        case 'overscrollBehavior':
+        case 'overscrollBehaviorX':
+        case 'overscrollBehaviorY':
+        case 'scrollBehavior':
+        case 'pointerEvents':
+        case 'touchAction':
+        case 'userSelect':
+        case 'visibility':
+        case 'isolation':
+        case 'transformOrigin':
+        case 'cursor':
+        case 'resize':
+        case 'scrollSnapType':
+        case 'scrollSnapAlign':
+        case 'scrollSnapStop':
+        case 'appearance':
+        case 'objectFit':
+        case 'objectPosition':
+        case 'willChange':
+        case 'rotate':
+        case 'scale':
+        case 'transform':
+        case 'borderStyle':
+        case 'fontStyle':
+        case 'listStyleType':
+        case 'listStylePosition':
+        case 'textTransform':
+        case 'textAlign':
+        case 'verticalAlign':
+        case 'textDecoration':
+        case 'textOverflow':
+        case 'hyphens':
+        case 'whiteSpace':
+        case 'textWrap':
+        case 'wordBreak':
+        case 'boxDecorationBreak':
+        case 'forcedColorAdjust':
+        case 'backgroundPosition':
+        case 'backgroundSize':
+        case 'backgroundAttachment':
+        case 'backgroundClip':
+        case 'backgroundRepeat':
+        case 'backgroundOrigin':
+        case 'backgroundBlendMode':
+        case 'mixBlendMode':
+        case 'opacity':
+        case 'outlineStyle':
+        case 'animationDirection':
+        case 'animationFillMode':
+        case 'animationTimingFunction':
+        case 'animationDelay':
+        case 'transitionTimingFunction':
+        case 'transitionDelay': {
+            if (element === 'Flex' || element === 'Grid' || element === 'View') {
+                if ((value.type === 'StringLiteral' && !/^(var|calc)\(/.test(value.value)) || value.type === 'NumericLiteral') {
+                    return value.value;
+                }
+            }
+            break;
+        }
+        case 'animationDuration':
+        case 'transitionDuration': {
+            if (element === 'Flex' || element === 'Grid' || element === 'View') {
+                if (value.type === 'StringLiteral') {
+                    let m = value.value.match(/^var\(--spectrum-global-animation-duration-(.+)\)$/);
+                    if (m) {
+                        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;
+                        }
+                    }
+                    else if (/^\d+(s|ms)$/.test(value.value)) {
+                        return value.value;
+                    }
+                }
+                else if (value.type === 'NumericLiteral') {
+                    return value.value;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,160 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPropValue = getPropValue;
+exports.nameFromExpression = nameFromExpression;
+exports.capitalize = capitalize;
+exports.addComment = addComment;
+exports.addComponentImport = addComponentImport;
+exports.removeComponentImport = removeComponentImport;
+exports.getName = getName;
+const t = __importStar(require("@babel/types"));
+function getPropValue(node) {
+    if (node?.type === 'JSXExpressionContainer') {
+        if (node.expression.type === 'JSXEmptyExpression') {
+            return null;
+        }
+        return node.expression;
+    }
+    if (node?.type === 'RestElement' ||
+        node?.type === 'ObjectPattern' ||
+        node?.type === 'ArrayPattern' ||
+        node?.type === 'AssignmentPattern') {
+        return null;
+    }
+    return node;
+}
+function nameFromExpression(expr) {
+    switch (expr.type) {
+        case 'Identifier':
+        case 'JSXIdentifier':
+            return expr.name;
+        case 'CallExpression':
+        case 'NewExpression':
+        case 'OptionalCallExpression':
+            return nameFromExpression(expr.callee);
+        case 'MemberExpression':
+        case 'OptionalMemberExpression':
+            return nameFromExpression(expr.object) + capitalize(nameFromExpression(expr.property));
+        case 'FunctionExpression':
+        case 'ClassExpression':
+            return expr.id ? nameFromExpression(expr.id) : '';
+        case 'ConditionalExpression':
+            return nameFromExpression(expr.test);
+        case 'UnaryExpression':
+            return nameFromExpression(expr.argument);
+        case 'ParenthesizedExpression':
+            return nameFromExpression(expr.expression);
+        case 'JSXExpressionContainer':
+            return expr.expression.type !== 'JSXEmptyExpression' ? nameFromExpression(expr.expression) : '';
+        case 'BinaryExpression':
+        case 'LogicalExpression':
+        case 'AssignmentExpression':
+            return nameFromExpression(expr.left) + capitalize(nameFromExpression(expr.right));
+        case 'AwaitExpression':
+            return expr.argument ? nameFromExpression(expr.argument) : '';
+        case 'SequenceExpression':
+            return expr.expressions.reduce((p, e) => {
+                let v = nameFromExpression(e);
+                return p ? p + capitalize(v) : v;
+            }, '');
+        default:
+            return '';
+    }
+}
+function capitalize(string) {
+    return string[0].toUpperCase() + string.slice(1);
+}
+function addComment(node, comment) {
+    if (!node.comments) {
+        node.comments = [];
+    }
+    node.comments.push({
+        type: 'Line',
+        value: comment,
+        leading: true
+    });
+}
+function addComponentImport(path, newComponent) {
+    // If newComponent variable already exists in scope, alias new import to avoid conflict.
+    let existingBinding = path.scope.getBinding(newComponent);
+    let localName = newComponent;
+    if (existingBinding) {
+        let newName = newComponent;
+        let i = 1;
+        while (path.scope.hasBinding(newName)) {
+            newName = newComponent + i;
+            i++;
+        }
+        localName = newName;
+    }
+    let existingImport = path.node.body.find((node) => t.isImportDeclaration(node) && node.source.value === '@react-spectrum/s2');
+    if (existingImport && t.isImportDeclaration(existingImport)) {
+        let specifier = existingImport.specifiers.find((specifier) => {
+            return (t.isImportSpecifier(specifier) &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === newComponent);
+        });
+        if (specifier) {
+            // Already imported
+            return localName;
+        }
+        existingImport.specifiers.push(t.importSpecifier(t.identifier(localName), t.identifier(newComponent)));
+    }
+    else {
+        let importDeclaration = t.importDeclaration([
+            t.importSpecifier(t.identifier(localName), t.identifier(newComponent))
+        ], t.stringLiteral('@react-spectrum/s2'));
+        path.node.body.unshift(importDeclaration);
+    }
+    return localName;
+}
+function removeComponentImport(path, component) {
+    let existingImport = path.node.body.find((node) => t.isImportDeclaration(node) && node.source.value === '@adobe/react-spectrum' || t.isImportDeclaration(node) && node.source.value.startsWith('@react-spectrum/'));
+    if (existingImport && t.isImportDeclaration(existingImport)) {
+        let specifier = existingImport.specifiers.find((specifier) => {
+            return (t.isImportSpecifier(specifier) &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === component);
+        });
+        if (specifier) {
+            existingImport.specifiers = existingImport.specifiers.filter((s) => s !== specifier);
+            if (existingImport.specifiers.length === 0) {
+                path.node.body = path.node.body.filter((node) => node !== existingImport);
+            }
+        }
+    }
+}
+/**
+ * Look up the name in path.scope and find the original binding.
+ * Returns the original name even if an alias is used.
+ */
+function getName(path, identifier) {
+    let binding = path.scope.getBinding(identifier.name);
+    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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponents = getComponents;
+const parser_1 = require("@babel/parser");
+const path = require('path');
+const fs_1 = require("fs");
+const traverse_1 = __importDefault(require("@babel/traverse"));
+function getComponents() {
+    // Determine list of available components in S2 from index.ts
+    let availableComponents = new Set();
+    const packagePath = require.resolve('@react-spectrum/s2');
+    const indexPath = path.join(path.dirname(packagePath), process.env.NODE_ENV === 'test' ? 'src/index.ts' : '../src/index.ts');
+    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) {
+                    availableComponents.add(specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value);
+                }
+            }
+        }
+    });
+    return availableComponents;
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.s1_to_s2 = s1_to_s2;
+const addMacroSupport_js_1 = require("./utils/addMacroSupport.js");
+const chalk_1 = __importDefault(require("chalk"));
+const installPackage_js_1 = __importDefault(require("./utils/installPackage.js"));
+const logger_js_1 = __importDefault(require("./utils/logger.js"));
+const transform_js_1 = require("./transform.js");
+const waitForKeypress_js_1 = require("./utils/waitForKeypress.js");
+const boxen = require('boxen');
+async function s1_to_s2(options) {
+    console.log(boxen('Welcome to the React Spectrum v3 to Spectrum 2 upgrade assistant!\n\n' +
+        'This tool will:\n\n' +
+        `1. Install the ${chalk_1.default.bold('@react-spectrum/s2')} package and setup your bundler to use the Spectrum 2 style macro.\n\n` +
+        '2. Upgrade the components in the current directory to use Spectrum 2.\n\n' +
+        '3. Provide next steps to complete your upgrade.', { borderStyle: 'round', padding: 1, borderColor: 'green' }), '\n\n');
+    console.log('Press Enter to get started...');
+    await (0, waitForKeypress_js_1.waitForKeypress)();
+    // Install S2 package
+    let isS2PackageInstalled = await (0, installPackage_js_1.default)('@react-spectrum/s2');
+    // Add support for macros
+    let { isMacroPluginInstalled, isMacroSupportEnabled } = await (0, addMacroSupport_js_1.addMacroSupport)();
+    console.log('Press Enter to upgrade components...');
+    await (0, waitForKeypress_js_1.waitForKeypress)();
+    logger_js_1.default.info('Upgrading components...');
+    await (0, transform_js_1.transform)(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` +
+            'Note that unlike React Spectrum v3, a Provider is not required.'
+    ];
+    if (!isS2PackageInstalled) {
+        nextSteps.unshift(`Install the ${chalk_1.default.bold('@react-spectrum/s2')} package manually.`);
+    }
+    if (!isMacroSupportEnabled) {
+        nextSteps.push('Configure your bundler to support using the Spectrum 2 style macro.\n\n' +
+            `Macros are supported by default in Parcel v2.12.0 or later and can be used with other bundlers by${!isMacroPluginInstalled ? ` installing the ${chalk_1.default.bold('unplugin-parcel-macros')} package and` : ''} adding the plugin to your bundler config. See the examples for:\n\n` +
+            `  - Webpack: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-webpack-5-example')}\n` +
+            `  - Next.js: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-next-macros')}\n` +
+            `  - Vite: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-vite-project')}\n` +
+            `  - Rollup: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-rollup-starter-app')}\n` +
+            `  - ESBuild: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app')}\n\n` +
+            `or view documentation for the plugin here: ${chalk_1.default.underline('https://jsr.io/@unplugin/macros')}`);
+    }
+    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' +
+        `For additional help, reference the Spectrum 2 Migration Guide: ${chalk_1.default.underline('https://github.com/adobe/react-spectrum/tree/main/packages/@react-spectrum/codemods/s1-to-s2/UPGRADE.md')}`);
+    console.log(boxen(`Next steps:\n\n ${nextSteps.map((step, i) => `${i + 1}. ${step}`).join('\n\n\n')}`, { borderStyle: 'round', padding: 1, borderColor: 'green' }));
+    process.exit(0);
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transform = transform;
+const Runner_js_1 = require("jscodeshift/src/Runner.js");
+const path_1 = __importDefault(require("path"));
+const transformPath = path_1.default.join(__dirname, 'codemods', 'codemod.js');
+async function transform(options) {
+    let { path: filePath = '.', ...rest } = options;
+    return await (0, Runner_js_1.run)(transformPath, [filePath], rest);
+}