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
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
viewSelectoroption 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.htmlwill be shown in the default target which is#appor whatever is default in the settings using theviewSelectorproperty. -
/login.htmlwill be shown inside the element with the selector#contentwhich 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
Copyright (c) 2022 Rafik El Hadi Houari
Licensed under the MIT license, see LICENSE.md for details.