From 396c235792a76ac298b93225d6416d9e5b09cf87 Mon Sep 17 00:00:00 2001 From: IzaacAyelin Date: Tue, 30 Apr 2024 14:55:28 +0300 Subject: [PATCH 1/4] partial window mock --- .../lib/src/common/window/windowWrapper.js | 64 ++++++++++++++++--- 1 file changed, 56 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/common/window/windowWrapper.js b/packages/lib/src/common/window/windowWrapper.js index fa4966baaf..25774acb7b 100644 --- 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,52 @@ 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); + } + 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 + const windowProxy = new Proxy(window, handler); + const windowFuncHandler = { + get: function (target, property) { + if (!customWindowPropsSet.has(property) && typeof windowProxy[property] === 'function') { + return windowProxy[property].bind(window); + } + return windowProxy[property]; + }, + set: function (target, property, value) { + return Reflect.set(windowProxy, property, value); + }, + }; + // this second proxy that returnes binded functions to avoid issues with non configurable proprties + // eslint-disable-next-line no-undef + this.window = new Proxy({}, windowFuncHandler); + } + 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; } } From 76850c11af5ca45f5cd9ce02598e9f68bc5687bb Mon Sep 17 00:00:00 2001 From: IzaacAyelin Date: Tue, 30 Apr 2024 15:01:56 +0300 Subject: [PATCH 2/4] mocks --- packages/lib/src/common/window/window.mock.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/lib/src/common/window/window.mock.js b/packages/lib/src/common/window/window.mock.js index 5e7781f82e..1c6c4a8819 100644 --- 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,10 @@ 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; From 3c6f3cb2480b56361b67231013caaebb24466477 Mon Sep 17 00:00:00 2001 From: IzaacAyelin Date: Mon, 17 Jun 2024 11:22:47 +0300 Subject: [PATCH 3/4] proxy fix --- packages/lib/src/common/window/windowWrapper.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/lib/src/common/window/windowWrapper.js b/packages/lib/src/common/window/windowWrapper.js index 25774acb7b..df6475b530 100644 --- a/packages/lib/src/common/window/windowWrapper.js +++ b/packages/lib/src/common/window/windowWrapper.js @@ -22,7 +22,7 @@ class WindowWrapper { } initProxyWindow() { - const customWindowPropsSet = new Set(); + console.log('locall pro-gallery ==>'); const handler = { // here the proxy target is the global window object get: function (target, property) { @@ -34,7 +34,6 @@ class WindowWrapper { // 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); }, }; @@ -42,15 +41,19 @@ class WindowWrapper { const windowProxy = new Proxy(window, handler); const windowFuncHandler = { get: function (target, property) { - if (!customWindowPropsSet.has(property) && typeof windowProxy[property] === 'function') { + if (!windowProxy.proGalleryCustomProps.has(property) && typeof windowProxy[property] === 'function') { return windowProxy[property].bind(window); } return windowProxy[property]; }, set: function (target, property, value) { + windowProxy.proGalleryCustomProps.add(property); return Reflect.set(windowProxy, property, value); }, }; + if (!windowProxy.proGalleryCustomProps) { + windowProxy.proGalleryCustomProps = new Set(); + } // this second proxy that returnes binded functions to avoid issues with non configurable proprties // eslint-disable-next-line no-undef this.window = new Proxy({}, windowFuncHandler); From a1ed28735209f2aea4232781447aff6112a3c81f Mon Sep 17 00:00:00 2001 From: IzaacAyelin Date: Mon, 17 Jun 2024 12:43:06 +0300 Subject: [PATCH 4/4] fix --- .../src/components/gallery/proGallery/galleryContainer.js | 2 ++ packages/lib/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js index f85808e243..efbf86808b 100644 --- a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js +++ b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js @@ -8,6 +8,7 @@ import { isPreviewMode, isSiteMode, optionsMap, + windowWrapper, } from 'pro-gallery-lib'; import { ItemsHelper } from 'pro-layouts'; import GalleryView from './galleryView'; @@ -135,6 +136,7 @@ export class GalleryContainer extends React.Component { } componentDidMount() { + windowWrapper.stopUsingMock(); const { body, documentElement: html } = document; const viewportHeight = window.innerHeight; const height = Math.max( diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 9b698fcc30..296dea11f3 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -22,7 +22,7 @@ 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';