navigate-trait v0.0.8

navigate-trait

navigate-trait enhances the "nav" and "a" (anchor) tag, in order to support client-side routing.

navigate-trait is an abstract class (if using Typescript), allowing for different approaches / libraries for parsing the url, and/or stringifying an object to the url TODO.

It is inspired by the article How To Extend a Native HTML Element.

In order to "opt-in", the anchor tags should have the (customizable) attribute "be-a-nav-link":

<nav>
    <a be-a-nav-link href="myAccounts/14394402/statements/201904?page=1">
        Statement for April 2019
    </a>
    <br>
    <a be-a-nav-link href="myAccounts/398821401/transactions?from=2020-10-01&to=2020-11-19">
        Transactions for 10/1/2020 - 11/19/2020
    </a>
</nav>

or

<nav>
    <a data-be-a-nav-link href="myAccounts/14394402/statements/201904?page=1">
        Statement for April 2019
    </a>
    <br>
    <a data-be-a-nav-link href="myAccounts/398821401/transactions?from=2020-10-01&to=2020-11-19">
        Transactions for 10/1/2020 - 11/19/2020
    </a>
</nav>

To customize the attribute ("be-a-nav-link") web components that extend this abstract class can use attribute "a-trait-attr".