retail-ui icon indicating copy to clipboard operation
retail-ui copied to clipboard

[react-ui] Про относительные пути, индекс файлы и авто импорт IF-634

Open JackUait opened this issue 3 years ago • 3 comments

Есть несколько проблем с импортом компонентов:

  1. Папки с компонентами и сущностями (такие как 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';

Из-за чего ухудшается читаемость импортов и разрастается сам файл.

  1. Часть компонентов не выделяет сущности в отдельные папки, из-за чего происходит следующее:
import { Selection, SelectionDirection, SelectionHelper } from './SelectionHelper';
import { CurrencyHelper } from './CurrencyHelper';
import { CurrencyInputHelper } from './CurrencyInputHelper';

Хотя правильнее:

import { Selection, SelectionDirection, SelectionHelper, CurrencyHelper, CurrencyInputHelper } from './helpers'
  1. Так как в tsconfig baseUrl задан для всех проектов как ./packages. Это приводит к "багу" при авто импорте: путь до файла прописывается относительно директории packages, а не относительно директории текущего проекта, из за чего мы получаем 'react-ui/internal/Calendar/config' который не будет распознан проектом корректно и выкинет ошибку, вместо 'internal/Calendar/config' который будет корректно отрабатывать.
  2. Из-за некорректного 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';

JackUait avatar Jan 14 '22 11:01 JackUait

  1. Пока не можем использовать индексы, потому что собираем библиотеку одновременно и в es6 и в cjs. С последним не работает тришейкинг, что потенциально приведет к разрастанию бандлов пользователей из-за библиотеки. Нужно сначала разобраться с IF-186.
  2. Предполагается все в одном файле держать? Чем это лучше?
  3. и 4. Звучит неплохо, но как предполагается это будет работать для собранного js? Насколько я понял, ts сам не меняет такие пути на корректные во время сборки.

zhzz avatar Jan 14 '22 12:01 zhzz

  1. Нет, это не файл, а директория в папке компонента. Такая директория есть например у компонента DateInput.
  2. У бабеля есть специальный плагин который решает эту проблему. Storybook тоже не понимает абсолютные пути и ему о них тоже придётся рассказывать с помощью плагина.

JackUait avatar Jan 14 '22 13:01 JackUait

Можно попробовать, ничего против не имею.

На счет конкретно lib есть еще одна задачка IF-215, которая тоже поможет с этой проблемой.

zhzz avatar Jan 17 '22 06:01 zhzz