feat: cache document.visibilityState

scripts/minify.ts

@@ -102,6 +102,7 @@ function managlePropsPlugin(): Plugin {
     $tasks$: '',
     $thisArg$: '',
     $url$: '',
+    $visibilityState$: '',
     $window$: '',
     $winId$: '',
   };

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$,

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;

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]);

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);

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';

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$,
         });
 

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');
 });

tests/platform/document/index.html

@@ -416,14 +416,25 @@ <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;
           })();
         </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');

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,
   };