mdings / hyperstatic

Routing, pre-rendering and code-splitting for hyperapp

Hyperstatic

Hyperstatic is a Hyperapp based static site generator with a code-splitting and navigation layer. It's goal is to be a simpler, lighter and faster GatsbyJS, that uses Hyperapp instead of React.

It's codebase also has an inherently smaller footprint by using Puppeteer for pre-rendering and Parcel for code-splitting.

See the demo site here: https://hyperstatic.dev/

Starter template 🚀

To easiest way to get started is to use this starter template.

---

Installation in an existing Hyperapp 2.0 project:

1. npm i hyperstatic

2. Create a routes.js file with your routes in it.
   Example

3. Replace hyperapp's app call with hyperstatic. Add the extra routes attribute that is needed.
   Example

4. Link to your pages using the <Link> component.
   Example

5. (Optional) For pre-rendering, create a render-pages.js, list your URLs and call renderPages with them.
   Example

Then add this helper command in your package.json scripts:

"scripts": {
  "render-pages": "npm run build && node ./render-pages.js"
}

That should be it!

Pull requests are welcome!

Roadmap / planned changes

• Once an official hyperapp router is available, use it internally and build on top of it.
• Add "hooks" for animating page transitions (run effects before / after navigating).
• Move away from pupeteer. Do SSR straight from node.js. New APIs will be available to fetch data at build time, similar to Next.js