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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent