From 026661c93e2696cad8695ae649bb9320a31d57fc Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Mon, 7 Mar 2022 12:06:43 -0600
Subject: [PATCH] feat: cache document.visibilityState

---
 scripts/minify.ts                        |  1 +
 src/lib/sandbox/main-register-window.ts  |  4 ++++
 src/lib/types.ts                         |  6 +++++-
 src/lib/web-worker/index.ts              |  6 ++++--
 src/lib/web-worker/worker-document.ts    |  6 +++++-
 src/lib/web-worker/worker-environment.ts | 10 ++++++++--
 src/lib/web-worker/worker-window.ts      |  2 ++
 tests/platform/document/document.spec.ts |  5 ++++-
 tests/platform/document/index.html       | 13 ++++++++++++-
 tests/unit/utils.ts                      |  1 +
 10 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/scripts/minify.ts b/scripts/minify.ts
index 40e1387d..f320a3db 100644
--- a/scripts/minify.ts
+++ b/scripts/minify.ts
@@ -102,6 +102,7 @@ function managlePropsPlugin(): Plugin {
     $tasks$: '',
     $thisArg$: '',
     $url$: '',
+    $visibilityState$: '',
     $window$: '',
     $winId$: '',
   };
diff --git a/src/lib/sandbox/main-register-window.ts b/src/lib/sandbox/main-register-window.ts
index c3f2ee35..4fbc92c0 100644
--- a/src/lib/sandbox/main-register-window.ts
+++ b/src/lib/sandbox/main-register-window.ts
@@ -23,6 +23,7 @@ export const registerWindow = (
           $winId$,
           $parentWinId$,
           $url$: doc.baseURI,
+          $visibilityState$: doc.visibilityState,
         },
       ]);
 
