Search documentation

Search by topic, API name, or import path.

GitHub ↗

class / @typed/template

RenderTemplate

A service that defines how templates are rendered.

Different implementations can be provided for different environments (e.g., DomRenderTemplate for browsers, HtmlRenderTemplate for SSR).

Package version
1.0.0-beta.7
Category
Template interpretation
Since
1.0.0

Import

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

Signatures

export declare class RenderTemplate extends RenderTemplate_base {
}

Why

A normal Effect service separates template syntax from output medium. The same html value can produce concrete DOM, streamed HTML, or hydration while retaining its E and R channels.

Ownership and lifetime

A provided implementation may own caches for its Layer lifetime. Each Fx it returns is acquired and finalized by the Scope that runs it; the service tag itself owns no DOM or response stream.

Examples

import { Effect, Layer } from "effect"
import { html } from "@typed/template"
import { DomRenderTemplate, render } from "@typed/template/Render"
import { HtmlRenderTemplate, renderToHtmlString } from "@typed/template/Html"
import { Fx } from "@typed/fx"

// Run DOM rendering until the surrounding Effect is interrupted.
const browserApp = render(html`<div>Hello</div>`, document.body).pipe(
  Fx.drainLayer,
  Layer.provide(DomRenderTemplate),
  Layer.launch
)

// Use HTML rendering for SSR
const serverApp = Effect.scoped(Effect.gen(function* () {
  const template = html`<div>Hello</div>`
  const htmlString = yield* renderToHtmlString(template).pipe(
    Effect.provide(HtmlRenderTemplate)
  )
  console.log(htmlString) // "<div>Hello</div>"
}))

Other public imports

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

Source