react-ui-codemod

react-ui-codemod

Пакет с кодмодами для помощи с трансформацией кода при обновлении библиотеки.

Использование

С помощью npx:

npx react-ui-codemod CODEMOD [JSCODESHIFT_OPTIONS] [CODEMOD_OPTIONS]

или с установкой пакета:

yarn add react-ui-codemod
yarn react-ui-codemod CODEMOD [JSCODESHIFT_OPTIONS] [CODEMOD_OPTIONS]

Опции

CODEMOD - относительный путь до кодмода внутри пакета.

В качестве JSCODESHIFT_OPTIONS принимаются все опции jscodeshift, кроме -t (--transform). По умолчанию трансформируются файлы с расширением "js, jsx", используя "babel" в качестве парсера. Для typescript и flow файлов стоит передавать соответствующие опции: --extensions="ts,tsx" --parser=tsx и --parser=flow.

Некоторые кодмоды также могут иметь свои опции (CODEMOD_OPTIONS).

Список кодмодов

creevey/testsToFiles

Переносит код скриншотных тестов из история в отдельные файлы.

npx react-ui-codemod creevey/testsToFiles STORIES_PATH --testsPath=/home/dev/my-project/tests/

Опции	Описание	По умолчанию
testsPath	Путь для создания новых файлов с тестами. Абсолютный или относильно файла истории.	../__creevey__

creevey/skipsArrays

Обновляет формат creevey-скипов в параметрах историй. Подробнее.

npx react-ui-codemod creevey/skipsArrays STORIES_PATH

react-ui-4.0/transformLabelToCaption

Для компонента Switcher переименовывает проп label на caption. Подробнее здесь 2121#discussion_r488456100.

npx react-ui-codemod react-ui-4.0/transformLabelToCaption FILES_PATH

react-ui-4.0/renameThemeVars

Переименовывает переменные темы с label в caption для компонентов Radio, Checkbox, Switcher 2629.

npx react-ui-codemod react-ui-4.0/renameThemeVars.ts FILES_PATH

addons-3/renameThemeVars

Переименовывает переменные темы в соответствии с изменениями в !122.

npx react-ui-codemod addons-3/renameThemeVars.ts FILES_PATH

react-ui-2.0/transformImportsAndExports.ts

Правит импорты и реэкспорты из библиотеки в соответствии с изменениями #1828 #1932.

Трансформации в общих чертах:

• все компоненты импортируются из @skbkontur/react-ui
• дефолтные импорты/экспорты из библиотеки заменяются на именованные
• публичные компоненты импортируются из корня пакета
• все internal-компоненты перенесены в "@skbkontur/react-ui/internal"

npx react-ui-codemod react-ui-2.0/transformImportsAndExports.ts FILES_PATH

Опции	Описание	По умолчанию
alias	Имя пакета контролов, который используется в проекте, или его alias. Например, "retail-ui"	@skbkontur/react-ui
dedupe	Объединять ли ипорты/экспорты из одного источника в общий после трансформации	true

Внимание: импорты некоторых непубличных модулей, например @skbkontur/react-ui/components/DatePicker/DatePickerHelpers, будут так же трансформированы в импорты из индекса @skbkontur/react-ui и сломаются. Такие места нужно будет поправить вручную.

react-ui-2.0/transformOnChange.ts

Трансформирует пропы "onChange" в соответствии с изменениями #1859. Смотри таблицу изменений в #1843.

npx react-ui-codemod react-ui-2.0/transformOnChange.ts FILES_PATH

react-ui-2.0/moveToAddons.ts

Применяется только после transformInputsAndExports

Правит импорты специфичных компонентов в соответствии с изменениями #1848. Может быть применен к отдельным компонентам.

Трансформации в общих чертах:

• компоненты Fias, FiasSearch, Logotype, TopBar, Spinner ипортируются из пакета "@skbkontur/react-ui-addons"

npx react-ui-codemod react-ui-2.0/moveToAddons.ts FILES_PATH --component=COMPONENT

Опции	Описание	По умолчанию
component	Имя отдельного компонента для трансформации, например "Fias"	По умелчанию применяется ко всем компонентам

react-ui-2.0/addCloudProp.ts

Добавляет проп "cloud" на Loader и Spinner в соответствии с изменениями #1848. Может быть применен к отдельным компонентам.

npx react-ui-codemod react-ui-2.0/addPropCloud.ts FILES_PATH --component=COMPONENT

Опции	Описание	По умолчанию
component	Имя отдельного компонента для трансформации, например "Loader"	По умелчанию применяется ко всем компонентам

customization/variablesConverter.js

Конвертирует less-переменные в js-объект.

Перед запуском скрипт необходимо скачать и положить в папку с проектом. В процессе конвертации используется пакет less.js, который скрипт возьмет из зависимостей проекта.

node variablesConverter.js variables=../../less/myVariables.less output=../theme/theme.js

Примеры

npx react-ui-codemod font-to-svf/transform.js ./src
npx react-ui-codemod react-ui-2.0/transformImportsAndExports.ts ./src --alias=retail-ui
npx react-ui-codemod react-ui-2.0/addCloudProp.ts ./src --extensions=ts,tsx --parser=tsx --component=Spinner
npx react-ui-codemod react-ui-2.0/moveToAddons.ts ./src --parser=flow