creevey 0.10.0-beta.8 → 0.10.0-rc.0

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.8",
+  "version": "0.10.0-rc.0",
   "type": "commonjs",
   "bin": "dist/cli.js",
   "main": "./dist/index.js",
@@ -12,6 +12,14 @@
       "types": "./dist/playwright.d.ts",
       "default": "./dist/playwright.js"
     },
+    "./playwright/setup": {
+      "types": "./dist/playwright/setup.d.ts",
+      "default": "./dist/playwright/setup.js"
+    },
+    "./playwright/reporter": {
+      "types": "./dist/playwright/reporter.d.ts",
+      "default": "./dist/playwright/reporter.js"
+    },
     "./selenium": {
       "types": "./dist/selenium.d.ts",
       "default": "./dist/selenium.js"
@@ -48,15 +56,16 @@
     "lint:tsc": "tsc --noEmit",
     "lint:eslint": "eslint",
     "lint:prettier": "prettier --check .",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "start": "concurrently \"yarn start:client\" \"yarn start:storybook\" \"yarn start:creevey\"",
     "start:client": "vite",
     "start:storybook": "storybook dev --ci -p 6006",
-    "start:creevey": "yarn creevey --ui",
+    "start:creevey": "yarn creevey test --ui",
     "creevey": "tsx ./src/cli",
-    "creevey:github": "yarn creevey --config .creevey/github.config.mts",
-    "creevey:gitlab": "yarn creevey --config .creevey/gitlab.config.mts",
-    "creevey:hybrid": "yarn creevey --config .creevey/hybrid.config.mts",
+    "creevey:github": "yarn creevey test --config .creevey/github.config.mts",
+    "creevey:gitlab": "yarn creevey test --config .creevey/gitlab.config.mts",
+    "creevey:hybrid": "yarn creevey test --config .creevey/hybrid.config.mts",
     "fix": "concurrently \"yarn fix:eslint\" \"yarn fix:prettier\"",
     "fix:eslint": "eslint --fix",
     "fix:prettier": "prettier --write .",
@@ -64,7 +73,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",
@@ -74,11 +83,11 @@
     "node": ">=18.0"
   },
   "peerDependencies": {
-    "playwright": "*",
+    "playwright-core": "*",
     "selenium-webdriver": "*"
   },
   "peerDependenciesMeta": {
-    "playwright": {
+    "playwright-core": {
       "optional": true
     },
     "selenium-webdriver": {
@@ -86,108 +95,94 @@
     }
   },
   "dependencies": {
-    "@koa/cors": "^5.0.0",
-    "@octokit/core": "^6.1.2",
-    "@storybook/icons": "^1.2.12",
+    "@octokit/core": "^6.1.5",
+    "@storybook/icons": "^1.4.0",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.32",
-    "@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.13",
+    "@types/dockerode": "^3.3.39",
+    "@types/lodash": "^4.17.17",
     "@types/micromatch": "^4.0.9",
-    "@types/minimist": "^1.2.5",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@types/qs": "^6.9.17",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/selenium-webdriver": "^4.1.27",
-    "@types/shelljs": "^0.8.15",
-    "@types/ws": "^8.5.13",
+    "@types/qs": "^6.14.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/selenium-webdriver": "^4.1.28",
+    "@types/shelljs": "^0.8.16",
+    "@types/ws": "^8.18.1",
+    "cac": "^6.7.14",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
-    "chokidar": "^4.0.1",
-    "dockerode": "^4.0.2",
+    "chokidar": "^4.0.3",
+    "dockerode": "^4.0.6",
     "find-cache-dir": "^5.0.0",
     "get-port": "^7.1.0",
-    "koa": "^2.15.3",
-    "koa-bodyparser": "^4.4.1",
-    "koa-mount": "^4.0.0",
-    "koa-static": "^5.0.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.2",
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.8",
-    "minimist": "^1.2.8",
-    "odiff-bin": "^3.2.0",
+    "odiff-bin": "^3.2.1",
+    "open": "^10.1.2",
+    "package-manager-detector": "^0.2.11",
+    "pidtree": "^0.6.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
-    "qs": "^6.13.1",
-    "semver": "^7.6.3",
-    "shelljs": "^0.8.5",
+    "qs": "^6.14.0",
+    "semver": "^7.7.2",
+    "shelljs": "^0.9.2",
     "tar-stream": "^3.1.7",
-    "tsx": "^4.19.2",
-    "uuid": "^11.0.3",
-    "ws": "^8.18.0",
-    "yocto-spinner": "^0.1.1"
+    "tsx": "^4.19.4",
+    "uuid": "^11.1.0",
+    "valibot": "^1.1.0",
+    "ws": "^8.18.2",
+    "yocto-spinner": "^0.2.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.15.0",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/channels": "^8.4.5",
-    "@storybook/components": "^8.4.5",
-    "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/preview-api": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/types": "^8.4.5",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@eslint/js": "^9.27.0",
+    "@playwright/test": "^1.52.0",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/react-vite": "^9.0.0",
     "@types/eslint": "^9.6.1",
-    "@types/eslint__js": "^8.42.3",
-    "@types/node": "^18.19.64",
+    "@types/node": "^18.19.105",
     "@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.7.1",
-    "browserstack-local": "^1.5.5",
-    "chromatic": "^11.18.1",
-    "concurrently": "^9.1.0",
+    "@typescript-eslint/parser": "^8.33.0",
+    "@vitejs/plugin-react-swc": "^3.10.0",
+    "browserstack-local": "^1.5.6",
+    "chromatic": "^12.0.0",
+    "concurrently": "^9.1.2",
     "conventional-changelog-cli": "^5.0.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "dotenv": "^16.5.0",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.1",
+    "eslint-plugin-import-x": "^4.13.3",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.0.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.12.0",
+    "globals": "^16.2.0",
     "husky": "^9.1.7",
     "immer": "^10.1.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.5.2",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.49.0",
-    "prettier": "^3.3.3",
+    "playwright-core": "^1.52.0",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "selenium-webdriver": "^4.26.0",
-    "storybook": "^8.4.5",
+    "selenium-webdriver": "^4.33.0",
+    "storybook": "^9.0.0",
     "tmp": "^0.2.3",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "use-immer": "^0.10.0",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.5"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
+    "use-immer": "^0.11.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "config": {
     "commitizen": {
@@ -207,7 +202,7 @@
     "displayName": "Creevey"
   },
   "volta": {
-    "node": "20.16.0",
-    "yarn": "4.4.0"
-  }
+    "node": "22.15.0"
+  },
+  "packageManager": "yarn@4.9.1"
 }

