Skip to content

jzwood/PauperJs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A poor man's client-side templating engine

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published