feat: ResizeObserver

QwikDev · Oct 22, 2021 · a490844 · a490844 · vercel · Oct 22, 2021
1 parent ccf9122
commit a490844
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 6 deletions.
diff --git a/src/lib/sandbox/read-main-interfaces.ts b/src/lib/sandbox/read-main-interfaces.ts
@@ -1,4 +1,4 @@
-import { debug, getConstructorName, isValidMemberName, logMain } from '../utils';
+import { debug, getConstructorName, isValidMemberName, logMain, noop } from '../utils';
 import { InitWebWorkerData, InterfaceInfo, InterfaceType, MainWindow } from '../types';
 
 export const readMainInterfaces = (win: MainWindow) => {
@@ -24,9 +24,10 @@ export const readMainInterfaces = (win: MainWindow) => {
     [InterfaceType.CanvasRenderingContext2D, canvasRenderingContext2D],
     [InterfaceType.History, win.history],
     [InterfaceType.Location, win.location],
-    [InterfaceType.MutationObserver, new MutationObserver(() => {})],
+    [InterfaceType.MutationObserver, new MutationObserver(noop)],
     [InterfaceType.NamedNodeMap, inputElm.attributes],
     [InterfaceType.NodeList, inputElm.childNodes],
+    [InterfaceType.ResizeObserver, new ResizeObserver(noop)],
     [InterfaceType.Screen, win.screen],
     [InterfaceType.Storage, win.localStorage],
     [InterfaceType.TextNode, docImpl.createTextNode('')],

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -151,8 +151,9 @@ export const enum InterfaceType {
   MutationObserver = 20,
   NodeList = 21,
   NamedNodeMap = 22,
-  Screen = 23,
-  Storage = 24,
+  ResizeObserver = 23,
+  Screen = 24,
+  Storage = 25,
 }
 
 export const enum PlatformInstanceId {

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -15,6 +15,8 @@ export const toLower = (str: string) => str.toLowerCase();
 
 export const toUpper = (str: string) => str.toUpperCase();
 
+export const noop = () => {};
+
 export const logMain = (msg: string) => {
   if (debug) {
     console.debug.apply(console, [
@@ -158,6 +160,8 @@ const logTargetProp = (target: any, accessType: 'Get' | 'Set' | 'Call', applyPat
       n = 'documentTypeNode.';
     } else if (target[InterfaceTypeKey] === InterfaceType.MutationObserver) {
       n = 'mutationObserver.';
+    } else if (target[InterfaceTypeKey] === InterfaceType.ResizeObserver) {
+      n = 'resizeObserver.';
     } else if (target[InterfaceTypeKey] <= InterfaceType.DocumentFragmentNode) {
       n = 'node.';
     } else {

diff --git a/tests/index.html b/tests/index.html
@@ -89,6 +89,7 @@ <h2>Platform Tests</h2>
       <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>
+      <li><a href="/platform/resize-observer/">ResizeObserver</a></li>
       <li><a href="/platform/script/">Script</a></li>
       <li><a href="/platform/storage/">Storage</a></li>
       <li><a href="/platform/style/">Style</a></li>

diff --git a/tests/platform/mutation-observer/index.html b/tests/platform/mutation-observer/index.html
@@ -67,7 +67,7 @@
     </style>
   </head>
   <body>
-    <h1>Mutation Observer</h1>
+    <h1>MutationObserver</h1>
     <ul>
       <li>
         <button id="buttonObserve">observe</button>

diff --git a/tests/platform/mutation-observer/mutation-observer.spec.ts b/tests/platform/mutation-observer/mutation-observer.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-test('window', async ({ page }) => {
+test('mutation-observer', async ({ page }) => {
   await page.goto('/platform/mutation-observer/');
 
   const buttonObserve = page.locator('#buttonObserve');

diff --git a/tests/platform/resize-observer/index.html b/tests/platform/resize-observer/index.html
@@ -0,0 +1,139 @@
+<!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>ResizeObserver</title>
+
+    <script>
+      partytown = {
+        debug: true,
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logImageRequests: true,
+        logSendBeaconRequests: true,
+        logStackTraces: false,
+        logScriptExecution: true,
+      };
+    </script>
+    <script src="/~partytown/debug/partytown-snippet.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;
+      }
+      li {
+        display: flex;
+        margin: 15px 0;
+      }
+      li code,
+      li button {
+        white-space: nowrap;
+        flex: 1;
+        margin: 0 5px;
+      }
+      li button {
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>ResizeObserver</h1>
+
+    <ul>
+      <li>
+        <button id="buttonObserve">observe</button>
+        <button id="buttonIncrease">+</button>
+        <button id="buttonDecrease">-</button>
+
+        <script type="text/partytown">
+          (function () {
+            let step = 0;
+            function nextStep() {
+              step++;
+              const elm = document.getElementById('testResizeObserver');
+              elm.classList.add('step' + step);
+              const testStep = document.getElementById('testStep');
+              testStep.textContent = 'step' + step;
+            }
+
+            const targetNode = document.getElementById('target');
+
+            const resizeObserver = new ResizeObserver((entries) => {
+              for (let entry of entries) {
+                entry.target.textContent = 'Height: ' + entry.contentRect.height + 'px';
+              }
+            });
+
+            const buttonObserve = document.getElementById('buttonObserve');
+            buttonObserve.addEventListener('click', () => {
+              const elm = document.getElementById('testResizeObserver');
+              if (buttonObserve.textContent === 'observe') {
+                resizeObserver.observe(elm);
+                buttonObserve.textContent = 'disconnect';
+              } else {
+                resizeObserver.disconnect();
+                buttonObserve.textContent = 'observe';
+              }
+              nextStep();
+            });
+
+            const buttonIncrease = document.getElementById('buttonIncrease');
+            buttonIncrease.addEventListener('click', () => {
+              const elm = document.getElementById('testResizeObserver');
+              elm.style.height = parseInt(elm.style.height.replace('px', ''), 10) + 10 + 'px';
+              nextStep();
+            });
+
+            const buttonDecrease = document.getElementById('buttonDecrease');
+            buttonDecrease.addEventListener('click', () => {
+              const elm = document.getElementById('testResizeObserver');
+              elm.style.height = parseInt(elm.style.height.replace('px', ''), 10) - 10 + 'px';
+              nextStep();
+            });
+
+            document.body.className = 'completed'
+          })();
+        </script>
+      </li>
+    </ul>
+
+    <div
+      id="testResizeObserver"
+      style="height: 40px; text-align: center; border: 1px solid blue; background-color: #eee"
+    ></div>
+
+    <div id="testStep"></div>
+
+    <p><a href="/">All Tests</a></p>
+  </body>
+</html>
diff --git a/tests/platform/resize-observer/resize-observer.spec.ts b/tests/platform/resize-observer/resize-observer.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+
+test('resize-observer', async ({ page }) => {
+  await page.goto('/platform/resize-observer/');
+
+  await page.waitForSelector('.completed');
+
+  const buttonObserve = page.locator('#buttonObserve');
+  const buttonIncrease = page.locator('#buttonIncrease');
+  const buttonDecrease = page.locator('#buttonDecrease');
+
+  const testResizeObserver = page.locator('#testResizeObserver');
+
+  await buttonIncrease.click();
+  await page.waitForSelector('.step1');
+  await expect(testResizeObserver).toHaveText('');
+
+  await buttonObserve.click();
+  await page.waitForSelector('.step2');
+  await expect(testResizeObserver).toHaveText('Height: 50px');
+
+  await buttonIncrease.click();
+  await page.waitForSelector('.step3');
+  await expect(testResizeObserver).toHaveText('Height: 60px');
+
+  await buttonDecrease.click();
+  await page.waitForSelector('.step4');
+  await expect(testResizeObserver).toHaveText('Height: 50px');
+
+  await buttonObserve.click();
+  await page.waitForSelector('.step5');
+
+  await buttonDecrease.click();
+  await page.waitForSelector('.step6');
+  await expect(testResizeObserver).toHaveText('Height: 50px');
+});