Views Middleware for Pinecone Router

A views middleware for Pinecone Router.

About

Allows you to set the path for an HTML file (or multiple) and it'll be fetched and displayed inside the specified elements (#app by default).

Installation

CDN

Include the following <script> tag in the <head> of your document, before Pinecone Router:

<script src="https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@3.x.x/dist/views.min.js"></script>

or:

import 'https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@3.x.x/dist/views.min.js'

NPM

npm install pinecone-router-middleware-views

// load this middleware
import 'pinecone-router-middleware-views'
// load pinecone router
import PineconeRouter from 'pinecone-router'
// then load alpine.js
import Alpine from 'alpinejs'
// add the router as a plugin
Alpine.plugin(PineconeRouter)
// start alpine
Alpine.start()

Important: This must be added before loading Pinecone Router.

Usage

Demo

Add x-view to the routes with the value being the path to file.

That's it!

example:

<div x-data>
	<template x-route="/" x-view="/home.html"></template>
	<template x-route="/hello/:name" x-view="/hello.html"></template>
	<template x-route="notfound" x-view="/404.html"></template>
</div>

<div id="app" x-data>
	<!--this will be replaced by the content of the views.-->
</div>

hello.html:

<div>hello, <span x-text="$router.params.name"></span></div>

Notes:

You can use both views and handlers in the same route, handlers always run first.
Set the viewSelector option in settings to change where views will be shown by default. (can be overwritten on a per-route basis)
window.PineconeRouter.settings.viewsSelector = '#app'
View are simply html files, can be text files too.
When you redirect from a handler the view wont be displayed.

View composition

You can have multiple views per route, and set the target for them individually: index.html

<template
	x-route="/login"
	x-view="['/authWrapper.html', {path:'/login.html', selector: '#content'}]"
></template>

authWrapper.html:

<div>
	<h1>Authenticate</h1>
	<div id="content"></div>
</div>

login.html:

<div>
	<h2>Login</h2>
	...
</div>

In the example above:

/authWrapper.html will be shown in the default target which is #app or whatever is default in the settings using the viewSelector property.
/login.html will be shown inside the element with the selector #content which is inside /authWrapper.html

You can say in this case authWrapper is used as a layout.

You can have more than 2 views and layouts just make sure to keep in mind that they're fetched and shown in order.

View Compositon feature was suggested @klausklapper

Events:

This middleware dispatch these events:

name	recipient	when is it dispatched
pinecone-start	window	when the page start loading
pinecone-end	window	when the page loading ends
fetch-error	#app or whatever is default in settings	when the fetch fail

The first two events can be used to show a loading bar or indicator

Loading bar Example:

Using nProgress:

<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />

window.addEventListener('pinecone-start', () => nProgress.start())
window.addEventListener('pinecone-end', () => nProgress.done())

Supported versions

Version	Pinecone Router Versions
3.x.x	^3.x.x
2.x.x	2.x.x
1.x.x	^1.0.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.

byte-bandit/middleware-views