creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.0

package/dist/client/shared/components/PageHeader/PageHeader.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = PageHeader;
+const react_1 = __importStar(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const helpers_js_1 = require("../../helpers.js");
+const ImagePreview_js_1 = require("./ImagePreview.js");
+const viewMode_js_1 = require("../../viewMode.js");
+const Container = theming_1.styled.div({
+    margin: '24px 44px 0',
+});
+const ErrorContainer = (0, theming_1.withTheme)(theming_1.styled.div(({ theme }) => ({
+    marginTop: '8px',
+    padding: '8px',
+    background: theme.background.negative,
+    color: theme.color.negative,
+    borderRadius: '2px',
+    display: 'flex',
+    alignItems: 'baseline',
+    '& svg': {
+        margin: '0 5px',
+        width: 8,
+        height: 8,
+    },
+    '& pre': {
+        margin: '0 4px',
+        padding: 0,
+        lineHeight: '22px',
+    },
+})));
+const H1 = theming_1.styled.h1({
+    margin: 0,
+    marginBottom: '8px',
+});
+const HeaderDivider = (0, theming_1.withTheme)(theming_1.styled.span(({ theme }) => ({
+    padding: '0 8px',
+    color: theme.color.mediumdark,
+})));
+const ImagesEntriesContainer = theming_1.styled.div({
+    display: 'flex',
+    margin: '16px 0 8px',
+});
+function PageHeader({ title, images = {}, errorMessage, showViewModes, showTitle, viewMode, imagesWithError = [], onImageChange, onViewModeChange, }) {
+    const imageEntires = Object.entries(images);
+    const [imageName, setImageName] = (0, react_1.useState)(imageEntires.at(0)?.[0] ?? '');
+    const handleImageChange = (name) => {
+        setImageName(name);
+        onImageChange(name);
+    };
+    const handleViewModeChange = (mode) => {
+        onViewModeChange(mode);
+    };
+    const error = errorMessage || imagesWithError.includes(imageName) ? (images[imageName]?.error ?? errorMessage) : null;
+    return showTitle || error || imageEntires.length > 1 || showViewModes ? (react_1.default.createElement(Container, null,
+        showTitle && (react_1.default.createElement(H1, null, title.flatMap((token) => [token, react_1.default.createElement(HeaderDivider, { key: token }, "/")]).slice(0, -1))),
+        error && (react_1.default.createElement(ErrorContainer, null,
+            react_1.default.createElement(components_1.Icons, { icon: "closeAlt" }),
+            react_1.default.createElement("pre", null, error))),
+        imageEntires.length > 1 ? (react_1.default.createElement(ImagesEntriesContainer, null, imageEntires.map(([name, image]) => (react_1.default.createElement(ImagePreview_js_1.ImagePreview, { key: name, imageName: name, url: `${(0, helpers_js_1.getImageUrl)(title, name)}/${image.actual}`, isActive: name === imageName, onClick: handleImageChange, error: imagesWithError.includes(name) }))))) : null,
+        showViewModes && (react_1.default.createElement(components_1.Tabs, { selected: viewMode, actions: { onSelect: handleViewModeChange } }, viewMode_js_1.viewModes.map((x) => (react_1.default.createElement("div", { key: x, id: x, title: x }))))))) : null;
+}
+//# sourceMappingURL=PageHeader.js.map

package/dist/client/shared/components/PageHeader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"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"}

