@vkontakte/vkui-codemods 0.0.3

package/dist/transforms/tooltip.js

@@ -0,0 +1,162 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parser = void 0;
+var codemod_helpers_1 = require("../codemod-helpers");
+exports.parser = 'tsx';
+var componentName = 'Tooltip';
+var componentNameTo = 'OnboardingTooltip';
+var ATTRIBUTE_REPLACER = {
+    isShown: {
+        keyTo: 'shown',
+    },
+    offsetY: {
+        keyTo: 'offsetByMainAxis',
+    },
+    offsetX: {
+        keyTo: 'offsetByCrossAxis',
+    },
+};
+var CORNER_OFFSET = { from: 'cornerOffset', to: 'arrowOffset' };
+var CORNER_ABSOLUTE_OFFSET = { from: 'cornerAbsoluteOffset', to: 'isStaticArrowOffset' };
+var PLACEMENT = 'placement';
+var ALIGN_X = { from: 'alignX', to: PLACEMENT };
+var ALIGN_Y = { from: 'alignY', to: PLACEMENT };
+var isStringLiteral = function (v) {
+    return v ? v.type === 'StringLiteral' : false;
+};
+function mapAlignX(x) {
+    switch (x) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return '';
+    }
+}
+var replaceAttribute = function (j, attributeReplacer, attribute) {
+    var foundFix = attributeReplacer.getReplacers(attribute.node.name.name);
+    if (foundFix) {
+        var value = attribute.node.value;
+        j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(foundFix.keyTo()), foundFix.valueTo(value)));
+    }
+};
+function transformer(file, api, options) {
+    var alias = options.alias;
+    var j = api.jscodeshift;
+    var source = j(file.source);
+    var localName = (0, codemod_helpers_1.getImportInfo)(j, file, componentName, alias).localName;
+    var attributeReplacer = (0, codemod_helpers_1.createAttributeManipulator)(ATTRIBUTE_REPLACER, api);
+    var needRename = true;
+    // подменяем импорт
+    source
+        .find(j.ImportDeclaration)
+        .filter(function (path) { return path.node.source.value === alias; })
+        .find(j.ImportSpecifier, { imported: { name: componentName } })
+        .forEach(function (path) {
+        j(path).replaceWith(function (path) {
+            if (path.node.local && path.node.local.name !== path.node.imported.name) {
+                needRename = false;
+            }
+            return j.importSpecifier(j.jsxIdentifier(componentNameTo), needRename ? null : path.node.local);
+        });
+    });
+    // переименовываем без проблемные св-ва
+    source
+        .find(j.JSXOpeningElement)
+        .filter(function (path) { return path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName; })
+        .find(j.JSXAttribute, function (attribute) { return attributeReplacer.has(attribute.name.name); })
+        .forEach(function (attribute) {
+        replaceAttribute(j, attributeReplacer, attribute);
+    });
+    source.findJSXElements(localName).forEach(function (element) {
+        // меняем название компонента в JSX на переименованный в импорте (если нужно)
+        j(element).replaceWith(function (path) {
+            var renamedLocalName = needRename ? componentNameTo : localName;
+            return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(renamedLocalName), path.node.openingElement.attributes, path.node.closingElement ? false : true), path.node.closingElement ? j.jsxClosingElement(j.jsxIdentifier(renamedLocalName)) : null, path.node.children);
+        });
+        // разрешаем arrowOffsets
+        var _a = [
+            j(element)
+                .find(j.JSXAttribute, function (attribute) { return attribute.name.name === CORNER_OFFSET.from; })
+                .at(0),
+            j(element)
+                .find(j.JSXAttribute, function (attribute) { return attribute.name.name === CORNER_ABSOLUTE_OFFSET.from; })
+                .at(0),
+        ], cornerOffsetAttr = _a[0], cornerAbsoluteOffsetAttr = _a[1];
+        if (cornerOffsetAttr.length === 1 && cornerAbsoluteOffsetAttr.length === 0) {
+            cornerOffsetAttr.forEach(function (attribute) {
+                j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(CORNER_OFFSET.to), attribute.node.value));
+            });
+        }
+        else if (cornerOffsetAttr.length === 0 && cornerAbsoluteOffsetAttr.length === 1) {
+            var valueByCornerAbsolute_1;
+            cornerAbsoluteOffsetAttr.forEach(function (attribute) {
+                valueByCornerAbsolute_1 = attribute.node.value;
+                j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(CORNER_ABSOLUTE_OFFSET.to)));
+            });
+            // добавляем новое св-во
+            var prevAttributes = element.node.openingElement.attributes || [];
+            element.node.openingElement.attributes = __spreadArray(__spreadArray([], prevAttributes, true), [
+                j.jsxAttribute(j.jsxIdentifier(CORNER_OFFSET.to), valueByCornerAbsolute_1),
+            ], false);
+        }
+        else if (cornerOffsetAttr.length === 1 && cornerAbsoluteOffsetAttr.length === 1) {
+            var valueByCornerAbsolute_2;
+            cornerAbsoluteOffsetAttr.forEach(function (attribute) {
+                valueByCornerAbsolute_2 = attribute.node.value;
+                j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(CORNER_ABSOLUTE_OFFSET.to)));
+            });
+            cornerOffsetAttr.forEach(function (attribute) {
+                j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(CORNER_OFFSET.to), valueByCornerAbsolute_2));
+            });
+        }
+        // разрешаем alignX/alignY/placement
+        var placementAttr = j(element).find(j.JSXAttribute, function (attribute) { return attribute.name.name === PLACEMENT; });
+        var alignX;
+        var alignY;
+        j(element)
+            .find(j.JSXAttribute, function (attribute) { return attribute.name.name === ALIGN_X.from; })
+            .forEach(function (attribute) {
+            alignX = attribute.node.value;
+            j(attribute).remove();
+        });
+        j(element)
+            .find(j.JSXAttribute, function (attribute) { return attribute.name.name === ALIGN_Y.from; })
+            .forEach(function (attribute) {
+            alignY = attribute.node.value;
+            j(attribute).remove();
+        });
+        if (placementAttr.length === 0) {
+            var placement = void 0;
+            if (isStringLiteral(alignX) && !isStringLiteral(alignY)) {
+                var convertedAlignX = mapAlignX(alignX.value);
+                placement = "bottom-".concat(convertedAlignX);
+            }
+            else if (!isStringLiteral(alignX) && isStringLiteral(alignY)) {
+                placement = "".concat(alignY.value, "-start");
+            }
+            else if (isStringLiteral(alignX) && isStringLiteral(alignY)) {
+                var convertedAlignX = mapAlignX(alignX.value);
+                placement = "".concat(alignY.value, "-").concat(convertedAlignX);
+            }
+            if (placement) {
+                var prevAttributes = element.node.openingElement.attributes || [];
+                element.node.openingElement.attributes = __spreadArray(__spreadArray([], prevAttributes, true), [
+                    j.jsxAttribute(j.jsxIdentifier(PLACEMENT), j.stringLiteral(placement)),
+                ], false);
+            }
+        }
+    });
+    return source.toSource();
+}
+exports.default = transformer;

