fix: anchor href getter

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

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

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

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>