package/{lib/types → dist}/client/shared/components/ResultsPage.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Theme } from '@storybook/theming';
-import { TestResult } from '../../../types';
-interface TestResultsProps {
-    id: string;
-    path: string[];
-    results?: TestResult[];
-    approved?: Partial<{
-        [image: string]: number;
-    }>;
-    showTitle?: boolean;
-    onImageApprove: (id: string, retry: number, image: string) => void;
-    theme: Theme;
-    height?: string;
-}
-export declare function ResultsPageInternal({ id, path, results, approved, theme, onImageApprove, showTitle, height, }: TestResultsProps): JSX.Element;
-export declare const ResultsPage: React.FC<import("@storybook/theming").AddOptionalTo<TestResultsProps, "theme">>;
-export {};
+import React from 'react';
+import { Theme } from '@storybook/theming';
+import { TestResult } from '../../../types.js';
+interface TestResultsProps {
+    id: string;
+    path: string[];
+    results?: TestResult[];
+    approved?: Partial<Record<string, number>>;
+    showTitle?: boolean;
+    onImageApprove: (id: string, retry: number, image: string) => void;
+    theme: Theme;
+    height?: string;
+}
+export declare function ResultsPageInternal({ id, path, results, approved, theme, onImageApprove, showTitle, height, }: TestResultsProps): JSX.Element;
+export declare const ResultsPage: React.FC<Pick<TestResultsProps, "id" | "results" | "path" | "height" | "approved" | "showTitle" | "onImageApprove"> & {
+    theme?: Theme;
+}>;
+export {};

