https://github.com/webreflection/uhtml-ssr

uhtml for Service Worker, Web Worker, NodeJS, and other SSR cases
https://github.com/webreflection/uhtml-ssr

Last synced: about 1 year ago
JSON representation

uhtml for Service Worker, Web Worker, NodeJS, and other SSR cases

• Host: GitHub
• URL: https://github.com/webreflection/uhtml-ssr
• Owner: WebReflection
• License: isc
• Created: 2020-12-22T10:36:48.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-05-19T21:16:38.000Z (about 4 years ago)
• Last Synced: 2025-04-13T23:57:45.203Z (over 1 year ago)
• Language: JavaScript
• Size: 117 KB
• Stars: 34
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# µhtml-ssr

[![build status](https://github.com/WebReflection/uhtml-ssr/actions/workflows/node.js.yml/badge.svg)](https://github.com/WebReflection/uhtml-ssr/actions) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhtml-ssr/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/uhtml-ssr?branch=main)

**Social Media Photo by [Nathan Dumlao](https://unsplash.com/@nate_dumlao) on [Unsplash](https://unsplash.com/)**

**[µhtml](https://github.com/WebReflection/uhtml#readme)** for Service Worker, Web Worker, NodeJS, and other *SSR* cases, based on [µcontent](https://github.com/WebReflection/ucontent#readme) 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.

```js

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`
Hello µhtml-ssr 👋
`);

//  "
Hello µhtml-ssr 👋
"

```


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](https://github.com/WebReflection/require-overrides/#readme) module to fake `uhtml` as `uhtml-ssr`.

```js

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

```