splendid

Splendid is a static website compiler in Node.JS. It is flexible to build websites either small or large, and utilises the power of Closure Compiler and Closure Stylesheets to compile JS and CSS assets. Instead of JS SPAs, it produces HTML code that can even be shown without any JavaScript. This is achieved with static server-side rendered elements together with dynamic client-side components which are written in JSX syntax and implemented using Preact. The number of dependencies is very small and the software does not rely on Babel.

yarn add -D splendid
yarn add global splendid

Here are some of the cool features of Splendid that makes it the best choice for building static websites.

JSX Components And Elements  📇 Elements & Components Wiki

Each website will have a set of elements that might be reused across pages. It will also have interactive components. The best way to write both is using JSX syntax:

• By simply exporting an element from the /elements/my-element.jsx file, it will be statically rendered into compiled HTML.
• On the other hand, by exporting it from the /components/my-component.jsx file, it will be added to the page dynamically at run time.

In both cases, properties are passed from pages' HTML in arguments: ``. This means you can continue creating websites in old fashion using HTML, only making use of JSX when you need to program elements.

Bootstrap Integration  🚥 Bootstrap Wiki

Bootstrap elements can be used natively since Splendid implements their semantics as elements, with appropriate tags. The utilities defined in attributes will be added to the class name. Attributes that correspond to CSS properties will also be converted into a style. This makes it really easy to write layout:

  
    Hello World
  

JS Compilation And CSS Minification  🗜Assets Wiki

All style and script assets that are added to pages will undergo a compilation and optimisation using Closure tools.

• Closure Compiler will create the smallest possible JavaScript transpiled into ES2015 and split it in chunks so that all common code can be shared by pages.
• Whereas Closure Stylesheets will process CSS files to combine them into a single minified one.

Components can also access CSS API in order to rename their classes, e.g,. .MyComponent .HelloWorld becomes .MyComponent .a. CSS rules also automatically recieve browser prefix expansion (transform -> -webkit-transform) for greater compatibility.

Lazy Rendering Of Components  🧩 Rendering Wiki

Components will be rendered only when they are scrolled into view (allowed for render margin). They will also get a chance to download additional assets such as CSS, or JS libraries, before rendering, so that these resources don't block the initial rendering of the page. There are generally 3 types of components:

• Preact components which are either functions or implementations of the Preact Component, and implement the render method called by Preact.
• Plain components that implement the render method which is called directly when they are called into view.
• Plain components that can download server-built HTML code and inject it into DOM when needed. They allow to keep the number of nodes in critical render path small so that initial layout and parsing can be performed faster.

In every case, components will be added to the page just before the user views them. `