uhtml-ssr

µ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"