yurasovm / editorjs-svelte-plugin-builder Goto Github PK

Хочется писать плагины на чем то реактивном и 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)

...