WebReflection / heresy-ssr

🔥 heresy 🔥 Server Side Rendering
ISC License
88 stars 1 forks source link

heresy logo heresy SSR

Don't simulate the DOM. Be the DOM.


Social Media Photo by Thomas Kelley on Unsplash

WebReflection status License: ISC Build Status Greenkeeper badge

It's pretty much the same heresy, but for the server, and with extra features.


📣 Community Announcement

Please ask questions in the dedicated discussions repository, to help the community around this project grow ♥


V2 Breaking Changes

Please be sure you understand the breaking changes landed in lighterhtml.


How To Install With Canvas

If you need/want to use the <canvas> element, which is a dev dependency of basicHTML, you explicitly need to type:

# install heresy-ssr with canvas
npm i heresy-ssr canvas

Otherwise heresy-ssr will ship without canvas via simply typing:

# install heresy-ssr without canvas
npm i heresy-ssr

Extra Features

Basic Example

You can see inside the test folder a similar example you can run via npm run build or just npm test, after the first build.

const {document, render, html} = require('heresy-ssr');

const Body = require('./body.js');
define('Body', Body);

const lang = 'en';
const {hostname} = require('os');
const {readFileSync} = require('fs');

render(document, html`
  <html lang=${lang}>
    <head>
      <title>🔥 heresy SSR 🔥</title>
      <CustomElements/>
      <script defer src="https://github.com/WebReflection/heresy-ssr/raw/master//unpkg.com/heresy"></script>
      <script type="module" src="https://github.com/WebReflection/heresy-ssr/raw/master/definitions.js"></script>
    </head>
    <Body data-hostname=${hostname}/>
  </html>
`);

You can also try node test/twitter-share.js to see an example of a component served through the same definition crystal clean via SSR, but still re-hydrated on the client whenever the definition lands on the page.

Multiple Documents

The default document is ideal for Single Page Applications but not optimal for sites distributed through various pages.

In latter scenario, you can use a new document per each render.

const {Document, render, html} = require('heresy-ssr');

// create a new document related to this page only
const document = new Document;

render(document, html`<h1>Hello</h1>`);

Project Goals

Differences from viperHTML

There are tons of differences with viperHTML at this stage: