avoid href lookups for non-anchors

QwikDev · Sep 14, 2021 · 8680834 · 8680834 · vercel · Sep 14, 2021
1 parent c70504b
commit 8680834
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 16 deletions.
diff --git a/src/lib/web-worker/worker-node.ts b/src/lib/web-worker/worker-node.ts
@@ -34,6 +34,11 @@ export class WorkerNode {
   get ownerDocument(): WorkerDocument {
     return self.document as any;
   }
+
+  get href() {
+    return undefined;
+  }
+  set href(_: any) {}
 }
 
 export class WorkerElement extends WorkerNode {

diff --git a/tests/element-method/element-method.spec.ts → tests/element/element.spec.ts b/tests/element-method/element-method.spec.ts → tests/element/element.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
-test('element method', async ({ page }) => {
-  await page.goto('/element-method/');
+test('element', async ({ page }) => {
+  await page.goto('/element/');
 
   await page.waitForSelector('.completed');
 
@@ -36,4 +36,7 @@ test('element method', async ({ page }) => {
   const y = await testGetBoundingClientRectY.textContent();
   const yInt = parseFloat(y);
   expect(yInt).toBeGreaterThan(4);
+
+  const testAnchor = page.locator('#testAnchor');
+  await expect(testAnchor).toHaveText('/element/some/other/path');
 });
diff --git a/tests/element-method/index.html → tests/element/index.html b/tests/element-method/index.html → tests/element/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Partytown Test Page" />
-    <title>Element Method</title>
+    <title>Element</title>
     <link
       rel="icon"
       id="favicon"
@@ -42,15 +42,17 @@
       }
       li strong,
       li code,
-      li button {
+      li button,
+      li a {
         white-space: nowrap;
         flex: 1;
         margin: 0 5px;
+        padding: 0;
       }
     </style>
   </head>
   <body mph="88">
-    <h1>Element Method</h1>
+    <h1>Element</h1>
     <ul>
       <li>
         <strong>getBoundingClientRect()</strong>
@@ -179,6 +181,18 @@ <h1>Element Method</h1>
         </script>
       </li>
 
+      <li>
+        <strong>set/get a.href</strong>
+        <a id="testAnchor"></a>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testAnchor');
+            elm.href = './some/other/path';
+            elm.textContent = elm.pathname;
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

diff --git a/tests/index.html b/tests/index.html
@@ -68,8 +68,8 @@ <h1>Partytown Tests 🎉</h1>
     <ul>
       <li><a href="/document/">Document</a></li>
       <li><a href="/document-prod/">Document (Prod Build)</a></li>
+      <li><a href="/element/">Element</a></li>
       <li><a href="/element-class/">Element Class</a></li>
-      <li><a href="/element-method/">Element Method</a></li>
       <li><a href="/element-style/">Element Style</a></li>
       <li><a href="/event-forwarding/">Event Forwarding</a></li>
       <li><a href="/events/">Events</a></li>

diff --git a/tests/node/index.html b/tests/node/index.html
@@ -54,41 +54,53 @@ <h1 class="title">Node</h1>
     <ul>
       <li>
         <strong>createElement() / appendChild()</strong>
-        <span id="test-input"></span>
+        <code id="testInput"></code>
         <script type="text/partytown">
           (function () {
             const input = document.createElement('input');
             input.type = 'checkbox';
             input.checked = true;
-            input.id = 'test-checkbox';
-            document.getElementById('test-input').appendChild(input);
+            input.id = 'testCheckbox';
+            document.getElementById('testInput').appendChild(input);
           })();
         </script>
       </li>
 
       <li>
         <strong>createTextNode() / insertBefore()</strong>
-        <span id="test-text"> World</span>
+        <code id="testText"> World</code>
         <script type="text/partytown">
           (function () {
             const text = document.createTextNode('Hello');
-            const i = document.getElementById('test-text');
+            const i = document.getElementById('testText');
             i.insertBefore(text, i.firstChild);
           })();
         </script>
       </li>
 
       <li>
         <strong>removeChild()</strong>
-        <span id="test-remove">This is<span id="test-not"> not</span> awesome</span>
+        <code id="testRemove">This is<span id="testNot"> not</span> awesome</code>
         <script type="text/partytown">
           (function () {
-            const i = document.getElementById('test-not');
+            const i = document.getElementById('testNot');
             i.parentNode.removeChild(i);
           })();
         </script>
       </li>
 
+      <li>
+        <strong>set/get node.href undefined</strong>
+        <code id="testHrefProp"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testHrefProp');
+            elm.href = './some/other/path';
+            elm.textContent = elm.href === undefined ? 'undefined' : elm.href;
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

diff --git a/tests/node/node.spec.ts b/tests/node/node.spec.ts
@@ -5,12 +5,15 @@ test('node', async ({ page }) => {
 
   await page.waitForSelector('.completed');
 
-  const testCheckbox = page.locator('#test-checkbox');
+  const testCheckbox = page.locator('#testCheckbox');
   await expect(testCheckbox).toBeChecked();
 
-  const testText = page.locator('#test-text');
+  const testText = page.locator('#testText');
   await expect(testText).toHaveText('Hello World');
 
-  const testRemove = page.locator('#test-remove');
+  const testRemove = page.locator('#testRemove');
   await expect(testRemove).toHaveText('This is awesome');
+
+  const testHrefProp = page.locator('#testHrefProp');
+  await expect(testHrefProp).toHaveText('undefined');
 });