A middleware for Pinecone Router that add Turbolinks-like functionality with extra features.
A middleware that adds Turbolinks-like functionality for Pinecone Router, while still allowing you to handle routes!
Development version, watch for v1.0 :)
- No server co-operation needed! serve regular html files as normally done.
- Allow route checking before displaying pages! can be used for client-side authorization etc.
- Preload pages when hovering over links!
Current version not working! sorry
Include the following <script> tag in the <head> of your document, before Pinecone Router:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>ES6 Module:
import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js';npm install pinecone-router-middleware-render
// load this middleware
import 'pinecone-router-middleware-render';
// then load pinecone router
import 'pinecone-router';Important: This must be added before loading Pinecone Router.
- Enable render middleware in the router Settings:
function router() {
return {
settings: {
middlewares: {
render: {
enable: true;
}
}
}
}<div x-data="router()" x-router></div>By default this will fetch the whole page and replaces the <body> content.
To use another element instead, set its selector in settings.
render: {
enable: true,
basePath: '/',
selector: '#app',
}While optional, you can also handle routes while all pages render normally!
<div x-data="router()" x-router>
<template x-route="/hello/:name" x-handler="hello"></template>
</div>Note: The routes will be handled before the page is rendered.
If you'd like to make checks before actually displaying a page, using authentication/authorization etc, you can make your checks in the handler. Then within the handler, if you need to redirect the user to another page simply return context.redirect('/another/page') this way it'll prevent the page from rendering and go to the other page directly.
Example:
In this example the user will only be allowed to edit their own profile
<div x-data="router()" x-router>
...
<template
x-route="/profile/:username/edit"
x-handler="editProfile"
></template>
...The handler: (auth is a placeholder name, replace it with your own auth provider methods)
editProfile(context) {
if (context.params.username != auth.username) {
return context.redirect('/unauthorized');
}
}Show
By default, 404 pages are left to the server to handle. However, if you'd like to specify the routes allowed, you can do it like this:
<div x-data="router()" x-router>
<template x-route="/"></template>
<template x-route="/hello/:name"></template>
<template x-route="notfound" x-handler="notfound"></template>
</div>As you see, the handler is optional on routes as the page will be rendered regardless, but you can add it if you need it.
| Version | Pinecone Router Versions |
|---|---|
| 0.0.3 | 0.3.0 |
Please refer to CONTRIBUTING.md
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2021 Rafik El Hadi Houari
Licensed under the MIT license, see LICENSE.md for details.