creevey 0.9.0-beta.1 → 0.9.0-beta.3

package/lib/cjs/client/addon/withCreevey.js

@@ -0,0 +1,350 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.capture = capture;
+exports.withCreevey = withCreevey;
+
+var Events = _interopRequireWildcard(require("@storybook/core-events"));
+
+var polyfill = _interopRequireWildcard(require("event-source-polyfill"));
+
+var _testingLibrary = require("@storybook/testing-library");
+
+var _addons = require("@storybook/addons");
+
+var _types = require("../../types");
+
+var _shared = require("../../shared");
+
+var _helpers = require("../shared/helpers");
+
+var _utils = require("./utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+if (typeof process != 'object' || typeof process.version != 'string') {
+  // NOTE If you don't use babel-polyfill or any other polyfills that add EventSource for IE11
+  // You don't get hot reload in IE11. So put polyfill for that to better UX
+  // Don't load in nodejs environment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const {
+    NativeEventSource,
+    EventSourcePolyfill
+  } = polyfill; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+  window.EventSource = NativeEventSource || EventSourcePolyfill;
+}
+
+const disableAnimationsStyles = "\n*,\n*:hover,\n*::before,\n*::after {\n  animation-delay: -0.0001ms !important;\n  animation-duration: 0s !important;\n  animation-play-state: paused !important;\n  cursor: none !important;\n  caret-color: transparent !important;\n  transition: 0s !important;\n}\n";
+
+async function resetCurrentStory(channel) {
+  setTimeout(() => channel.emit(Events.SET_CURRENT_STORY, {
+    storyId: true,
+    name: '',
+    kind: ''
+  }), 0);
+  return new Promise(resolve => channel.once(Events.STORY_MISSING, resolve));
+}
+
+function catchRenderError(channel) {
+  let rejectCallback;
+  const promise = new Promise((_resolve, reject) => rejectCallback = reject);
+
+  function errorHandler(_ref) {
+    let {
+      title,
+      description
+    } = _ref;
+    rejectCallback({
+      message: title,
+      stack: description
+    });
+  }
+
+  function exceptionHandler(exception) {
+    rejectCallback(exception);
+  }
+
+  function removeHandlers() {
+    channel.off(Events.STORY_ERRORED, errorHandler);
+    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+  }
+
+  channel.once(Events.STORY_ERRORED, errorHandler);
+  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+  return Object.assign(promise, {
+    cancel: removeHandlers
+  });
+}
+
+function waitForStoryRendered(channel) {
+  let resolveCallback;
+  const promise = new Promise(resolve => resolveCallback = resolve);
+
+  function renderHandler() {
+    resolveCallback();
+  }
+
+  function removeHandlers() {
+    channel.off(Events.STORY_RENDERED, renderHandler);
+  }
+
+  channel.once(Events.STORY_RENDERED, renderHandler);
+  return Object.assign(promise, {
+    cancel: removeHandlers
+  });
+}
+
+function waitForFontsLoaded() {
+  if (!document.fonts) return;
+  const areFontsLoading = Array.from(document.fonts).some(font => font.status == 'loading');
+
+  if (areFontsLoading) {
+    return new Promise(resolve => {
+      const fontsLoadedHandler = () => {
+        document.fonts.removeEventListener('loadingdone', fontsLoadedHandler);
+        resolve();
+      };
+
+      document.fonts.addEventListener('loadingdone', fontsLoadedHandler);
+    });
+  }
+}
+
+function waitForCaptureCall() {
+  return new Promise(resolve => captureResolver = resolve);
+}
+
+function initCreeveyState() {
+  var _window$localStorage$;
+
+  const prevState = JSON.parse((_window$localStorage$ = window.localStorage.getItem('Creevey_Tests')) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : '{}');
+  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', () => {
+    window.localStorage.setItem('Creevey_Tests', JSON.stringify({
+      creeveyHost: window.__CREEVEY_SERVER_HOST__,
+      creeveyPort: window.__CREEVEY_SERVER_PORT__,
+      setStoriesCounter,
+      isTestBrowser
+    }));
+  });
+}
+
+let isTestBrowser = false;
+let captureResolver;
+let waitForCreevey;
+let creeveyReady;
+let setStoriesCounter = 0;
+
+function withCreevey() {
+  let currentStory = '';
+  let isAnimationDisabled = false;
+  initCreeveyState();
+
+  function disableAnimation() {
+    isAnimationDisabled = true;
+    const style = document.createElement('style');
+    const textNode = document.createTextNode(disableAnimationsStyles);
+    style.setAttribute('type', 'text/css');
+    style.appendChild(textNode);
+    document.head.appendChild(style);
+  }
+
+  async function getStories() {
+    var _window$__STORYBOOK_S;
+
+    const storiesPromise = new Promise(resolve => _addons.addons.getChannel().once(Events.SET_STORIES, data => resolve((0, _shared.serializeRawStories)((0, _shared.denormalizeStoryParameters)(data)))));
+    const store = (_window$__STORYBOOK_S = window.__STORYBOOK_STORY_STORE__) !== null && _window$__STORYBOOK_S !== void 0 ? _window$__STORYBOOK_S : {};
+
+    if (store.cacheAllCSFFiles) {
+      await store.cacheAllCSFFiles();
+
+      _addons.addons.getChannel().emit(Events.SET_STORIES, store.getSetStoriesPayload());
+    } else return;
+
+    _addons.addons.getChannel().on(Events.SET_STORIES, data => {
+      // TODO Figure out how to get only updated stories
+      // TODO Subscribe on hmr? like use dummy-hmr
+      setStoriesCounter += 1;
+      const stories = (0, _shared.serializeRawStories)((0, _shared.denormalizeStoryParameters)(data));
+      const storiesByFiles = new Map();
+      Object.values(stories).forEach(story => {
+        const storiesFromFile = storiesByFiles.get(story.parameters.fileName);
+        if (storiesFromFile) storiesFromFile.push(story);else storiesByFiles.set(story.parameters.fileName, [story]);
+      });
+      void fetch("http://".concat((0, _helpers.getConnectionUrl)(), "/stories"), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          setStoriesCounter,
+          stories: [...storiesByFiles.entries()]
+        })
+      });
+    });
+
+    return storiesPromise;
+  }
+
+  async function selectStory(storyId, kind, name, shouldWaitForReady, callback) {
+    if (!isAnimationDisabled) disableAnimation();
+    isTestBrowser = true;
+
+    const channel = _addons.addons.getChannel();
+
+    const waitForReady = shouldWaitForReady ? new Promise(resolve => window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve) : Promise.resolve();
+    if (storyId == currentStory) await resetCurrentStory(channel);else currentStory = storyId;
+    let isCaptureCalled = false;
+    const renderPromise = waitForStoryRendered(channel);
+    const errorPromise = catchRenderError(channel);
+    const capturePromise = waitForCaptureCall().then(() => isCaptureCalled = true);
+    setTimeout(() => channel.emit(Events.SET_CURRENT_STORY, {
+      storyId,
+      name,
+      kind
+    }), 0);
+
+    try {
+      await Promise.race([(async () => {
+        await Promise.race([renderPromise, capturePromise]);
+        await waitForFontsLoaded();
+        await waitForReady;
+      })(), errorPromise]);
+      callback([null, isCaptureCalled]);
+    } catch (reason) {
+      var _reason$stack;
+
+      // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
+      // NOTE Event `STORY_ERRORED` return error-like object without `name` field
+      const errorMessage = reason instanceof Error ? (_reason$stack = reason.stack) !== null && _reason$stack !== void 0 ? _reason$stack : reason.message : (0, _types.isObject)(reason) ? "".concat(reason.message, "\n    ").concat(reason.stack) : reason;
+      callback([errorMessage]);
+    } finally {
+      renderPromise.cancel();
+      errorPromise.cancel();
+    }
+  }
+
+  function updateGlobals(globals) {
+    _addons.addons.getChannel().emit(Events.UPDATE_GLOBALS, {
+      globals
+    });
+  }
+
+  function insertIgnoreStyles(ignoreSelectors) {
+    const stylesElement = document.createElement('style');
+    stylesElement.setAttribute('type', 'text/css');
+    document.head.appendChild(stylesElement);
+    ignoreSelectors.forEach(selector => {
+      stylesElement.innerHTML += "\n        ".concat(selector, " {\n          background: #000 !important;\n          box-shadow: none !important;\n          text-shadow: none !important;\n          outline: 0 !important;\n          color: rgba(0,0,0,0) !important;\n        }\n        ").concat(selector, " *, ").concat(selector, "::before, ").concat(selector, "::after {\n          visibility: hidden !important;\n        }\n      ");
+    });
+    return stylesElement;
+  }
+
+  function removeIgnoreStyles(ignoreStyles) {
+    var _ignoreStyles$parentN;
+
+    (_ignoreStyles$parentN = ignoreStyles.parentNode) === null || _ignoreStyles$parentN === void 0 ? void 0 : _ignoreStyles$parentN.removeChild(ignoreStyles);
+  }
+
+  function hasPlayCompletedYet(callback) {
+    creeveyReady();
+    let isCaptureCalled = false;
+    let isPlayCompleted = false;
+
+    const channel = _addons.addons.getChannel();
+
+    void waitForStoryRendered(channel).then(() => {
+      if (isCaptureCalled) return;
+      isPlayCompleted = true;
+      callback(true);
+    });
+    void waitForCaptureCall().then(() => {
+      if (isPlayCompleted) return;
+      isCaptureCalled = true;
+      callback(false);
+    });
+  }
+
+  window.__CREEVEY_GET_STORIES__ = getStories;
+  window.__CREEVEY_SELECT_STORY__ = selectStory;
+  window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
+  window.__CREEVEY_INSERT_IGNORE_STYLES__ = insertIgnoreStyles;
+  window.__CREEVEY_REMOVE_IGNORE_STYLES__ = removeIgnoreStyles;
+  window.__CREEVEY_HAS_PLAY_COMPLETED_YET__ = hasPlayCompletedYet;
+  window.__CREEVEY_SET_READY_FOR_CAPTURE__ = _types.noop;
+
+  const queryAllByQuery = (container, query) => [...container.querySelectorAll(query)].filter(e => e instanceof HTMLElement);
+
+  const getMultipleError = (_, query) => "Found multiple elements by query: ".concat(query);
+
+  const getMissingError = (_, query) => "Unable to find an element by query: ".concat(query);
+
+  const [queryByQuery, getAllByQuery, getByQuery, findAllByQuery, findByQuery] = (0, _testingLibrary.buildQueries)(queryAllByQuery, getMultipleError, getMissingError);
+  const queries = {
+    queryByQuery,
+    getAllByQuery,
+    getByQuery,
+    findAllByQuery,
+    findByQuery
+  };
+  return (0, _addons.makeDecorator)({
+    name: 'withCreevey',
+    parameterName: 'creevey',
+    wrapper: (getStory, context) => {
+      var _ref2;
+
+      // TODO Define proper types, like captureElement is a promise
+      const {
+        captureElement
+      } = context.parameters.creevey = (_ref2 = context.parameters.creevey) !== null && _ref2 !== void 0 ? _ref2 : {};
+      Object.defineProperty(context.parameters.creevey, 'captureElement', {
+        get() {
+          switch (true) {
+            case captureElement === undefined:
+              return Promise.resolve(context.canvasElement);
+
+            case captureElement === null:
+              return Promise.resolve(document.documentElement);
+
+            case typeof captureElement == 'string':
+              return _utils.isInternetExplorer // some code from testing-library makes IE hang
+              ? Promise.resolve(context.canvasElement.querySelector(captureElement)) : (0, _testingLibrary.within)(context.canvasElement, queries).findByQuery(captureElement);
+
+            case typeof captureElement == 'function':
+              // TODO Define type for it
+              return Promise.resolve(captureElement(context));
+          }
+        },
+
+        enumerable: true,
+        configurable: true
+      });
+      return getStory(context);
+    }
+  });
+}
+
+async function capture(options) {
+  if (!isTestBrowser) return;
+  captureResolver();
+  waitForCreevey = new Promise(resolve => creeveyReady = resolve);
+  await fetch("http://".concat((0, _helpers.getConnectionUrl)(), "/capture"), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      workerId: window.__CREEVEY_WORKER_ID__,
+      options
+    })
+  });
+  await waitForCreevey;
+}

