Skip to content
This repository was archived by the owner on Dec 1, 2023. It is now read-only.

Commit 9968d4a

Browse files
rehhouarirehhouari
committed
addd view compositon and remove caching in memory
1 parent 2ac52c3 commit 9968d4a

File tree

7 files changed

+766
-134
lines changed

7 files changed

+766
-134
lines changed

‎CHANGELOG.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,27 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8-
## [Unreleased]
8+
## [3.0.0] - 2023-04-06
9+
10+
- Added support for multiple views per route using an array (View Composition).
11+
- Removed caching views in memory, let the browser handle that.
912

1013
## [2.0.0] - 2022-12-04
1114

12-
- Added support for PineconeRouter v2 and Alpine.js v3
15+
- Added support for PineconeRouter v2 and Alpine.js v3
1316

1417
## [1.2.0] - 2021-06-06
1518

1619
## Added
1720

18-
- Focus elements with the `autofocus` attributes on view load.
19-
- SSG support by not fetching content in the first load (conditional & non-breaking).
21+
- Focus elements with the `autofocus` attributes on view load.
22+
- SSG support by not fetching content in the first load (conditional & non-breaking).
2023

2124
## [1.1.0] - 2021-06-03
2225

2326
## Added
2427

25-
- Allow routes with no views
28+
- Allow routes with no views
2629

2730
## [1.0.0] - 2021-05-31
2831

@@ -62,4 +65,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
6265
[0.0.0]: https://github.com/pinecone-router/middleware-views/compare/0.0.0...0.0.0
6366
[0.0.1]: https://github.com/pinecone-router/middleware-views/compare/0.0.0...0.0.1
6467
[0.0.3]: https://github.com/pinecone-router/middleware-views/compare/0.0.1...0.0.3
65-
[0.0.3]: https://github.com/pinecone-router/middleware-views/compare/0.0.3...1.0.0
68+
[0.0.3]: https://github.com/pinecone-router/middleware-views/compare/0.0.3...1.0.0

‎README.md

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Views Middleware for Pinecone Router
22

3-
[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/pinecone-router/middleware-views?color=%2337C8AB&label=version&sort=semver)](https://github.com/pinecone-router/middleware-views/tree/2.0.1)
4-
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/pinecone-router-middleware-views?color=37C8AB)](https://bundlephobia.com/result?p=pinecone-router-middleware-views@2.0.1)
3+
[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/pinecone-router/middleware-views?color=%2337C8AB&label=version&sort=semver)](https://github.com/pinecone-router/middleware-views/tree/3.0.0)
4+
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/pinecone-router-middleware-views?color=37C8AB)](https://bundlephobia.com/result?p=pinecone-router-middleware-views@3.0.0)
55
[![Downloads from Jsdelivr NPM](https://img.shields.io/jsdelivr/npm/hm/pinecone-router-middleware-views?color=%2337C8AB&&logo=npm)](https://www.jsdelivr.com/package/npm/pinecone-router-middleware-views)
66
[![npm](https://img.shields.io/npm/dm/pinecone-router-middleware-views?color=37C8AB&label=npm&logo=npm&logoColor=37C8AB)](https://npmjs.com/package/pinecone-router-middleware-views)
77
[![Changelog](https://img.shields.io/badge/change-log-%2337C8AB)](/CHANGELOG.md)
@@ -10,7 +10,7 @@ A views middleware for [Pinecone Router](https://github.com/pinecone-router/rout
1010

1111
## About
1212

13-
Allows you to set the path for an HTML file and it'll be fetched and displayed in the specified element (`#app` by default).
13+
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).
1414

1515
## Installation
1616

@@ -19,13 +19,13 @@ Allows you to set the path for an HTML file and it'll be fetched and displayed i
1919
Include the following `<script>` tag in the `<head>` of your document, **before Pinecone Router**:
2020

2121
```html
22-
<script src="https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@2.x.x/dist/views.min.js"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@3.x.x/dist/views.min.js"></script>
2323
```
2424

2525
or:
2626

2727
```javascript
28-
import 'https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@2.x.x/dist/views.min.js'
28+
import 'https://cdn.jsdelivr.net/npm/pinecone-router-middleware-views@3.x.x/dist/views.min.js'
2929
```
3030

3131
### NPM
@@ -74,23 +74,60 @@ That's it!
7474
**Notes:**
7575

7676
- You can use both views and handlers in the same route, handlers always run first.
77-
- Set the [`viewSelector` option in settings](https://github.com/pinecone-router/router#settings) to change where views will show
77+
- Set the [`viewSelector` option in settings](https://github.com/pinecone-router/router#settings) to change where views will be shown by default. ([can be overwritten on a per-route basis](###multiple-views-per-route))
7878
- `window.PineconeRouter.settings.viewsSelector = '#app'`
7979
- View are simply html files, can be text files too.
8080
- When you [_redirect_](https://github.com/pinecone-router/router#redirecting) from a handler the view wont be displayed.
81-
- Views are cached in memory
81+
82+
### View composition
83+
84+
You can have **multiple views per route**, and set the target for them individually:
85+
86+
`index.html`
87+
88+
```html
89+
<template
90+
x-route="/login"
91+
x-view="['/authWrapper.html', {path:'/login.html', selector: '#content'}]"
92+
></template>
93+
```
94+
95+
`authWrapper.html`:
96+
97+
```html
98+
<div>
99+
<h1>Authenticate</h1>
100+
<div id="content"></div>
101+
</div>
102+
```
103+
104+
`login.html`:
105+
106+
```html
107+
<div>
108+
<h2>Login</h2>
109+
...
110+
</div>
111+
```
112+
113+
In the example above:
114+
115+
- `/authWrapper.html` will be shown in the default target which `#app` or [whatever is default in settings](https://github.com/pinecone-router/router#settings) in the `viewSelector` property.
116+
- `/login.html` will be shown inside element with the selector `#content` which inside inside `/authWrapper.html`
117+
118+
> View Compositon Feature was suggested by [@klausklapper](https://github.com/klausklapper)
82119
83120
## Events:
84121

85122
This middleware dispatch these events:
86123

87-
| name | recipient | when is it dispatched |
88-
| ------------------ | --------- | --------------------------- |
89-
| **pinecone-start** | window | when the page start loading |
90-
| **pinecone-end** | window | when the page loading ends |
91-
| **fetch-error** | #app | when the fetch fail |
124+
| name | recipient | when is it dispatched |
125+
| ------------------ | ------------------------------ | --------------------------- |
126+
| **pinecone-start** | window | when the page start loading |
127+
| **pinecone-end** | window | when the page loading ends |
128+
| **fetch-error** | #app or your specific selector | when the fetch fail |
92129

93-
The first two can be used to show a loading bar or indicator
130+
The first two events can be used to show a loading bar or indicator
94131

95132
### Loading bar Example:
96133

@@ -110,7 +147,8 @@ window.addEventListener('pinecone-end', () => nProgress.done())
110147

111148
| Version | Pinecone Router Versions |
112149
| ------- | ------------------------ |
113-
| 2.x.x | ^2.0.0 |
150+
| 3.x.x | ^3.x.x |
151+
| 2.x.x | 2.x.x |
114152
| 1.x.x | ^1.0.0 |
115153

116154
## Contributing:

‎dist/views.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)