feat: IntersectionObserver (#54)

QwikDev · Jan 25, 2022 · 6e26f4f · 6e26f4f · vercel · Jan 25, 2022
1 parent 2e68868
commit 6e26f4f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 2 deletions.
diff --git a/src/lib/sandbox/read-main-platform.ts b/src/lib/sandbox/read-main-platform.ts
@@ -17,8 +17,9 @@ export const readMainPlatform = () => {
   const comment = docImpl.createComment('');
   const frag = docImpl.createDocumentFragment();
   const svg = docImpl.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  const mutationObserver = new MutationObserver(noop);
-  const resizeObserver = new ResizeObserver(noop);
+  const intersectionObserver = getGlobalConstructor(mainWindow, 'IntersectionObserver');
+  const mutationObserver = getGlobalConstructor(mainWindow, 'MutationObserver');
+  const resizeObserver = getGlobalConstructor(mainWindow, 'ResizeObserver');
   const perf = mainWindow.performance;
   const screen = mainWindow.screen;
 
@@ -41,6 +42,7 @@ export const readMainPlatform = () => {
     [screen.orientation],
 
     // global constructors
+    [intersectionObserver, InterfaceType.EnvGlobalConstructor],
     [mutationObserver, InterfaceType.EnvGlobalConstructor],
     [resizeObserver, InterfaceType.EnvGlobalConstructor],
 
@@ -210,3 +212,6 @@ const readStorage = (storageName: 'localStorage' | 'sessionStorage') => {
   }
   return items;
 };
+
+const getGlobalConstructor = (mainWindow: any, cstrName: string) =>
+  typeof mainWindow[cstrName] !== 'undefined' ? new mainWindow[cstrName](noop) : 0;
diff --git a/tests/index.html b/tests/index.html
@@ -87,6 +87,7 @@ <h2>Platform Tests</h2>
       <li><a href="/platform/history/">History</a></li>
       <li><a href="/platform/iframe/">IFrame</a></li>
       <li><a href="/platform/image/">Image</a></li>
+      <li><a href="/platform/intersection-observer/">IntersectionObserver</a></li>
       <li><a href="/platform/mutation-observer/">MutationObserver</a></li>
       <li><a href="/platform/navigator/">Navigator</a></li>
       <li><a href="/platform/node/">Node</a></li>

diff --git a/tests/platform/intersection-observer/index.html b/tests/platform/intersection-observer/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+    <title>IntersectionObserver</title>
+
+    <script>
+      partytown = {
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logImageRequests: true,
+        logSendBeaconRequests: true,
+        logStackTraces: false,
+        logScriptExecution: true,
+      };
+    </script>
+    <script src="/~partytown/debug/partytown.js"></script>
+
+    <link
+      rel="icon"
+      id="favicon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
+    />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+          Apple Color Emoji, Segoe UI Emoji;
+        font-size: 12px;
+      }
+      h1 {
+        margin: 0 0 15px 0;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 16px 8px;
+      }
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: blue;
+      }
+      a:hover {
+        background-color: #eee;
+      }
+      .scroll-area {
+        margin: 3000px 0 50px 0;
+        text-align: center;
+      }
+      #scrolldown {
+        border: 1px solid gray;
+        border-radius: 4px;
+        font-size: 18px;
+        background-color: #eee;
+        text-align: center;
+        font-weight: bold;
+        color: black;
+      }
+      #scrolldown:hover {
+        background-color: #ddd;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>IntersectionObserver</h1>
+
+    <a id="scrolldown" href="#testIntersectionObserver">⬇️ Scroll Down ⬇️</a>
+
+    <div class="scroll-area">
+      <span>🎉</span>
+      <span id="testIntersectionObserver"></span>
+      <span>🎉</span>
+    </div>
+
+    <script type="text/partytown">
+      (function () {
+        const elm = document.getElementById('testIntersectionObserver');
+
+        const observer = new IntersectionObserver((entries, observer) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              console.log('entry', entry);
+              elm.textContent = `intersecting #${entry.target.id}`;
+              elm.className = 'testIntersectionObserver';
+            }
+          });
+        });
+
+        observer.observe(elm);
+      })();
+    </script>
+
+    <p><a href="/">All Tests</a></p>
+  </body>
+</html>
diff --git a/tests/platform/intersection-observer/intersection-observer.spec.ts b/tests/platform/intersection-observer/intersection-observer.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test('intersection-observer', async ({ page }) => {
+  await page.goto('/platform/intersection-observer/');
+
+  const testIntersectionObserver = page.locator('#testIntersectionObserver');
+  await expect(testIntersectionObserver).toHaveText('');
+
+  const linkScrollDown = page.locator('#scrolldown');
+  await linkScrollDown.click();
+
+  await page.waitForSelector('.testIntersectionObserver');
+
+  await expect(testIntersectionObserver).toHaveText('intersecting #testIntersectionObserver');
+});