package/lib/cjs/client/shared/components/ImagesView/BlendView.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlendView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ImagesView = require("./ImagesView");
+
+var _theming = require("@storybook/theming");
+
+var _helpers = require("../../helpers");
+
+var _readyForCapture = require("../../../addon/readyForCapture");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Container = _theming.styled.div({
+  position: 'relative',
+  display: 'flex',
+  filter: 'invert(100%)'
+});
+
+const ImageContainer = _theming.styled.div({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  display: 'flex'
+});
+
+const Image = _theming.styled.img(_ref => {
+  let {
+    borderColor
+  } = _ref;
+  return {
+    boxSizing: 'border-box',
+    border: "1px solid ".concat(borderColor),
+    maxWidth: '100%',
+    filter: 'invert(100%)'
+  };
+});
+
+const ActualImage = (0, _theming.styled)(Image)({
+  mixBlendMode: 'difference'
+});
+const DiffImage = (0, _theming.styled)(Image)({
+  opacity: '0'
+});
+const BlendView = (0, _theming.withTheme)(_ref2 => {
+  let {
+    actual,
+    diff,
+    expect,
+    theme
+  } = _ref2;
+  const expectImageRef = (0, _react.useRef)(null);
+  const diffImageRef = (0, _react.useRef)(null);
+  const actualImageRef = (0, _react.useRef)(null);
+  const loaded = (0, _helpers.useLoadImages)(expect, diff, actual);
+  const scale = (0, _helpers.useCalcScale)(diffImageRef, loaded);
+  (0, _helpers.useApplyScale)(expectImageRef, scale, loaded);
+  (0, _helpers.useApplyScale)(actualImageRef, scale, loaded);
+  (0, _react.useEffect)(() => {
+    if (loaded) (0, _readyForCapture.readyForCapture)();
+  }, [loaded]);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+    ref: expectImageRef,
+    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
+    alt: "expect",
+    src: expect
+  })), /*#__PURE__*/_react.default.createElement(DiffImage, {
+    ref: diffImageRef,
+    borderColor: 'transparent',
+    alt: "diff",
+    src: diff
+  }), /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(ActualImage, {
+    ref: actualImageRef,
+    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
+    alt: "actual",
+    src: actual
+  })));
+});
+exports.BlendView = BlendView;

