fix: update location

QwikDev · Dec 8, 2021 · 01651dd · 01651dd · vercel · Dec 8, 2021
1 parent 86efdb8
commit 01651dd
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 13 deletions.
diff --git a/src/lib/sandbox/main-register-window.ts b/src/lib/sandbox/main-register-window.ts
@@ -16,22 +16,43 @@ export const registerWindow = (
     windowIds.set($window$, $winId$);
 
     const doc = $window$.document;
-    const $url$ = doc.baseURI;
+    const history = $window$.history;
 
     const envData: InitializeEnvironmentData = {
       $winId$,
       $parentWinId$: windowIds.get($window$.parent)!,
-      $url$,
+      $url$: doc.baseURI,
     };
 
     const sendInitEnvData = () =>
       worker.postMessage([WorkerMessageType.InitializeEnvironment, envData]);
 
+    const pushState = history.pushState.bind(history);
+    const replaceState = history.replaceState.bind(history);
+
+    const onLocationChange = () =>
+      setTimeout(() =>
+        worker.postMessage([WorkerMessageType.LocationUpdate, $winId$, doc.baseURI])
+      );
+
+    history.pushState = (data, _, url) => {
+      pushState(data, _, url);
+      onLocationChange();
+    };
+
+    history.replaceState = (data, _, url) => {
+      replaceState(data, _, url);
+      onLocationChange();
+    };
+
+    $window$.addEventListener('popstate', onLocationChange);
+    $window$.addEventListener('hashchange', onLocationChange);
+
     winCtxs[$winId$] = {
       $winId$,
       $window$,
-      $url$,
     };
+
     if (debug) {
       winCtxs[$winId$]!.$startTime$ = performance.now();
     }

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -34,7 +34,8 @@ export type MessageFromSandboxToWorker =
   | [WorkerMessageType.InitializedEnvironment, WinId]
   | [WorkerMessageType.InitializeNextScript, InitializeScriptData]
   | [WorkerMessageType.RefHandlerCallback, RefHandlerCallbackData]
-  | [WorkerMessageType.ForwardMainTrigger, ForwardMainTriggerData];
+  | [WorkerMessageType.ForwardMainTrigger, ForwardMainTriggerData]
+  | [WorkerMessageType.LocationUpdate, number, string];
 
 export const enum WorkerMessageType {
   MainDataRequestFromWorker,
@@ -48,6 +49,7 @@ export const enum WorkerMessageType {
   ForwardMainTrigger,
   ForwardWorkerAccessRequest,
   AsyncAccessRequest,
+  LocationUpdate,
 }
 
 export interface ForwardMainTriggerData {
@@ -70,7 +72,6 @@ export interface MainWindowContext {
   $winId$: number;
   $isInitialized$?: number;
   $startTime$?: number;
-  $url$: string;
   $window$: MainWindow;
 }
 

diff --git a/src/lib/web-worker/index.ts b/src/lib/web-worker/index.ts
@@ -36,6 +36,8 @@ const receiveMessageFromSandboxToWorker = (ev: MessageEvent<MessageFromSandboxTo
           winId
         );
       }
+    } else if (msgType === WorkerMessageType.LocationUpdate) {
+      environments[msg[1]].$location$.href = msg[2];
     }
   } else if (msgType === WorkerMessageType.MainDataResponseToWorker) {
     // received initial main data

diff --git a/tests/platform/history/history.spec.ts b/tests/platform/history/history.spec.ts
@@ -11,19 +11,41 @@ test('history', async ({ page }) => {
   const testPushStateStr = page.locator('#testPushStateStr');
   await expect(testPushStateStr).toHaveText('88');
 
+  const buttonPushState = page.locator('#buttonPushState');
+  await buttonPushState.click();
   const testPushStateObj = page.locator('#testPushStateObj');
   await expect(testPushStateObj).toHaveText(JSON.stringify({ mph: 88 }));
 
+  await page.waitForSelector('.testPushStateUrl');
+  const testPushStateUrl = page.locator('#testPushStateUrl');
+  await expect(testPushStateUrl).toHaveText('/platform/history/push-state');
+
+  const buttonGoBack = page.locator('#buttonGoBack');
+  await buttonGoBack.click();
+  await page.waitForSelector('.testGoBack');
+  const testGoBack = page.locator('#testGoBack');
+  await expect(testGoBack).toHaveText('/platform/history/');
+
+  const buttonGoForward = page.locator('#buttonGoForward');
+  await buttonGoForward.click();
+  await page.waitForSelector('.testGoForward');
+  const testGoForward = page.locator('#testGoForward');
+  await expect(testGoForward).toHaveText('/platform/history/push-state');
+
   const testReplaceState = page.locator('#testReplaceState');
   const buttonReplaceState121 = page.locator('#buttonReplaceState121');
   await buttonReplaceState121.click();
-  const expected121 = new URL('/history/1.21gw', page.url());
+  const expected121 = new URL('/platform/history/1.21gw', page.url());
   await expect(page).toHaveURL(expected121.href);
   await expect(testReplaceState).toHaveText('1955');
 
+  await page.waitForSelector('.testReplaceStateUrl');
+  const testReplaceStateUrl = page.locator('#testReplaceStateUrl');
+  await expect(testReplaceStateUrl).toHaveText('/platform/history/1.21gw');
+
   const buttonReplaceState = page.locator('#buttonReplaceState');
   await buttonReplaceState.click();
-  const expectedHistory = new URL('/history/', page.url());
+  const expectedHistory = new URL('/platform/history/', page.url());
   await expect(page).toHaveURL(expectedHistory.href);
   await expect(testReplaceState).toHaveText('1985');
 

diff --git a/tests/platform/history/index.html b/tests/platform/history/index.html
@@ -77,13 +77,64 @@ <h1>History</h1>
       </li>
 
       <li>
-        <strong>pushState({ mph: 88 }, '')</strong>
+        <strong>pushState({ mph: 88 })</strong>
+        <button id="buttonPushState">/history/</button>
         <code id="testPushStateObj"></code>
+        <code id="testPushStateUrl"></code>
         <script type="text/partytown">
           (function () {
-            history.pushState({ mph: 88 }, '');
-            const elm = document.getElementById('testPushStateObj');
-            elm.textContent = JSON.stringify(history.state);
+            const buttonPushState = document.getElementById('buttonPushState');
+            buttonPushState.addEventListener('click', () => {
+              history.pushState({ mph: 88 }, '', '/platform/history/push-state');
+              const elm = document.getElementById('testPushStateObj');
+              elm.textContent = JSON.stringify(history.state);
+
+              setTimeout(() => {
+                const url = document.getElementById('testPushStateUrl');
+                url.textContent = location.pathname;
+                url.className = 'testPushStateUrl';
+              }, 30);
+            });
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>back()</strong>
+        <button id="buttonGoBack">Go Back</button>
+        <code id="testGoBack"></code>
+        <script type="text/javascript">
+          (function () {
+            const buttonGoBack = document.getElementById('buttonGoBack');
+            buttonGoBack.addEventListener('click', () => {
+              history.back();
+
+              setTimeout(() => {
+                const elm = document.getElementById('testGoBack');
+                elm.textContent = location.pathname;
+                elm.className = 'testGoBack';
+              }, 30);
+            });
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>forward()</strong>
+        <button id="buttonGoForward">Go Forward</button>
+        <code id="testGoForward"></code>
+        <script type="text/javascript">
+          (function () {
+            const buttonGoForward = document.getElementById('buttonGoForward');
+            buttonGoForward.addEventListener('click', () => {
+              history.forward();
+
+              setTimeout(() => {
+                const elm = document.getElementById('testGoForward');
+                elm.textContent = location.pathname;
+                elm.className = 'testGoForward';
+              }, 30);
+            });
           })();
         </script>
       </li>
@@ -93,17 +144,24 @@ <h1>History</h1>
         <button id="buttonReplaceState121">/history/1.21gw</button>
         <button id="buttonReplaceState">/history/</button>
         <code id="testReplaceState"></code>
+        <code id="testReplaceStateUrl"></code>
         <script type="text/partytown">
           (function () {
             const buttonReplaceState121 = document.getElementById('buttonReplaceState121');
             buttonReplaceState121.addEventListener('click', () => {
-              history.pushState({ year: 1955 }, '', '/history/1.21gw');
+              history.pushState({ year: 1955 }, '', '/platform/history/1.21gw');
               document.getElementById('testReplaceState').textContent = history.state.year;
+
+              setTimeout(() => {
+                const url = document.getElementById('testReplaceStateUrl');
+                url.textContent = location.pathname;
+                url.className = 'testReplaceStateUrl';
+              }, 30);
             });
 
             const buttonReplaceState = document.getElementById('buttonReplaceState');
             buttonReplaceState.addEventListener('click', () => {
-              history.replaceState({ year: 1985 }, '', '/history/');
+              history.replaceState({ year: 1985 }, '', '/platform/history/');
               document.getElementById('testReplaceState').textContent = history.state.year;
             });
           })();
@@ -135,6 +193,7 @@ <h1>History</h1>
     </ul>
 
     <hr />
+    <p><a href="/platform/history/">Reset</a></p>
     <p><a href="/">All Tests</a></p>
 
     <script>