creevey 0.10.0-beta.35 → 0.10.0-beta.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
-  "version": "0.10.0-beta.35",
+  "version": "0.10.0-beta.37",
   "type": "commonjs",
   "bin": "dist/cli.js",
   "main": "./dist/index.js",
@@ -64,7 +64,7 @@
     "build": "yarn prebuild && yarn build:client && yarn build:creevey && yarn postbuild",
     "build:client": "vite build",
     "build:creevey": "tsc --build tsconfig.prod.json",
-    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/",
+    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/ && cp \"\"src/server/playwright/index-source.mjs\"\" dist/server/playwright/index-source.mjs",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=chpt_80df83ca94e6fb4",
@@ -88,32 +88,32 @@
   "dependencies": {
     "@koa/cors": "^5.0.0",
     "@octokit/core": "^6.1.4",
-    "@storybook/icons": "^1.3.2",
+    "@storybook/icons": "^1.4.0",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.34",
+    "@types/dockerode": "^3.3.37",
     "@types/koa": "^2.15.0",
     "@types/koa-bodyparser": "^4.3.12",
     "@types/koa-mount": "^4.0.5",
     "@types/koa-static": "^4.0.4",
     "@types/koa__cors": "^5.0.0",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.16",
     "@types/micromatch": "^4.0.9",
     "@types/minimist": "^1.2.5",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
     "@types/qs": "^6.9.18",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "@types/selenium-webdriver": "^4.1.28",
     "@types/shelljs": "^0.8.15",
-    "@types/ws": "^8.5.14",
+    "@types/ws": "^8.18.1",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
     "chokidar": "^4.0.3",
-    "dockerode": "^4.0.4",
+    "dockerode": "^4.0.5",
     "find-cache-dir": "^5.0.0",
     "get-port": "^7.1.0",
-    "koa": "^2.15.4",
+    "koa": "^2.16.0",
     "koa-bodyparser": "^4.4.1",
     "koa-mount": "^4.0.0",
     "koa-static": "^5.0.0",
@@ -123,72 +123,71 @@
     "micromatch": "^4.0.8",
     "minimist": "^1.2.8",
     "odiff-bin": "^3.2.1",
-    "package-manager-detector": "^0.2.9",
+    "package-manager-detector": "^0.2.11",
     "pidtree": "^0.6.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
     "qs": "^6.14.0",
     "semver": "^7.7.1",
-    "shelljs": "^0.8.5",
+    "shelljs": "^0.9.2",
     "tar-stream": "^3.1.7",
-    "tsx": "^4.19.2",
-    "uuid": "^11.0.5",
-    "ws": "^8.18.0",
-    "yocto-spinner": "^0.2.0"
+    "tsx": "^4.19.3",
+    "uuid": "^11.1.0",
+    "ws": "^8.18.1",
+    "yocto-spinner": "^0.2.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@eslint/js": "^9.20.0",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/channels": "^8.5.8",
-    "@storybook/components": "^8.5.8",
-    "@storybook/csf": "^0.1.13",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/preview-api": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/theming": "^8.5.8",
-    "@storybook/types": "^8.5.8",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.23.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/channels": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@storybook/types": "^8.6.12",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^18.19.76",
+    "@types/node": "^18.19.86",
     "@types/resize-observer-browser": "^0.1.11",
-    "@types/semver": "^7.5.8",
+    "@types/semver": "^7.7.0",
     "@types/tar-stream": "^3.1.3",
     "@types/tmp": "^0.2.6",
-    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@vitejs/plugin-react-swc": "^3.8.1",
     "browserstack-local": "^1.5.6",
-    "chromatic": "^11.25.2",
+    "chromatic": "^11.28.0",
     "concurrently": "^9.1.2",
     "conventional-changelog-cli": "^5.0.0",
     "dotenv": "^16.4.7",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "git-cz": "^4.9.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "immer": "^10.1.1",
-    "lint-staged": "^15.4.3",
+    "lint-staged": "^15.5.0",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.50.1",
-    "prettier": "^3.5.1",
+    "playwright-core": "^1.51.1",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "selenium-webdriver": "^4.29.0",
-    "storybook": "^8.5.8",
+    "selenium-webdriver": "^4.30.0",
+    "storybook": "^8.6.12",
     "tmp": "^0.2.3",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.29.0",
     "use-immer": "^0.11.0",
-    "vite": "^5.4.14",
+    "vite": "^5.4.17",
     "vitest": "^2.1.9"
   },
   "config": {

package/src/client/addon/withCreevey.ts

@@ -1,4 +1,4 @@
-import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 import {

package/src/server/master/runner.ts

@@ -52,9 +52,7 @@ export default class Runner extends EventEmitter {
       this.sendUpdate({ tests: { [id]: { id, browser, testName, storyPath, status: test.status, storyId } } });
       return;
     }
-    if (!test.results) {
-      test.results = [];
-    }
+    test.results ??= [];
     test.results.push(result);
 
     if (status == 'failed') {
@@ -201,9 +199,7 @@ export default class Runner extends EventEmitter {
         if (!image) continue;
         await this.copyImage(test, name, image.actual);
 
-        if (!test.approved) {
-          test.approved = {};
-        }
+        test.approved ??= {};
         test.approved[name] = retry;
         test.status = 'approved';
 
@@ -227,9 +223,7 @@ export default class Runner extends EventEmitter {
     if (!result.images) return;
     const images = result.images[image];
     if (!images) return;
-    if (!test.approved) {
-      test.approved = {};
-    }
+    test.approved ??= {};
     const { browser, testName, storyPath, storyId } = test;
 
     await this.copyImage(test, image, images.actual);

package/src/server/playwright/docker-file.ts

@@ -18,16 +18,16 @@ export async function playwrightDockerFile(browser: string, version: string): Pr
 
   const indexJs = await readFile(new URL('./index-source.mjs', importMetaUrl), 'utf-8');
 
-  return `
+  const dockerfile = `
 FROM node:lts
 
 WORKDIR /creevey
 
 RUN echo "{ \\"type\\": \\"module\\" }" > package.json && \\
-    ${indexJs
-      .split('\n')
-      .map((line) => `echo "${line.replace(/"/g, '\\"')}" >> index.js && \\`)
-      .join('\n')}
+${indexJs
+  .split('\n')
+  .map((line) => `    echo "${line.replace(/"/g, '\\"')}" >> index.js && \\`)
+  .join('\n')}
     ${
       npmRegistry
         ? `
@@ -41,4 +41,6 @@ EXPOSE 4444
 
 ENTRYPOINT [ "node", "./index.js" ]
 `;
+
+  return dockerfile.replace(/\\\n\s*\\?\n/g, '\\\n');
 }

package/src/server/playwright/internal.ts

@@ -13,7 +13,7 @@ import chalk from 'chalk';
 import { v4 } from 'uuid';
 import Logger from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
-import type { Args } from '@storybook/csf';
+import type { Args } from '@storybook/types';
 import {
   BrowserConfigObject,
   Config,
@@ -159,13 +159,15 @@ export class InternalBrowser {
       const element = await this.#page.$(captureElement);
       if (!element) throw new Error(`Element with selector ${captureElement} not found`);
 
+      logger().debug(`Capturing ${chalk.cyan(captureElement)} element`);
       return element.screenshot({
         animations: 'disabled',
         mask,
         style: ':root { overflow: hidden !important; }',
       });
     }
-    return this.#page.screenshot({ animations: 'disabled', mask, fullPage: true });
+    logger().debug('Capturing viewport screenshot');
+    return this.#page.screenshot({ animations: 'disabled', mask });
   }
 
   waitForComplete(callback: (isCompleted: boolean) => void): void {

package/src/server/playwright/webdriver.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../../types/playwright-context" />
-import type { Args } from '@storybook/csf';
+import type { Args } from '@storybook/types';
 import { Config, Options, ServerTest, StoriesRaw, StoryInput } from '../../types';
 import { logger } from '../logger';
 import { subscribeOn } from '../messages';

package/src/server/selenium/internal.ts

@@ -1,4 +1,4 @@
-import type { Args } from '@storybook/csf';
+import type { Args } from '@storybook/types';
 import chalk from 'chalk';
 import http from 'http';
 import https from 'https';
@@ -266,9 +266,7 @@ export class InternalBrowser {
             },
             // NOTE page_Offset is used only for IE9-11
             windowRect: {
-              // eslint-disable-next-line @typescript-eslint/no-deprecated
               top: Math.round(window.scrollY || window.pageYOffset),
-              // eslint-disable-next-line @typescript-eslint/no-deprecated
               left: Math.round(window.scrollX || window.pageXOffset),
               width: window.innerWidth,
               height: window.innerHeight,

package/src/server/selenium/selenoid.ts

@@ -34,7 +34,7 @@ async function createSelenoidConfig(
       dockerImage = `selenoid/${browserName}:${browserVersion}`,
       webdriverCommand = [],
     }) => {
-      if (!selenoidConfig[browserName]) selenoidConfig[browserName] = { default: browserVersion, versions: {} };
+      selenoidConfig[browserName] ??= { default: browserVersion, versions: {} };
       if (!useDocker && webdriverCommand.length == 0)
         throw new Error('Please specify "webdriverCommand" browser option with path to browser webdriver');
       selenoidConfig[browserName].versions[browserVersion] = {

package/src/server/selenium/webdriver.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../../types/selenium-context" />
-import type { Args } from '@storybook/csf';
+import type { Args } from '@storybook/types';
 import { Config, StorybookGlobals, StoryInput, StoriesRaw, Options, ServerTest } from '../../types.js';
 import { subscribeOn } from '../messages.js';
 import { CreeveyWebdriverBase } from '../webdriver.js';

package/src/server/testsFiles/parser.ts

@@ -105,8 +105,6 @@ export const story = (
 
 export const test = (title: string, testFn: CreeveyTestFunction): void => {
   const storyId = getStoryId(kindTitle, storyTitle);
-  if (!result[storyId]) {
-    result[storyId] = {};
-  }
+  result[storyId] ??= {};
   result[storyId].tests = Object.assign({}, result[storyId].tests, { [title]: testFn });
 };

package/src/server/webdriver.ts

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import { networkInterfaces } from 'os';
 import { logger } from './logger.js';
-import type { Args } from '@storybook/csf';
+import type { Args } from '@storybook/types';
 import {
   isDefined,
   StoryInput,

package/src/shared/index.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import type { Parameters } from '@storybook/csf';
+import type { Parameters } from '@storybook/types';
 import { SetStoriesData, StoriesRaw, CreeveyStoryParams, StoryInput } from '../types.js';
 import { deserializeRegExp, isSerializedRegExp, isRegExp, serializeRegExp } from './serializeRegExp.js';
 

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/csf';
+import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/types';
 import type { Worker as ClusterWorker } from 'cluster';
 import type Pixelmatch from 'pixelmatch';
 import type { ODiffOptions } from 'odiff-bin';