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.
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
Initiate transition between application states
Demos and sort-of documentation.
ld-navigation
also plays nice with location.hash history.
Run yarn add ld-navigation
In your code
// main element, required
import 'ld-navigation/ld-navigator'
// optionally, to wrap links
import 'ld-navigation/ld-link'
// optionally, to initiate navigation manually
import fireNavigation from 'ld-navigation/fireNavigation'
No external dependencies
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-navigator></ld-navigator>
<!-- ld-link replaces or wraps anchor -->
<ld-link resource-url="http://api.my.app/people">get people</ld-link>
<ld-link resource-url="http://api.my.app/projects">
<a>get projects</a>
</ld-link>
<script>
var navigator = document.querySelector('ld-navigator')
navigator.addEventListener('resource-url-changed', function(e) {
// same url sits in e.detail.resourceUrl
var nextUrl = navigator.resourceUrl;
// no go ahead and $.get or window.fetch your data from nextUrl
window.fetch(nextUrl).then(bindDataWithPage);
});
</script>
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.
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:
<ld-navigator base-url="http://api.my.app"></ld-navigator>
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.
ld-navigation
will also play nice with Polymer - see the demos above.
Tests are written with @open-wc/testing.
yarn install
yarn test:local