В этой статье мы увидим, как создать веб-компоненты с помощью SVELTE Framework. Прежде чем начать писать код, давайте сначала посмотрим, что такое веб-компоненты.

Введение в веб-компоненты

Веб-компоненты – это набор API для веб-платформы, которые позволяют создавать новые пользовательские, многоразовые и инкапсулированные HTML-теги для использования в веб-страницах и веб-приложениях. Пользовательские компоненты и виджеты основаны на стандартах веб-компонентов, работают над современными браузерами, и их можно использовать с любым HTML-совместимым в библиотеке JavaScript или Framework.

Веб-компоненты основаны на четырех основных спецификациях:

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

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

Тень домо

Спецификация Shadow DOM определяет, как использовать инкапсулированный стиль и разметку в веб-компонентах. Возможность сохранить структуру разметки, стиль и поведение, скрытую и отделять от другого кода на странице, чтобы разные части не столкнулись.

Модули ES

Спецификация модулей ES определяет включение и повторное использование документов JS в соответствии с стандартами, модульными, исполнительными способами. Спецификация JavaScript определяет синтаксис для модулей, а также некоторых численных агностических частей их модели обработки. Спецификация определяет остальную часть своей обработки модели: как система модуля загружается через элемент скрипта с атрибутом типа «Модуль», и как модули выбираются, разрешены и выполнены

HTML шаблон

Спецификация HTML шаблона элемента определяет, как объявить фрагменты разметки, которые не используются на загрузке страницы, но могут быть созданы позже при выполнении во время выполнения.

Технология веб-компонентов можно использовать независимо или коллективно.

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

Использование веб-компонентов очень просты. Например, можно использовать компонент, присутствующий в библиотеке веб-компонентов, выпущенных из полимера, таких как следующий компонент:

https://www.webcomponents.org/element/@polymer/paper-button

Начиная с простой веб-страницы:

  
    
  
  
      
Test Page
      
This is an example paragraph.
  

Можно импортировать сценарий, который содержит веб-компоненты для начала использования компонента библиотеки, как если бы это был простой HTML-элемент.

  
    
    
  
  
      
Test Page
      
This is an example paragraph.
      button
  

Что такое Свелте?

SVELTE – это каркас JavaScript, написанная богатыми Харрисом. Приложения SVELTE не включают ссылки на рамки. В то время как традиционные рамки, такие как React, Vue или Angular, делают основную часть своей работы в браузере, SVELTE сдвигаются, которые работают на шаг компиляции, который происходит, когда вы создаете приложение. Svelte генерирует код для манипулирования DOM, который может дать лучшую производительность выполнения клиента.

Вместо использования методов, таких как виртуальный DOM, SVELTE записывает код, который хирургически обновляет DOM при изменении состояния вашего приложения.

Реализация SVELTE TOMOVVC весит 3,6 кБ на молнии. Для сравнения, React Plus Reactom без какого-либо кода приложения весит около 45 кБ. Для браузера примерно 10x требуется около 10 раз, просто для оценки реакции, так как для SVELTE есть и работает с интерактивным TODOMVC.

• Представляя Svelte: Рамки без рамки

Как сделать простые веб-приложения SVELTE

Чтобы создать новый проект SVELTE, мы можем начать с официального шаблона https://github.com/sveltejs/template Отказ

Чтобы создать новый проект в каталоге My-Svelte-Project, установите его зависимости и запускайте сервер, который вы можете ввести следующие команды:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

Доступ к URL http://localhost: 5000 Вы увидите веб-приложение Hello-World.

Для этого примера мы создадим часовой компонент, вы можете скопировать содержимое файла App.svelte из этой ссылки: https://svelte.dev/examples#Clock Отказ

Компиляция пользовательских элементов (веб-компоненты AKA)

Компоненты SVELTE также могут быть скомпилированы на пользовательские элементы (AKA Web Compents) с использованием настроек: True Compiler. Вы должны указать имя тега для компонента с использованием элемента параметров SVELTE:.

По умолчанию пользовательские элементы скомпилированы с доступами: True, что означает, что любые опоры подвергаются воздействию в виде свойств DOM-элемента. Чтобы предотвратить это, добавьте Accessors = {false} к svelte: опции.

Чтобы построить на пользовательский элемент, который мы должны:

