Это четвертая часть моей серии статей Как использовать React в плагине Sketch.
В этой статье мы более подробно рассмотрим проблему начальной загрузки данных. Проблема заключается в том, что ad-hoc заставляет пользовательский интерфейс React отображаться без данных Sketch при первом открытии окна плагина.
Я также дам вам решение этой проблемы.
Прежде чем мы начнем
Я буду использовать свой плагин-проект из моего предыдущего руководства в качестве шаблона.
Если вы не читали мои предыдущие статьи из этой серии, я настоятельно рекомендую вам это сделать. Эта статья будет иметь гораздо больше смысла, если вы прочитаете их в первую очередь.
TLDR; В конце этой статьи есть полный демонстрационный репозиторий.
Обратите внимание, что подключаемый модуль реагирует только на слои, не страницы. Если вы запустите плагин с выбранной страницей, она будет отображаться без данных Sketch. (Это хорошее упражнение для вас, чтобы изменить это в вашей собственной версии этого плагина 😎👍)
Три части плагина с пользовательским интерфейсом React
Плагин Sketch, использующий пользовательский интерфейс React, можно разделить на три части:
Интерфейс
По сути, это веб-браузер (включая DevTools). Это WebView, и его API имитирует API BrowserWindow Electron.
WebView отображается в отдельном окне поверх пользовательского интерфейса Sketch.
WebView обменивается информацией с серверной частью, используя комбинацию window.postMessage (отправка данных) и приемников событий (получение данных).
Реагирующий пользовательский интерфейс
Именно в WebView мы загружаем и показываем наш пользовательский интерфейс React так же, как запускаем обычное приложение React в обычном веб-браузере.
Серверная часть
Это часть плагина, которая связана с данными в вашем документе Sketch. Бэкенд использует API разработчика Sketch.
Back-end обменивается информацией с front-end через листеры событий на объекте webContents.
Проблема с начальной загрузкой данных
Начальная загрузка данных — это данные, которые отправляются из серверной части в пользовательский интерфейс React после завершения загрузки WebView (интерфейсной части).
Проблема с отправкой данных на ранний
Во время разработки моего плагина я понял, что время от времени, когда я запускал свой плагин, пользовательский интерфейс React не получал никаких данных Sketch?
Я пытался понять, что пошло не так, и в конце концов объяснил себе шаг за шагом, что происходит, когда плагин запускается.
Что происходит при запуске плагина?
- Серверная часть открывает WebView (интерфейс) и ожидает, что событие did-finish-load будет отправлено из WebView.
- Внешний интерфейс встречает код JavaScript, который загружает пользовательский интерфейс React.
- Пользовательский интерфейс React прослушивает событие send-data.
- Внешний интерфейс генерирует событие did-finish-load , сообщая серверной части, что загрузка завершена.
- Серверная часть распознает событие (did-finish-load) и отправляет данные, используя событие send-data.
- Пользовательский интерфейс React распознает событие (send-data) и заполняет пользовательский интерфейс данными события.
Проблема
Я думал, что это происходит синхронно, но оказалось, что это не всегда так. Иногда шаг 4 выполняется перед шагом 3, что приводит к ситуации, когда серверная часть отправляет данные до того, как пользовательский интерфейс React будет готов.
Это приводит к тому, что пользовательский интерфейс React не заполняется никакими данными Sketch.
Решение
Мы реверсируем обмен данными.
Вместо того, чтобы серверная часть прослушивала и реагировала на событие did-finish-load, мы указываем пользовательскому интерфейсу React запрашивать данные, как только они будут готовы.
Это требует некоторых изменений в нашем коде:
моя-command.js
В отличие от события did-finish-load, событие get-data не запускается автоматически WebView. Событие get-data запускается только один раз.
использоватьSketchData.js
Мы добавляем функцию refreshSketchData в наш хук React, который запускает внутренний прослушиватель событий get-data . Это заставляет серверную часть подключаемого модуля отправлять данные Sketch с помощью события send-data.
App.jsx
Мы добавляем useEffect, который срабатывает один раз, когда пользовательский интерфейс React готов обрабатывать данные Sketch. В useEffect мы вызываем нашу только что созданную функцию — refreshSketchData.
Вот и все! 🎉 Теперь мы изменили начальную загрузку данных и тем самым предотвратили визуализацию нашего пользовательского интерфейса React без данных Sketch.
Вы можете найти полный демо-репозиторий здесь.
Чтобы увидеть более сложный пример того, что вы можете создать с помощью моих руководств, ознакомьтесь с подключаемым модулем Sketch2React’s App Builder. Он создан на основе одного из моих учебных репозиториев (!)
Спасибо за прочтение!
/Фредрик
Токены команды Sketch2React/Marcode/Stratos