Puppers NPM | npm.io

🐶 Puppers

Static websites are ⚡. App-shells are 💯. Why not have both?

Build your static site. Then add a data-attribute to certain elements and the app-shell will kick in.

Those with JS disabled still get a normal static site experience 🙂

Init app shell

 const appShell = new AppShell();
 appShell.init();

Page-specific content needs a [data-partial] attribute set to:
Page title, meta description, and canonical tag are updated by default.
- [data-partial="head"] for elements in the <head>
- [data-partial="content"] for the page content (one element only!)
- [data-partial="footer"] for elements just before </body>
The rest of the elements will not update on page requests and will become the "app shell".
Scripts marked [data-partial] are rehydrated on each route change.
For sitewide scripts in the "app shell" that need to run on each route change, use:
```
  window.addEventListener('app:routeChanged', e => {
    console.log(e.detail.route());
    // do something
  });
```
Elements with a [data-partial] location and [data-partial-persist] attributes will be loaded and kept in DOM on page change. (Note: See the example from number 5 to add an event listener on route change if you would like to remove the element later.)
Profit!

4 years ago