Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lit-html] Expand documentation for TemplateResult and render. #2849

Merged
merged 10 commits into from Jun 10, 2022
6 changes: 6 additions & 0 deletions .changeset/eighty-windows-bow.md
@@ -0,0 +1,6 @@
---
'lit-html': patch
'lit': patch
---

Expand documentation for `render` and `TemplateResult`.
37 changes: 33 additions & 4 deletions packages/lit-html/src/lit-html.ts
Expand Up @@ -443,7 +443,17 @@ const ELEMENT_PART = 6;
const COMMENT_PART = 7;

/**
* The return type of the template tag functions.
* The return type of the template tag functions, {@linkcode html} and
* {@linkcode svg}.
*
* A `TemplateResult` object holds all the information about a template
* expression required to render it: the template strings, expression values,
* and type of template (html or svg).
*
* `TemplateResult` objects do not create any DOM on their own. To create or
* update DOM you need to render the `TemplateResult`. See
* [Rendering](https://lit.dev/docs/components/rendering) for more information.
*
*/
export type TemplateResult<T extends ResultType = ResultType> = {
// This property needs to remain unminified.
Expand Down Expand Up @@ -609,9 +619,28 @@ export interface RenderOptions {

/**
* Renders a value, usually a lit-html TemplateResult, to the container.
* @param value
* @param container
* @param options
*
* For example, to render "Hello, Zoe!" to the container `document.body` where
* the name "Zoe" is from a variable:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe to @justinfagnani 's point, this should say something like,

This example renders the text "Hello, Zoe!" inside a paragraph tag, appending it to the container document.body.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! Adding verbatim.

*
* ```js
* import {html, render} from 'lit';
*
* const name = "Zoe";
* render(html`<p>Hello, ${name}!</p>`, document.body);
* ```
*
* @param value Any [renderable
* value](https://lit.dev/docs/templates/expressions/#child-expressions),
* typically a {@linkcode TemplateResult} created by evaluating a template tag
* like {@linkcode html} or {@linkcode svg}.
* @param container A DOM container to render to. The first render will append
* the rendered value to the container, and subsequent renders will
* efficiently update the rendered value if the same result type was
* previously rendered there.
* @param options See {@linkcode RenderOptions} for options documentation.
* @see
* {@link https://lit.dev/docs/libraries/standalone-templates/#rendering-lit-html-templates| Rendering Lit HTML Templates}
*/
export const render = (
value: unknown,
Expand Down