A poor man's client-side templating engine
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE
README.md
package.json
pauper.js

README.md

PauperJs

is a micro-library for client-side templating.

license

API

Pauper transforms the textContent of every <render> element in your markup into a function and replaces the innerHTML of that element with the returned value of that function (see demo).

To illustrate, consider the following markup:

<h1>
  <render>
    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. 🖨'}`;
  </render>
</h1>

on Saturday this would render as

<h1>
  <render>It's Saturday — gotta party! 🍹</render>
</h1>

and on Monday as

<h1>
  <render>It's Monday. Got to work. 🖨</render>
</h1>

Promises

Want to render async data? No problem. Pauper will correctly populate the render field if the <render> 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 <norender> element.

<p>Welcome to my webpage!
  <norender>Plz turn on JavaScript to get the best experience!</norender>
  <render> return ajax('get:puppy_pics:all');</render>
</p>

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.

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 <norender> tags.