Библиотека компонентов, зависящая от сторонней библиотеки или фреймворка. - PullRequest
Новая
       43

Библиотека компонентов, зависящая от сторонней библиотеки или фреймворка.

3 голосов
/ 16 июня 2020

Допустим, у меня есть библиотека компонентов с кнопками, полями ввода и более сложными компонентами, которые я хочу распространять через npm, чтобы я мог использовать ее во множестве различных «родительских проектов», чтобы получить одинаковый внешний вид во всех моих различных приложениях.

Допустим, библиотека компонентов и все «родительские проекты» построены на React. С таким же успехом они могут быть построены в Vue или Angular или что-то еще, но давайте go с реакцией

Давайте также скажем, что я большой поклонник внешнего вида в материальном дизайне, поэтому в моя библиотека компонентов Я хочу использовать material-ui в некоторых из моих компонентов, но не во всех. Я все еще хочу обернуть компоненты material-ui, чтобы убедиться, что все мои родительские проекты используют их одинаково, и они могут быть настроены и т. Д.

Допустим также, что я хочу, чтобы пользователь мог изменить тему в некоторых родительских проектах на темный режим или, может быть, что-то, что влияет на типографику или что-то еще. Таким образом, компоненты зависят от выбранной темы для их стиля, как и родительские проекты.

Давайте также скажем, что, поскольку мне так нравится материальный дизайн, я мог бы использовать его непосредственно в родительских проектах. . Но только в некоторых проектах.

Теперь у меня вопрос, как технически организовать различные проекты.

  1. Можно ли полностью избавиться от зависимости material-ui в родительские проекты. То есть не требовать от родительских проектов предоставить версию и не поставлять ее с пакетом npm?
  2. Если это невозможно. Какие плюсы и минусы у требования peerDependency от родителя по сравнению с предоставлением одного из компонентной библиотеки?
  3. Как я могу обрабатывать тему и при этом хорошо инкапсулировать компоненты? Кто отвечает за настройку темы? Когда в родительском проекте будет задана стилизация темы? Следует ли отправлять выбранную тему в компонент? Должен ли я копировать стиль темы, чтобы компоненты были инкапсулированы?

TLDR; Мне нужна библиотека компонентов, которая зависит от другой библиотеки третьей части, и я хочу, чтобы мои компоненты были максимально инкапсулированы. Что может быть для этого хорошей структурой?

1 Ответ

1 голос
/ 16 июня 2020

Создайте свою собственную папку компонентов, которая содержит ваши компоненты, такие как Button, и инкапсулируйте вокруг кнопки material-ui / любого стороннего компонента, который вы выберете. Таким образом, создаваемую вами библиотеку компонентов можно будет тестировать, использовать повторно как модуль npm, а также использовать шаблон и использовать в компонентах контейнера в качестве компонентов проекта. Это в основном сводит к минимуму накладные расходы на создание начальных компонентов, которые уже доступны в сторонней библиотеке. Также material-ui поддерживает темы и переменные, поэтому вы всегда можете создать некоторые переменные для цветов, размера шрифта и т. Д. c и использовать эти значения переменных внутри ваших компонентов. 

themes
     -> blue.theme.js
             $primaryColor:'blue'
     -> white.theme.js
             $primaryColor:'white'
     -> dark.theme.js
             $primaryColor:'deepBlue'

components
     -> Button.js
            <MuiButton.js />
        Button.scss
             color: $primaryColor;
...