pinecone-router-middleware-render

v0.0.3

Published

3 years ago

Turbolinks-like functionality for Pinecone Router.

Downloads

0High
0Medium
0Low

rehhouari

alpinejs alpine pinecone-router router routing history views middleware pushstate

Display Server-Rendered Pages with Pinecone Router

A middleware for Pinecone Router that add Turbolinks-like functionality with extra features.

About

A middleware that adds Turbolinks-like functionality for Pinecone Router, while still allowing you to handle routes!

Development version, watch for v1.0 :)

Features:

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!

Installation

CDN

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

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.

Usage

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.

Settings

render: {
	enable: true,
	basePath: '/',
	selector: '#app',
}

Handling routes while using render

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.

Authorization

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');
	}
}

Advanced

Notfound and specifying routes

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.

Supported versions

| Version | Pinecone Router Versions | | ------- | ------------------------ | | 0.0.3 | 0.3.0 |

Contributing:

Please refer to CONTRIBUTING.md

Versioning

This projects follow the Semantic Versioning guidelines.

License

Licensed under the MIT license, see LICENSE.md for details.