fix: anchor property setter (#184)

BuilderIO · May 24, 2022 · e4b12bc · e4b12bc · vercel · May 24, 2022
1 parent 5cdeabe
commit e4b12bc
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 8 deletions.
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -128,3 +128,12 @@ export const createElementFromConstructor = (
       : doc.createElement(htmlConstructorTags[tag] || tag);
   }
 };
+
+export const isValidUrl = (url: any): boolean => {
+  try {
+    new URL(url);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
diff --git a/src/lib/web-worker/worker-anchor.ts b/src/lib/web-worker/worker-anchor.ts
@@ -1,5 +1,5 @@
 import { commaSplit } from './worker-constants';
-import { definePrototypePropertyDescriptor } from '../utils';
+import { definePrototypePropertyDescriptor, isValidUrl } from '../utils';
 import { getInstanceStateValue, setInstanceStateValue } from './worker-state';
 import { getter, setter } from './worker-proxy';
 import { resolveToUrl } from './worker-exec';
@@ -24,10 +24,20 @@ export const patchHTMLAnchorElement = (WorkerHTMLAnchorElement: any, env: WebWor
       },
 
       set(this: any, value) {
-        let href = getInstanceStateValue(this, StateProp.url);
-        let url: any = resolveToUrl(env, href);
-
-        url[anchorProp] = new URL(value + '', url.href);
+        let url;
+
+        if (anchorProp === 'href') {
+          if (isValidUrl(value)) {
+            url = new URL(value);
+          } else {
+            const baseHref = env.$location$.href
+            url = resolveToUrl(env, baseHref);
+            url.href = new URL(value + '', url.href);
+          }
+        } else {
+          url = resolveToUrl(env, this.href);
+          url[anchorProp] = value;
+        }
 
         setInstanceStateValue(this, StateProp.url, url.href);
 

diff --git a/tests/platform/anchor/anchor.spec.ts b/tests/platform/anchor/anchor.spec.ts
@@ -30,4 +30,22 @@ test('anchor', async ({ page }) => {
   await page.waitForSelector('.testSetHref');
   const testSetHref = page.locator('#testSetHref');
   await expect(testSetHref).toHaveText('/pathname');
+
+  await page.waitForSelector('.testSetHref2');
+  const testSetHref2 = page.locator('#testSetHref2');
+  const desiredLocalUrl = new URL(page.url());
+  desiredLocalUrl.pathname = '/local-pathname'
+  await expect(testSetHref2).toHaveText(desiredLocalUrl.toString());
+
+  await page.waitForSelector('.testGetSearch');
+  const testGetSearch = page.locator('#testGetSearch');
+  await expect(testGetSearch).toHaveText('?a=42&b=23');
+  const testGetSearchHref = page.locator('#testGetSearchHref');
+  await expect(testGetSearchHref).toHaveText('https://builder.io/?a=42&b=23');
+
+  await page.waitForSelector('.testSetSearch');
+  const testSetSearch = page.locator('#testSetSearch');
+  await expect(testSetSearch).toHaveText('?x=1&y=2');
+  const testSetSearchHref = page.locator('#testSetSearchHref');
+  await expect(testSetSearchHref).toHaveText('https://builder.io/?x=1&y=2');
 });
diff --git a/tests/platform/anchor/index.html b/tests/platform/anchor/index.html
@@ -75,7 +75,7 @@ <h1>Anchor</h1>
           })();
         </script>
       </li>
-      
+
       <li>
         <strong>constructor.name</strong>
         <div><a id="testAnchorConstructor"></a></div>
@@ -90,7 +90,7 @@ <h1>Anchor</h1>
 
       <li>
         <strong>createElement('a'), no appendChild</strong>
-        <div id="testCreateAnchorNoAppend"></a>
+        <div id="testCreateAnchorNoAppend"></div>
         <script type="text/partytown">
           (function () {
             const a = document.createElement('a');
@@ -136,7 +136,7 @@ <h1>Anchor</h1>
             elm.className = 'testInnerHtmlFirstChild';
           })();
         </script>
-      </li> 
+      </li>
 
       <li>
         <strong>get <a id="getHref" href="https://builder.io/">href</a></strong>
@@ -164,6 +164,62 @@ <h1>Anchor</h1>
           })();
         </script>
       </li>
+
+      <li>
+        <strong>set <a id="setHref2" href="/">href</a> 2</strong>
+        <div id="testSetHref2"></div>
+        <script type="text/partytown">
+          (function () {
+            const a = document.getElementById('setHref');
+            a.href = 'http://builder.io/pathname';
+            a.href = '/local-pathname';
+            const elm = document.getElementById('testSetHref2');
+            elm.textContent = a.href;
+            elm.className = 'testSetHref2';
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>get <a id="getSearch" href="https://builder.io/?a=42&b=23">search</a></strong>
+        <div>
+          <strong>search:</strong><span id="testGetSearch"></span>
+          <strong>href:</strong><span id="testGetSearchHref"></span>
+        </div>
+        <script type="text/partytown">
+          (function () {
+            const a = document.getElementById('getSearch');
+
+            const elmHref = document.getElementById('testGetSearchHref');
+            elmHref.textContent = a.href;
+
+            const elm = document.getElementById('testGetSearch');
+            elm.textContent = a.search;
+            elm.className = 'testGetSearch';
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>set <a id="setSearch" href="https://builder.io/?a=42&b=23">search</a></strong>
+        <div>
+          <strong>search:</strong><span id="testSetSearch"></span>
+          <strong>href:</strong><span id="testSetSearchHref"></span>
+        </div>
+        <script type="text/partytown">
+          (function () {
+            const a = document.getElementById('setSearch');
+            a.search = '?x=1&y=2';
+
+            const elmHref = document.getElementById('testSetSearchHref');
+            elmHref.textContent = a.href;
+
+            const elm = document.getElementById('testSetSearch');
+            elm.textContent = a.search;
+            elm.className = 'testSetSearch';
+          })();
+        </script>
+      </li>
     </ul>
 
     <hr />