ld-navigation
A set of Web Components for data-driven Linked Data REST client in the browser.
With ld-navigation you let actual Linked Data be the router of your application.
You then simply GET and decide what to display based on the data returned. No more client-side routing.
<ld-navigator>
Control current resource in relation to document path Maintain browser history with HTML history API Set up base resource URL and base client path to tweak routing
<ld-link>
Initiate transition between application states
Demos
Demos and sort-of documentation.
ld-navigation
also plays nice with location.hash history.
Installation
Run yarn add ld-navigation
In your code
// main element, required// optionally, to wrap links// optionally, to initiate navigation manually
No external dependencies
Usage
Let's assume that:
- Your website is at
http://www.my.app/
. - Your Linked Data API is at
http://api.my.app/
.
<!-- navigator exposes a resourceUrl property, see below --><!-- ld-link replaces or wraps anchor -->get peopleget projects
With the above code, when you click the first link, the browser moves to http://www.my.app/http://api.my.app/people
and the
resource-url-changed
event is fired.
Base URL
Obviously an URL like http://www.my.app/http://api.my.app/people
is ugly (and, well, invalid). It is possible to get rid of the API domain
by adding an attribute to the <ld-navigator>
tag:
This way the API domain is stripped out from the browser address bar and http://www.my.app/people
remains. This is where client-side
routing becomes virtually obsolete.
Polymer
ld-navigation
will also play nice with Polymer - see the demos above.
Tests
Tests are written with @open-wc/testing.
yarn installyarn test:local