package/dist/transforms/typography.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var chalk_1 = __importDefault(require("chalk"));
+var codemod_helpers_1 = require("../codemod-helpers");
+var report_1 = require("../report");
+function transformer(file, api, options) {
+    var alias = options.alias;
+    var j = api.jscodeshift;
+    var source = j(file.source);
+    var componentLocalNames = ['Title', 'Headline', 'Subhead'].map(function (name) {
+        var localName = (0, codemod_helpers_1.getImportInfo)(j, file, name, alias).localName;
+        return localName;
+    });
+    source
+        .find(j.JSXOpeningElement)
+        .filter(function (path) {
+        return path.value.name.type === 'JSXIdentifier' &&
+            componentLocalNames.includes(path.value.name.name);
+    })
+        .forEach(function (path) {
+        var componentAttribute = j(path).find(j.JSXAttribute, { name: { name: 'Component' } });
+        if (componentAttribute.length > 0) {
+            var componentValue = componentAttribute.get('value');
+            if (componentValue.value &&
+                (componentValue.value.type === 'StringLiteral' ||
+                    componentValue.value.type === 'Literal') &&
+                componentValue.value.value === 'span') {
+                componentAttribute.remove();
+            }
+        }
+        else {
+            var newValue = void 0;
+            var componentName = path.node.name.type === 'JSXIdentifier' && path.node.name.name;
+            switch (componentName) {
+                case componentLocalNames[1]:
+                    newValue = 'h4';
+                    break;
+                case componentLocalNames[2]:
+                    newValue = 'h5';
+                    break;
+                case componentLocalNames[0]:
+                    var levelAttribute = j(path).find(j.JSXAttribute, { name: { name: 'level' } });
+                    if (levelAttribute.length === 0) {
+                        newValue = 'h1';
+                    }
+                    else {
+                        var att = levelAttribute.get(0);
+                        if (att.node.value &&
+                            (att.node.value.type === 'StringLiteral' || att.node.value.type === 'Literal')) {
+                            newValue = "h".concat(att.node.value.value);
+                        }
+                        else {
+                            (0, report_1.report)(api, ": prop ".concat(chalk_1.default.white.bgBlue('Component'), " has been changed in ").concat(chalk_1.default.white.bgBlue(componentLocalNames), " component. Manual changes required."));
+                        }
+                    }
+                    break;
+            }
+            path.node.attributes &&
+                newValue &&
+                path.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('Component'), j.stringLiteral(newValue)));
+        }
+    });
+    return source.toSource();
+}
+exports.default = transformer;

