µhtml-ssr

Social Media Photo by Nathan Dumlao on Unsplash

µhtml for Service Worker, Web Worker, NodeJS, and other SSR cases, based on µcontent logic, but without 3rd party tools (no minification, etc.).

This module can be used as drop-in replacement for µhtml components, but rendered SSR, or where there is no DOM.

This module also exports uhtml-ssr/async helpers to always resolve asynchronous interpolations.

import {render, html, svg} from 'uhtml-ssr';

// render accepts a callback instead of a DOM node
// or a response object with a `res.write(content)` method.
render(String, html`<h1>Hello µhtml-ssr 👋</h1>`);
//  "<h1>Hello µhtml-ssr 👋</h1>"

Exports have feature parity with µhtml, and pretty much everything else works the same, except:

• inline DOM events are not rendered, these are simply removed
• ref=${...} attributes receives null as there's no node or element to pass around

Isomorphic µhtml Components

If you are using CommonJS you could use require-overrides module to fake uhtml as uhtml-ssr.

// component.js
const {html} = require('uhtml');
module.exports = (name) => {
  return html`Hello ${name}`;
};

// index.js
const overrides = require('require-overrides');
overrides.set('uhtml', 'uhtml-ssr');

const {render} = require('uhtml-ssr');

const Component = require('./component.js');

console.log(render(String, Component('World')));
// "Hello World"