Вы заблудились, пытаясь создавать и использовать веб-компоненты? Skate.js использует платформу и проливает свет на нее.

Что будем строить?

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

  • Автофокус при создании тегов.

  • Естественное удаление при нажатии DEL.
  • Пользовательский интерфейс 100% настраиваемый, полный контроль над элементами внутри shadowDom.
  • Разрешить пользователю удалять теги нажатием кнопки.
  • Начальное значение через атрибуты компонента.
  • Объем ввода автоматически увеличивается по мере того, как пользователь что-то вводит.
  • Укажите настраиваемый разделитель.

Вступление

Веб-компоненты хороши тем, что позволяют нам определять пользовательские элементы HTML и инкапсулировать их поведение. Но сегодня я хочу представить вам библиотеку, в которую я недавно играл, и которая может изменить то, как вы видите веб-компоненты.

Skate.js - это легкая библиотека (4k min + gz), которая фокусируется на использовании спецификаций веб-компонентов и дает вам функциональный конвейер рендеринга.

Skate.js достигает этого с помощью двух наиболее важных функций веб-компонентов:

Хорошо, но ... Что все это значит? Хорошо, давайте взглянем на код.

Регистрация компонента 📦

В первую строку мы включаем модуль skatejs-web-components, который предоставляет все необходимые полифиллы для Skate.js, поэтому вам не нужно беспокоиться о совместимости браузера.

Позже мы создаем скелет нашего компонента, расширяем Skate Component, который похож на WebComponent на стероидах, и мы можем просто передать его customElements.define✌.

️Мы определяем макет компонента в renderCallback, почти так же, как вы делаете с React.js в методе рендеринга. И, наконец, мы регистрируем свойства, которые при изменении вызывают повторный рендеринг.

В результате мы получим компонент с shadowDom:

Добавление поведения: События + реквизит 🔩

Теперь у нас есть полностью рабочий компонент тега 🎉, вот что мы добавили:

  • tags prop: свойство, которое содержит состояние тегов, каждый раз, когда мы его изменяем, Skate.js будет повторно отображать ваш компонент с минимальными изменениями DOM. Приятно то, что мы используем метод props.array, он является встроенным и гарантирует, что любое значение, передаваемое в свойство, является массивом, что позволяет нам анализировать значение свойство и установите начальное значение, например: <sk-tags tags="[milk,bread,chocolate]" />
  • Изменение размера ввода: это ключевая часть компонента, обеспечивающая его адаптивность. Метод adjustInputSize устанавливает ширину реального ввода каждый раз, когда значение изменяется, таким образом компонент правильно разрывает строку.
  • Обработка разделителей: onIput проверяет, совпадает ли последний введенный пользователем символ с разделителем компонентов (по умолчанию используется пустое пространство).

На изображении выше показано, как мы используем элемент тегов (синий) для добавления тегов и как настоящий элемент ввода (красный) динамически растет, делая компонент отзывчивым.

Разрешение удаления + пользовательские стили 💅

Изменения здесь довольно просты, 2 новых свойства удаление и стили просто объединяют стили по умолчанию + стили пользователя, позволяя ему делать что-то вроде этого:

<sk-tags styles=".tag{ background-color: red;} .wrapper{ border: 1px solid black; }" />

Или, если вы предпочитаете что-то более удобное в обслуживании, вы можете сделать это:

Просто используйте помощник стилей 10 строк, который преобразует объекты в содержимое css.

Заключение

Строительные компоненты со Skate.js кажутся вполне естественными. Раньше у меня не было опыта с этим, но многие вещи работали из коробки так, как я ожидал, и этого было достаточно для меня, чтобы понять преимущества, которые предоставляет Skate.js по сравнению с созданием компонента с помощью vanilla js. .

Я почти уверен, что если вы знакомы с веб-компонентами, вы можете обнаружить, что некоторых вещей не хватает, например, наличия высокоуровневого способа рендеринга вашего компонента без необходимости вручную изменять DOM или наличия механизма, который заботится о свойствах и сохраняет Пользовательский интерфейс синхронизирован с фактическим состоянием компонента, надежным API свойств и т. Д. Вы можете обнаружить, что эти проблемы решены с помощью самоуверенного подхода Skate.js.

Напомним, что мы рассмотрели props и extension из документации. В следующей статье я хочу показать вам, как создать более продвинутый компонент, и рассказать о других интересных частях библиотеки.

Наконец, я хотел бы порекомендовать вам хороший источник с YouTube-канала ChromeDevelopers, серию Supercharged, в которой вы можете увидеть отличные живые демонстрации того, как создавать веб-компоненты сегодня, и вы можете сравнить их 👀.

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

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!