package/lib/cjs/client/shared/components/ImagesView/ImagesView.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagesView = ImagesView;
+exports.getBorderColor = getBorderColor;
+exports.themeBorderColors = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SideBySideView = require("./SideBySideView");
+
+var _SwapView = require("./SwapView");
+
+var _SlideView = require("./SlideView");
+
+var _BlendView = require("./BlendView");
+
+var _theming = require("@storybook/theming");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const themeBorderColors = {
+  actual: 'negative',
+  expect: 'positive',
+  diff: 'secondary'
+};
+exports.themeBorderColors = themeBorderColors;
+
+const isColor = (theme, color) => color in theme.color;
+
+function getBorderColor(theme, color) {
+  return isColor(theme, color) ? theme.color[color] : color;
+}
+
+const views = {
+  'side-by-side': _SideBySideView.SideBySideView,
+  swap: _SwapView.SwapView,
+  slide: _SlideView.SlideView,
+  blend: _BlendView.BlendView
+};
+
+const Container = _theming.styled.div({
+  height: '100%',
+  display: 'flex',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 20px'
+});
+
+const ImageLink = _theming.styled.a({
+  lineHeight: 0
+});
+
+const ActualImage = (0, _theming.withTheme)(_theming.styled.img(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    border: "1px solid ".concat(getBorderColor(theme, themeBorderColors.expect)),
+    maxWidth: '100%'
+  };
+}));
+
+function ImagesView(_ref2) {
+  let {
+    url,
+    image,
+    canApprove,
+    mode
+  } = _ref2;
+  const ViewComponent = views[mode];
+  const {
+    actual,
+    diff,
+    expect
+  } = image;
+  return /*#__PURE__*/_react.default.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/_react.default.createElement(ViewComponent, {
+    actual: "".concat(url, "/").concat(actual),
+    diff: "".concat(url, "/").concat(diff),
+    expect: "".concat(url, "/").concat(expect)
+  }) : /*#__PURE__*/_react.default.createElement(ImageLink, {
+    href: "".concat(url, "/").concat(actual),
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/_react.default.createElement(ActualImage, {
+    alt: "actual",
+    src: "".concat(url, "/").concat(actual)
+  })));
+}

