From 9e2b9644a15db9347dbdc9ea10fdc96269a1f692 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Sun, 23 Jan 2022 00:34:19 -0600
Subject: [PATCH] fix: anchor href getter

---
 src/lib/web-worker/worker-anchor.ts  | 89 +++++++++++-----------------
 src/lib/web-worker/worker-exec.ts    | 14 ++---
 tests/platform/anchor/anchor.spec.ts |  8 +++
 tests/platform/anchor/index.html     | 32 +++++++++-
 4 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/src/lib/web-worker/worker-anchor.ts b/src/lib/web-worker/worker-anchor.ts
index 5b3993ca..b6750774 100644
--- a/src/lib/web-worker/worker-anchor.ts
+++ b/src/lib/web-worker/worker-anchor.ts
@@ -1,58 +1,41 @@
-import { getUrl } from './worker-exec';
+import { commaSplit } from './worker-constants';
+import { getEnv } from './worker-environment';
+import { getInstanceStateValue, setInstanceStateValue } from './worker-state';
+import { getter, setter } from './worker-proxy';
 import type { Node } from './worker-node';
-import { setInstanceStateValue } from './worker-state';
-import { setter } from './worker-proxy';
+import { resolveToUrl } from './worker-exec';
 import { StateProp } from '../types';
 
