feat: update after dynamic script append

BuilderIO · Nov 17, 2022 · 8fce150 · 8fce150 · vercel · Nov 17, 2022
1 parent f0041fb
commit 8fce150
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/src/lib/sandbox/main-register-window.ts b/src/lib/sandbox/main-register-window.ts
@@ -1,7 +1,14 @@
 import { debug } from '../utils';
 import { logMain, normalizedWinId } from '../log';
-import { MainWindow, PartytownWebWorker, WinId, WorkerMessageType, LocationUpdateType } from '../types';
+import {
+  MainWindow,
+  PartytownWebWorker,
+  WinId,
+  WorkerMessageType,
+  LocationUpdateType,
+} from '../types';
 import { winCtxs, windowIds } from './main-constants';
+import { readNextScript } from './read-main-scripts';
 
 export const registerWindow = (
   worker: PartytownWebWorker,
@@ -29,26 +36,30 @@ export const registerWindow = (
     const pushState = history.pushState.bind(history);
     const replaceState = history.replaceState.bind(history);
 
-    const onLocationChange = (type: LocationUpdateType, state: object, newUrl?: string, oldUrl?: string) => {
-      setTimeout(() =>{
-        worker.postMessage([WorkerMessageType.LocationUpdate, {
-          $winId$,
-          type,
-          state,
-          url: doc.baseURI,
-          newUrl,
-          oldUrl
-        }])
+    const onLocationChange = (
+      type: LocationUpdateType,
+      state: object,
+      newUrl?: string,
+      oldUrl?: string
+    ) => {
+      setTimeout(() => {
+        worker.postMessage([
+          WorkerMessageType.LocationUpdate,
+          {
+            $winId$,
+            type,
+            state,
+            url: doc.baseURI,
+            newUrl,
+            oldUrl,
+          },
+        ]);
       });
-    }
+    };
 
     history.pushState = (state, _, newUrl) => {
       pushState(state, _, newUrl);
-      onLocationChange(
-        LocationUpdateType.PushState,
-        state,
-        newUrl?.toString()
-      );
+      onLocationChange(LocationUpdateType.PushState, state, newUrl?.toString());
     };
 
     history.replaceState = (state, _, newUrl) => {
@@ -62,6 +73,9 @@ export const registerWindow = (
     $window$.addEventListener('hashchange', (event) => {
       onLocationChange(LocationUpdateType.HashChange, {}, event.newURL, event.oldURL);
     });
+    $window$.addEventListener('ptupdate', () => {
+      readNextScript(worker, winCtxs[$winId$]!);
+    });
     doc.addEventListener('visibilitychange', () =>
       worker.postMessage([WorkerMessageType.DocumentVisibilityState, $winId$, doc.visibilityState])
     );

diff --git a/tests/platform/script/index.html b/tests/platform/script/index.html
@@ -368,6 +368,27 @@ <h1 class="title">Script</h1>
           })();
         </script>
       </li>
+
+      <li>
+        <strong>appendMainScript</strong>
+        <code id="testAppendMainScript"></code>
+        <script type="text/javascript">
+          (function () {
+            window.addEventListener('load', () => {
+              setTimeout(() => {
+                const script = document.createElement('script');
+                script.type = 'text/partytown';
+                script.innerHTML = `
+                  document.getElementById('testAppendMainScript').textContent = 'ptupdate';
+                  document.getElementById('testAppendMainScript').className = 'testAppendMainScript';
+                `;
+                document.head.appendChild(script);
+                window.dispatchEvent(new CustomEvent('ptupdate'));
+              }, 500);
+            });
+          })();
+        </script>
+      </li>
     </ul>
 
     <hr />

diff --git a/tests/platform/script/script.spec.ts b/tests/platform/script/script.spec.ts
@@ -53,7 +53,7 @@ test('script', async ({ page }) => {
   await page.waitForSelector('.testSrcAttr');
   const testSrcAttr = page.locator('#testSrcAttr');
   const srcAttr = await testSrcAttr.textContent();
-  const srcUrl = new URL(srcAttr);
+  const srcUrl = new URL(srcAttr!);
   expect(srcUrl.pathname).toBe('/tests/platform/script/set-get-attr.js');
 
   await page.waitForSelector('.testSetPropType');
@@ -79,4 +79,8 @@ test('script', async ({ page }) => {
   await page.waitForSelector('.testSourceMappingURL');
   const testSourceMappingURL = page.locator('#testSourceMappingURL');
   await expect(testSourceMappingURL).toHaveText('sourceMappingURL');
+
+  await page.waitForSelector('.testAppendMainScript');
+  const testAppendMainScript = page.locator('#testAppendMainScript');
+  await expect(testAppendMainScript).toHaveText('ptupdate');
 });