package/dist/client/shared/components/ResultsPage.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResultsPage = void 0;
+exports.ResultsPageInternal = ResultsPageInternal;
+const react_1 = __importStar(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const ImagesView_js_1 = require("./ImagesView/ImagesView.js");
+const PageHeader_js_1 = require("./PageHeader/PageHeader.js");
+const PageFooter_js_1 = require("./PageFooter/PageFooter.js");
+const helpers_js_1 = require("../helpers.js");
+const viewMode_js_1 = require("../viewMode.js");
+const Wrapper = theming_1.styled.div({
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+});
+const ImagesViewContainer = theming_1.styled.div(({ theme }) => ({
+    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
+    flexGrow: 1,
+    padding: '20px 0',
+}));
+const HeaderContainer = theming_1.styled.div({ position: 'sticky', top: 0, zIndex: 1 });
+const BodyContainer = theming_1.styled.div({ flexGrow: 1, minHeight: 0 });
+const FooterContainer = theming_1.styled.div({
+    position: 'sticky',
+    bottom: 0,
+    zIndex: 1,
+});
+const Container = theming_1.styled.div(({ height = '100vh' }) => ({
+    height,
+    width: '100%',
+    overflowY: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+}));
+function ResultsPageInternal({ id, path, results = [], approved = {}, theme, onImageApprove, showTitle = false, height, }) {
+    const [retry, setRetry] = (0, react_1.useState)(results.length);
+    const result = results[retry - 1] ?? {};
+    const [imageName, setImageName] = (0, react_1.useState)(Object.keys(result.images ?? {})[0] ?? '');
+    const [viewMode, setViewMode] = (0, react_1.useState)((0, viewMode_js_1.getViewMode)());
+    (0, react_1.useEffect)(() => {
+        setRetry(results.length);
+    }, [results.length]);
+    const url = (0, helpers_js_1.getImageUrl)(path, imageName);
+    const image = result.images?.[imageName];
+    const canApprove = Boolean(image && approved[imageName] != retry - 1 && result.status != 'success');
+    const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
+    const imagesWithError = result.images
+        ? Object.keys(result.images).filter((imageName) => result.status != 'success' && approved[imageName] != retry - 1 && result.images?.[imageName]?.error != null)
+        : [];
+    const handleApprove = () => {
+        onImageApprove(id, retry - 1, imageName);
+    };
+    const handleChangeViewMode = (mode) => {
+        localStorage.setItem(viewMode_js_1.VIEW_MODE_KEY, mode);
+        setViewMode(mode);
+    };
+    return (react_1.default.createElement(Container, { height: height },
+        react_1.default.createElement(HeaderContainer, null,
+            react_1.default.createElement(PageHeader_js_1.PageHeader, { title: path, images: result.images, errorMessage: result.error, showViewModes: hasDiffAndExpect, viewMode: viewMode, onViewModeChange: handleChangeViewMode, onImageChange: setImageName, showTitle: showTitle, imagesWithError: imagesWithError })),
+        react_1.default.createElement(BodyContainer, null,
+            react_1.default.createElement(components_1.ScrollArea, { vertical: true },
+                react_1.default.createElement(Wrapper, null,
+                    react_1.default.createElement(ImagesViewContainer, { theme: theme }, image ? (react_1.default.createElement(ImagesView_js_1.ImagesView, { url: url, image: image, canApprove: canApprove, mode: viewMode })) : (react_1.default.createElement(components_1.Placeholder, null, `Image ${imageName} not found`)))))),
+        results.length ? (react_1.default.createElement(FooterContainer, null,
+            react_1.default.createElement(PageFooter_js_1.PageFooter, { canApprove: canApprove, retry: retry, retriesCount: results.length, onRetryChange: setRetry, onApprove: handleApprove }))) : null));
+}
+exports.ResultsPage = (0, theming_1.withTheme)(ResultsPageInternal);
+//# sourceMappingURL=ResultsPage.js.map

package/dist/client/shared/components/ResultsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultsPage.js","sourceRoot":"","sources":["../../../../src/client/shared/components/ResultsPage.tsx"],"names":[],"mappings":"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"}

package/{lib/types → dist}/client/shared/creeveyClientApi.d.ts

@@ -1,9 +1,9 @@
-import { CreeveyUpdate, CreeveyStatus } from '../../types';
-export interface CreeveyClientApi {
-    start: (ids: string[]) => void;
-    stop: () => void;
-    approve: (id: string, retry: number, image: string) => void;
-    onUpdate: (fn: (update: CreeveyUpdate) => void) => () => void;
-    readonly status: Promise<CreeveyStatus>;
-}
-export declare function initCreeveyClientApi(): Promise<CreeveyClientApi>;
+import { CreeveyUpdate, CreeveyStatus } from '../../types.js';
+export interface CreeveyClientApi {
+    start: (ids: string[]) => void;
+    stop: () => void;
+    approve: (id: string, retry: number, image: string) => void;
+    onUpdate: (fn: (update: CreeveyUpdate) => void) => () => void;
+    readonly status: Promise<CreeveyStatus>;
+}
+export declare function initCreeveyClientApi(): Promise<CreeveyClientApi>;

package/dist/client/shared/creeveyClientApi.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCreeveyClientApi = initCreeveyClientApi;
+const types_js_1 = require("../../types.js");
+const helpers_js_1 = require("./helpers.js");
+async function initCreeveyClientApi() {
+    let clientApiResolver = types_js_1.noop;
+    const updateListeners = new Set();
+    let statusRequest = null;
+    let statusResolver = types_js_1.noop;
+    const ws = new WebSocket(`ws://${(0, helpers_js_1.getConnectionUrl)()}`);
+    function send(request) {
+        ws.send(JSON.stringify(request));
+    }
+    ws.addEventListener('open', () => {
+        clientApiResolver({
+            start(ids) {
+                send({ type: 'start', payload: ids });
+            },
+            stop() {
+                send({ type: 'stop' });
+            },
+            approve(id, retry, image) {
+                send({ type: 'approve', payload: { id, retry, image } });
+            },
+            onUpdate(fn) {
+                updateListeners.add(fn);
+                return () => updateListeners.delete(fn);
+            },
+            get status() {
+                if (statusRequest)
+                    return statusRequest;
+                send({ type: 'status' });
+                return (statusRequest = new Promise((resolve) => (statusResolver = resolve)));
+            },
+        });
+    });
+    ws.addEventListener('message', (message) => {
+        const data = JSON.parse(message.data);
+        if (data.type == 'update')
+            updateListeners.forEach((fn) => {
+                fn(data.payload);
+            });
+        if (data.type == 'status') {
+            statusResolver(data.payload);
+            statusResolver = types_js_1.noop;
+            statusRequest = null;
+        }
+    });
+    // TODO Reconnect
+    return new Promise((resolve) => (clientApiResolver = resolve));
+}
+//# sourceMappingURL=creeveyClientApi.js.map

package/dist/client/shared/creeveyClientApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"creeveyClientApi.js","sourceRoot":"","sources":["../../../src/client/shared/creeveyClientApi.ts"],"names":[],"mappings":";;AAWA,oDAoDC;AA/DD,6CAAuF;AACvF,6CAAgD;AAUzC,KAAK,UAAU,oBAAoB;IACxC,IAAI,iBAAiB,GAAoC,eAAI,CAAC;IAC9D,MAAM,eAAe,GAAG,IAAI,GAAG,EAAmC,CAAC;IACnE,IAAI,aAAa,GAAkC,IAAI,CAAC;IACxD,IAAI,cAAc,GAAoC,eAAI,CAAC;IAE3D,MAAM,EAAE,GAAG,IAAI,SAAS,CAAC,QAAQ,IAAA,6BAAgB,GAAE,EAAE,CAAC,CAAC;IAEvD,SAAS,IAAI,CAAC,OAAgB;QAC5B,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,CAAC;IAED,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/B,iBAAiB,CAAC;YAChB,KAAK,CAAC,GAAa;gBACjB,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;YACxC,CAAC;YACD,IAAI;gBACF,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YACzB,CAAC;YACD,OAAO,CAAC,EAAU,EAAE,KAAa,EAAE,KAAa;gBAC9C,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YAC3D,CAAC;YACD,QAAQ,CAAC,EAAmC;gBAC1C,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxB,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC1C,CAAC;YACD,IAAI,MAAM;gBACR,IAAI,aAAa;oBAAE,OAAO,aAAa,CAAC;gBAExC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;gBAEzB,OAAO,CAAC,aAAa,GAAG,IAAI,OAAO,CAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAC/F,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,OAA6B,EAAE,EAAE;QAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAa,CAAC;QAElD,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ;YACvB,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBAC7B,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;QACL,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;YAC1B,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC7B,cAAc,GAAG,eAAI,CAAC;YACtB,aAAa,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;IACH,iBAAiB;IAEjB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC;AACjE,CAAC"}

