retail-ui
retail-ui copied to clipboard
[react-ui] Про относительные пути, индекс файлы и авто импорт IF-634
Есть несколько проблем с импортом компонентов:
- Папки с компонентами и сущностями (такие как
internal
,components
,lib
и другие) не имеютindex
файлов, из-за чего импорты из них зачастую разрастаются и превращаются в нечто подобное:
import { isTestEnv } from '../lib/currentEnvironment';
import { ThemeContext } from '../lib/theming/ThemeContext';
import { FLAT_THEME_OLD } from '../lib/theming/themes/FlatThemeOld';
import { FLAT_THEME } from '../lib/theming/themes/FlatTheme';
import { DEFAULT_THEME_OLD } from '../lib/theming/themes/DefaultThemeOld';
import { DEFAULT_THEME } from '../lib/theming/themes/DefaultTheme';
Вместо чего-то подобного:
import { isTestEnv } from '../lib';
import { ThemeContext } from '../lib/theming';
import { FLAT_THEME, FLAT_THEME_OLD, DEFAULT_THEME_OLD, DEFAULT_THEME } from '../lib/theming/themes';
Из-за чего ухудшается читаемость импортов и разрастается сам файл.
- Часть компонентов не выделяет сущности в отдельные папки, из-за чего происходит следующее:
import { Selection, SelectionDirection, SelectionHelper } from './SelectionHelper';
import { CurrencyHelper } from './CurrencyHelper';
import { CurrencyInputHelper } from './CurrencyInputHelper';
Хотя правильнее:
import { Selection, SelectionDirection, SelectionHelper, CurrencyHelper, CurrencyInputHelper } from './helpers'
- Так как в
tsconfig
baseUrl
задан для всех проектов как./packages
. Это приводит к "багу" при авто импорте: путь до файла прописывается относительно директорииpackages
, а не относительно директории текущего проекта, из за чего мы получаем'react-ui/internal/Calendar/config'
который не будет распознан проектом корректно и выкинет ошибку, вместо'internal/Calendar/config'
который будет корректно отрабатывать. - Из-за некорректного
baseUrl
также возникает ещё одна проблема: нет возможности прописывать абсолютные импорты, из-за чего мы получаем:
import { CustomComboBoxLocaleHelper } from '../../../internal/CustomComboBox/locale';
import { LangCodes, LocaleContext } from '../../../lib/locale';
import { defaultLangCode } from '../../../lib/locale/constants';
import { InputLikeText } from '../../../internal/InputLikeText';
import { MenuItem } from '../../MenuItem';
import { Menu } from '../../../internal/Menu';
import { delay } from '../../../lib/utils';
Вместо следующего (также внесены правки из первого пункта):
import { CustomComboBoxLocaleHelper, InputLikeText, Menu } from 'internal';
import { LangCodes, LocaleContext, defaultLangCode, delay } from 'lib';
import { MenuItem } from 'components';
- Пока не можем использовать индексы, потому что собираем библиотеку одновременно и в es6 и в cjs. С последним не работает тришейкинг, что потенциально приведет к разрастанию бандлов пользователей из-за библиотеки. Нужно сначала разобраться с IF-186.
- Предполагается все в одном файле держать? Чем это лучше?
- и 4. Звучит неплохо, но как предполагается это будет работать для собранного js? Насколько я понял, ts сам не меняет такие пути на корректные во время сборки.
- Нет, это не файл, а директория в папке компонента. Такая директория есть например у компонента
DateInput
. - У бабеля есть специальный плагин который решает эту проблему.
Storybook
тоже не понимает абсолютные пути и ему о них тоже придётся рассказывать с помощью плагина.
Можно попробовать, ничего против не имею.
На счет конкретно lib
есть еще одна задачка IF-215, которая тоже поможет с этой проблемой.