Svelte был притчей во языцех в последние месяцы, и его популярность резко возросла с версией 3. Сейчас проект достиг 47 тысяч звезд на GitHub!

Svelte преобразует ваше приложение в идеальный JavaScript во время сборки, а не интерпретирует код вашего приложения во время выполнения.

В то время как Svelte набирает популярность как среда одностраничных приложений, многие разработчики все еще задаются вопросом, является ли svelte безопасным выбором для создания веб-компонентов?

Размер пакета дает svelte преимущество перед конкурентами. Это делает его де-факто выбором для веб-разработки.

Опрос State of the JS предсказывает, что svelte уже популярен среди разработчиков SPA. Тем не менее, нестандартные элементы со стройными кадрами остаются неизведанной территорией. Большинство разработчиков не знают о том, что они также могут создавать веб-компоненты с помощью svelte и использовать его как виджет plug and play.

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

TLDR — https://github.com/tal1992/svelte-webcomponents

Самый простой в мире готовый к использованию шаблон для веб-компонентов.

Готовый к использованию шаблон проекта для создания пользовательских элементов (веб-компонентов) с помощью Svelte 3 с поддержкой и примерами для:

✓ Пользовательские элементы

✓ шутка

✓ дерзость

✓ вложенные веб-компоненты с реквизитом

✓линтинг

✓ стайллинтинг

✓ Действия на гитхабе

✓ пользовательские события от теневого DOM до реального DOM

Установка

git clone https://github.com/tal1992/svelte-webcomponents.git
cd svelte-webcomponents

как только вы окажетесь внутри папки, выполните следующие действия:

npm install

Запустить сборку в режиме разработчика -

npm run dev

Запустить сборку в режиме prod -

npm run build

Использование веб-компонентов в HTML

<component-name propOne="Lorem" propTwo="Ipsum"></component-name>

Использование веб-компонентов в качестве виджета

function addScript(src) {
  var s = document.createElement("script");
  s.setAttribute("src", src);
  document.querySelector("body").appendChild(s);
}
//replace the url with your hosted path of bundle.js
addScript("https://loremipsumdolarsir/build/bundle.js", "", "");

Теперь, когда ваш файл bundle.js включен в html, мы можем использовать веб-компоненты.

let foo = document.createElement('component-foo');
      let header = document.getElementByTagName('header');
      foo.setAttribute('propOne', "lorem");
      foo.setAttribute('propTwo', "Ipsum");
      // please replace header with desired element to place comp.
      header.parentNode.replaceChild(foo, header);

Полная документация — https://github.com/tal1992/svelte-webcomponents