https://github.com/jzwood/pauperjs
A poor man's client-side templating engine
https://github.com/jzwood/pauperjs
micro-library templating templating-engine
Last synced: about 1 year ago
JSON representation
A poor man's client-side templating engine
- Host: GitHub
- URL: https://github.com/jzwood/pauperjs
- Owner: jzwood
- License: mit
- Created: 2018-07-13T23:26:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-01T03:54:56.000Z (over 7 years ago)
- Last Synced: 2025-03-24T11:13:57.470Z (about 1 year ago)
- Topics: micro-library, templating, templating-engine
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PauperJs
is a micro-library for client-side templating.
## API
Pauper transforms the [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of every `` element in your markup into a _function_ and replaces the [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) of that element with the returned value of that _function_ (see [demo](https://jzwood.github.io/PauperJs/demo/)).
To illustrate, consider the following markup:
```
const today = (new Date()).getDay();
const week = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const party = today === 0 || today === 6;
return `It's ${week[today]}${party ? '— gotta party! 🍹' : '. Got to work. 🖨'}`;
```
on Saturday this would render as
```
It's Saturday — gotta party! 🍹
```
and on Monday as
```
It's Monday. Got to work. 🖨
```
## Promises
Want to render async data? No problem. Pauper will correctly populate the render field if the `` function returns a promise.
## No Javascript
Browsers usually have Javascript turned on but when they don't you want to be prepared. To do this you can place static fallback copy inside of a `` element.
```
Welcome to my webpage!
Plz turn on JavaScript to get the best experience!
return ajax('get:puppy_pics:all');
```
When Javascript is disabled in the client's browser PauperJs won't run (_obviously_) which means that in order for the fallback to work correctly the following css must be added to the project manually.
```css
render:not(.rendered) {
display: none;
}
```
When the render tags are being rendered PauperJs adds the class `rendered` which will allow them to avoid the `display: none;` selector. PauperJs will handle removing the `` tags.