lighthouse 9.6.8 → 10.0.0-dev.20230209

package/report/renderer/dom.d.ts

@@ -0,0 +1,125 @@
+export class DOM {
+    /**
+     * @param {Document} document
+     * @param {HTMLElement} rootEl
+     */
+    constructor(document: Document, rootEl: HTMLElement);
+    /** @type {Document} */
+    _document: Document;
+    /** @type {string} */
+    _lighthouseChannel: string;
+    /** @type {Map<string, DocumentFragment>} */
+    _componentCache: Map<string, DocumentFragment>;
+    /** @type {HTMLElement} */
+    rootEl: HTMLElement;
+    /**
+     * @template {string} T
+     * @param {T} name
+     * @param {string=} className
+     * @return {HTMLElementByTagName[T]}
+     */
+    createElement<T extends string>(name: T, className?: string | undefined): HTMLElementByTagName[T];
+    /**
+     * @param {string} namespaceURI
+     * @param {string} name
+     * @param {string=} className
+     * @return {Element}
+     */
+    createElementNS(namespaceURI: string, name: string, className?: string | undefined): Element;
+    /**
+     * @return {!DocumentFragment}
+     */
+    createFragment(): DocumentFragment;
+    /**
+     * @param {string} data
+     * @return {!Node}
+     */
+    createTextNode(data: string): Node;
+    /**
+     * @template {string} T
+     * @param {Element} parentElem
+     * @param {T} elementName
+     * @param {string=} className
+     * @return {HTMLElementByTagName[T]}
+     */
+    createChildOf<T_1 extends string>(parentElem: Element, elementName: T_1, className?: string | undefined): HTMLElementByTagName[T_1];
+    /**
+     * @param {import('./components.js').ComponentName} componentName
+     * @return {!DocumentFragment} A clone of the cached component.
+     */
+    createComponent(componentName: import('./components.js').ComponentName): DocumentFragment;
+    clearComponentCache(): void;
+    /**
+     * @param {string} text
+     * @return {Element}
+     */
+    convertMarkdownLinkSnippets(text: string): Element;
+    /**
+     * Set link href, but safely, preventing `javascript:` protocol, etc.
+     * @see https://github.com/google/safevalues/
+     * @param {HTMLAnchorElement} elem
+     * @param {string} url
+     */
+    safelySetHref(elem: HTMLAnchorElement, url: string): void;
+    /**
+     * Only create blob URLs for JSON & HTML
+     * @param {HTMLAnchorElement} elem
+     * @param {Blob} blob
+     */
+    safelySetBlobHref(elem: HTMLAnchorElement, blob: Blob): void;
+    /**
+     * @param {string} markdownText
+     * @return {Element}
+     */
+    convertMarkdownCodeSnippets(markdownText: string): Element;
+    /**
+     * The channel to use for UTM data when rendering links to the documentation.
+     * @param {string} lighthouseChannel
+     */
+    setLighthouseChannel(lighthouseChannel: string): void;
+    /**
+     * ONLY use if `dom.rootEl` isn't sufficient for your needs. `dom.rootEl` is preferred
+     * for all scoping, because a document can have multiple reports within it.
+     * @return {Document}
+     */
+    document(): Document;
+    /**
+     * TODO(paulirish): import and conditionally apply the DevTools frontend subclasses instead of this
+     * @return {boolean}
+     */
+    isDevTools(): boolean;
+    /**
+     * Guaranteed context.querySelector. Always returns an element or throws if
+     * nothing matches query.
+     * @template {string} T
+     * @param {T} query
+     * @param {ParentNode} context
+     * @return {ParseSelector<T>}
+     */
+    find<T_2 extends string>(query: T_2, context: ParentNode): import("typed-query-selector/parser").ParseSelector<T_2, Element>;
+    /**
+     * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
+     * @template {string} T
+     * @param {T} query
+     * @param {ParentNode} context
+     */
+    findAll<T_3 extends string>(query: T_3, context: ParentNode): import("../../types/internal/query-selector.js").QuerySelectorParse<T_3>[];
+    /**
+     * Fires a custom DOM event on target.
+     * @param {string} name Name of the event.
+     * @param {Node=} target DOM node to fire the event on.
+     * @param {*=} detail Custom data to include.
+     */
+    fireEventOn(name: string, target?: Node | undefined, detail?: any | undefined): void;
+    /**
+     * Downloads a file (blob) using a[download].
+     * @param {Blob|File} blob The file to save.
+     * @param {string} filename
+     */
+    saveFile(blob: Blob | File, filename: string): void;
+}
+export type HTMLElementByTagName = HTMLElementTagNameMap & {
+    [id: string]: HTMLElement;
+};
+export type ParseSelector<T extends string> = import('typed-query-selector/parser').ParseSelector<T, Element>;
+//# sourceMappingURL=dom.d.ts.map

