https://github.com/voxpelli/async-htm-to-string

Renders a htm tagged template asyncly into a string
https://github.com/voxpelli/async-htm-to-string

asynciterable asynciterator htm server-side-rendering ssr tagged-template-literals template-literal

Last synced: 4 months ago
JSON representation

Renders a htm tagged template asyncly into a string

• Host: GitHub
• URL: https://github.com/voxpelli/async-htm-to-string
• Owner: voxpelli
• License: 0bsd
• Created: 2020-10-31T17:07:39.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-04T19:51:09.000Z (4 months ago)
• Last Synced: 2025-01-04T20:32:52.785Z (4 months ago)
• Topics: asynciterable, asynciterator, htm, server-side-rendering, ssr, tagged-template-literals, template-literal
• Language: JavaScript
• Homepage:
• Size: 116 KB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# async-htm-to-string

Renders a [`htm`](https://www.npmjs.com/package/htm) tagged template asyncly into a string.

[![npm version](https://img.shields.io/npm/v/async-htm-to-string.svg?style=flat)](https://www.npmjs.com/package/async-htm-to-string)

[![npm downloads](https://img.shields.io/npm/dm/async-htm-to-string.svg?style=flat)](https://www.npmjs.com/package/async-htm-to-string)

[![Module type: CJS+ESM](https://img.shields.io/badge/module%20type-cjs%2Besm-brightgreen)](https://github.com/voxpelli/badges-cjs-esm)

[![Types in JS](https://img.shields.io/badge/types_in_js-yes-brightgreen)](https://github.com/voxpelli/types-in-js)

[![neostandard javascript style](https://img.shields.io/badge/code_style-neostandard-7fffff?style=flat&labelColor=ff80ff)](https://github.com/neostandard/neostandard)

[![Follow @[email protected]](https://img.shields.io/mastodon/follow/109247025527949675?domain=https%3A%2F%2Fmastodon.social&style=social)](https://mastodon.social/@voxpelli)

## Usage

### Simple

```bash

npm install async-htm-to-string

```

```javascript

const { html, renderToString } = require('async-htm-to-string');

const customTag = ({ prefix }, children) => html`
${prefix}-${children}
`;

const dynamicContent = 'bar';

// Will equal "
foo-bar

const result = await renderToString(html`<${customTag} prefix="foo">${dynamicContent}${customTag}>`);

```


## API

### `html`

Is `h()` bound to [`htm`](https://www.npmjs.com/package/htm) (`htm.bind(h)`). Used with template literals, like:

```javascript

const renderableElement = html`
${content}
`;

```


### `rawHtml / rawHtml(rawString)`

If you need to provide pre-escaped raw HTML content, then you can use `rawHtml` as either a template literal or by calling it with the

```javascript

const renderableElement = rawHtml`
&${'"'}
`;

```


```javascript

const renderableElement = rawHtml('
&
');

```


You can also use the result of any of those `rawHtml` inside `html`, like:

```javascript

const renderableElement = html`
${rawHtml`&`}
`;

```


### `h(type, props, ...children)`

The inner method that's `htm` is bound to.

### `render(renderableElement)`

Takes the output from `html` and returns an async iterator that yields the strings as they are rendered

### `renderToString(renderableElement)`

Same as `render()`, but asyncly returns a single string with the fully rendered result, rather than an async iterator.

## Helpers

### `generatorToString(somethingIterable)`

Asyncly loops over an iterable (like eg. an async iterable) and concatenates together the result into a single string that it resolves to. The brains behind `renderToString()`.