monacode

Монакод

Тонкая обертка ES-модуля вокруг редактора Monaco и красивее

Изучение осуществимости импорта монако-редактора (который поддерживает код) и более красивые модули непосредственно в браузер; Стремившись сделать это на одну строку, чтобы привлечь уроженца, подобного редактированию кода, в веб -приложения без шага сборки.

Корабли со всеми функциями, обычно встречающимися в коде VS из коробки: такие вещи, как кодовые подсказки, вывод типа, минимум, командный поддон, мультикрсор, выберите, найдите и замените, складывают код и т. Д.

В дополнение к этим функциям, Prottier был интегрирован, так что удар ⌘ + s будет отформатировать код.

⚡ Проверьте размещенную версию по адресу https://monacode.live

Использование

Установите модуль в качестве модуля NPM и импортируйте его с помощью спецификатора модуля голой или импортируйте его непосредственно из UNPKG:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

Также возможно встроить редактор в ваше приложение, используя iframe (см. Demo):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

Передайте параметры конфигурации в IFRAME как параметры поиска URL, убедившись, что URI правильно кодирует значения. Обратите внимание, что в настоящее время невозможно пройти в вложенных параметрах конфигурации.

API

Модуль экспортирует одну функцию по умолчанию, которая принимает объект конфигурации в качестве аргумента. Поставляемая конфигурация объединяется с конфигурацией по умолчанию, которая само по себе является подмножеством доступных параметров для настройки редакторов Moanco. Некоторые полезные значения, которые нужно знать, включают:

• container : HTML -элемент, который существует в DOM (или ref если использует React/Preact)
• value : строка, представляющая начальный код, который будет отображаться в редакторе
• language : строка, представляющая какой язык, редактор должен попробовать синтаксис
• fontSize : число, указывающее, какой код размера шрифта пиксель должен рендеринг при
• theme : идентификатор струны желаемой темы или URL -адрес для файла темы JSON

Вызов экспорта по умолчанию возвращает экземпляр базового редактора Monaco. Узнайте больше о том, как взаимодействовать с редактором, прочитав документацию API.

Разработка

Запуск следующей команды из корня этого проекта использует servor для запуска Dev Server, а затем откройте ваш редактор и браузер на соответствующий URL Localhost.

npm start

Производство

Запуск следующей команды из корня этого проекта использует esbuild Построить источник в один файл index.min.js . В настоящее время этот процесс занимает ~ 1 секунду и приводит к выходному файлу весом 4,6 МБ (коммерциализируется до менее 1 МБ с Brotli).

npm run build

Лицензия

Лицензирован по лицензии MIT.