From 4afd42e74ef46ee062d87cb60b7c3f0c3c476dc7 Mon Sep 17 00:00:00 2001
From: Egor Kolesnikov <freethinkel@gmail.com>
Date: Sat, 31 May 2025 18:41:20 +0500
Subject: [PATCH] create trackWindowDimensions

---
 apps/web-api-demo/index.html                  |   1 +
 apps/web-api-demo/src/window.ts               |  36 ++++
 apps/web-api-demo/window.html                 |  25 +++
 apps/website/docs/.vitepress/config.mjs       |   4 +
 .../docs/web-api/window_dimensions.live.vue   |  80 +++++++
 .../website/docs/web-api/window_dimensions.md |  58 +++++
 packages/web-api/src/index.ts                 |   1 +
 packages/web-api/src/shared.ts                |  36 ++++
 packages/web-api/src/window.test.ts           | 200 ++++++++++++++++++
 packages/web-api/src/window.ts                | 112 ++++++++++
 10 files changed, 553 insertions(+)
 create mode 100644 apps/web-api-demo/src/window.ts
 create mode 100644 apps/web-api-demo/window.html
 create mode 100644 apps/website/docs/web-api/window_dimensions.live.vue
 create mode 100644 apps/website/docs/web-api/window_dimensions.md
 create mode 100644 packages/web-api/src/window.test.ts
 create mode 100644 packages/web-api/src/window.ts
diff --git a/apps/web-api-demo/index.html b/apps/web-api-demo/index.html
index acb0ca2a..433a194b 100644
--- a/apps/web-api-demo/index.html
+++ b/apps/web-api-demo/index.html
@@ -11,6 +11,7 @@
   <body>
     <h1>@withease/web-api</h1>
     <ul>
+      <li><a href="/window.html">window</a></li>
       <li><a href="/media-query.html">media-query</a></li>
       <li><a href="/network.html">network</a></li>
       <li><a href="/page-visibility.html">page-visibility</a></li>
diff --git a/apps/web-api-demo/src/window.ts b/apps/web-api-demo/src/window.ts
new file mode 100644
index 00000000..c4372096
--- /dev/null
+++ b/apps/web-api-demo/src/window.ts
@@ -0,0 +1,36 @@
+import { trackWindowDimensions } from '@withease/web-api';
+import { Store, createEvent } from 'effector';
+
+const bindStoreToElement = (store: Store<number>, elementId: string) => {
+  const element = document.querySelector(elementId)!;
+
+  store.watch((value) => {
+    element.textContent = JSON.stringify(value);
+  });
+};
+
+const appStarted = createEvent();
+
+const {
+  $scrollY,
+  $scrollX,
+  $innerWidth,
+  $innerHeight,
+  $outerWidth,
+  $outerHeight,
+  $screenLeft,
+  $screenTop,
+} = trackWindowDimensions({
+  setup: appStarted,
+});
+
+bindStoreToElement($scrollY, '#scrollY');
+bindStoreToElement($scrollX, '#scrollX');
+bindStoreToElement($innerWidth, '#innerWidth');
+bindStoreToElement($innerHeight, '#innerHeight');
+bindStoreToElement($outerWidth, '#outerWidth');
+bindStoreToElement($outerHeight, '#outerHeight');
+bindStoreToElement($screenLeft, '#screenLeft');
+bindStoreToElement($screenTop, '#screenTop');
+
+appStarted();
diff --git a/apps/web-api-demo/window.html b/apps/web-api-demo/window.html
new file mode 100644
index 00000000..ccd90948
--- /dev/null
+++ b/apps/web-api-demo/window.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>web-api demo</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body style="position: relative; min-height: 150vh; min-width: 150vw">
+    <section style="position: fixed; top: 0; left: 0">
+      <h2>Window</h2>
+      <p>scrollX: <span id="scrollX" /></p>
+      <p>scrollY: <span id="scrollY" /></p>
+      <p>innerWidth: <span id="innerWidth" /></p>
+      <p>innerHeight: <span id="innerHeight" /></p>
+      <p>outerWidth: <span id="outerWidth"></span></p>
+      <p>outerHeight: <span id="outerHeight"></span></p>
+      <p>screenLeft: <span id="screenLeft"></span></p>
+      <p>screenTop: <span id="screenTop"></span></p>
+    </section>
+    <script type="module" src="/src/window.ts"></script>
+  </body>
+</html>
diff --git a/apps/website/docs/.vitepress/config.mjs b/apps/website/docs/.vitepress/config.mjs
index b847f05a..f9fc80a3 100644
--- a/apps/website/docs/.vitepress/config.mjs
+++ b/apps/website/docs/.vitepress/config.mjs
@@ -111,6 +111,10 @@ export default defineConfig({
               text: 'Geolocation',
               link: '/web-api/geolocation',
             },
+            {
+              text: 'Window dimensions',
+              link: '/web-api/window_dimensions',
+            },
           ],
         },
       ]),
