Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/template

addTemplateHash

Wraps the HTML chunks with comments containing the template hash. This is crucial for hydration to identify which template rendered a section of HTML.

Package version
1.0.0-beta.7
Category
Hydration markers
Since
1.0.0

Import

import { addTemplateHash } from "@typed/template";

Signatures

export declare function addTemplateHash(chunks: ReadonlyArray<HtmlChunk>, { hash }: Template.Template): ReadonlyArray<HtmlChunk>;

Why

Versioned boundary comments let the DOM renderer locate the exact SSR range corresponding to a compiled template without claiming unrelated nodes.

Ownership and lifetime

This pure transformation returns a new chunk sequence. Marker adoption and fallback are owned later by the hydration Scope.

Examples

import { addTemplateHash, templateToHtmlChunks } from "@typed/template/HtmlChunk"
import { parse } from "@typed/template/Parser"

const template = parse(["<div>Hello</div>"])
const chunks = templateToHtmlChunks(template)
const chunksWithHash = addTemplateHash(chunks, template)

// chunksWithHash will have template hash comments added
// for hydration purposes

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source