Автоматическое создание компонентов с помощью React

Пролог

Создание библиотеки компонентов требует много размышлений и времени. У каждого компонента есть свои требования, и мы ожидаем, что он будет выполнять определенную функцию. Создание идеально стабильного и прочного компонента — это искусство. Но что, если бы вы могли автоматизировать это? Не все компоненты могут быть созданы, но, по крайней мере, основные компоненты, такие как кнопка или компоненты текстового дисплея, могут быть созданы автоматически. Вы спросите как? Что ж, я покажу вам, так что давайте начнем!

Идея

React представляет каждый компонент в виде дерева, где каждый дочерний узел является элементом реакции с некоторыми реквизитами. Мы используем ту же идею для представления структуры компонента в виде JSON, а затем создаем движок, который проходит через JSON, создает элемент для каждого узла и добавляет к нему свойства. Мы получим дерево компонентов, которое можно скомпилировать в компонент.

Основной пример: `Button`

Каждый компонент состоит из оболочки, текста и изображения. Рассмотрим компонент Button. Базовую кнопку можно считать состоящей из 2 элементов:

button — HTML-элемент кнопки
text - Название/потомок кнопки. Видимый текст

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

Однако это не так просто. Очень важной и, возможно, ключевой частью компонента является его поведение. Предположим, компонент Accordion, основная функциональность которого заключается в его поведении при открытии и закрытии панелей. В настоящее время это невозможно. Но чтобы упростить задачу и сосредоточиться на создании атомарных компонентов, мы сосредоточимся только на пользовательском интерфейсе.

Вот базовый пример компонента Button в виде JSON.

{
  "metaData": {
    "id": "button"
  },
  "layer": {
    "type": "button",
    "style": {
      "padding": "15px 20px",
      "background": "white",
      "border": "1px solid black",
      "border-radius": "100px"
    },
    "data": {
      "control": "title"
    }
  }
}

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

metaData хранит основную информацию о компоненте
layer можно рассматривать как узел/элемент/оболочку в компоненте. У этого layer могут быть дочерние элементы, которые снова могут содержать слои.
layer будет иметь свойства, стили и другие данные, относящиеся к этому элементу/слою.

Подробнее о полной структуре JSON ниже.

Архитектура

Простой компонент может иметь следующие свойства: Эта кнопка имеет следующие свойства:

meData — основная информация о компоненте, такая как его имя, уникальный идентификатор, варианты по умолчанию и т. д.
layer - Узел блока компонента (например, кнопка, div)
properties - атрибуты или пропсы слоя ( class, tabIndex)
styles - css для блока/слоя компонента
children - Подузлы/обертки, которые снова могут содержать все эти свойства
variations - Различные типы компонента. (Пример: кнопка успеха, третья кнопка)

Свойство children может быть всей этой структурой снова и снова, точно так же, как каждый дочерний элемент может быть компонентом в React.

Шаги

Существует 4 основных этапа создания этого движка.

Идентификация слоя и создание элемента слоя с помощью React.createElement
Добавление реквизита к нему
Идентификация дочерних элементов, создание из них элементов на основе их типа и передача их в качестве дочерних элементов текущему слою.
Извлечение свойств и стилей вариантов и переопределение их

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

Стили

Стили были главной заботой, пока я пытался сделать эту работу. Я пытался использовать встроенные стили, где я вводил стили с другими реквизитами в каждый элемент и переопределял их с помощью различных стилей. Это работало хорошо, пока я не понял, что не могу добавлять к элементу псевдостили, такие как hover, focus, и т. д. Решением было создать внутренние стили для каждого компонента и визуализировать элемент стиля вместе с компонентом. Таким образом, я мог бы определить эти состояния как узел в объекте стилей.

Пример:

{
...
  "style": {
    "color": "red",
    ":hover": {
      "color": "blue"
    }
  ...
  }
...
}

Каждый слой в JSON имеет идентификатор. Мы используем этот идентификатор для создания уникального имени класса и прикрепления к нему стилей.

Примеры

На данный момент мне удалось создать около 2–3 компонентов с помощью движка.

Кнопка

Структура JSON этого компонента проста. Но он содержит такие варианты, как первичная и вторичная кнопка.

Вход

Компонент Input содержит три элемента: метку, фактический элемент ввода и вспомогательный текст. Он имеет вложенную структуру, поскольку текст метки, ввод и вспомогательный текст являются дочерними элементами элемента метки. У него также есть вариант invalid, как показано ниже, который добавляет красную рамку к элементу Input.

Для получения дополнительной информации и понимания базового кода, пожалуйста, посетите репозиторий GitHub:

Обязательно поставьте звездочку!

Ограничения

Хотя это интересная идея, ее можно рассматривать просто как исследование. Это совсем не масштабируемо, потому что создание сложных компонентов, таких как Аккордеон, пока вообще невозможно. Некоторые другие проблемы, которые требуют дополнительного внимания:

В настоящее время нет возможности добавить к нему поведение.
Пока поддерживаются только проходящие дети. Требуется дополнительная реализация, чтобы можно было передавать больше реквизитов, например: href в ссылку.
Компонент не хранит никаких значений, что сильно ограничивает варианты его использования.

Это не просто ограничения. Это цели/дополнительные шаги, которые необходимо реализовать.

Заключение

Идея заключалась не в том, чтобы автоматизировать весь процесс. Речь шла о создании движка, который будет создавать компоненты из JSON. Но JSON может прийти откуда угодно. Если мы автоматизируем создание JSON, то в значительной степени автоматизируем и весь процесс. Например, файлы Figma можно анализировать для получения слоев и их стилей с помощью их API.

Хотя у него много ограничений, идея, стоящая за ним, довольно интересна и нестандартна. Следующими шагами будет заставить их хранить значения и принимать функции, чтобы сделать их интерактивными.

Эта статья была написана Нищит Рао. Он разработчик React, который любит создавать вещи для Интернета.

Автоматическое создание компонентов с помощью React