package/playwright.config.mts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// NOTE: Default reporter for playwright
+const defaultReporter = process.env.CI ? 'dot' : 'list';
+
+export default defineConfig({
+  testDir: './tests',
+  snapshotDir: './stories/pw-images',
+  outputDir: './report',
+  testMatch: 'playwright.spec.ts',
+  globalSetup: './src/playwright/setup.ts',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [
+    !process.env.PWDEBUG ? [defaultReporter] : ['null'],
+    ['./src/playwright/reporter.ts', { debug: !!process.env.PWDEBUG }],
+    // NOTE: use `playwright test --ui` to run tests with Creevey reporter
+  ],
+  use: {
+    baseURL: 'http://localhost:6006',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      metadata: {
+        storybookGlobals: {},
+      },
+    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+  webServer: {
+    command: 'yarn start:storybook',
+    url: 'http://localhost:6006',
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/client/addon/components/Addon.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, useEffect, useState } from 'react';
-import { Placeholder } from '@storybook/components';
+import { Placeholder } from 'storybook/internal/components';
 import { TestData } from '../../../types.js';
 import { Panel } from './Panel.js';
 import { CreeveyController } from '../controller.js';

package/src/client/addon/components/Panel.tsx

@@ -1,11 +1,11 @@
 import React, { JSX } from 'react';
-import { Loader } from '@storybook/components';
-import { styled } from '@storybook/theming';
-import { TestData } from '../../../types.js';
+import { Loader } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
+import { noop, TestData } from '../../../types.js';
 import { ResultsPage } from '../../shared/components/ResultsPage.js';
 import { getTestPath } from '../../shared/helpers.js';
 import TestSelect from './TestSelect.js';
-import { noop } from 'lodash';
+
 interface PanelProps {
   tests: TestData[];
   selectedTestId: string;

package/src/client/addon/components/TestSelect.tsx

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
-import { Button, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { Button, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { MenuIcon } from '@storybook/icons';
-import { styled } from '@storybook/theming';
+import { styled } from 'storybook/theming';
 import { TestData } from '../../../types.js';
 import { getEmojiByTestStatus } from '../utils.js';
 

package/src/client/addon/components/Tools.tsx

@@ -1,8 +1,8 @@
 import React, { JSX, Fragment, useState, useEffect } from 'react';
 import { stringify } from 'qs';
-import { IconButton, Separator } from '@storybook/components';
+import { IconButton, Separator } from 'storybook/internal/components';
 import { StopIcon, ShareAltIcon, PlayIcon } from '@storybook/icons';
-import { styled } from '@storybook/theming';
+import { styled } from 'storybook/theming';
 import { ForwardIcon, NextIcon } from './Icons.js';
 import { isDefined, TestData } from '../../../types.js';
 import { getTestPath, useForceUpdate } from '../../shared/helpers.js';

package/src/client/addon/controller.ts

@@ -1,4 +1,4 @@
-import { Addon_TypesEnum } from '@storybook/types';
+import { Addon_TypesEnum } from 'storybook/internal/types';
 import { denormalizeStoryParameters } from '../../shared/index.js';
 import {
   CreeveyStatus,
@@ -12,17 +12,17 @@ import {
 import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import { calcStatus } from '../shared/helpers.js';
 import { getEmojiByTestStatus } from './utils.js';
-import { API } from '@storybook/manager-api';
+import { API } from 'storybook/manager-api';
 
 export const ADDON_ID = 'creevey';
 
 // TODO Add `useController` hook
-// TODO use `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
+// TODO use `import { useGlobals, useStorybookApi } from 'storybook/manager-api';`
 export class CreeveyController {
   storyId = '';
   activeBrowser = '';
   selectedTestId = '';
-  status: CreeveyStatus = { isRunning: false, tests: {}, browsers: [] };
+  status: CreeveyStatus = { isRunning: false, tests: {}, browsers: [], isUpdateMode: false };
   creeveyApi: CreeveyClientApi | null = null;
   stories: StoriesRaw = {};
 

package/src/client/addon/makeDecorator.ts

@@ -0,0 +1,69 @@
+// NOTE: This file is a modified version of the makeDecorator function from Storybook.
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Addon_StoryContext, Addon_LegacyStoryFn, Addon_StoryWrapper } from 'storybook/internal/types';
+
+export interface MakeDecoratorOptions {
+  name: string;
+  parameterName: string;
+  skipIfNoParametersOrOptions?: boolean;
+  wrapper: Addon_StoryWrapper;
+}
+
+export type MakeDecoratorResult = (...args: any) => any;
+
+export const makeDecorator = ({
+  name,
+  parameterName,
+  wrapper,
+  skipIfNoParametersOrOptions = false,
+}: MakeDecoratorOptions): MakeDecoratorResult => {
+  const decorator = (options?: object) => (storyFn: Addon_LegacyStoryFn, context: Addon_StoryContext) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unnecessary-condition
+    const parameters = context.parameters?.[parameterName];
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (parameters?.disable) {
+      return storyFn(context);
+    }
+
+    if (skipIfNoParametersOrOptions && !options && !parameters) {
+      return storyFn(context);
+    }
+
+    // @ts-expect-error - decorator is a function that returns a function
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
+    return wrapper(storyFn, context, { options, parameters });
+  };
+
+  return (...args: any) => {
+    // Used without options as .addDecorator(decorator)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (typeof args[0] === 'function') {
+      // @ts-expect-error - decorator is a function that returns a function
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-argument
+      return decorator()(...args);
+    }
+
+    return (...innerArgs: any): any => {
+      // Used as [.]addDecorator(decorator(options))
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (innerArgs.length > 1) {
+        // Used as [.]addDecorator(decorator(option1, option2))
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (args.length > 1) {
+          // @ts-expect-error - decorator is a function that returns a function
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          return decorator(args)(...innerArgs);
+        }
+        // @ts-expect-error - decorator is a function that returns a function
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        return decorator(...args)(...innerArgs);
+      }
+
+      throw new Error(
+        `Passing stories directly into ${name}() is not allowed,
+        instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`,
+      );
+    };
+  };
+};

package/src/client/addon/manager.ts

@@ -1,44 +1,45 @@
-import React from 'react';
-import { Addon_TypesEnum } from '@storybook/types';
-import { addons, API } from '@storybook/manager-api';
-import { Addon } from './components/Addon.js';
-import { Tools } from './components/Tools.js';
-import { CreeveyController, ADDON_ID } from './controller.js';
+// TODO: Disable manager for now until fully reworked
+// import React from 'react';
+// import { Addon_TypesEnum } from 'storybook/internal/types';
+// import { addons, API } from 'storybook/manager-api';
+// import { Addon } from './components/Addon.js';
+// import { Tools } from './components/Tools.js';
+// import { CreeveyController, ADDON_ID } from './controller.js';
 
-// TODO Take api from `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
-addons.register(ADDON_ID, (api) => {
-  void registerCreeveyPanels(api);
-});
+// // TODO Take api from `import { useGlobals, useStorybookApi } from 'storybook/manager-api';`
+// addons.register(ADDON_ID, (api) => {
+//   void registerCreeveyPanels(api);
+// });
 
-async function registerCreeveyPanels(storybookApi: API): Promise<void> {
-  const controller = new CreeveyController(storybookApi);
+// async function registerCreeveyPanels(storybookApi: API): Promise<void> {
+//   const controller = new CreeveyController(storybookApi);
 
-  addons.add(`${ADDON_ID}/panel/run`, {
-    title: `Creevey/Run`,
-    match: ({ viewMode }) => !!(viewMode && /^story$/.exec(viewMode)),
-    type: Addon_TypesEnum.TOOL,
+//   addons.add(`${ADDON_ID}/panel/run`, {
+//     title: `Creevey/Run`,
+//     match: ({ viewMode }) => !!(viewMode && /^story$/.exec(viewMode)),
+//     type: Addon_TypesEnum.TOOL,
 
-    render: () => React.createElement(Tools, { controller }),
-  });
-  await controller.initAll();
-  const browsers = controller.getBrowsers();
+//     render: () => React.createElement(Tools, { controller }),
+//   });
+//   await controller.initAll();
+//   const browsers = controller.getBrowsers();
 
-  browsers.forEach((browser) => {
-    const panelId = `${ADDON_ID}/panel/${browser}`;
-    const title = controller.getTabTitle(browser);
-    addons.add(panelId, {
-      title,
-      type: Addon_TypesEnum.PANEL,
-      paramKey: browser,
+//   browsers.forEach((browser) => {
+//     const panelId = `${ADDON_ID}/panel/${browser}`;
+//     const title = controller.getTabTitle(browser);
+//     addons.add(panelId, {
+//       title,
+//       type: Addon_TypesEnum.PANEL,
+//       paramKey: browser,
 
-      // NOTE key = PANEL_ID needs to correct render button in addons panel
+//       // NOTE key = PANEL_ID needs to correct render button in addons panel
 
-      render: ({ active }) =>
-        React.createElement(Addon, {
-          active,
-          controller,
-          browser,
-        }),
-    });
-  });
-}
+//       render: ({ active }) =>
+//         React.createElement(Addon, {
+//           active,
+//           controller,
+//           browser,
+//         }),
+//     });
+//   });
+// }

package/src/client/addon/preset.ts

@@ -1,3 +1,4 @@
 export const previewAnnotations = [require.resolve('./preview')];
 
-export const managerEntries = [require.resolve('./manager')];
+// TODO: Disable manager for now until fully reworked
+// export const managerEntries = [require.resolve('./manager')];

package/src/client/addon/withCreevey.ts

@@ -1,6 +1,6 @@
-import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
-import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
-import { Channel } from '@storybook/channels';
+import type { Renderer } from 'storybook/internal/types';
+import type { PreviewWeb, StoryStore } from 'storybook/preview-api';
+import { Channel } from 'storybook/internal/channels';
 import {
   CaptureOptions,
   CreeveyStoryParams,
@@ -12,9 +12,14 @@ import {
 } from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
+import isEqual from 'lodash/isEqual.js';
+import { makeDecorator } from './makeDecorator.js';
 
+// TODO: Get rid of __CREEVEY_ prefixed variables, use storybook api directly
+// TODO: Remove __CREEVEY_SET_READY_FOR_CAPTURE__ and `capture` function, because it seems not used, but we need to rethink how to write proper tests in play function
 declare global {
   interface Window {
+    __CREEVEY_ENV__: boolean;
     __CREEVEY_SERVER_HOST__: string;
     __CREEVEY_SERVER_PORT__: number;
     __CREEVEY_WORKER_ID__: number;
@@ -118,7 +123,6 @@ function initCreeveyState(): void {
 
   if (prevState.creeveyHost) window.__CREEVEY_SERVER_HOST__ = prevState.creeveyHost;
   if (prevState.creeveyPort) window.__CREEVEY_SERVER_PORT__ = prevState.creeveyPort;
-  if (prevState.setStoriesCounter) setStoriesCounter = prevState.setStoriesCounter;
   if (prevState.isTestBrowser) isTestBrowser = prevState.isTestBrowser;
 
   window.addEventListener('beforeunload', () => {
@@ -127,7 +131,6 @@ function initCreeveyState(): void {
       JSON.stringify({
         creeveyHost: window.__CREEVEY_SERVER_HOST__,
         creeveyPort: window.__CREEVEY_SERVER_PORT__,
-        setStoriesCounter,
         isTestBrowser,
       } as CreeveyTestsState),
     );
@@ -138,7 +141,7 @@ let isTestBrowser = false;
 let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
-let setStoriesCounter = 0;
+let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
   const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
@@ -156,20 +159,9 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     document.head.appendChild(style);
   }
 
+  // TODO Find a way to send stories updates to the server
   async function getStories(): Promise<StoriesRaw | undefined> {
     const stories = serializeRawStories(await window.__STORYBOOK_PREVIEW__.extract());
-    const storiesByFiles = new Map<string, StoryContextForEnhancers[]>();
-    Object.values(stories).forEach((story) => {
-      const fileName = story.parameters.fileName as string;
-      const storiesFromFile = storiesByFiles.get(fileName);
-      if (storiesFromFile) storiesFromFile.push(story);
-      else storiesByFiles.set(fileName, [story]);
-    });
-    void fetch(`http://${getConnectionUrl()}/stories`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ setStoriesCounter, stories: [...storiesByFiles.entries()] }),
-    });
     return stories;
   }
 
@@ -225,7 +217,10 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
     addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
@@ -274,6 +269,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     });
   }
 
+  window.__CREEVEY_ENV__ = false;
   window.__CREEVEY_GET_STORIES__ = getStories;
   window.__CREEVEY_SELECT_STORY__ = selectStory;
   window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
@@ -315,6 +311,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
   });
 }
 
+// TODO It's not accessible from the outside the package
 export async function capture(options?: CaptureOptions): Promise<void> {
   if (!isTestBrowser) return;
 

package/src/client/shared/components/ImagesView/BlendView.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, useEffect, useRef } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
 import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
 import { readyForCapture } from '../../../addon/readyForCapture.js';

package/src/client/shared/components/ImagesView/ImagesView.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, FunctionComponent } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme } from 'storybook/theming';
 import { SideBySideView } from './SideBySideView.js';
 import { SwapView } from './SwapView.js';
 import { SlideView } from './SlideView.js';