pinecone-router-middleware-views

v3.0.3

Published

a year ago

Views middleware for Pinecone Router.

Downloads

0High
0Medium
0Low

rehhouari

alpinejs alpine alpine.js Alpine JS Alpine JS Plugin Alpine JS Plugins router history pushstate

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/[email protected]/dist/views.min.js"></script>

or:

import 'https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/nprogress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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.