• Добавьте настройки: True, к файлу Rollup.config.js:

    plugins: [
        svelte({
            customElement: true,

• Добавить в приложение .svelte.

Если вы не определяете эту SVELTE: опция компилятор предупреждает вас следующим сообщением

svelte plugin: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. . To hide this warning, use 

• запустить “NPM Run Build”

Во время разработки (NPM RUN DEV) будет включена в прямом эфире. Это означает, что любые изменения, внесенные в ваш пользовательский элемент или HTML, будут немедленно отражены в браузере.

После того, как веб-компоненты будут готовы, мы можем запустить «NPM Run Build», которая будет компилировать добычую версию вашего пользовательского элемента в Public/Bundle.js. Компилятор позаботится о создании Shadow DOM, применяя атрибуты/свойства и определение вашего пользовательского элемента.

Чтобы проверить созданные веб-компонентов, мы можем использовать HTTP-сервер. Для установки мы можем выполнить следующую команду:

npm install http-server -g

Затем мы можем создать в общественном каталоге index.html, импортируя bundle.js и объявление пользовательского элемента “Svelte-clock”:

  
    
    
  
  
      
Test Page
      
This is an example paragraph.
      
  

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

> http-server -p 8080 -c-1 public/
Starting up http-server, serving public/
Available on:
  http://127.0.0.1:8080

Svelte веб-компоненты: вывод

Характеристики

Любые реквизиты, которые принимают ваш пользовательский элемент, будут автоматически преобразованы в атрибуты элемента при компиляционном времени. Рекомендуется придерживаться имен атрибутов строчных букв в качестве конвенций именования, такие как CAMELCASE или PASCALCACE, не будут работать в HTML.

Чтобы проверить мы можем добавить простые свойства на пользовательский элемент.

...
{clocktitle}
...

В нашем index.html теперь мы можем установить значение

События

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

Нативный синтаксис SVELTE для прослушивания событий на: MyCustomevent не работает с событиями, отправленными компонентом SVELTE, экспортированного на пользовательский элемент.

Можно связаться с этим? https://github.com/sveltejs/svelte/blob/a0e0f0125aa554b3f79b0980922744ee11857069/src/runtime/internal/Component.ts#L162-L171

Вот репозиторий репродукции:

https://github.com/vogloblinsky/svelte-3-wc-debug

Svelte3-Raw.

Пример с использованием просто синтаксиса SVELTE. Внутренний компонент отправляет пользовательское событие «сообщение». Компонент приложения Прослушайте его, используя по сообщениям:

Оно работает !

//Inner.svelte



    Click to say hello

//App.svelte

svelte3-wc.

Пример с использованием просто синтаксиса SVELTE и компонента экспорта для веб-компонентов. Внутренний компонент отправляет пользовательское событие «сообщение». Компонент приложения Прослушайте его, используя по сообщениям:

Тот же синтаксис не работает.

//Inner.svelte




    Click to say hello

//App.svelte

Vanilla JS работает нормально в Public/index.html

const button = document
                    .querySelector('my-app')
                    .shadowRoot.querySelector('inner-btn');

                button.$on('message', e => {
                    console.log('handleMessage in page');
                });

Чтобы он пересекал границы тенедовых, мы должны создать пользовательское событие, как упомянуто в документах V2 для Svelte. Пользовательские события могут быть созданы в вашем компоненте SVELTE с помощью API CustomeVent. После определения пользовательского события вы можете отправить это событие, позвонив на это. DispatchEvent (событие) в ответ на изменения в вашем компоненте. Пользовательские события не могут быть отправлены в ответ на методы жизненного цикла. Например, если вы попытаетесь отправить пользовательское событие в вашем методе жизненного цикла OnMount, ваше мероприятие не будет отправлено.

Чтобы добавить события, мы можем добавить кнопку:

Save Date

Когда нажат, мы можем извлечь пользовательское событие:

function dispatchSavedDateEvent(e) {
   console.log("[dispatchSecondIsElapsedEvent] time: ", time);
   // 1. Create the custom event.
   const event = new CustomEvent("savedData", {
     detail: time,
     bubbles: true,
     cancelable: true,
     composed: true // makes the event jump shadow DOM boundary
   });

   // 2. Dispatch the custom event.
   this.dispatchEvent(event);
 }

Соединение только для чтения свойство интерфейса событий возвращает логию, что указывает, будет ли событие распространять через границу Shadow DOM в стандартную DOM.

Альтернативный метод – использовать CreateeVentDispatcher

import { createEventDispatcher } from 'svelte'; 
const dispatch = createEventDispatcher();
...
dispatch('second', {
       text: '10 seconds elapsed!'
     });
...

В Index.html мы должны подписаться на новое событие следующим образом:

document.querySelector('svelte-clock')
    .$on('second', (e) => { console.log("[index.html][second]", e)})

Импорт

Для импорта компонентов SVELTE мы должны объявить каждый вложенные элементы с тегом

Объявление дочерних компонентов как пользовательских элементов, эти элементы также доступны для потребителя. Вложенный элемент используют одну и ту же тень DOM, что и родитель, нет способа установить режим Shadow DOM для «закрытого» для вложенного элемента.

Основным преимуществом использования SVELTE.JS для создания веб-компонентов состоит в том, что окончательный компонент имеет очень маленькие размеры. В нашем небольшом примере веб-компонент, упакованный в Bundle.js, весит только 7170 байтов, размеры, что по сравнению с веб-компонентами, созданными другими каркасами, делают наши веб-компоненты десятки раз меньше и быстрее выполнены браузером.

Оригинал: “https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j”