ACLScript — это язык сценариев, похожий на SQL, используемый для различных целей анализа данных. Он обрабатывается механизмом аналитики Galvanize на различных платформах Galvanize, одной из которых является робототехническая платформа ACL, https://www.wegalvanize.com/robotic-process-automation/. Это предметно-ориентированный язык (DSL), уникальный для Galvanize. Пользователи упаковывают свои сценарии ACL в виде робота, который отправляется на платформу ACL Robotics Platform для планирования заданий, запускаемых на удаленном компьютере с механизмом аналитики.
Текущий рабочий процесс в режиме разработки в платформе Galvanize ACL Robotics Platform требует, чтобы пользователи загружали все сценарии, содержащиеся в пакете Robot, только для того, чтобы отредактировать одну строку в сценарии, чтобы внести изменения или исправить ошибку. Затем изменение необходимо повторно зафиксировать обратно в ACL Robotics Platform для последующей итерации выполнения.
Очевидная проблема заключается в том, что каталог загрузки пользователя загроможден множеством роботов. Кроме того, необходимо иметь соответствующую и совпадающую кодировку (не Unicode/Unicode) приложения Analytics, установленного только для открытия, редактирования и фиксации изменений. Тривиальное решение этой проблемы состоит в том, чтобы иметь онлайн-редактор кода ACLScript в Robotics Platform, чтобы исключить промежуточные шаги по переводу пользователя из проблемного состояния в желаемое конечное состояние.
С использованием существующей библиотеки с открытым исходным кодом это был проект с низкими усилиями и высокой отдачей для работы. На самом деле, это был идеальный проект для двухдневного хакфеста, чтобы продемонстрировать, как простое и тривиальное решение может повысить ценность нашего существующего продукта, а также сделать цикл код-выполнение-отладка-исправление далеко. менее утомительно.
Дизайн и взаимодействие с react-monaco-editor
Мы создали приложение React и использовали библиотеку react-monaco-editor для функций редактора кода. Эта библиотека имеет несколько готовых функций, таких как подсветка синтаксиса, языковая тема, автозаполнение, IntelliSense, проверка и режим редактирования различий. Для справки, популярная IDE Visual Studio Code также поддерживается Monaco-editor. Все, что нужно было сделать, это добавить наш язык ACLScript DSL. Все следующие примеры относятся к интеграции react-monaco-editor в существующее приложение.
Обучение Монако ключевым словам в AClScript
Чтобы редактор react-monaco успешно выделил код, мы должны указать список ключевых слов в языке ACLScript. Мы создали отдельный файл, содержащий определения синтаксиса для языка ACLScript. При наличии определений метод setMonarchTokensProvider используется для установки языка с помощью API из editor.api, как указано в операторе import. См. код ниже.
Ключевые слова ACLScript были добавлены как часть атрибута tokenizer. Этот метод устанавливает проверку ключевых слов для подсветки синтаксиса, а также обнаруживает комментарии в коде.
Добавление реализации автозавершения
Чтобы лучше понять проблему и решение, давайте кратко рассмотрим пример автодополнения для ACLScript:
Автозаполнение также легко выполняется с помощью метода registerCompletionItemProvider, предоставляемого react-monaco-editor. Атрибут label используется в качестве метки для IntelliSense. ${1:parameter1}, ${2:parameter2} в атрибуте insertText позволяет пользователям эффективно перемещаться по параметрам при вводе значений для данной команды ACLScript.
Для автоматического завершения команды SPLIT атрибуту label присваивается значение «SPLIT(string, separator, segment ‹,text_qualifier›)». Это метка, которую мы хотим, чтобы пользователи видели после того, как IntelliSense выберет соответствующее ключевое слово — для информации о параметрах и краткого описания. Как только пользователь нажимает клавишу ENTER, срабатывает наш атрибут insertText. Команда SPLIT принимает только три параметра, поэтому для атрибута insertText устанавливается значение “ SPLIT(“${1:} "","${2:}",${3:})". Редактор автоматически помещает курсор на первый параметр, где пользователь может начать вводить значение для первого параметра и перемещаться по остальным параметрам. Ниже приведен пример команд ACLScript, для которых включено автозаполнение.
Добавление языковой темы и глобальной темы редактора
Вы можете наследовать существующую цветовую тему из предварительно определенной темы и настроить каждый токен с помощью цвета, как показано ниже. Чтобы обеспечить работу, аналогичную работе в редакторе сценариев приложения ACL Analytics, мы добавили тему с почти идентичным внешним видом.
Добавление режима редактора различий
Ниже приведена краткая демонстрация режима редактора различий:
Режим редактирования различий был еще одной встроенной функцией, готовой к работе по принципу «подключи и работай». Исходное состояние — это текст внутри скрипта до внесения каких-либо изменений. Он устанавливается путем передачи свойств value компоненту класса MonacoEditor , куда вводится все начальное содержимое скрипта. Как только редактор кода запускается с начальным состоянием, любые изменения в скрипте автоматически отражаются в реквизитах value самим компонентом MonacoEditor.
В отличие от компонента MonacoEditor, компонент MonacoDiffEditor поддерживает дополнительный «оригинальный»атрибут, в который передается предыдущая версия кода ACLScript для визуального отображения. отображать разницу между предыдущей и текущей версиями. Чтобы включить режим редактирования различий, мы просто возвращаем компонент MoncaoDiffEditor в методе рендеринга нашего компонента App.
Заключение
Вот и первые шаги по созданию редактора кода со всеми основными функциями, которые, скорее всего, ожидает пользователь. Этот пост в блоге представляет собой базовое введение в создание редактора кода DSL и демонстрирует успешный проект хакфеста, который легко может стать значительным улучшением продукта. Если вы хотите понять и использовать все возможности react-monaco-editor, вы можете посетить их игровую среду по адресу https://microsoft.github.io/monaco-editor/playground.html и попробовать его для себя. У них есть много других функций, которые не рассматриваются в этом посте.