@@ -48,6 +49,9 @@ export const registerWindow = (
 
     $window$.addEventListener('popstate', onLocationChange);
     $window$.addEventListener('hashchange', onLocationChange);
+    doc.addEventListener('visibilitychange', () =>
+      worker.postMessage([WorkerMessageType.DocumentVisibilityState, $winId$, doc.visibilityState])
+    );
 
     winCtxs[$winId$] = {
       $winId$,
diff --git a/src/lib/types.ts b/src/lib/types.ts
index ca5aacae..d7081ee7 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -42,7 +42,8 @@ export type MessageFromSandboxToWorker =
   | [type: WorkerMessageType.InitializedScripts, winId: WinId]
   | [type: WorkerMessageType.RefHandlerCallback, callbackData: RefHandlerCallbackData]
   | [type: WorkerMessageType.ForwardMainTrigger, triggerData: ForwardMainTriggerData]
-  | [type: WorkerMessageType.LocationUpdate, winId: WinId, documentBaseURI: string];
+  | [type: WorkerMessageType.LocationUpdate, winId: WinId, documentBaseURI: string]
+  | [type: WorkerMessageType.DocumentVisibilityState, winId: WinId, visibilityState: string];
 
 export const enum WorkerMessageType {
   MainDataRequestFromWorker,
@@ -57,6 +58,7 @@ export const enum WorkerMessageType {
   ForwardWorkerAccessRequest,
   AsyncAccessRequest,
   LocationUpdate,
+  DocumentVisibilityState,
 }
 
 export interface ForwardMainTriggerData {
@@ -138,6 +140,7 @@ export interface InitializeEnvironmentData {
   $winId$: WinId;
   $parentWinId$: WinId;
   $url$: string;
+  $visibilityState$?: string;
 }
 
 export interface WebWorkerEnvironment {
@@ -149,6 +152,7 @@ export interface WebWorkerEnvironment {
   $head$: HTMLElement;
   $body$: HTMLElement;
   $location$: Location;
+  $visibilityState$?: string;
   $createNode$: (nodeName: string, instanceId: InstanceId, namespace?: string) => WorkerNode;
   $currentScriptId$?: InstanceId;
   $isInitialized$?: number;
diff --git a/src/lib/web-worker/index.ts b/src/lib/web-worker/index.ts
index 34dfec83..fc82b19e 100644
--- a/src/lib/web-worker/index.ts
+++ b/src/lib/web-worker/index.ts
@@ -36,13 +36,15 @@ const receiveMessageFromSandboxToWorker = (ev: MessageEvent<MessageFromSandboxTo
 
       environments[msgValue].$isInitialized$ = 1;
       environments[msgValue].$isLoading$ = 0;
+    } else if (msgType === WorkerMessageType.DocumentVisibilityState) {
+      environments[msgValue].$visibilityState$ = msg[2];
     } else if (msgType === WorkerMessageType.LocationUpdate) {
-      environments[msg[1]].$location$.href = msg[2];
+      environments[msgValue].$location$.href = msg[2];
     }
   } else if (msgType === WorkerMessageType.MainDataResponseToWorker) {
     // received initial main data
     // initialize the web worker with the received the main data
-    initWebWorker(msg[1]);
+    initWebWorker(msgValue);
 
     // send to the main thread that the web worker has been initialized
     webWorkerCtx.$postMessage$([WorkerMessageType.InitializedWebWorker]);
diff --git a/src/lib/web-worker/worker-document.ts b/src/lib/web-worker/worker-document.ts
index afe541a3..4ef54241 100644
--- a/src/lib/web-worker/worker-document.ts
+++ b/src/lib/web-worker/worker-document.ts
@@ -185,7 +185,7 @@ export const patchDocument = (
               CallType.Blocking,
               docId
             );
-            const docEnv = createWindow(winId, winId, env.$location$ + '', true, true);
+            const docEnv = createWindow(winId, winId, env.$location$ + '', 'hidden', true, true);
             return docEnv.$document$;
           },
         };
@@ -216,6 +216,10 @@ export const patchDocument = (
     readyState: {
       value: 'complete',
     },
+
+    visibilityState: {
+      get: () => env.$visibilityState$ || 'visible',
+    },
   };
 
   definePrototypePropertyDescriptor(WorkerDocument, DocumentDescriptorMap);
diff --git a/src/lib/web-worker/worker-environment.ts b/src/lib/web-worker/worker-environment.ts
index dc4bb1c7..d9fee552 100644
--- a/src/lib/web-worker/worker-environment.ts
+++ b/src/lib/web-worker/worker-environment.ts
@@ -5,13 +5,19 @@ import { InitializeEnvironmentData, WorkerMessageType } from '../types';
 import { logWorker, normalizedWinId } from '../log';
 
 export const createEnvironment = (
-  { $winId$, $parentWinId$, $url$ }: InitializeEnvironmentData,
+  { $winId$, $parentWinId$, $url$, $visibilityState$ }: InitializeEnvironmentData,
   isIframeWindow?: boolean
 ) => {
   if (!environments[$winId$]) {
     // create a simulated global environment for this window
     // if it hasn't already been created (like an iframe)
-    environments[$winId$] = createWindow($winId$, $parentWinId$, $url$, isIframeWindow);
+    environments[$winId$] = createWindow(
+      $winId$,
+      $parentWinId$,
+      $url$,
+      $visibilityState$,
+      isIframeWindow
+    );
 
     if (debug) {
       const winType = $winId$ === $parentWinId$ ? 'top' : 'iframe';
diff --git a/src/lib/web-worker/worker-window.ts b/src/lib/web-worker/worker-window.ts
index d0a74e54..9fa39ec9 100644
--- a/src/lib/web-worker/worker-window.ts
+++ b/src/lib/web-worker/worker-window.ts
@@ -78,6 +78,7 @@ export const createWindow = (
   $winId$: WinId,
   $parentWinId$: WinId,
   url: string,
+  $visibilityState$?: string,
   isIframeWindow?: boolean,
   isDocumentImplementation?: boolean
 ) => {
@@ -344,6 +345,7 @@ export const createWindow = (
           $head$: $createNode$(NodeName.Head, $winId$ + WinDocId.head) as any,
           $body$: $createNode$(NodeName.Body, $winId$ + WinDocId.body) as any,
           $location$,
+          $visibilityState$,
           $createNode$,
         });
 
diff --git a/tests/platform/document/document.spec.ts b/tests/platform/document/document.spec.ts
index 4d8d8ec3..1311d176 100644
--- a/tests/platform/document/document.spec.ts
+++ b/tests/platform/document/document.spec.ts
@@ -89,5 +89,8 @@ test('document', async ({ page }) => {
   await expect(testCreateElementError).toHaveText('errored');
 
   const testCreateHTMLDocument = page.locator('#testCreateHTMLDocument');
-  await expect(testCreateHTMLDocument).toHaveText('88mph');
+  await expect(testCreateHTMLDocument).toHaveText('88mph hidden');
+
+  const testVisibilityState = page.locator('#testVisibilityState');
+  await expect(testVisibilityState).toHaveText('visible');
 });
diff --git a/tests/platform/document/index.html b/tests/platform/document/index.html
index 56a67afd..5a2db422 100644
--- a/tests/platform/document/index.html
+++ b/tests/platform/document/index.html
@@ -416,7 +416,7 @@ <h1 class="title">Document</h1>
         <script type="text/partytown">
           (function () {
             const doc = document.implementation.createHTMLDocument();
-            doc.body.textContent = '88mph';
+            doc.body.textContent = '88mph ' + doc.visibilityState;
 
             const elm = document.getElementById('testCreateHTMLDocument');
             elm.textContent = doc.body.textContent;
@@ -424,6 +424,17 @@ <h1 class="title">Document</h1>
         </script>
       </li>
 
+      <li>
+        <strong>visibilityState</strong>
+        <code id="testVisibilityState"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testVisibilityState');
+            elm.textContent = document.visibilityState;
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');
diff --git a/tests/unit/utils.ts b/tests/unit/utils.ts
index 099edd6d..4947ad04 100644
--- a/tests/unit/utils.ts
+++ b/tests/unit/utils.ts
@@ -128,6 +128,7 @@ function createWorkerWindownEnvironment(winId: WinId) {
     $head$: {} as any,
     $body$: {} as any,
     $location$: {} as any,
+    $visibilityState$: 'visible',
     $createNode$: () => null as any,
   };