package/dist/transforms/users-stack.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parser = void 0;
+var chalk_1 = __importDefault(require("chalk"));
+var codemod_helpers_1 = require("../codemod-helpers");
+var report_1 = require("../report");
+exports.parser = 'tsx';
+function transformer(file, api, options) {
+    var alias = options.alias;
+    var j = api.jscodeshift;
+    var source = j(file.source);
+    var localName = (0, codemod_helpers_1.getImportInfo)(j, file, 'UsersStack', alias).localName;
+    source
+        .find(j.JSXOpeningElement)
+        .filter(function (path) { return path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName; })
+        .find(j.JSXAttribute)
+        .filter(function (attribute) { return attribute.node.name.name === 'layout'; })
+        .forEach(function (attribute) {
+        var node = attribute.node;
+        if (node.value && node.value.type === 'StringLiteral') {
+            var newValue = node.value.value === 'vertical' ? 'column' : 'row';
+            j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier('direction'), j.stringLiteral(newValue)));
+        }
+        else {
+            (0, report_1.report)(api, ": ".concat(chalk_1.default.white.bgBlue('layout'), " prop in ").concat(chalk_1.default.white.bgBlue('UsersStack'), " component is no longer available. Manual changes required."));
+        }
+    });
+    return source.toSource();
+}
+exports.default = transformer;

package/dist/transforms/visually-hidden-input.js

@@ -0,0 +1,42 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parser = void 0;
+exports.parser = 'tsx';
+function transformer(file, api, options) {
+    var alias = options.alias;
+    var j = api.jscodeshift;
+    var source = j(file.source);
+    var localImportName = 'VisuallyHiddenInput';
+    var needRename = true;
+    var componentImport = source
+        .find(j.ImportDeclaration)
+        .filter(function (path) { return path.node.source.value === alias; })
+        .find(j.ImportSpecifier)
+        .filter(function (path) { return path.node.imported.name === 'VisuallyHiddenInput'; })
+        .at(0);
+    componentImport.forEach(function (path) {
+        if (path.node.local && path.node.local.name !== path.node.imported.name) {
+            localImportName = path.node.local.name;
+            needRename = false;
+        }
+        j(path).replaceWith(function (path) {
+            return j.importSpecifier(j.identifier('VisuallyHidden'), needRename ? null : path.node.local);
+        });
+    });
+    source.findJSXElements(localImportName).replaceWith(function (path) {
+        localImportName = needRename ? 'VisuallyHidden' : localImportName;
+        var props = path.node.openingElement.attributes;
+        return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(localImportName), __spreadArray([j.jsxAttribute(j.jsxIdentifier('Component'), j.stringLiteral('input'))], (props || []), true), path.node.closingElement ? false : true), path.node.closingElement ? j.jsxClosingElement(j.jsxIdentifier(localImportName)) : null, path.node.children);
+    });
+    return source.toSource();
+}
+exports.default = transformer;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vkontakte/vkui-codemods",
+  "version": "0.0.3",
+  "description": "Codemods for automatic VKUI major version upgrade",
+  "repository": "https://github.com/VKCOM/VKUI",
+  "homepage": "https://vkcom.github.io/VKUI/",
+  "license": "MIT",
+  "bin": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "yarn": "^1.21.1",
+    "node": ">16.0.0"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
+    "cross-spawn": "^7.0.3",
+    "jscodeshift": "^0.13.1",
+    "prompts": "^2.4.2",
+    "typescript": "^5.3.2"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.3.100",
+    "@swc/jest": "^0.2.29",
+    "@types/cross-spawn": "^6.0.6",
+    "@types/jest": "^29.5.10",
+    "@types/jscodeshift": "^0.11.11",
+    "@types/node": "^20.10.0",
+    "@types/prompts": "^2.4.2",
+    "jest": "^29.7.0",
+    "ts-node": "^10.9.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "test:ci": "yarn test",
+    "migrate": "jscodeshift"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}