Get best of the week

Web Component Routing

Sometimes it seems that web components do not reach the framework, especially when compared with the most popular representatives. But much of the most pressing that is not obscured by the implementation of the standards included in the concept of web components is easy enough to fasten using libraries or a small amount of its elegant code. One of these features is front-end routing. The feature is not always necessary, perhaps even controversial, but in most frameworks it is present and used by many. What about web components? And we will try to implement routing using the navigo library.

To make console commands work better on Windows, you can install Unix utilities from the git distribution for this system, or, apparently, use the new WSL and terminal features.

First, create a project:

mkdir testnavigo
cd testnavigo
npm init

and many times we press enter until it releases

then we put the library

npm i navigo --save

create index.html

and connect the library in it and define the main class of the application; here it will encapsulate the logic of routing and control of all child components.

Web components gave us the opportunity to auto-call a hook when an element appears in the tree that our class is assigned to in the tree of browser objects. In it, we initialize the routing library with code directly from the example from the library github (in real life, it should be done more beautifully with modular loading).

<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>


Add route processing:

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();
}


Each time the route is changed, our component updates the internal content by adding a new tag to it. It remains to register these tags for the new page components.

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);


At the very top of the page, add links to check the navigation:

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


the data-navigo attribute allows clicking on them to be processed by the router, rather than making requests for the backend. Which is time to start, for example, like this:

npx http-server


open 127.0.0.1 : 8080 in the browser or whatever it writes to you there and make sure that everything works.



Now we can distribute everything as it should in separate files, attach template and dynamic loading of pages, take out routes to the configuration. Web Components will undertake most of the work with the life cycle of application objects, only opening event should not be forgotten razbindivat in Hook disconnectedCallback ()

As I wanted to show how fast it's all done, stretch further article probably will not;)

On something of this I already wrote in articles:

Quick start with WebComponents

and

WebComponents as frameworks, interaction of components

Wait for a new revelation ^ W articles, share and like!

The resulting source code can be viewed here in the repository on the bitpack:

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

More articles:


All Articles