impl

The HTML render adapter implementation for string-based rendering.

Syntax

const impl: Partial<RenderAdapter<TextNode, undefined, TextNode, string>>

Description

The impl object (short for "implementation") contains the adapter methods for converting Crank elements to HTML strings. It implements a subset of the RenderAdapter interface.

Unlike the DOM adapter which creates real nodes, the HTML adapter works with simple TextNode objects that hold string values. The final HTML is assembled by joining these strings.

Implemented methods

create()

Creates an empty TextNode container.

create(): TextNode  // Returns {value: ""}

text()

Creates a TextNode with escaped text content.

text({value}): TextNode

Escapes HTML entities (&, <, >, ", ') to prevent XSS.

read()

Extracts the final HTML string from an ElementValue.

read(value: ElementValue<TextNode>): string

arrange()

Assembles the final HTML string for an element.

arrange({tag, tagName, node, props, children}): void

• Generates opening and closing tags
• Handles void elements (no closing tag)
• Formats attributes from props
• Handles innerHTML prop

Handled props

The arrange() method handles these props specially:

Void elements

These elements are rendered without closing tags:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Examples

Understanding output

import {renderer} from "@b9g/crank/html";

// Input
const html = await renderer.render(
  <div class="container" style={{color: "red"}}>
    <span>Hello & goodbye</span>
  </div>
);

// Output (formatted for readability)
// <div class="container" style="color:red;">
//   <span>Hello &amp; goodbye</span>
// </div>

Conditional classes

// Input
<div class={{"active": true, "disabled": false}} />

// Output
// <div class="active"></div>

Void elements

// Input
<div>
  <input type="text" />
  <br />
  <img src="photo.jpg" />
</div>

// Output
// <div><input type="text"><br><img src="photo.jpg"></div>

innerHTML

// Input
<div innerHTML="<strong>Bold</strong>" />

// Output (innerHTML not escaped)
// <div><strong>Bold</strong></div>

See also

• HTMLRenderer
• RenderAdapter
• renderer