package/report/renderer/dom.js

@@ -14,14 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-'use strict';
 
 /* eslint-env browser */
 
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
-import {Util} from './util.js';
+import {Util} from '../../shared/util.js';
 import {createComponent} from './components.js';
 
 export class DOM {
@@ -98,7 +97,7 @@ export class DOM {
    */
   createChildOf(parentElem, elementName, className) {
     const element = this.createElement(elementName, className);
-    parentElem.appendChild(element);
+    parentElem.append(element);
     return element;
   }
 
@@ -134,16 +133,20 @@ export class DOM {
     const element = this.createElement('span');
 
     for (const segment of Util.splitMarkdownLink(text)) {
+      const processedSegment = segment.text.includes('`') ?
+        this.convertMarkdownCodeSnippets(segment.text) :
+        segment.text;
+
       if (!segment.isLink) {
         // Plain text segment.
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(processedSegment);
         continue;
       }
 
       // Otherwise, append any links found.
       const url = new URL(segment.linkHref);
 
-      const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
+      const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev', 'https://developer.chrome.com'];
       if (DOCS_ORIGINS.includes(url.origin)) {
         url.searchParams.set('utm_source', 'lighthouse');
         url.searchParams.set('utm_medium', this._lighthouseChannel);
@@ -152,9 +155,9 @@ export class DOM {
       const a = this.createElement('a');
       a.rel = 'noopener';
       a.target = '_blank';
-      a.textContent = segment.text;
+      a.append(processedSegment);
       this.safelySetHref(a, url.href);
-      element.appendChild(a);
+      element.append(a);
     }
 
     return element;
@@ -211,9 +214,9 @@ export class DOM {
       if (segment.isCode) {
         const pre = this.createElement('code');
         pre.textContent = segment.text;
-        element.appendChild(pre);
+        element.append(pre);
       } else {
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(this._document.createTextNode(segment.text));
       }
     }
 
@@ -296,7 +299,7 @@ export class DOM {
     const a = this.createElement('a');
     a.download = filename;
     this.safelySetBlobHref(a, blob);
-    this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
+    this._document.body.append(a); // Firefox requires anchor to be in the DOM.
     a.click();
 
     // cleanup.

package/report/renderer/drop-down-menu.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+/** @typedef {import('./dom.js').DOM} DOM */
+export class DropDownMenu {
+    /**
+     * @param {DOM} dom
+     */
+    constructor(dom: DOM);
+    /** @type {DOM} */
+    _dom: DOM;
+    /** @type {HTMLElement} */
+    _toggleEl: HTMLElement;
+    /** @type {HTMLElement} */
+    _menuEl: HTMLElement;
+    /**
+     * Keydown handler for the document.
+     * @param {KeyboardEvent} e
+     */
+    onDocumentKeyDown(e: KeyboardEvent): void;
+    /**
+     * Click handler for tools button.
+     * @param {Event} e
+     */
+    onToggleClick(e: Event): void;
+    /**
+     * Handler for tool button.
+     * @param {KeyboardEvent} e
+     */
+    onToggleKeydown(e: KeyboardEvent): void;
+    /**
+     * Focus out handler for the drop down menu.
+     * @param {FocusEvent} e
+     */
+    onMenuFocusOut(e: FocusEvent): void;
+    /**
+     * Handler for tool DropDown.
+     * @param {KeyboardEvent} e
+     */
+    onMenuKeydown(e: KeyboardEvent): void;
+    /**
+     * @param {?HTMLElement=} startEl
+     * @return {HTMLElement}
+     */
+    _getNextMenuItem(startEl?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {Array<Node>} allNodes
+     * @param {?HTMLElement=} startNode
+     * @return {HTMLElement}
+     */
+    _getNextSelectableNode(allNodes: Array<Node>, startNode?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {?HTMLElement=} startEl
+     * @return {HTMLElement}
+     */
+    _getPreviousMenuItem(startEl?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {function(MouseEvent): any} menuClickHandler
+     */
+    setup(menuClickHandler: (arg0: MouseEvent) => any): void;
+    close(): void;
+    /**
+     * @param {HTMLElement} firstFocusElement
+     */
+    open(firstFocusElement: HTMLElement): void;
+}
+export type DOM = import('./dom.js').DOM;
+//# sourceMappingURL=drop-down-menu.d.ts.map

package/report/renderer/drop-down-menu.js

@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/element-screenshot-renderer.d.ts

@@ -0,0 +1,79 @@
+export class ElementScreenshotRenderer {
+    /**
+     * Given the location of an element and the sizes of the preview and screenshot,
+     * compute the absolute positions (in screenshot coordinate scale) of the screenshot content
+     * and the highlighted rect around the element.
+     * @param {Rect} elementRectSC
+     * @param {Size} elementPreviewSizeSC
+     * @param {Size} screenshotSize
+     */
+    static getScreenshotPositions(elementRectSC: Rect, elementPreviewSizeSC: Size, screenshotSize: Size): {
+        screenshot: {
+            left: number;
+            top: number;
+        };
+        clip: {
+            left: number;
+            top: number;
+        };
+    };
+    /**
+     * Render a clipPath SVG element to assist marking the element's rect.
+     * The elementRect and previewSize are in screenshot coordinate scale.
+     * @param {DOM} dom
+     * @param {HTMLElement} maskEl
+     * @param {{left: number, top: number}} positionClip
+     * @param {Rect} elementRect
+     * @param {Size} elementPreviewSize
+     */
+    static renderClipPathInScreenshot(dom: DOM, maskEl: HTMLElement, positionClip: {
+        left: number;
+        top: number;
+    }, elementRect: Rect, elementPreviewSize: Size): void;
+    /**
+     * Called by report renderer. Defines a css variable used by any element screenshots
+     * in the provided report element.
+     * Allows for multiple Lighthouse reports to be rendered on the page, each with their
+     * own full page screenshot.
+     * @param {HTMLElement} el
+     * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
+     */
+    static installFullPageScreenshot(el: HTMLElement, screenshot: LH.Result.FullPageScreenshot['screenshot']): void;
+    /**
+     * Installs the lightbox elements and wires up click listeners to all .lh-element-screenshot elements.
+     * @param {InstallOverlayFeatureParams} opts
+     */
+    static installOverlayFeature(opts: InstallOverlayFeatureParams): void;
+    /**
+     * Given the size of the element in the screenshot and the total available size of our preview container,
+     * compute the factor by which we need to zoom out to view the entire element with context.
+     * @param {Rect} elementRectSC
+     * @param {Size} renderContainerSizeDC
+     * @return {number}
+     */
+    static _computeZoomFactor(elementRectSC: Rect, renderContainerSizeDC: Size): number;
+    /**
+     * Renders an element with surrounding context from the full page screenshot.
+     * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
+     * Returns null if element rect is outside screenshot bounds.
+     * @param {DOM} dom
+     * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
+     * @param {Rect} elementRectSC Region of screenshot to highlight.
+     * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
+     * @return {Element|null}
+     */
+    static render(dom: DOM, screenshot: LH.Result.FullPageScreenshot['screenshot'], elementRectSC: Rect, maxRenderSizeDC: Size): Element | null;
+}
+export type DOM = import('./dom.js').DOM;
+export type Rect = LH.Audit.Details.Rect;
+export type Size = {
+    width: number;
+    height: number;
+};
+export type InstallOverlayFeatureParams = {
+    dom: DOM;
+    rootEl: Element;
+    overlayContainerEl: Element;
+    fullPageScreenshot: LH.Result.FullPageScreenshot;
+};
+//# sourceMappingURL=element-screenshot-renderer.d.ts.map

package/report/renderer/element-screenshot-renderer.js

@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
 /**
  * @fileoverview These functions define {Rect}s and {Size}s using two different coordinate spaces:
@@ -11,6 +10,8 @@
  *   2. Display coords (DC suffix): that match the CSS pixel coordinate space of the LH report's page.
  */
 
+import {Globals} from './report-globals.js';
+
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {LH.Audit.Details.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
@@ -20,13 +21,11 @@
  * @property {DOM} dom
  * @property {Element} rootEl
  * @property {Element} overlayContainerEl
- * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
+ * @property {LH.Result.FullPageScreenshot} fullPageScreenshot
  */
 
-import {Util} from './util.js';
-
 /**
- * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+ * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
  * @param {LH.Audit.Details.Rect} rect
  * @return {boolean}
  */
@@ -103,7 +102,7 @@ export class ElementScreenshotRenderer {
    */
   static renderClipPathInScreenshot(dom, maskEl, positionClip, elementRect, elementPreviewSize) {
     const clipPathEl = dom.find('clipPath', maskEl);
-    const clipId = `clip-${Util.getUniqueSuffix()}`;
+    const clipId = `clip-${Globals.getUniqueSuffix()}`;
     clipPathEl.id = clipId;
     maskEl.style.clipPath = `url(#${clipId})`;
 
@@ -132,7 +131,7 @@ export class ElementScreenshotRenderer {
    * Allows for multiple Lighthouse reports to be rendered on the page, each with their
    * own full page screenshot.
    * @param {HTMLElement} el
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
     el.style.setProperty('--element-screenshot-url', `url('${screenshot.data}')`);
@@ -187,7 +186,7 @@ export class ElementScreenshotRenderer {
         overlay.remove();
         return;
       }
-      overlay.appendChild(screenshotElement);
+      overlay.append(screenshotElement);
       overlay.addEventListener('click', () => overlay.remove());
     });
   }
@@ -214,7 +213,7 @@ export class ElementScreenshotRenderer {
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
    * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
    * @param {Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
    * @return {Element|null}
@@ -240,7 +239,10 @@ export class ElementScreenshotRenderer {
       width: maxRenderSizeDC.width / zoomFactor,
       height: maxRenderSizeDC.height / zoomFactor,
     };
+
     elementPreviewSizeSC.width = Math.min(screenshot.width, elementPreviewSizeSC.width);
+    elementPreviewSizeSC.height = Math.min(screenshot.height, elementPreviewSizeSC.height);
+
     /* This preview size is either the size of the thumbnail or size of the Lightbox */
     const elementPreviewSizeDC = {
       width: elementPreviewSizeSC.width * zoomFactor,
@@ -253,9 +255,6 @@ export class ElementScreenshotRenderer {
       {width: screenshot.width, height: screenshot.height}
     );
 
-    const contentEl = dom.find('div.lh-element-screenshot__content', containerEl);
-    contentEl.style.top = `-${elementPreviewSizeDC.height}px`;
-
     const imageEl = dom.find('div.lh-element-screenshot__image', containerEl);
     imageEl.style.width = elementPreviewSizeDC.width + 'px';
     imageEl.style.height = elementPreviewSizeDC.height + 'px';

package/report/renderer/features-util.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+/** @typedef {import('./dom.js').DOM} DOM */
+/**
+ * @param {DOM} dom
+ * @param {boolean} [force]
+ */
+export function toggleDarkTheme(dom: DOM, force?: boolean | undefined): void;
+export type DOM = import('./dom.js').DOM;
+//# sourceMappingURL=features-util.d.ts.map

package/report/renderer/features-util.js

@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
-'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/i18n-formatter.d.ts

@@ -0,0 +1,100 @@
+export class I18nFormatter {
+    /**
+     * @param {LH.Locale} locale
+     */
+    constructor(locale: LH.Locale);
+    _locale: "en-US" | "en" | "en-AU" | "en-GB" | "en-IE" | "en-SG" | "en-ZA" | "en-IN" | "ar-XB" | "ar" | "bg" | "ca" | "cs" | "da" | "de" | "el" | "en-XL" | "es" | "es-419" | "es-AR" | "es-BO" | "es-BR" | "es-BZ" | "es-CL" | "es-CO" | "es-CR" | "es-CU" | "es-DO" | "es-EC" | "es-GT" | "es-HN" | "es-MX" | "es-NI" | "es-PA" | "es-PE" | "es-PR" | "es-PY" | "es-SV" | "es-US" | "es-UY" | "es-VE" | "fi" | "fil" | "fr" | "he" | "hi" | "hr" | "hu" | "gsw" | "id" | "in" | "it" | "iw" | "ja" | "ko" | "lt" | "lv" | "mo" | "nl" | "nb" | "no" | "pl" | "pt" | "pt-PT" | "ro" | "ru" | "sk" | "sl" | "sr" | "sr-Latn" | "sv" | "ta" | "te" | "th" | "tl" | "tr" | "uk" | "vi" | "zh" | "zh-HK" | "zh-TW";
+    _cachedNumberFormatters: Map<any, any>;
+    /**
+     * @param {number} number
+     * @param {number|undefined} granularity
+     * @param {Intl.NumberFormatOptions=} opts
+     * @return {string}
+     */
+    _formatNumberWithGranularity(number: number, granularity: number | undefined, opts?: Intl.NumberFormatOptions | undefined): string;
+    /**
+     * Format number.
+     * @param {number} number
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed as described
+     *                              by the Intl defaults: tinyurl.com/7s67w5x7
+     * @return {string}
+     */
+    formatNumber(number: number, granularity?: number | undefined): string;
+    /**
+     * Format integer.
+     * Just like {@link formatNumber} but uses a granularity of 1, rounding to the nearest
+     * whole number.
+     * @param {number} number
+     * @return {string}
+     */
+    formatInteger(number: number): string;
+    /**
+     * Format percent.
+     * @param {number} number 0–1
+     * @return {string}
+     */
+    formatPercent(number: number): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesToKiB(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesToMiB(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytes(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesWithBestUnit(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatKbps(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} ms
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatMilliseconds(ms: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} ms
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatSeconds(ms: number, granularity?: number | undefined): string;
+    /**
+     * Format time.
+     * @param {string} date
+     * @return {string}
+     */
+    formatDateTime(date: string): string;
+    /**
+     * Converts a time in milliseconds into a duration string, i.e. `1d 2h 13m 52s`
+     * @param {number} timeInMilliseconds
+     * @return {string}
+     */
+    formatDuration(timeInMilliseconds: number): string;
+}
+//# sourceMappingURL=i18n-formatter.d.ts.map