Это четвертая часть моей серии статей Как использовать 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?

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

Что происходит при запуске плагина?

  1. Серверная часть открывает WebView (интерфейс) и ожидает, что событие did-finish-load будет отправлено из WebView.
  2. Внешний интерфейс встречает код JavaScript, который загружает пользовательский интерфейс React.
  3. Пользовательский интерфейс React прослушивает событие send-data.
  4. Внешний интерфейс генерирует событие did-finish-load , сообщая серверной части, что загрузка завершена.
  5. Серверная часть распознает событие (did-finish-load) и отправляет данные, используя событие send-data.
  6. Пользовательский интерфейс 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