impl #

The HTML render adapter implementation for string-based rendering.

Syntax #

const impl: Partial<RenderAdapter<TextNode, string, 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 #

scope() #

Computes the XML namespace scope for child elements.

scope({tag, props, scope}): string | undefined

• Returns "http://www.w3.org/2000/svg" for <svg> elements
• Returns "http://www.w3.org/1998/Math/MathML" for <math> elements
• Returns undefined (exits namespace) for <foreignObject> elements
• Otherwise inherits the parent scope

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