Этим летом я работаю над проектом Thunderbird — Convert XUL to HTML, в качестве кандидата на Google Summer of Code 2017. Я очень взволнован и взволнован, чтобы начать свое путешествие в Mozilla. Я буду работать над надстройкой Mozilla Calendar для Thunderbird, также известной как Lightning. Целью этого проекта будет преобразование диалоговых окон XUL в их версии React.

Вторая неделя периода написания кода подходит к концу, и есть что рассказать о ходе проекта Convert XUL to HTML. Мне удалось настроить сбалансированную среду разработки и преобразовать диалог в React. Пока дела идут хорошо, время, затраченное на настройку среды разработки, приносит свои плоды.

Начну с того, что расскажу немного о проблемах, с которыми столкнулся, а позже немного о решениях, которые я нашел. разобрались. Поскольку в Thunderbird нет дополнительного шага сборки, с самого начала было совершенно ясно, что все, что требует дополнительного шага сборки/компиляции, НЕТ для этого проекта. Это означает, что мне приходится идти на компромисс с замечательными функциями, такими как горячая перезагрузка, jsx и т. д., которые часто сочетаются с React. Еще одна небольшая проблема, с которой я столкнулся, заключалась в стилизации компонентов диалогового окна, чтобы они могли выглядеть точно так же, как их XUL-версии. теги script и писать код без jsx в vanilla js, но позже я подумал, почему бы не автоматизировать эту трудность. Я настроил Babel с пресетом реакции и написал несколько строк кода, чтобы сделать чистую среду npm для выполнения всех этих задач. Поскольку при запуске Babel в исходном каталоге выводились только файлы js, я написал несколько задач gulp для копирования файлов HTML и CSS в скомпилированный каталог js.

Копировать каждый файл вручную довольно утомительно. поэтому я решил пойти с Gulp. Я также написал сценарий bash, который удаляет сценарии Babel и редактирует тип основных файлов javascript в HTML-файлах скомпилированного каталога. Теперь в файлах скомпилированного каталога (dist) нет постороннего кода.

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

Как веб-разработчик, я никогда не беспокоился о стиле браузера по умолчанию, но для этого проекта я должен быть полностью зависит от тем из набора инструментов Firefox и скинов CSS для Thunderbird. Это начало обретать смысл после нескольких часов работы, и теперь я могу создать точно такой же макет и внешний вид элементов в React, как и в диалоговых окнах XUL. Все спасибо инструментам разработчика Thunderbird и «DXR».

Диалог, который мы с моим наставником Филиппом решили сделать первым, был диалогом «календарь-свойства-диалог», так как он был простым. и это помогло бы мне получить удобный старт. Это диалоговое окно теперь полностью готово, за исключением нескольких специфичных для ОС правил CSS, которые можно будет сделать позже, после тестирования диалогового окна в Thunderbird. Работать над этим диалоговым окном было весело и легко, и я надеюсь, что это удовольствие и легкость продолжится.

Любой может проверить ход проекта, либо заглянув в этот «репозиторий», либо зайдя в журнал. на «https://gsoc17-convert-xul-to-html.herokuapp.com». Я также создал полигон для тестирования iframe, где пользователь может отправлять и изменять объект состояния диалога и открывать диалог в iframe. Эта страница использует тот же API HTML5 postMessage для связи между iframe и родителем, который будет использоваться в диалоговых окнах Thunderbird, аналогично тому, как он уже работает для диалога событий в прошлом проекте GSoC. Я уверен, что тестовая площадка сэкономит много времени при отладке и ясно покажет, как обстоят дела внутри диалогового окна. Это как мини-панель управления для наших диалоговых окон.

Lightning традиционно использует XUL для своего пользовательского интерфейса. Для модернизации мы хотели бы преобразовать диалоги, содержимое вкладок и другие части пользовательского интерфейса в HTML. Новые компоненты должны максимально использовать веб-стандарты, избегая широкого использования сторонних библиотек.

Мы еще не тестировали текущее диалоговое окно реакции в Thunderbird, но после интеграции версии диалоговых окон реакции в Thunderbird мы, скорее всего, не будем использовать все эти инструменты для генерации кода, а сосредоточимся на использовании минимальных инструментов, доступных в Система сборки Mozilla. Мы хотели бы услышать предложения от людей из Mozilla devtools, чтобы узнать, есть ли у них планы по улучшению поддержки инструментов и, возможно, использованию jsx, поскольку его намного легче читать, чем преобразовать в javascript.

Я согласен очень взволнован в течение следующих недель, и я надеюсь, что все пойдет хорошо, как это продолжалось. Большое спасибо моему наставнику Филиппу за его постоянную поддержку и сообществу Mozilla за ответы на мои вопросы в IRC. Любые советы, предложения и, возможно, ободряющие слова всегда приветствуются :)

Ознакомьтесь с другими блогами из серии проектов Convert XUL to HTML —

«Часть 1: Первые шаги — преобразование XUL в HTML»

Часть 2: есть на что посмотреть — конвертировать XUL в HTML

Часть 3. Простое стало легким — преобразование XUL в HTML

Первые шаги — преобразование XUL в HTML