lit-html.d.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. /// <reference types="trusted-types" />
  7. import type { Directive } from './directive.js';
  8. /**
  9. * Contains types that are part of the unstable debug API.
  10. *
  11. * Everything in this API is not stable and may change or be removed in the future,
  12. * even on patch releases.
  13. */
  14. export declare namespace LitUnstable {
  15. /**
  16. * When Lit is running in dev mode and `window.emitLitDebugLogEvents` is true,
  17. * we will emit 'lit-debug' events to window, with live details about the update and render
  18. * lifecycle. These can be useful for writing debug tooling and visualizations.
  19. *
  20. * Please be aware that running with window.emitLitDebugLogEvents has performance overhead,
  21. * making certain operations that are normally very cheap (like a no-op render) much slower,
  22. * because we must copy data and dispatch events.
  23. */
  24. namespace DebugLog {
  25. type Entry = TemplatePrep | TemplateInstantiated | TemplateInstantiatedAndUpdated | TemplateUpdating | BeginRender | EndRender | CommitPartEntry | SetPartValue;
  26. interface TemplatePrep {
  27. kind: 'template prep';
  28. template: Template;
  29. strings: TemplateStringsArray;
  30. clonableTemplate: HTMLTemplateElement;
  31. parts: TemplatePart[];
  32. }
  33. interface BeginRender {
  34. kind: 'begin render';
  35. id: number;
  36. value: unknown;
  37. container: HTMLElement | DocumentFragment;
  38. options: RenderOptions | undefined;
  39. part: ChildPart | undefined;
  40. }
  41. interface EndRender {
  42. kind: 'end render';
  43. id: number;
  44. value: unknown;
  45. container: HTMLElement | DocumentFragment;
  46. options: RenderOptions | undefined;
  47. part: ChildPart;
  48. }
  49. interface TemplateInstantiated {
  50. kind: 'template instantiated';
  51. template: Template | CompiledTemplate;
  52. instance: TemplateInstance;
  53. options: RenderOptions | undefined;
  54. fragment: Node;
  55. parts: Array<Part | undefined>;
  56. values: unknown[];
  57. }
  58. interface TemplateInstantiatedAndUpdated {
  59. kind: 'template instantiated and updated';
  60. template: Template | CompiledTemplate;
  61. instance: TemplateInstance;
  62. options: RenderOptions | undefined;
  63. fragment: Node;
  64. parts: Array<Part | undefined>;
  65. values: unknown[];
  66. }
  67. interface TemplateUpdating {
  68. kind: 'template updating';
  69. template: Template | CompiledTemplate;
  70. instance: TemplateInstance;
  71. options: RenderOptions | undefined;
  72. parts: Array<Part | undefined>;
  73. values: unknown[];
  74. }
  75. interface SetPartValue {
  76. kind: 'set part';
  77. part: Part;
  78. value: unknown;
  79. valueIndex: number;
  80. values: unknown[];
  81. templateInstance: TemplateInstance;
  82. }
  83. type CommitPartEntry = CommitNothingToChildEntry | CommitText | CommitNode | CommitAttribute | CommitProperty | CommitBooleanAttribute | CommitEventListener | CommitToElementBinding;
  84. interface CommitNothingToChildEntry {
  85. kind: 'commit nothing to child';
  86. start: ChildNode;
  87. end: ChildNode | null;
  88. parent: Disconnectable | undefined;
  89. options: RenderOptions | undefined;
  90. }
  91. interface CommitText {
  92. kind: 'commit text';
  93. node: Text;
  94. value: unknown;
  95. options: RenderOptions | undefined;
  96. }
  97. interface CommitNode {
  98. kind: 'commit node';
  99. start: Node;
  100. parent: Disconnectable | undefined;
  101. value: Node;
  102. options: RenderOptions | undefined;
  103. }
  104. interface CommitAttribute {
  105. kind: 'commit attribute';
  106. element: Element;
  107. name: string;
  108. value: unknown;
  109. options: RenderOptions | undefined;
  110. }
  111. interface CommitProperty {
  112. kind: 'commit property';
  113. element: Element;
  114. name: string;
  115. value: unknown;
  116. options: RenderOptions | undefined;
  117. }
  118. interface CommitBooleanAttribute {
  119. kind: 'commit boolean attribute';
  120. element: Element;
  121. name: string;
  122. value: boolean;
  123. options: RenderOptions | undefined;
  124. }
  125. interface CommitEventListener {
  126. kind: 'commit event listener';
  127. element: Element;
  128. name: string;
  129. value: unknown;
  130. oldListener: unknown;
  131. options: RenderOptions | undefined;
  132. removeListener: boolean;
  133. addListener: boolean;
  134. }
  135. interface CommitToElementBinding {
  136. kind: 'commit to element binding';
  137. element: Element;
  138. value: unknown;
  139. options: RenderOptions | undefined;
  140. }
  141. }
  142. }
  143. /**
  144. * Used to sanitize any value before it is written into the DOM. This can be
  145. * used to implement a security policy of allowed and disallowed values in
  146. * order to prevent XSS attacks.
  147. *
  148. * One way of using this callback would be to check attributes and properties
  149. * against a list of high risk fields, and require that values written to such
  150. * fields be instances of a class which is safe by construction. Closure's Safe
  151. * HTML Types is one implementation of this technique (
  152. * https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md).
  153. * The TrustedTypes polyfill in API-only mode could also be used as a basis
  154. * for this technique (https://github.com/WICG/trusted-types).
  155. *
  156. * @param node The HTML node (usually either a #text node or an Element) that
  157. * is being written to. Note that this is just an exemplar node, the write
  158. * may take place against another instance of the same class of node.
  159. * @param name The name of an attribute or property (for example, 'href').
  160. * @param type Indicates whether the write that's about to be performed will
  161. * be to a property or a node.
  162. * @return A function that will sanitize this class of writes.
  163. */
  164. export declare type SanitizerFactory = (node: Node, name: string, type: 'property' | 'attribute') => ValueSanitizer;
  165. /**
  166. * A function which can sanitize values that will be written to a specific kind
  167. * of DOM sink.
  168. *
  169. * See SanitizerFactory.
  170. *
  171. * @param value The value to sanitize. Will be the actual value passed into
  172. * the lit-html template literal, so this could be of any type.
  173. * @return The value to write to the DOM. Usually the same as the input value,
  174. * unless sanitization is needed.
  175. */
  176. export declare type ValueSanitizer = (value: unknown) => unknown;
  177. /** TemplateResult types */
  178. declare const HTML_RESULT = 1;
  179. declare const SVG_RESULT = 2;
  180. declare type ResultType = typeof HTML_RESULT | typeof SVG_RESULT;
  181. declare const ATTRIBUTE_PART = 1;
  182. declare const CHILD_PART = 2;
  183. declare const ELEMENT_PART = 6;
  184. declare const COMMENT_PART = 7;
  185. /**
  186. * The return type of the template tag functions.
  187. */
  188. export declare type TemplateResult<T extends ResultType = ResultType> = {
  189. ['_$litType$']: T;
  190. strings: TemplateStringsArray;
  191. values: unknown[];
  192. };
  193. export declare type HTMLTemplateResult = TemplateResult<typeof HTML_RESULT>;
  194. export declare type SVGTemplateResult = TemplateResult<typeof SVG_RESULT>;
  195. export interface CompiledTemplateResult {
  196. ['_$litType$']: CompiledTemplate;
  197. values: unknown[];
  198. }
  199. export interface CompiledTemplate extends Omit<Template, 'el'> {
  200. el?: HTMLTemplateElement;
  201. h: TrustedHTML;
  202. }
  203. /**
  204. * Interprets a template literal as an HTML template that can efficiently
  205. * render to and update a container.
  206. *
  207. * ```ts
  208. * const header = (title: string) => html`<h1>${title}</h1>`;
  209. * ```
  210. *
  211. * The `html` tag returns a description of the DOM to render as a value. It is
  212. * lazy, meaning no work is done until the template is rendered. When rendering,
  213. * if a template comes from the same expression as a previously rendered result,
  214. * it's efficiently updated instead of replaced.
  215. */
  216. export declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult<1>;
  217. /**
  218. * Interprets a template literal as an SVG fragment that can efficiently
  219. * render to and update a container.
  220. *
  221. * ```ts
  222. * const rect = svg`<rect width="10" height="10"></rect>`;
  223. *
  224. * const myImage = html`
  225. * <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  226. * ${rect}
  227. * </svg>`;
  228. * ```
  229. *
  230. * The `svg` *tag function* should only be used for SVG fragments, or elements
  231. * that would be contained **inside** an `<svg>` HTML element. A common error is
  232. * placing an `<svg>` *element* in a template tagged with the `svg` tag
  233. * function. The `<svg>` element is an HTML element and should be used within a
  234. * template tagged with the {@linkcode html} tag function.
  235. *
  236. * In LitElement usage, it's invalid to return an SVG fragment from the
  237. * `render()` method, as the SVG fragment will be contained within the element's
  238. * shadow root and thus cannot be used within an `<svg>` HTML element.
  239. */
  240. export declare const svg: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult<2>;
  241. /**
  242. * A sentinel value that signals that a value was handled by a directive and
  243. * should not be written to the DOM.
  244. */
  245. export declare const noChange: unique symbol;
  246. /**
  247. * A sentinel value that signals a ChildPart to fully clear its content.
  248. *
  249. * ```ts
  250. * const button = html`${
  251. * user.isAdmin
  252. * ? html`<button>DELETE</button>`
  253. * : nothing
  254. * }`;
  255. * ```
  256. *
  257. * Prefer using `nothing` over other falsy values as it provides a consistent
  258. * behavior between various expression binding contexts.
  259. *
  260. * In child expressions, `undefined`, `null`, `''`, and `nothing` all behave the
  261. * same and render no nodes. In attribute expressions, `nothing` _removes_ the
  262. * attribute, while `undefined` and `null` will render an empty string. In
  263. * property expressions `nothing` becomes `undefined`.
  264. */
  265. export declare const nothing: unique symbol;
  266. /**
  267. * Object specifying options for controlling lit-html rendering. Note that
  268. * while `render` may be called multiple times on the same `container` (and
  269. * `renderBefore` reference node) to efficiently update the rendered content,
  270. * only the options passed in during the first render are respected during
  271. * the lifetime of renders to that unique `container` + `renderBefore`
  272. * combination.
  273. */
  274. export interface RenderOptions {
  275. /**
  276. * An object to use as the `this` value for event listeners. It's often
  277. * useful to set this to the host component rendering a template.
  278. */
  279. host?: object;
  280. /**
  281. * A DOM node before which to render content in the container.
  282. */
  283. renderBefore?: ChildNode | null;
  284. /**
  285. * Node used for cloning the template (`importNode` will be called on this
  286. * node). This controls the `ownerDocument` of the rendered DOM, along with
  287. * any inherited context. Defaults to the global `document`.
  288. */
  289. creationScope?: {
  290. importNode(node: Node, deep?: boolean): Node;
  291. };
  292. /**
  293. * The initial connected state for the top-level part being rendered. If no
  294. * `isConnected` option is set, `AsyncDirective`s will be connected by
  295. * default. Set to `false` if the initial render occurs in a disconnected tree
  296. * and `AsyncDirective`s should see `isConnected === false` for their initial
  297. * render. The `part.setConnected()` method must be used subsequent to initial
  298. * render to change the connected state of the part.
  299. */
  300. isConnected?: boolean;
  301. }
  302. /**
  303. * Renders a value, usually a lit-html TemplateResult, to the container.
  304. * @param value
  305. * @param container
  306. * @param options
  307. */
  308. export declare const render: {
  309. (value: unknown, container: HTMLElement | DocumentFragment, options?: RenderOptions | undefined): RootPart;
  310. setSanitizer: (newSanitizer: SanitizerFactory) => void;
  311. createSanitizer: SanitizerFactory;
  312. _testOnlyClearSanitizerFactoryDoNotCallOrElse: () => void;
  313. };
  314. export interface DirectiveParent {
  315. _$parent?: DirectiveParent;
  316. _$isConnected: boolean;
  317. __directive?: Directive;
  318. __directives?: Array<Directive | undefined>;
  319. }
  320. declare class Template {
  321. constructor({ strings, ['_$litType$']: type }: TemplateResult, options?: RenderOptions);
  322. /** @nocollapse */
  323. static createElement(html: TrustedHTML, _options?: RenderOptions): HTMLTemplateElement;
  324. }
  325. export interface Disconnectable {
  326. _$parent?: Disconnectable;
  327. _$disconnectableChildren?: Set<Disconnectable>;
  328. _$isConnected: boolean;
  329. }
  330. declare function resolveDirective(part: ChildPart | AttributePart | ElementPart, value: unknown, parent?: DirectiveParent, attributeIndex?: number): unknown;
  331. /**
  332. * An updateable instance of a Template. Holds references to the Parts used to
  333. * update the template instance.
  334. */
  335. declare class TemplateInstance implements Disconnectable {
  336. constructor(template: Template, parent: ChildPart);
  337. get parentNode(): Node;
  338. get _$isConnected(): boolean;
  339. _clone(options: RenderOptions | undefined): Node;
  340. _update(values: Array<unknown>): void;
  341. }
  342. declare type AttributeTemplatePart = {
  343. readonly type: typeof ATTRIBUTE_PART;
  344. readonly index: number;
  345. readonly name: string;
  346. };
  347. declare type NodeTemplatePart = {
  348. readonly type: typeof CHILD_PART;
  349. readonly index: number;
  350. };
  351. declare type ElementTemplatePart = {
  352. readonly type: typeof ELEMENT_PART;
  353. readonly index: number;
  354. };
  355. declare type CommentTemplatePart = {
  356. readonly type: typeof COMMENT_PART;
  357. readonly index: number;
  358. };
  359. /**
  360. * A TemplatePart represents a dynamic part in a template, before the template
  361. * is instantiated. When a template is instantiated Parts are created from
  362. * TemplateParts.
  363. */
  364. declare type TemplatePart = NodeTemplatePart | AttributeTemplatePart | ElementTemplatePart | CommentTemplatePart;
  365. export declare type Part = ChildPart | AttributePart | PropertyPart | BooleanAttributePart | ElementPart | EventPart;
  366. export type { ChildPart };
  367. declare class ChildPart implements Disconnectable {
  368. readonly type = 2;
  369. readonly options: RenderOptions | undefined;
  370. _$committedValue: unknown;
  371. private _textSanitizer;
  372. get _$isConnected(): boolean;
  373. constructor(startNode: ChildNode, endNode: ChildNode | null, parent: TemplateInstance | ChildPart | undefined, options: RenderOptions | undefined);
  374. /**
  375. * The parent node into which the part renders its content.
  376. *
  377. * A ChildPart's content consists of a range of adjacent child nodes of
  378. * `.parentNode`, possibly bordered by 'marker nodes' (`.startNode` and
  379. * `.endNode`).
  380. *
  381. * - If both `.startNode` and `.endNode` are non-null, then the part's content
  382. * consists of all siblings between `.startNode` and `.endNode`, exclusively.
  383. *
  384. * - If `.startNode` is non-null but `.endNode` is null, then the part's
  385. * content consists of all siblings following `.startNode`, up to and
  386. * including the last child of `.parentNode`. If `.endNode` is non-null, then
  387. * `.startNode` will always be non-null.
  388. *
  389. * - If both `.endNode` and `.startNode` are null, then the part's content
  390. * consists of all child nodes of `.parentNode`.
  391. */
  392. get parentNode(): Node;
  393. /**
  394. * The part's leading marker node, if any. See `.parentNode` for more
  395. * information.
  396. */
  397. get startNode(): Node | null;
  398. /**
  399. * The part's trailing marker node, if any. See `.parentNode` for more
  400. * information.
  401. */
  402. get endNode(): Node | null;
  403. _$setValue(value: unknown, directiveParent?: DirectiveParent): void;
  404. private _insert;
  405. private _commitNode;
  406. private _commitText;
  407. private _commitTemplateResult;
  408. private _commitIterable;
  409. }
  410. /**
  411. * A top-level `ChildPart` returned from `render` that manages the connected
  412. * state of `AsyncDirective`s created throughout the tree below it.
  413. */
  414. export interface RootPart extends ChildPart {
  415. /**
  416. * Sets the connection state for `AsyncDirective`s contained within this root
  417. * ChildPart.
  418. *
  419. * lit-html does not automatically monitor the connectedness of DOM rendered;
  420. * as such, it is the responsibility of the caller to `render` to ensure that
  421. * `part.setConnected(false)` is called before the part object is potentially
  422. * discarded, to ensure that `AsyncDirective`s have a chance to dispose of
  423. * any resources being held. If a `RootPart` that was prevously
  424. * disconnected is subsequently re-connected (and its `AsyncDirective`s should
  425. * re-connect), `setConnected(true)` should be called.
  426. *
  427. * @param isConnected Whether directives within this tree should be connected
  428. * or not
  429. */
  430. setConnected(isConnected: boolean): void;
  431. }
  432. export type { AttributePart };
  433. declare class AttributePart implements Disconnectable {
  434. readonly type: 1 | 3 | 4 | 5;
  435. readonly element: HTMLElement;
  436. readonly name: string;
  437. readonly options: RenderOptions | undefined;
  438. /**
  439. * If this attribute part represents an interpolation, this contains the
  440. * static strings of the interpolation. For single-value, complete bindings,
  441. * this is undefined.
  442. */
  443. readonly strings?: ReadonlyArray<string>;
  444. protected _sanitizer: ValueSanitizer | undefined;
  445. get tagName(): string;
  446. get _$isConnected(): boolean;
  447. constructor(element: HTMLElement, name: string, strings: ReadonlyArray<string>, parent: Disconnectable, options: RenderOptions | undefined);
  448. }
  449. export type { PropertyPart };
  450. declare class PropertyPart extends AttributePart {
  451. readonly type = 3;
  452. }
  453. export type { BooleanAttributePart };
  454. declare class BooleanAttributePart extends AttributePart {
  455. readonly type = 4;
  456. }
  457. /**
  458. * An AttributePart that manages an event listener via add/removeEventListener.
  459. *
  460. * This part works by adding itself as the event listener on an element, then
  461. * delegating to the value passed to it. This reduces the number of calls to
  462. * add/removeEventListener if the listener changes frequently, such as when an
  463. * inline function is used as a listener.
  464. *
  465. * Because event options are passed when adding listeners, we must take case
  466. * to add and remove the part as a listener when the event options change.
  467. */
  468. export type { EventPart };
  469. declare class EventPart extends AttributePart {
  470. readonly type = 5;
  471. constructor(element: HTMLElement, name: string, strings: ReadonlyArray<string>, parent: Disconnectable, options: RenderOptions | undefined);
  472. handleEvent(event: Event): void;
  473. }
  474. export type { ElementPart };
  475. declare class ElementPart implements Disconnectable {
  476. element: Element;
  477. readonly type = 6;
  478. _$committedValue: undefined;
  479. options: RenderOptions | undefined;
  480. constructor(element: Element, parent: Disconnectable, options: RenderOptions | undefined);
  481. get _$isConnected(): boolean;
  482. _$setValue(value: unknown): void;
  483. }
  484. /**
  485. * END USERS SHOULD NOT RELY ON THIS OBJECT.
  486. *
  487. * Private exports for use by other Lit packages, not intended for use by
  488. * external users.
  489. *
  490. * We currently do not make a mangled rollup build of the lit-ssr code. In order
  491. * to keep a number of (otherwise private) top-level exports mangled in the
  492. * client side code, we export a _$LH object containing those members (or
  493. * helper methods for accessing private fields of those members), and then
  494. * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
  495. * client-side code is being used in `dev` mode or `prod` mode.
  496. *
  497. * This has a unique name, to disambiguate it from private exports in
  498. * lit-element, which re-exports all of lit-html.
  499. *
  500. * @private
  501. */
  502. export declare const _$LH: {
  503. _boundAttributeSuffix: string;
  504. _marker: string;
  505. _markerMatch: string;
  506. _HTML_RESULT: number;
  507. _getTemplateHtml: (strings: TemplateStringsArray, type: ResultType) => [TrustedHTML, Array<string | undefined>];
  508. _TemplateInstance: typeof TemplateInstance;
  509. _isIterable: (value: unknown) => value is Iterable<unknown>;
  510. _resolveDirective: typeof resolveDirective;
  511. _ChildPart: typeof ChildPart;
  512. _AttributePart: typeof AttributePart;
  513. _BooleanAttributePart: typeof BooleanAttributePart;
  514. _EventPart: typeof EventPart;
  515. _PropertyPart: typeof PropertyPart;
  516. _ElementPart: typeof ElementPart;
  517. };
  518. //# sourceMappingURL=lit-html.d.ts.map