package/{lib/types → dist}/client/shared/helpers.d.ts

@@ -1,46 +1,46 @@
-import { ThemeVars } from '@storybook/theming';
-import { RefObject } from 'react';
-import { TestData, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types';
-export interface CreeveyViewFilter {
-    status: TestStatus | null;
-    subStrings: string[];
-}
-export interface CreeveyTestsStatus {
-    successCount: number;
-    failedCount: number;
-    pendingCount: number;
-    skippedCount: number;
-}
-export declare function calcStatus(oldStatus?: TestStatus, newStatus?: TestStatus): TestStatus | undefined;
-export declare function getTestPath(test: Pick<TestData, 'browser' | 'testName' | 'storyPath'>): string[];
-export declare function getSuiteByPath(suite: CreeveySuite, path: string[]): CreeveySuite | CreeveyTest | undefined;
-export declare function getTestByPath(suite: CreeveySuite, path: string[]): CreeveyTest | null;
-export declare function getTestsByStoryId(suite: CreeveySuite, storyId: string): CreeveyTest[];
-export declare function checkSuite(suite: CreeveySuite, path: string[], checked: boolean): void;
-export declare function treeifyTests(testsById: CreeveyStatus['tests']): CreeveySuite;
-export declare function getCheckedTests(suite: CreeveySuite): CreeveyTest[];
-export declare function updateTestStatus(suite: CreeveySuite, path: string[], update: Partial<TestData>): void;
-export declare function removeTests(suite: CreeveySuite, path: string[]): void;
-export declare function filterTests(suite: CreeveySuite, filter: CreeveyViewFilter): CreeveySuite;
-export declare function openSuite(suite: CreeveySuite, path: string[], opened: boolean): void;
-export declare function flattenSuite(suite: CreeveySuite): Array<{
-    title: string;
-    suite: CreeveySuite | CreeveyTest;
-}>;
-export declare function countTestsStatus(suite: CreeveySuite): CreeveyTestsStatus;
-export declare function getConnectionUrl(): string;
-export declare function getImageUrl(path: string[], imageName: string): string;
-export declare function getBorderSize(element: HTMLElement): number;
-export declare function useLoadImages(s1: string, s2: string, s3: string): boolean;
-/**
- * Uses the ResizeObserver API to observe changes within the given HTML Element DOM Rect.
- *
- * @returns dimensions of element's content box (which means without paddings and border width)
- */
-export declare function useResizeObserver<T extends Element>(elementRef: RefObject<T>, onResize: () => void, debounceTimeout?: number): void;
-export declare function useApplyScale(imageRef: RefObject<HTMLImageElement>, scale: number, dependency?: unknown): void;
-export declare function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded: boolean): number;
-export declare function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void];
-export declare function setSearchParams(testPath: string[]): void;
-export declare function getTestPathFromSearch(): string[];
-export declare function useForceUpdate(): () => void;
+import { ThemeVars } from '@storybook/theming';
+import { RefObject } from 'react';
+import { TestData, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types.js';
+export interface CreeveyViewFilter {
+    status: TestStatus | null;
+    subStrings: string[];
+}
+export interface CreeveyTestsStatus {
+    successCount: number;
+    failedCount: number;
+    pendingCount: number;
+    skippedCount: number;
+}
+export declare function calcStatus(oldStatus?: TestStatus, newStatus?: TestStatus): TestStatus | undefined;
+export declare function getTestPath(test: Pick<TestData, 'browser' | 'testName' | 'storyPath'>): string[];
+export declare function getSuiteByPath(suite: CreeveySuite, path: string[]): CreeveySuite | CreeveyTest | undefined;
+export declare function getTestByPath(suite: CreeveySuite, path: string[]): CreeveyTest | null;
+export declare function getTestsByStoryId(suite: CreeveySuite, storyId: string): CreeveyTest[];
+export declare function checkSuite(suite: CreeveySuite, path: string[], checked: boolean): void;
+export declare function treeifyTests(testsById: CreeveyStatus['tests']): CreeveySuite;
+export declare function getCheckedTests(suite: CreeveySuite): CreeveyTest[];
+export declare function updateTestStatus(suite: CreeveySuite, path: string[], update: Partial<TestData>): void;
+export declare function removeTests(suite: CreeveySuite, path: string[]): void;
+export declare function filterTests(suite: CreeveySuite, filter: CreeveyViewFilter): CreeveySuite;
+export declare function openSuite(suite: CreeveySuite, path: string[], opened: boolean): void;
+export declare function flattenSuite(suite: CreeveySuite): {
+    title: string;
+    suite: CreeveySuite | CreeveyTest;
+}[];
+export declare function countTestsStatus(suite: CreeveySuite): CreeveyTestsStatus;
+export declare function getConnectionUrl(): string;
+export declare function getImageUrl(path: string[], imageName: string): string;
+export declare function getBorderSize(element: HTMLElement): number;
+export declare function useLoadImages(s1: string, s2: string, s3: string): boolean;
+/**
+ * Uses the ResizeObserver API to observe changes within the given HTML Element DOM Rect.
+ *
+ * @returns dimensions of element's content box (which means without paddings and border width)
+ */
+export declare function useResizeObserver<T extends Element>(elementRef: RefObject<T>, onResize: () => void, debounceTimeout?: number): void;
+export declare function useApplyScale(imageRef: RefObject<HTMLImageElement>, scale: number, dependency?: unknown): void;
+export declare function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded: boolean): number;
+export declare function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void];
+export declare function setSearchParams(testPath: string[]): void;
+export declare function getTestPathFromSearch(): string[];
+export declare function useForceUpdate(): () => void;