Роутинг для веб-компонентов

Иногда кажется, что веб компоненты не дотягивают до фреймворка, особенно если сравнивать их с наиболее популярными представителями. Но многое самое насущное, что не закрывается реализацией стандартов входящих в понятие веб компонентов, достаточно легко прикрутить с помощью библиотек или небольшого объема своего изящного кода. Одной из таких возможностей является роутинг на стороне фронтенда. Фича не всегда необходимая, возможно даже спорная, но в большинстве фреймворков она присутствует и многими используется. Что же в веб-компонентах? А мы попробуем реализовать роутинг с помощью библиотеки navigo.

Чтобы консольные команды работали лучше в ОС Windows можно установить Unix-утилиты из дистрибутива гит под эту систему, ну или видимо использовать новые возможности WSL и терминалов.

Для начала создадим проект:

mkdir testnavigo cd testnavigo npm init 

и много раз нажимаем энтер пока не отпустит

затем поставим библиотеку

npm i navigo --save 

создадим index.html

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

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

<script src="/node_modules/navigo/lib/navigo.min.js"></script>  <my-app></my-app>  <script type="module">     class MyApp extends HTMLElement {         connectedCallback() {            let root = null;            let useHash = true; // Defaults to: false            let hash = '#!'; // Defaults to: '#'            this.router = new Navigo(root, useHash, hash);        }     }    customElements.define('my-app', MyApp); </script> 

Добавим обработку роутов:

connectedCallback() {    let root = null;    let useHash = true; // Defaults to: false    let hash = '#!'; // Defaults to: '#'    this.router = new Navigo(root, useHash, hash);    router        .on('page-a', () => {            this.innerHTML = '';            this.insertAdjacentHTML('beforeend', '<page-a></page-a>');        })        .on('page-b', () => {            this.innerHTML = '';            this.insertAdjacentHTML('beforeend', '<page-b></page-b>');        })        .on('*', () => {            this.innerHTML = '';            this.insertAdjacentHTML('beforeend', '<div>Please click links above</div>');        })        .resolve(); } 

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

class PageA extends HTMLElement {    connectedCallback() {        this.insertAdjacentHTML('beforeend', '<div>This is a page A</div>');    } } class PageB extends HTMLElement {    connectedCallback() {        this.insertAdjacentHTML('beforeend', '<div>This is a page B</div>');    } } customElements.define('page-a', PageA); customElements.define('page-b', PageB); 

В самом верху страницы добавим ссылки, чтобы проверить навигацию:

<a href="page-a" data-navigo>Page A</a> <a href="page-b" data-navigo>Page B</a> 

атрибут data-navigo позволяет нажатия по ним обрабатывать роутером, а не осуществлять запросы на бекенд. Который пора уже запустить, например вот так:

npx http-server 

открыть в браузере 127.0.0.1:8080 или какой он вам там напишет и убедиться, что все работает.

Теперь мы можем разнести все как полагается по отдельным файлам, приделать шаблонизацию и динамическую загрузку страниц, вынести роуты в концигурацию. Веб-компоненты возьмут на себя основную работу с Жизненным Циклом объектов приложения, только эвенты надо не забывать разбиндивать в хуке disconnectedCallback()

Поскольку я хотел показать насколько быстро это все делается, растягивать дальше статью пожалуй не буду;)

Об чем-то из этого я уже писал в статьях:

Быстрый старт с WebComponents

и

WebComponents как фреймворки, взаимодействие компонентов

Ждите новых открове^Wстатей, шэрьте и лайкайте!

Получившийся исходный код можно посмотреть вот репозитории на битбакете:

https://bitbucket.org/techminded/testnavigo/