package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideBySideView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ImagesView = require("./ImagesView");
+
+var _theming = require("@storybook/theming");
+
+var _helpers = require("../../helpers");
+
+var _components = require("@storybook/components");
+
+var _readyForCapture = require("../../../addon/readyForCapture");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Container = _theming.styled.div({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%'
+});
+
+const ImagesLayout = _theming.styled.div(_ref => {
+  let {
+    layout
+  } = _ref;
+  return {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flexDirection: layout == 'horizontal' ? 'row' : 'column',
+    '& > :not(:first-of-type)': {
+      marginLeft: layout == 'horizontal' ? '20px' : 0,
+      marginTop: layout == 'horizontal' ? 0 : '20px'
+    }
+  };
+});
+
+const ImageLink = _theming.styled.a({
+  lineHeight: 0,
+  flexShrink: 0
+});
+
+const ImageDiffLink = _theming.styled.a({
+  lineHeight: 0
+});
+
+const Image = _theming.styled.img(_ref2 => {
+  let {
+    borderColor
+  } = _ref2;
+  return {
+    boxSizing: 'border-box',
+    border: "1px solid ".concat(borderColor),
+    maxWidth: '100%',
+    flexShrink: 0
+  };
+});
+
+const DiffImage = (0, _theming.styled)(Image)({
+  flexShrink: 1
+});
+const SideBySideView = (0, _theming.withTheme)(_ref3 => {
+  let {
+    actual,
+    diff,
+    expect,
+    theme
+  } = _ref3;
+  const [layout, setLayout] = (0, _react.useState)('horizontal');
+  const [scale, setScale] = (0, _react.useState)(1);
+  const containerRef = (0, _react.useRef)(null);
+  const expectImageRef = (0, _react.useRef)(null);
+  const diffImageRef = (0, _react.useRef)(null);
+  const actualImageRef = (0, _react.useRef)(null);
+  const loaded = (0, _helpers.useLoadImages)(expect, diff, actual);
+  const calcScale = (0, _react.useCallback)(() => {
+    const containerElement = containerRef.current;
+    const expectImage = expectImageRef.current;
+    const diffImage = diffImageRef.current;
+    const actualImage = actualImageRef.current;
+    if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) return setScale(1);
+    const borderSize = (0, _helpers.getBorderSize)(diffImage);
+
+    if (layout == 'vertical') {
+      const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
+      setScale(Math.min(1, ratio));
+    }
+
+    if (layout == 'horizontal') {
+      const ratio = // NOTE: 40px because we have two margins by 20px and 6px for borders
+      (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(image => image.naturalWidth).reduce((a, b) => a + b, 0);
+      setScale(Math.min(1, ratio));
+    }
+  }, [loaded, layout]);
+  (0, _helpers.useResizeObserver)(containerRef, calcScale);
+  (0, _react.useLayoutEffect)(calcScale, [calcScale]);
+  (0, _react.useLayoutEffect)(() => {
+    const diffImage = diffImageRef.current;
+    if (!diffImage || !loaded) return;
+    const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
+    setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
+  }, [loaded]);
+  (0, _helpers.useApplyScale)(expectImageRef, scale);
+  (0, _helpers.useApplyScale)(actualImageRef, scale);
+  (0, _react.useEffect)(() => {
+    if (loaded) (0, _readyForCapture.readyForCapture)();
+  }, [loaded]);
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    ref: containerRef
+  }, loaded ? /*#__PURE__*/_react.default.createElement(ImagesLayout, {
+    layout: layout
+  }, /*#__PURE__*/_react.default.createElement(ImageLink, {
+    href: expect,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/_react.default.createElement(Image, {
+    ref: expectImageRef,
+    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
+    alt: "expect",
+    src: expect
+  })), /*#__PURE__*/_react.default.createElement(ImageDiffLink, {
+    href: diff,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/_react.default.createElement(DiffImage, {
+    ref: diffImageRef,
+    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.diff),
+    alt: "diff",
+    src: diff
+  })), /*#__PURE__*/_react.default.createElement(ImageLink, {
+    href: actual,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/_react.default.createElement(Image, {
+    ref: actualImageRef,
+    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
+    alt: "actual",
+    src: actual
+  }))) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
+    size: 64
+  }));
+});
+exports.SideBySideView = SideBySideView;