-export const HTMLAnchorDescriptorMap: PropertyDescriptorMap & ThisType<Node> = {
-  hash: {
-    get() {
-      return getUrl(this).hash;
-    },
-  },
-  host: {
-    get() {
-      return getUrl(this).host;
-    },
-  },
-  hostname: {
-    get() {
-      return getUrl(this).hostname;
-    },
-  },
-  href: {
-    get() {
-      return getUrl(this).href;
-    },
-    set(href) {
-      href = href + '';
-      setInstanceStateValue(this, StateProp.url, href);
-      setter(this, ['href'], href);
-    },
-  },
-  origin: {
-    get() {
-      return getUrl(this).origin;
-    },
-  },
-  pathname: {
-    get() {
-      return getUrl(this).pathname;
-    },
-  },
-  port: {
-    get() {
-      return getUrl(this).port;
-    },
-  },
-  protocol: {
-    get() {
-      return getUrl(this).protocol;
+export const HTMLAnchorDescriptorMap: PropertyDescriptorMap & ThisType<Node> = {};
+
+const anchorProps = commaSplit('hash,host,hostname,href,origin,pathname,port,protocol,search');
+
+anchorProps.map((anchorProp) => {
+  HTMLAnchorDescriptorMap[anchorProp] = {
+    get(this: any) {
+      let env = getEnv(this);
+      let value = getInstanceStateValue(this, StateProp.url);
+      let href: string;
+
+      if (typeof value !== 'string') {
+        href = getter(this, ['href']);
+        setInstanceStateValue(this, StateProp.url, href);
+        value = (new URL(href) as any)[anchorProp];
+      }
+
+      return (resolveToUrl(env, value) as any)[anchorProp];
     },
-  },
-  search: {
-    get() {
-      return getUrl(this).search;
+
+    set(this: any, value) {
+      let env = getEnv(this);
+      let href = getInstanceStateValue(this, StateProp.url);
+      let url: any = resolveToUrl(env, href);
+
+      url[anchorProp] = new URL(value + '', url.href);
+
+      setInstanceStateValue(this, StateProp.url, url.href);
+
+      setter(this, ['href'], url.href);
     },
-  },
-};
+  };
+});
diff --git a/src/lib/web-worker/worker-exec.ts b/src/lib/web-worker/worker-exec.ts
index dc6269fc..36027a61 100644
--- a/src/lib/web-worker/worker-exec.ts
+++ b/src/lib/web-worker/worker-exec.ts
@@ -8,7 +8,6 @@ import {
   WorkerMessageType,
 } from '../types';
 import { environments, postMessages, webWorkerCtx } from './worker-constants';
-import { getEnv } from './worker-environment';
 import { getInstanceStateValue, setInstanceStateValue } from './worker-state';
 import { getOrCreateNodeInstance } from './worker-constructors';
 import { logWorker } from '../log';
@@ -195,11 +194,13 @@ export const insertIframe = (winId: number, iframe: WorkerInstance) => {
   callback();
 };
 
-const resolveToUrl = (
+export const resolveToUrl = (
   env: WebWorkerEnvironment,
   url: string,
   noUserHook?: boolean,
-  baseLocation?: Location
+  baseLocation?: Location,
+  resolvedUrl?: URL,
+  configResolvedUrl?: any
 ) => {
   baseLocation = env.$location$;
   while (!baseLocation.host) {
@@ -210,9 +211,9 @@ const resolveToUrl = (
     }
   }
 
-  const resolvedUrl = new URL(url || '', baseLocation as any);
+  resolvedUrl = new URL(url || '', baseLocation as any);
   if (!noUserHook && webWorkerCtx.$config$.resolveUrl) {
-    const configResolvedUrl = webWorkerCtx.$config$.resolveUrl!(resolvedUrl, baseLocation);
+    configResolvedUrl = webWorkerCtx.$config$.resolveUrl!(resolvedUrl, baseLocation);
     if (configResolvedUrl) {
       return configResolvedUrl;
     }
@@ -223,9 +224,6 @@ const resolveToUrl = (
 export const resolveUrl = (env: WebWorkerEnvironment, url: string, noUserHook?: boolean) =>
   resolveToUrl(env, url, noUserHook) + '';
 
-export const getUrl = (elm: WorkerInstance) =>
-  resolveToUrl(getEnv(elm), getInstanceStateValue(elm, StateProp.url));
-
 export const updateIframeContent = (url: string, html: string) =>
   `<base href="${url}">` +
   html
diff --git a/tests/platform/anchor/anchor.spec.ts b/tests/platform/anchor/anchor.spec.ts
index c3faac9a..11fe2d20 100644
--- a/tests/platform/anchor/anchor.spec.ts
+++ b/tests/platform/anchor/anchor.spec.ts
@@ -22,4 +22,12 @@ test('anchor', async ({ page }) => {
   await page.waitForSelector('.testInnerHtmlFirstChild');
   const testInnerHtmlFirstChild = page.locator('#testInnerHtmlFirstChild');
   await expect(testInnerHtmlFirstChild).toHaveText('#');
+
+  await page.waitForSelector('.testGetHref');
+  const testGetHref = page.locator('#testGetHref');
+  await expect(testGetHref).toHaveText('https://builder.io/');
+
+  await page.waitForSelector('.testSetHref');
+  const testSetHref = page.locator('#testSetHref');
+  await expect(testSetHref).toHaveText('/pathname');
 });
diff --git a/tests/platform/anchor/index.html b/tests/platform/anchor/index.html
index 2030d3cb..8d59d8f3 100644
--- a/tests/platform/anchor/index.html
+++ b/tests/platform/anchor/index.html
@@ -36,6 +36,9 @@
       a:hover {
         background-color: #eee;
       }
+      strong a {
+        display: inline-block;
+      }
       li {
         display: flex;
         margin: 15px 0;
@@ -138,11 +141,38 @@ <h1>Anchor</h1>
             elm.className = 'testInnerHtmlFirstChild';
           })();
         </script>
+      </li> 
+
+      <li>
+        <strong>get <a id="getHref" href="https://builder.io/">href</a></strong>
+        <div id="testGetHref"></div>
+        <script type="text/partytown">
+          (function () {
+            const a = document.getElementById('getHref');
+            const elm = document.getElementById('testGetHref');
+            elm.textContent = a.href;
+            elm.className = 'testGetHref';
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>set <a id="setHref" href="/">href</a></strong>
+        <div id="testSetHref"></div>
+        <script type="text/partytown">
+          (function () {
+            const a = document.getElementById('setHref');
+            a.href = '/pathname';
+            const elm = document.getElementById('testSetHref');
+            elm.textContent = a.pathname;
+            elm.className = 'testSetHref';
+          })();
+        </script>
       </li>
+ 
     </ul>
 
     <hr />
     <p><a href="/">All Tests</a></p>
-
   </body>
 </html>