feat: allow Partytown to access window objects from main thread (#166)

BuilderIO · May 3, 2022 · 9c1762b · 9c1762b · vercel · May 3, 2022
1 parent 9203bbf
commit 9c1762b
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 0 deletions.
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -392,6 +392,7 @@ export interface PartytownConfig {
    * https://partytown.builder.io/forwarding-events
    */
   forward?: PartytownForwardProperty[];
+  mainWindowAccessors?: string[];
   /**
    * Rarely, a script will add a named function to the global scope with the
    * intent that other scripts can call the named function (like Adobe Launch).

diff --git a/src/lib/web-worker/worker-window.ts b/src/lib/web-worker/worker-window.ts
@@ -362,6 +362,8 @@ export const createWindow = (
                 // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
                 let frame = getChildEnvs()[propName as any];
                 return frame ? frame.$window$ : undefined;
+              } else if (webWorkerCtx.$config$.mainWindowAccessors?.includes(propName)) {
+                return getter(this, [propName]);
               } else {
                 return win[propName];
               }

diff --git a/tests/index.html b/tests/index.html
@@ -116,6 +116,7 @@ <h2>Service Integration Tests</h2>
       <li><a href="/tests/integrations/clarity/">Clarity</a></li>
       <li><a href="/tests/integrations/config/">Config</a></li>
       <li><a href="/tests/integrations/event-forwarding/">Event Forwarding</a></li>
+      <li><a href="/tests/integrations/main-window-accessors/">Main Window Accessors</a></li>
       <li><a href="/tests/integrations/facebook-pixel/">Facebook Pixel</a></li>
       <li><a href="/tests/integrations/gtm/">Google Tag Manager (GTM)</a></li>
       <li><a href="/tests/integrations/hubspot/forms.html">Hubspot Forms</a></li>

diff --git a/tests/integrations/main-window-accessors/index.html b/tests/integrations/main-window-accessors/index.html
@@ -0,0 +1,103 @@
+<!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>Main Window Accessors</title>
+
+  <script>
+    partytown = {
+      logCalls: true,
+      logGetters: true,
+      logSetters: true,
+      logStackTraces: false,
+      logScriptExecution: true,
+      mainWindowAccessors: ['globalField'],
+    };
+  </script>
+  <script src='/~partytown/debug/partytown.js'></script>
+
+  <script>
+    window.globalField = {
+      value: 42,
+      parentObj: {
+        childValue: 'stringValue',
+      },
+    };
+  </script>
+
+  <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 strong,
+      li code,
+      li button {
+          white-space: nowrap;
+          flex: 1;
+          margin: 0 5px;
+      }
+  </style>
+</head>
+<body>
+<h1>Main Window Accessors</h1>
+<ul>
+  <li>
+    <strong>Parent level access</strong>
+    <code id='testWindowAccessor'></code>
+    <script type='text/partytown'>
+      document.getElementById('testWindowAccessor').innerText = window.globalField.value;
+    </script>
+  </li>
+  <li>
+    <strong>Child level access</strong>
+    <code id='testChildWindowAccessor'></code>
+    <script type='text/partytown'>
+      document.getElementById('testChildWindowAccessor').innerText = window.globalField.parentObj.childValue;
+    </script>
+  </li>
+  <script type='text/partytown'>
+      document.body.classList.add('completed');
+  </script>
+</ul>
+
+
+<hr />
+<p><a href='/tests/'>All Tests</a></p>
+
+</body>
+</html>
diff --git a/tests/integrations/main-window-accessors/main-window-accessors.spec.ts b/tests/integrations/main-window-accessors/main-window-accessors.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test.only('integration window accessor', async ({ page }) => {
+  await page.goto('/tests/integrations/main-window-accessors/');
+  await page.waitForSelector('.completed');
+
+  const element = page.locator('#testWindowAccessor');
+  await expect(element).toHaveText('42');
+
+  const child_element = page.locator('#testChildWindowAccessor');
+  await expect(child_element).toHaveText('stringValue');
+});