[gallery + lib] improve: use partial window mock on hydrate (#1161)

* partial mock window properties * small refactor - stopUsingMock * dont bind custom window props to the window bject * refactor complexity and conditions
wix-incubator · Aug 29, 2023 · 747da2f · 747da2f
1 parent 5b0b1fe
commit 747da2f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 19 deletions.
diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js
@@ -7,6 +7,7 @@ import {
   isSEOMode,
   isPreviewMode,
   isSiteMode,
+  windowWrapper,
 } from 'pro-gallery-lib';
 import { ItemsHelper } from 'pro-layouts';
 import GalleryView from './galleryView';
@@ -130,6 +131,7 @@ export class GalleryContainer extends React.Component {
   }
 
   componentDidMount() {
+    windowWrapper.stopUsingMock();
     const { body, documentElement: html } = document;
     const viewportHeight = window.innerHeight;
     const height = Math.max(
@@ -301,7 +303,6 @@ export class GalleryContainer extends React.Component {
     const scrollY = window.scrollY;
     const { galleryHeight, scrollBase, galleryWidth } = container;
     if (
-      utils.isSSR() ||
       isSEOMode() ||
       isEditMode() ||
       gotFirstScrollEvent ||

diff --git a/packages/lib/src/common/window/window.mock.js b/packages/lib/src/common/window/window.mock.js
@@ -2,7 +2,7 @@ const noop = () => ({});
 const width = 2560;
 const height = 1440;
 
-const dims = {
+export const dimsMock = {
   y: 0,
   x: 0,
   width,
@@ -16,8 +16,8 @@ const dims = {
 };
 
 const elem = {
-  ...dims,
-  getBoundingClientRect: () => dims,
+  ...dimsMock,
+  getBoundingClientRect: () => dimsMock,
 };
 
 const documentMock = {
@@ -30,8 +30,8 @@ const documentMock = {
   querySelector: () => [elem],
   documentElement: elem,
   activeElement: elem,
-  style: dims,
-  ...dims,
+  style: dimsMock,
+  ...dimsMock,
 };
 
 documentMock.body = documentMock;
@@ -46,18 +46,24 @@ const locationMock = {
   search: '',
   hash: '',
 };
-
+export const scrollMock = {
+  scrollTop: 0,
+  scrollY: 0,
+};
+const windowHydrateMock = {
+  ...dimsMock,
+  ...scrollMock,
+};
 const windowMock = {
   isMock: true,
   isSSR: true,
   orientation: 0,
   devicePixelRatio: 1,
-  scrollTop: 0,
   addEventListener: noop,
   removeEventListener: noop,
   createEvent: noop,
   CustomEvent: noop,
-  screen: dims,
+  screen: dimsMock,
   open: noop,
   petri: {},
   search: {},
@@ -69,9 +75,12 @@ const windowMock = {
   getComputedStyle: noop,
   localStorage: {},
   frames: [],
-  ...dims,
+  ...windowHydrateMock,
 };
 
+export const hydrateMockMap = new Map(
+  Object.keys(windowHydrateMock).map((key) => [key, windowHydrateMock[key]])
+);
 windowMock.parent = windowMock;
 
 export default windowMock;
diff --git a/packages/lib/src/common/window/windowWrapper.js b/packages/lib/src/common/window/windowWrapper.js
@@ -1,8 +1,16 @@
-import WindowMock from './window.mock';
+import WindowMock, { hydrateMockMap } from './window.mock';
 
 class WindowWrapper {
   constructor() {
-    this.reset();
+    this.shouldUseMock = true;
+    this.initProxyWindow = this.initProxyWindow.bind(this);
+    if (this.windowIsAvailable()) {
+      // this will wrap the real window with partial mock for the dimensions
+      // once the gallery is mounted we will switch from the mocked properties to the real values
+      this.initProxyWindow();
+    } else {
+      this.initMockWindow();
+    }
   }
 
   windowIsAvailable() {
@@ -13,12 +21,44 @@ class WindowWrapper {
     }
   }
 
-  reset() {
-    this.isMock = !this.windowIsAvailable();
-    this.window = this.isMock ? WindowMock : window;
-    if (this.isMock) {
-      this.window.mockInstanceId = Math.floor(Math.random() * 100000);
-    }
+  initProxyWindow() {
+    const customWindowPropsSet = new Set();
+    const handler = {
+      // here the proxy target is the global window object
+      get: function (target, property) {
+        if (hydrateMockMap.has(property) && this.shouldUseMock) {
+          return hydrateMockMap.get(property);
+        }
+        if (
+          typeof target[property] === 'function' &&
+          !customWindowPropsSet.has(property)
+        ) {
+          return target[property].bind(target);
+        }
+        return target[property];
+      }.bind(this),
+      // here we push to the custom props Set to know later if we want to bind the prop
+      // reflect just assigns the proprty and returns boolean if the assign was successfull
+      set: function (target, property, value) {
+        customWindowPropsSet.add(property);
+        return Reflect.set(target, property, value);
+      },
+    };
+    // eslint-disable-next-line no-undef
+    this.window = new Proxy(window, handler);
+  }
+  initMockWindow() {
+    this.window = WindowMock;
+    this.window.mockInstanceId = Math.floor(Math.random() * 100000);
+  }
+  stopUsingMock() {
+    this.shouldUseMock = false;
+  }
+  get shouldUseMock() {
+    return this._shouldUseMock;
+  }
+  set shouldUseMock(shouldUseMock) {
+    this._shouldUseMock = shouldUseMock;
   }
 }
 

diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
@@ -30,7 +30,10 @@ export { NEW_PRESETS } from './core/presets/presets';
 export { getLayoutName } from './core/presets/presets';
 export { isInPreset } from './core/presets/presets';
 
-export { default as window } from './common/window/windowWrapper';
+export {
+  default as window,
+  windowWrapper,
+} from './common/window/windowWrapper';
 export { default as utils } from './common/utils';
 
 export { viewModeWrapper } from './common/window/viewModeWrapper';