Веб-платформа Bit’s теперь визуализирует множественный экспорт для вашего компонента. Это круто и полезно. Вот почему.
Платформа Bit превращает JS-компоненты и модули в строительные блоки, которыми можно легко делиться, использовать и разрабатывать из любого проекта.
Используя Bit, вы можете быстро превратить любой фрагмент кода в API и поделиться им между командами и проектами, чтобы ускорить разработку.
По мере масштабирования совместного использования кода возрастает и необходимость делать код, которым вы делитесь, более организованным и доступным для обнаружения. В марте мы представили первую версию игровой площадки Bit, инструмента визуализации, который выполняет предварительный просмотр компонентов в реальном времени.
В последние месяцы многие разработчики использовали эту площадку для обмена компонентами со своими командами. Некоторые поделились отличными примерами с открытым исходным кодом.
Однако до сих пор эта игровая площадка работала только для экспорта по умолчанию, поэтому вы могли получить ошибку при попытке запустить ее в некоторых более сложных случаях использования:
На сегодняшний день у вас есть доступ ко всем экспортам, а не только по умолчанию. Это означает, что теперь вы можете визуализировать более широкий спектр вариантов использования и обеспечить лучший опыт для обмена полезной коллекцией компонентов.
Пример
Вот очень простой компонент, который я сделал с экспортом по умолчанию (Main) и дополнительным компонентом (Secondary).
Как видите, оба экспорта являются дескрипторами, и теперь на игровой площадке Bit представлены оба. Поскольку многие компоненты содержат второстепенные компоненты, эта функция значительно упрощает визуализацию в таких случаях.
Улучшенная визуализация позволяет легко выбирать компоненты собственными глазами, а также облегчает изучение того, как компоненты выглядят и ведут себя.
Под капотом (как это работает)
Когда компонент экспортируется с помощью Bit, он уже обрабатывается, прежде чем попасть в браузер. Он начинается как простой исходный код, а затем компилируется в один UMD пакет с помощью компилятора, такого как наш компилятор пакетов веб-пакетов.
Когда этот пакет запускается, он генерирует простой объект, компонент которого экспортируется как свойства этого объекта (более подробно вы можете увидеть это в этой статье о стандарте UMD).
Итак, предварительный просмотр в реальном времени теперь сканирует этот объект, находит все свойства и вводит их в область визуализации. Простой.
Как насчет экспорта по умолчанию? Что ж, это доступно как свойство default в объединенном результате. Однако default - это ключевое слово JS, и его неудобно использовать. Итак, для более естественного взаимодействия мы переименовали его в имя компонента, которое определено в документации @name (см. Более подробную информацию в нашей документации).
Все изменения обратно совместимы, поэтому ваши существующие компоненты должны работать нормально, и вы можете без проблем использовать обновленную игровую площадку.
В (ближайшее) будущее
В ближайшей дорожной карте Bit у нас есть несколько очень интересных функций. Важной частью этой дорожной карты является значительное улучшение процесса обнаружения компонентов: от того, как они организованы и представлены, до способности пользователя легко искать и выбирать лучшие компоненты.
Живая игровая площадка, над которой я лично работаю, будет играть важную роль в этом опыте. В течение короткого времени все виды компонентов и модулей будут визуализированы и визуализированы без необходимости изменять что-либо в вашем коде. Вы сможете легко просматривать визуализированные коллекции, выбирать их собственными глазами и получать при этом большой опыт.
Мы приветствуем все идеи, предложения и отзывы - дайте мне знать!
Ура, Ури