diff --git a/apps/website/docs/web-api/window_dimensions.live.vue b/apps/website/docs/web-api/window_dimensions.live.vue
new file mode 100644
index 00000000..23b7edf8
--- /dev/null
+++ b/apps/website/docs/web-api/window_dimensions.live.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { trackWindowDimensions } from '@withease/web-api';
+import { createEvent } from 'effector';
+import { useUnit } from 'effector-vue/composition';
+import { onMounted } from 'vue';
+
+const appStarted = createEvent();
+
+const {
+  $scrollX,
+  $scrollY,
+  $innerWidth,
+  $innerHeight,
+  $outerWidth,
+  $outerHeight,
+  $screenTop,
+  $screenLeft,
+} = trackWindowDimensions({
+  setup: appStarted,
+});
+
+const {
+  scrollX,
+  scrollY,
+  innerWidth,
+  innerHeight,
+  outerWidth,
+  outerHeight,
+  screenTop,
+  screenLeft,
+} = useUnit({
+  $scrollX,
+  $scrollY,
+  $innerWidth,
+  $innerHeight,
+  $outerWidth,
+  $outerHeight,
+  $screenTop,
+  $screenLeft,
+});
+
+onMounted(appStarted);
+</script>
+
+<template>
+  <div class="wrapper">
+    <h2>Window</h2>
+    <p>
+      scrollX: <strong>{{ scrollX }}</strong>
+    </p>
+    <p>
+      scrollY: <strong>{{ scrollY }}</strong>
+    </p>
+    <p>
+      innerWidth: <strong>{{ innerWidth }}</strong>
+    </p>
+    <p>
+      innerHeight: <strong>{{ innerHeight }}</strong>
+    </p>
+    <p>
+      outerWidth: <strong>{{ outerWidth }}</strong>
+    </p>
+    <p>
+      outerHeight: <strong>{{ outerHeight }}</strong>
+    </p>
+    <p>
+      screenLeft: <strong>{{ screenLeft }}</strong>
+    </p>
+    <p>
+      screenTop: <strong>{{ screenTop }}</strong>
+    </p>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.wrapper {
+  min-width: 150vw;
+  min-height: 150vh;
+}
+</style>
diff --git a/apps/website/docs/web-api/window_dimensions.md b/apps/website/docs/web-api/window_dimensions.md
new file mode 100644
index 00000000..dee9121c
--- /dev/null
+++ b/apps/website/docs/web-api/window_dimensions.md
@@ -0,0 +1,58 @@
+---
+title: Window dimensions
+---
+
+# Window dimensions
+
+Allows tracking window dimensions with [_Events_](https://effector.dev/en/api/effector/event/) and [_Stores_](https://effector.dev/docs/api/effector/store).
+
+::: info
+
+Uses [Window: resize event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event), [Window: scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event), [Window: requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) under the hood
+
+:::
+
+## Usage
+
+All you need to do is to create an integration by calling `trackWindowDimensions` with an integration options:
+
+- `setup`: after this [_Event_](https://effector.dev/en/api/effector/event/) all listeners will be installed, and the integration will be ready to use; it is required because it is better to use [explicit initialization _Event_ in the application](/magazine/explicit_start).
+- `teardown?`: after this [_Event_](https://effector.dev/en/api/effector/event/) all listeners will be removed, and the integration will be ready to be destroyed.
+
+```ts
+import { trackWindowDimensions } from '@withease/web-api';
+
+const {
+  $scrollY,
+  $scrollX,
+  $innerWidth,
+  $innerHeight,
+  $outerWidth,
+  $outerHeight,
+  $screenLeft,
+  $screenTop,
+} = trackWindowDimensions({
+  setup: appStarted,
+});
+```
+
+Returns an object with:
+
+- `$scrollY`: [_Store_](https://effector.dev/docs/api/effector/store) with the current scroll position on the Y-axis
+- `$scrollX`: [_Store_](https://effector.dev/docs/api/effector/store) with the current scroll position on the X-axis
+- `$innerWidth`: [_Store_](https://effector.dev/docs/api/effector/store) with the current width of the viewport
+- `$innerHeight`: [_Store_](https://effector.dev/docs/api/effector/store) with the current height of the viewport
+- `$outerWidth`: [_Store_](https://effector.dev/docs/api/effector/store) with the current width of the entire window
+- `$outerHeight`: [_Store_](https://effector.dev/docs/api/effector/store) with the current height of the entire window
+- `$screenLeft`: [_Store_](https://effector.dev/docs/api/effector/store) with the current left position of the screen
+- `$screenTop`: [_Store_](https://effector.dev/docs/api/effector/store) with the current top position of the screen
+
+## Live demo
+
+Let us show you a live demo of how it works. The following demo displays a `$scrollX`, `$innerWidth`, `$innerHeight`, `$outerWidth`, `$outerHeight`, `$screenLeft`, and `$screenTop` values of the current window dimensions. _Scroll, resize, and move the window to see how it works._
+
+<script setup lang="ts">
+import demoFile from './window_dimensions.live.vue?raw';
+</script>
+
+<LiveDemo :demoFile="demoFile" />
diff --git a/packages/web-api/src/index.ts b/packages/web-api/src/index.ts
index cd17cc34..75783818 100644
--- a/packages/web-api/src/index.ts
+++ b/packages/web-api/src/index.ts
@@ -4,3 +4,4 @@ export { trackNetworkStatus } from './network_status';
 export { trackMediaQuery } from './media_query';
 export { trackPreferredLanguages } from './preferred_languages';
 export { trackGeolocation } from './geolocation';
+export { trackWindowDimensions } from './window';
diff --git a/packages/web-api/src/shared.ts b/packages/web-api/src/shared.ts
index f49213ca..5f21da52 100644
--- a/packages/web-api/src/shared.ts
+++ b/packages/web-api/src/shared.ts
@@ -114,3 +114,39 @@ export function readonly<T>(unit: EventCallable<T>): Event<T>;
 export function readonly(unit: any) {
   return unit.map((v: any) => v);
 }
+
+type UnsubscribeFn = () => void;
+type UpdaterFn = (updateFn: () => void) => UnsubscribeFn;
+
+export const createAutoUpdatedStore =
+  ({ setup, teardown }: Setupable) =>
+  <T>(readValue: () => T, updater: UpdaterFn) => {
+    const store = createStore(readValue());
+    const update = createEvent<T>();
+
+    let unsubscribe: () => void | undefined;
+
+    sample({
+      clock: update,
+      target: store,
+    });
+
+    sample({
+      clock: setup,
+      target: createEffect(
+        () => (unsubscribe = updater(() => update(readValue())))
+      ),
+    });
+
+    if (teardown) {
+      sample({
+        clock: teardown,
+        filter: () => Boolean(unsubscribe),
+        target: createEffect(() => {
+          unsubscribe!();
+        }),
+      });
+    }
+
+    return store;
+  };
diff --git a/packages/web-api/src/window.test.ts b/packages/web-api/src/window.test.ts
new file mode 100644
index 00000000..f641396f
--- /dev/null
+++ b/packages/web-api/src/window.test.ts
@@ -0,0 +1,200 @@
+import { allSettled, createEvent, fork } from 'effector';
+import { describe, test, expect, beforeEach, vi, afterEach } from 'vitest';
+
+import { trackWindowDimensions } from './window';
+import { setTimeout } from 'timers';
+
+describe('trackWindowDimensions on server', () => {
+  test('Empty values on server', async () => {
+    const scope = fork();
+    const setup = createEvent();
+
+    const {
+      $scrollX,
+      $scrollY,
+      $innerWidth,
+      $innerHeight,
+      $outerWidth,
+      $outerHeight,
+      $screenTop,
+      $screenLeft,
+    } = trackWindowDimensions({ setup });
+
+    await allSettled(setup, { scope });
+
+    expect(scope.getState($scrollX)).toBe(0);
+    expect(scope.getState($scrollY)).toBe(0);
+    expect(scope.getState($innerWidth)).toBe(0);
+    expect(scope.getState($innerHeight)).toBe(0);
+    expect(scope.getState($outerWidth)).toBe(0);
+    expect(scope.getState($outerHeight)).toBe(0);
+    expect(scope.getState($screenTop)).toBe(0);
+    expect(scope.getState($screenLeft)).toBe(0);
+  });
+});
+
+describe('trackWindowDimensions on client', () => {
+  // Mock window properties
+  globalThis.window = {} as any;
+  globalThis.document = {} as any;
+  const originalWindow = { ...window };
+  const mockAddEventListener = vi.fn();
+  const mockRemoveEventListener = vi.fn();
+  const mockRequestAnimationFrame = vi.fn();
+  const mockCancelAnimationFrame = vi.fn();
+
+  beforeEach(() => {
+    // Reset mocks
+    mockAddEventListener.mockReset();
+    mockRemoveEventListener.mockReset();
+    mockRequestAnimationFrame.mockReset();
+    mockCancelAnimationFrame.mockReset();
+
+    // Mock implementation of requestAnimationFrame to just return an incrementing ID
+    let frameId = 0;
+    mockRequestAnimationFrame.mockImplementation((callback) => {
+      frameId += 1;
+
+      setTimeout(() => {
+        callback();
+      });
+
+      return frameId;
+    });
+
+    // Override window and document methods
+    window.addEventListener = mockAddEventListener;
+    window.removeEventListener = mockRemoveEventListener;
+    document.addEventListener = mockAddEventListener;
+    document.removeEventListener = mockRemoveEventListener;
+    window.requestAnimationFrame = mockRequestAnimationFrame;
+    window.cancelAnimationFrame = mockCancelAnimationFrame;
+
+    // Set window dimensions
+    window.scrollX = 10;
+    window.scrollY = 20;
+    window.innerWidth = 800;
+    window.innerHeight = 600;
+    window.outerWidth = 1024;
+    window.outerHeight = 768;
+    window.screenTop = 30;
+    window.screenLeft = 40;
+  });
+
+  afterEach(() => {
+    window.scrollX = originalWindow.scrollX;
+    window.scrollY = originalWindow.scrollY;
+    window.innerWidth = originalWindow.innerWidth;
+    window.innerHeight = originalWindow.innerHeight;
+    window.outerWidth = originalWindow.outerWidth;
+    window.outerHeight = originalWindow.outerHeight;
+    window.screenTop = originalWindow.screenTop;
+    window.screenLeft = originalWindow.screenLeft;
+  });
+
+  test('attaches correct event listeners', async () => {
+    const setup = createEvent();
+    const teardown = createEvent();
+    trackWindowDimensions({ setup, teardown });
+
+    const scope = fork();
+    await allSettled(setup, { scope });
+
+    // Add a small delay to ensure all microtasks and macrotasks are processed
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    // Check that event listeners were attached
+    expect(document.addEventListener).toHaveBeenCalledWith(
+      'scroll',
+      expect.any(Function)
+    );
+    expect(window.addEventListener).toHaveBeenCalledWith(
+      'resize',
+      expect.any(Function)
+    );
+
+    expect(window.requestAnimationFrame).toHaveBeenCalled();
+  });
+
+  test('removes event listeners on teardown', async () => {
+    const setup = createEvent();
+    const teardown = createEvent();
+    trackWindowDimensions({ setup, teardown });
+
+    const scope = fork();
+    await allSettled(setup, { scope });
+    await allSettled(teardown, { scope });
+
+    // Check that event listeners were removed
+    expect(document.removeEventListener).toHaveBeenCalledWith(
+      'scroll',
+      expect.any(Function)
+    );
+    expect(window.removeEventListener).toHaveBeenCalledWith(
+      'resize',
+      expect.any(Function)
+    );
+
+    expect(window.cancelAnimationFrame).toHaveBeenCalled();
+  });
+
+  test('updates stores on window events', async () => {
+    const setup = createEvent();
+    const teardown = createEvent();
+    // Create a separate setup to capture the event handlers
+    const scrollHandler = vi.fn();
+    const scrollHandlers: Function[] = [];
+    const resizeHandler = vi.fn();
+    const resizeHandlers: Function[] = [];
+
+    // Override addEventListener to capture handlers
+    mockAddEventListener.mockImplementation((event, handler) => {
+      if (event === 'scroll') scrollHandlers.push(handler);
+      if (event === 'resize') resizeHandlers.push(handler);
+    });
+
+    scrollHandler.mockImplementation(() => {
+      scrollHandlers.forEach((handler) => handler());
+    });
+    resizeHandler.mockImplementation(() => {
+      resizeHandlers.forEach((handler) => handler());
+    });
+
+    const {
+      $scrollX,
+      $scrollY,
+      $innerWidth,
+      $innerHeight,
+      $outerWidth,
+      $outerHeight,
+    } = trackWindowDimensions({ setup, teardown });
+
+    const scope = fork();
+    await allSettled(setup, { scope });
+
+    // Simulate scroll event
+    window.scrollX = 50;
+    window.scrollY = 75;
+
+    // Trigger scroll handler
+    scrollHandler();
+
+    expect($scrollX.getState()).toBe(50);
+    expect($scrollY.getState()).toBe(75);
+
+    // Simulate resize event
+    window.innerWidth = 1200;
+    window.innerHeight = 900;
+    window.outerWidth = 1280;
+    window.outerHeight = 1024;
+
+    // Trigger resize handler
+    resizeHandler();
+
+    // Check that resize values were updated
+    expect($innerWidth.getState()).toBe(1200);
+    expect($innerHeight.getState()).toBe(900);
+    expect($outerWidth.getState()).toBe(1280);
+    expect($outerHeight.getState()).toBe(1024);
+  });
+});
diff --git a/packages/web-api/src/window.ts b/packages/web-api/src/window.ts
new file mode 100644
index 00000000..94c62b33
--- /dev/null
+++ b/packages/web-api/src/window.ts
@@ -0,0 +1,112 @@
+import { Store } from 'effector';
+import { Setupable, createAutoUpdatedStore, readValue } from 'shared';
+
+const on = <
+  E extends { addEventListener: Function; removeEventListener: Function }
+>(
+  element: E,
+  type: string,
+  handler: Function
+) => {
+  element.addEventListener(type, handler);
+
+  return () => {
+    element.removeEventListener(type, handler);
+  };
+};
+
+type WindowDimensions = ({ setup, teardown }: Setupable) => {
+  $scrollX: Store<number>;
+  $scrollY: Store<number>;
+  $innerWidth: Store<number>;
+  $innerHeight: Store<number>;
+  $outerWidth: Store<number>;
+  $outerHeight: Store<number>;
+  $screenTop: Store<number>;
+  $screenLeft: Store<number>;
+};
+
+const trackWindowDimensions: WindowDimensions = (config) => {
+  const storeWithUpdate = createAutoUpdatedStore(config);
+
+  const $scrollX = storeWithUpdate(
+    () => readValue(() => window.scrollX, 0),
+    (update) => on(document, 'scroll', update)
+  );
+
+  const $scrollY = storeWithUpdate(
+    () => readValue(() => window.scrollY, 0),
+    (update) => on(document, 'scroll', update)
+  );
+
+  const $innerWidth = storeWithUpdate(
+    () => readValue(() => window.innerWidth, 0),
+    (update) => on(window, 'resize', update)
+  );
+
+  const $innerHeight = storeWithUpdate(
+    () => readValue(() => window.innerHeight, 0),
+    (update) => on(window, 'resize', update)
+  );
+
+  const $outerWidth = storeWithUpdate(
+    () => readValue(() => window.outerWidth, 0),
+    (update) => on(window, 'resize', update)
+  );
+
+  const $outerHeight = storeWithUpdate(
+    () => readValue(() => window.outerHeight, 0),
+    (update) => on(window, 'resize', update)
+  );
+
+  const $screenTop = storeWithUpdate(
+    () => readValue(() => window.screenTop, 0),
+    (update) => {
+      let value = window.screenTop;
+
+      let frame = window.requestAnimationFrame(function check() {
+        frame = window.requestAnimationFrame(check);
+
+        if (value !== (value = window.screenTop)) {
+          update();
+        }
+      });
+
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+  );
+
+  const $screenLeft = storeWithUpdate(
+    () => readValue(() => window.screenLeft, 0),
+    (update) => {
+      let value = window.screenLeft;
+
+      let frame = window.requestAnimationFrame(function check() {
+        frame = window.requestAnimationFrame(check);
+
+        if (value !== (value = window.screenLeft)) {
+          update();
+        }
+      });
+
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+  );
+
+  return {
+    $scrollX,
+    $scrollY,
+    $innerWidth,
+    $innerHeight,
+    $outerWidth,
+    $outerHeight,
+    $screenTop,
+    $screenLeft,
+  };
+};
+
+export { trackWindowDimensions };
