reduce parent lookups

src/lib/sandbox/main-instances.ts

@@ -8,7 +8,7 @@ export const getInstanceId = (
   if (instance) {
     const nodeName = (instance as any as Node).nodeName;
     if (nodeName === NodeName.Document) {
-      return PlatformApiId.documentElement;
+      return PlatformApiId.document;
     }
     if (nodeName === NodeName.DocumentElement) {
       return PlatformApiId.documentElement;

src/lib/web-worker/worker-document.ts

@@ -1,12 +1,12 @@
 import { callMethod, getter, setter } from './worker-proxy';
-import { createElement, WorkerElement, WorkerScriptElement } from './worker-node';
+import { createElement, WorkerElement, WorkerNode, WorkerScriptElement } from './worker-node';
 import { InterfaceType, PlatformApiId } from '../types';
 import { logWorkerGetter, logWorkerSetter, toLower } from '../utils';
 import { webWorkerCtx, WinIdKey } from './worker-constants';
 
 export class WorkerDocument extends WorkerElement {
   get body() {
-    return getElementProp(this, PlatformApiId.body, 'BODY');
+    return getNodeProp(this, PlatformApiId.body, 'BODY');
   }
 
   get compatMode() {
@@ -47,7 +47,7 @@ export class WorkerDocument extends WorkerElement {
   }
 
   get documentElement() {
-    return getElementProp(this, PlatformApiId.documentElement, 'HTML');
+    return getNodeProp(this, PlatformApiId.documentElement, 'HTML');
   }
 
   getElementsByTagName(tagName: string) {
@@ -72,7 +72,7 @@ export class WorkerDocument extends WorkerElement {
   }
 
   get head() {
-    return getElementProp(this, PlatformApiId.head, 'HEAD');
+    return getNodeProp(this, PlatformApiId.head, 'HEAD');
   }
 
   get implementation() {
@@ -90,6 +90,14 @@ export class WorkerDocument extends WorkerElement {
     webWorkerCtx.$location$!.href = url + '';
   }
 
+  get parentNode() {
+    return null;
+  }
+
+  get parentElement() {
+    return null;
+  }
+
   get readyState() {
     if (webWorkerCtx.$documentReadyState$ !== 'complete') {
       webWorkerCtx.$documentReadyState$ = getter(this, ['readyState']);
@@ -113,15 +121,10 @@ export class WorkerDocument extends WorkerElement {
   }
 }
 
-const getElementProp = (
-  doc: WorkerDocument,
-  instanceId: number,
-  tagName: 'BODY' | 'HEAD' | 'HTML'
-) => {
-  return new WorkerElement({
-    $winId$: doc[WinIdKey],
+const getNodeProp = (node: WorkerNode, instanceId: number, tagName: string) =>
+  new WorkerElement({
+    $winId$: node[WinIdKey],
     $interfaceType$: InterfaceType.Element,
     $instanceId$: instanceId,
     $nodeName$: tagName,
   });
-};

src/lib/web-worker/worker-node.ts

@@ -1,5 +1,5 @@
 import { callMethod, getter, proxy, setter } from './worker-proxy';
-import { ExtraInstruction, SerializedInstance } from '../types';
+import { ExtraInstruction, InterfaceType, PlatformApiId, SerializedInstance } from '../types';
 import { imageRequest, scriptElementSetSrc } from './worker-exec';
 import {
   InstanceIdKey,
@@ -32,7 +32,7 @@ export class WorkerNode {
   }
 
   get ownerDocument(): WorkerDocument {
-    return self.document as any;
+    return document as any;
   }
 
   get href() {
@@ -83,6 +83,24 @@ export class WorkerAnchorElement extends WorkerElement {
   }
 }
 
+export class WorkerDocumentElementChild extends WorkerElement {
+  get parentElement() {
+    return document.documentElement;
+  }
+  get parentNode() {
+    return document.documentElement;
+  }
+}
+
+export class WorkerDocumentElement extends WorkerElement {
+  get parentElement() {
+    return null;
+  }
+  get parentNode() {
+    return document;
+  }
+}
+
 export class WorkerSrcElement extends WorkerElement {
   [PrivateValues]: {
     /** completed */

src/lib/web-worker/worker-serialization.ts

@@ -22,6 +22,7 @@ import {
 } from './worker-constants';
 import {
   WorkerAnchorElement,
+  WorkerDocumentElementChild,
   WorkerElement,
   WorkerImageElement,
   WorkerNode,
@@ -132,19 +133,20 @@ const constructInstance = (serializedInstance: SerializedInstance): any => {
   if (instanceId === PlatformApiId.window) {
     return self;
   }
+  if (interfaceType === InterfaceType.Document) {
+    return new WorkerDocument(serializedNode);
+  }
   if (interfaceType === InterfaceType.Element) {
     const ElementConstructors: { [tagname: string]: any } = {
       A: WorkerAnchorElement,
+      BODY: WorkerDocumentElementChild,
+      HEAD: WorkerDocumentElementChild,
       IFRAME: WorkerIFrameElement,
       IMG: WorkerImageElement,
       SCRIPT: WorkerScriptElement,
     };
     return new (ElementConstructors[serializedNode.$nodeName$!] || WorkerElement)(serializedNode);
   }
-  if (interfaceType === InterfaceType.Document) {
-    // this scenario would be for an iframe's document, not the main document
-    return new WorkerDocument(serializedNode);
-  }
   if (interfaceType === InterfaceType.TextNode) {
     return new WorkerNode(serializedInstance);
   }

tests/document/document.spec.ts

@@ -51,4 +51,16 @@ test('document', async ({ page }) => {
   const testCurrentScriptSrcLocation = page.locator('#testCurrentScriptSrcLocation');
   await expect(testCurrentScriptSrc).toHaveText('src');
   await expect(testCurrentScriptSrcLocation).toHaveText('/document/current-script-src.js');
+
+  const testHeadParentNode = page.locator('#testHeadParentNode');
+  await expect(testHeadParentNode).toHaveText('HTML HTML');
+
+  const testBodyParentNode = page.locator('#testBodyParentNode');
+  await expect(testBodyParentNode).toHaveText('HTML HTML');
+
+  const testDocumentElementParentNode = page.locator('#testDocumentElementParentNode');
+  await expect(testDocumentElementParentNode).toHaveText('#document null');
+
+  const testDocumentParentNode = page.locator('#testDocumentParentNode');
+  await expect(testDocumentParentNode).toHaveText('null null');
 });

tests/document/index.html

@@ -248,6 +248,50 @@ <h1 class="title">Document</h1>
         ></script>
       </li>
 
+      <li>
+        <strong>head.parentNode/Element</strong>
+        <code id="testHeadParentNode"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testHeadParentNode');
+            elm.textContent = document.head.parentNode.nodeName + ' ' + document.head.parentElement.nodeName;
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>body.parentNode/Element</strong>
+        <code id="testBodyParentNode"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testBodyParentNode');
+            elm.textContent = document.body.parentNode.nodeName + ' ' + document.body.parentElement.nodeName;
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>documentElement.parentNode/Element</strong>
+        <code id="testDocumentElementParentNode"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testDocumentElementParentNode');
+            elm.textContent = document.documentElement.parentNode.nodeName + ' ' + String(document.documentElement.parentElement);
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>document.parentNode/Element</strong>
+        <code id="testDocumentParentNode"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testDocumentParentNode');
+            elm.textContent = String(document.parentNode) + ' ' + String(document.parentElement);
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

tests/element/element.spec.ts

@@ -39,4 +39,7 @@ test('element', async ({ page }) => {
 
   const testAnchor = page.locator('#testAnchor');
   await expect(testAnchor).toHaveText('/element/some/other/path');
+
+  const testParentElement = page.locator('#testParentElement');
+  await expect(testParentElement).toHaveText('hasParentElement');
 });

tests/element/index.html

@@ -193,6 +193,18 @@ <h1>Element</h1>
         </script>
       </li>
 
+      <li class="hasParentElement">
+        <strong>parentElement</strong>
+        <code id="testParentElement"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testParentElement');
+            const parentElement = elm.parentElement;
+            elm.textContent = parentElement.className;
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

tests/node/index.html

@@ -96,7 +96,19 @@ <h1 class="title">Node</h1>
           (function () {
             const elm = document.getElementById('testHrefProp');
             elm.href = './some/other/path';
-            elm.textContent = elm.href === undefined ? 'undefined' : elm.href;
+            elm.textContent = String(elm.href);
+          })();
+        </script>
+      </li>
+
+      <li class="hasParentNode">
+        <strong>parentNode</strong>
+        <code id="testParentNode"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testParentNode');
+            const parentNode = elm.parentNode;
+            elm.textContent = parentNode.className;
           })();
         </script>
       </li>

tests/node/node.spec.ts

@@ -16,4 +16,7 @@ test('node', async ({ page }) => {
 
   const testHrefProp = page.locator('#testHrefProp');
   await expect(testHrefProp).toHaveText('undefined');
+
+  const testParentNode = page.locator('#testParentNode');
+  await expect(testParentNode).toHaveText('hasParentNode');
 });