Bump jscodeshift to fix ast error with TS satisfies operator (#6986)

Старая версия jscodeshift не могла переварить TS-файлы с новым синтаксисом, поэтому смирились с некоторыми нежелательными моментами + ап версии позволит порешать security alert
https://github.com/VKCOM/VKUI/security/dependabot/129

Сделали ап версии jscodeshift, обновили снепшоты + порешали старую TODO (вместо удаления файла просто выбросили ненужные части кода)

packages/codemods/README.md

@@ -8,6 +8,8 @@
 
 > Пока для перевода доступны только `Typescript`-файлы (_.ts/_.tsx)
 
+> Из-за особенностей работы `jscodeshift` после применения миграции у вас могут появиться лишние скобки вокруг `JSX`-элементов, пожалуйста, запустите `prettier`, чтобы отформатировать код в соответствии с вашими настройками.
+
 Перейдите в директорию с исходниками вашего проекта (обычно это `src/`) и запустите следующую команду:
 
 ```shell

packages/codemods/package.json

@@ -17,7 +17,7 @@
     "chalk": "^4.1.2",
     "commander": "^12.1.0",
     "cross-spawn": "^7.0.3",
-    "jscodeshift": "^0.13.1",
+    "jscodeshift": "^0.15.2",
     "prompts": "^2.4.2",
     "typescript": "^5.4.5"
   },

packages/codemods/src/index.ts

@@ -102,8 +102,11 @@ const run = async () => {
 
   logger.info(
     `
-    All done! Please check if everything is applied correctly. 
+    All done! Please check that everything is applied correctly. 
     If it's not the case - feel free to contact VKUI Team. 
+    Do not forget to run ${chalk.cyan.bold(
+      'prettier',
+    )} to eliminate unwanted code formatting after applying migrations. 
     Happy coding with ${chalk.green.bold('v6')}!`,
   );
 };

packages/codemods/src/testHelpers/testHelper.ts

@@ -1,13 +1,10 @@
 /**
- * Adopted version of https://github.com/facebook/jscodeshift/blob/v0.15.0/src/testUtils.js
- * TODO [jscodeshift@>0.13.0]: Remove it
- * More info - PR #6254
+ * Файл для упрощенной работы с дефолтными функциями запуска `jscodeshift`
  */
-import fs from 'fs';
 import path from 'path';
 import {
   applyTransform,
-  defineSnapshotTest,
+  defineSnapshotTestFromFixture as defineSnapshotTestFromFixtureOrig,
   // @ts-expect-error: TS7016 no types for package
 } from 'jscodeshift/dist/testUtils';
 import { JSCodeShiftOptions } from '../types';
@@ -24,18 +21,23 @@ export function getTestFixturesInputPath(
 }
 
 /**
- * Handles file-loading boilerplates, using same defaults as defineTest
+ * У оригинального defineSnapshotTestFromFixture нет типов
+ * Избавляемся от необходимости в тестах постоянно указывать `module`
  */
 export function defineSnapshotTestFromFixture(
   dirName: string,
   transformName: string,
   options: JSCodeShiftOptions,
   testFilePrefix: string,
-  extension = 'tsx',
 ) {
   // Assumes transform is one level up from __tests__ directory
   const module = require(path.join(dirName, '..', transformName));
-  const inputPath = getTestFixturesInputPath(dirName, testFilePrefix, extension);
-  const source = fs.readFileSync(inputPath, 'utf8');
-  defineSnapshotTest(module, options, source, 'transforms correctly');
+  defineSnapshotTestFromFixtureOrig(
+    dirName,
+    module,
+    options,
+    testFilePrefix,
+    'transforms correctly',
+    { parser: 'tsx' },
+  );
 }

packages/codemods/src/transforms/__tests__/__snapshots__/action-sheet-item.ts.snap

@@ -7,13 +7,13 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ActionSheet>
         <ActionSheetItem>Сохранить в закладках</ActionSheetItem>
         <ActionSheetItem autoCloseDisabled>Закрепить запись</ActionSheetItem>
         <ActionSheetItem>Закрепить запись</ActionSheetItem>
       </ActionSheet>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/action-sheet.ts.snap

@@ -7,11 +7,11 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ActionSheet toggleRef={ref} placement="top">
         <ActionSheetItem>Сохранить в закладках</ActionSheetItem>
       </ActionSheet>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/alert.ts.snap

@@ -19,7 +19,7 @@ const App = () => {
   ];
 
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Alert
         actions={[
           {
@@ -36,7 +36,7 @@ const App = () => {
         text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
       />
       <Alert actions={action} />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/appearance-provider.ts.snap

@@ -7,10 +7,10 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <AppearanceProvider value={appearance}>...</AppearanceProvider>
       <AppearanceProvider value={() => getSome()}>...</AppearanceProvider>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/calendar-range.ts.snap

@@ -6,7 +6,7 @@ import React from 'react';
 
 const App = ({ value, setValue, ...rest }) => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <CalendarRange
         value={value}
         onChange={setValue}
@@ -17,7 +17,7 @@ const App = ({ value, setValue, ...rest }) => {
         changeMonthLabel="changeMonthLabel"
         changeYearLabel="changeYearLabel"
       />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/calendar.ts.snap

@@ -6,7 +6,7 @@ import React from 'react';
 
 const App = ({ value, setValue, ...rest }) => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Calendar
         value={value}
         onChange={setValue}
@@ -19,7 +19,7 @@ const App = ({ value, setValue, ...rest }) => {
         changeMinutesLabel="changeMinutesLabel"
         changeHoursLabel="changeHoursLabel"
       />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap

@@ -6,11 +6,11 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <CardScroll>{cards}</CardScroll>
       <CardScroll noSpaces>{cards}</CardScroll>
       <CardScroll withSpaces={withSpaces}>{cards}</CardScroll>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/chip.ts.snap

@@ -6,11 +6,11 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Chip value="Чип" removable={true} removeLabel="Удалить">
         Чип
       </Chip>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/chips-input.ts.snap

@@ -6,11 +6,11 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ChipsInput id="color" value={colors} placeholder="Введите название цвета">
         Чип
       </ChipsInput>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap

@@ -7,7 +7,7 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ConfigProvider platform="ios">
         <App />
       </ConfigProvider>
@@ -38,7 +38,7 @@ const App = () => {
       }}>
         <App />
       </ConfigProvider>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/content-card.ts.snap

@@ -6,10 +6,10 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ContentCard {...rest} headerComponent="h4"></ContentCard>
       <ContentCard headerComponent="h4"></ContentCard>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/date-input.ts.snap

@@ -6,7 +6,7 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <DateInput
         value={value}
         prevMonthLabel="prevMonthLabel"
@@ -19,7 +19,7 @@ const App = () => {
         clearFieldLabel="clearFieldLabel"
         showCalendarLabel="showCalendarLabel"
       />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/date-range-input.ts.snap

@@ -6,7 +6,7 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <DateRangeInput
         value={value}
         prevMonthLabel="prevMonthLabel"
@@ -23,7 +23,7 @@ const App = () => {
         clearFieldLabel="clearFieldLabel"
         showCalendarLabel="showCalendarLabel"
       />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/fixed-layout.ts.snap

@@ -7,10 +7,10 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <FixedLayout getRootRef={ref2}>...</FixedLayout>
       <FixedLayout getRootRef={ref1} boolValue>...</FixedLayout>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/form-item.ts.snap

@@ -6,11 +6,11 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <FormItem top={top} topComponent="h5"></FormItem>
       <FormItem top={top} htmlFor={htmlFor}></FormItem>
       <FormItem></FormItem>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap

@@ -6,10 +6,10 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Gallery>{slides}</Gallery>
       <Gallery dragDisabled>{slides}</Gallery>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap

@@ -6,11 +6,11 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Image src="image.svg"></Image>
       <ImageBase noBorder src="image.svg"></ImageBase>
       <VKUIAvatar />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/modal-card.ts.snap

@@ -6,15 +6,15 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ModalCard header={header} headerComponent="h2"></ModalCard>
       <ModalCard subheader={subheader} subheaderComponent="h5"></ModalCard>
       <ModalCardBase
         header={header}
         subheader={subheader}
         subheaderComponent="h5"
         headerComponent="h2"></ModalCardBase>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap

@@ -7,12 +7,12 @@ import '@vkontakte/vkui/dist/vkui.css';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <ModalPageHeader getRootRef={ref2}>...</ModalPageHeader>
       <ModalPageHeader getRootRef={ref1} boolValue>...</ModalPageHeader>
       <ModalPageHeader>...</ModalPageHeader>
       <ModalPageHeader noSeparator>...</ModalPageHeader>
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;

packages/codemods/src/transforms/__tests__/__snapshots__/pagination.ts.snap

@@ -6,14 +6,14 @@ import React from 'react';
 
 const App = () => {
   return (
-    <React.Fragment>
+    (<React.Fragment>
       <Pagination
         currentPage={currentPage}
         onChange={handleChange}
         prevButtonLabel="prevButtonLabel"
         nextButtonLabel="nextButtonLabel"
       />
-    </React.Fragment>
+    </React.Fragment>)
   );
 };"
 `;