Что это и зачем?
Хочется писать плагины на чем то реактивном и Svelte подходит отлично, так как компилируется в обычный js код. Но плагин собранный на svelte имеет ряд багов, которые не удалось устранить. Например если внутри input нажать backspace, реактивность пропадает. Это можно пофиксить добавив on:keydown|stopPropagation на input, но все равно есть еще ряд мелких проблем.
Как это работает
Чтобы обойти выше описанные эффекты - svelte часть была собрана как web components. Видимо из-за shadow dom компонент изолируется и все неприятные эффекты исчезают.
Однако не нашел решения, чтобы один web component работал и как view самого плагина и как tune плагина. Поэтому для view сделан отдельный компонент Body.svelte, для tune (если он нужен) отдельный Tune.svelte. Состояние между нимим синхронизируется через отдельный store, который инициализируется в конструкторе класса плагина и передается в каждый веб компонент после его создания.
Имя плагина задается в package.json в поле pluginName (например "todo").
Далее в методе render и renderSettings создаются веб компоненты <editorjs-todo-block> и <editorjs-todo-tune> (где "todo" это имя плагина заданное выше).
Плагин собирается в 2 прохода. Вначале сборка веб компонентов, потом сборка непосредственно плагина.
В dev режиме плагин подключен к редактору с именем test, поэтому имеет тип test при просмотре результатов. В свои проекты вы сами решаете с каким именем он будет подключаться.
Команды
npm run build- Собрать плагинnpm run dev- Режим разработки (Запускатеся веб-сервер с editorjs и watch)
Структура проекта
...
