A views middleware for Pinecone Router.
Allows you to set the path for an HTML file and it'll be fetched and displayed in the specified element (#app by default).
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 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.
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 show 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.
- Views are cached in memory
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 | when the fetch fail |
The first two can be used to show a loading bar or indicator
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())| Version | Pinecone Router Versions |
|---|---|
| 2.x.x | ^2.0.0 |
| 1.x.x | ^1.0.0 |
Please refer to CONTRIBUTING.md
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2022 Rafik El Hadi Houari
Licensed under the MIT license, see LICENSE.md for details.