From 1ce9abc7997c5898e3da063104f2a6b1227331d7 Mon Sep 17 00:00:00 2001
From: Dylan Moore <60218243+dymoo@users.noreply.github.com>
Date: Tue, 26 Dec 2023 23:59:33 +0000
Subject: [PATCH] feat: loadScriptsOnMainThread string[] -> (string | RegExp)[]
 (#520)

* loadScriptsOnMainThread string[] -> (string | RegExp)[]

* alter documentation

* regex-test-script.js test

* Update tests/integrations/load-scripts-on-main-thread/index.html

Co-authored-by: Giorgio Boa <35845425+gioboa@users.noreply.github.com>

* update documentation

---------

Co-authored-by: Giorgio Boa <35845425+gioboa@users.noreply.github.com>
---
 docs/configuration.md                         |  2 +-
 src/integration/api.md                        |  2 +-
 src/lib/types.ts                              |  4 ++--
 src/lib/web-worker/worker-script.ts           |  2 +-
 .../load-scripts-on-main-thread/index.html    | 24 ++++++++++++++++++-
 .../load-scripts-on-main-thread.spec.ts       |  3 +++
 .../regex-test-script.js                      |  3 +++
 7 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 tests/integrations/load-scripts-on-main-thread/regex-test-script.js

diff --git a/docs/configuration.md b/docs/configuration.md
index 3e8afe59..b83a0867 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -9,7 +9,7 @@ Partytown does not require a config for it to work, however a config can be set
 | `debug`      | When `true`, Partytown scripts are not inlined and not minified. See the [Debugging](/debugging) docs on how to enable more logging.                                                                                      |
 | `forward`    | An array of strings representing function calls on the main thread to forward to the web worker. See [Forwarding Events and Triggers](/forwarding-events) for more info.                                                  |
 | `lib`        | Path where the Partytown library can be found your server. Note that the path must both start and end with a `/` character, and the files must be hosted from the same origin as the webpage. Default is `/~partytown/`   |
-| `loadScriptsOnMainThread` | An array of strings used to filter out which script are executed via Partytown and the main thread. An example is as follows: `loadScriptsOnMainThread: ["https://test.com/analytics.js", "inline-script-id"]`.|
+| `loadScriptsOnMainThread` | An array of strings or regular expressions (RegExp) used to filter out which script are executed via Partytown and the main thread. An example is as follows: `loadScriptsOnMainThread: ["https://test.com/analytics.js", "inline-script-id", /regex-matched-script\.js/]`.|
 | `resolveUrl` | Hook that is called to resolve URLs which can be used to modify URLs. The hook uses the API: `resolveUrl(url: URL, location: URL, method: string)`. See the [Proxying Requests](/proxying-requests) for more information. |
 | `nonce` | The nonce property may be set on script elements created by Partytown. This should be set only when dealing with content security policies and when the use of `unsafe-inline` is disabled (using `nonce-*` instead). |
 
diff --git a/src/integration/api.md b/src/integration/api.md
index e52099cd..4aed4fd5 100644
--- a/src/integration/api.md
+++ b/src/integration/api.md
@@ -24,7 +24,7 @@ export interface PartytownConfig {
     get?: GetHook;
     globalFns?: string[];
     lib?: string;
-    loadScriptsOnMainThread?: string[];
+    loadScriptsOnMainThread?: (string | RegExp)[];
     logCalls?: boolean;
     logGetters?: boolean;
     logImageRequests?: boolean;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 97c6e946..7cd40679 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -443,10 +443,10 @@ export interface PartytownConfig {
    * This array can be used to filter which script are executed via
    * Partytown and which you would like to execute on the main thread.
    *
-   * @example loadScriptsOnMainThread:['https://test.com/analytics.js', 'inline-script-id']
+   * @example loadScriptsOnMainThread:['https://test.com/analytics.js', 'inline-script-id', /regex-matched-script\.js/]
    * // Loads the `https://test.com/analytics.js` script on the main thread
    */
-  loadScriptsOnMainThread?: string[];
+  loadScriptsOnMainThread?: (string | RegExp)[];
   get?: GetHook;
   set?: SetHook;
   apply?: ApplyHook;
diff --git a/src/lib/web-worker/worker-script.ts b/src/lib/web-worker/worker-script.ts
index 6e1544ed..730f72dd 100644
--- a/src/lib/web-worker/worker-script.ts
+++ b/src/lib/web-worker/worker-script.ts
@@ -28,7 +28,7 @@ export const patchHTMLScriptElement = (WorkerHTMLScriptElement: any, env: WebWor
 
         if (this.type && config.loadScriptsOnMainThread) {
           const shouldExecuteScriptViaMainThread = config.loadScriptsOnMainThread.some(
-            (scriptUrl) => scriptUrl === url
+            (scriptUrl) => new RegExp(scriptUrl).test(url)
           );
 
           if (shouldExecuteScriptViaMainThread) {
diff --git a/tests/integrations/load-scripts-on-main-thread/index.html b/tests/integrations/load-scripts-on-main-thread/index.html
index eecbc698..b2083232 100644
--- a/tests/integrations/load-scripts-on-main-thread/index.html
+++ b/tests/integrations/load-scripts-on-main-thread/index.html
@@ -15,7 +15,8 @@
       logScriptExecution: true,
       loadScriptsOnMainThread: [
         `http://${location.host}/tests/integrations/load-scripts-on-main-thread/test-script.js`,
-        `inline-test-script`
+        `inline-test-script`,
+        /regex-test-script\.js/
       ],
     };
   </script>
@@ -29,6 +30,15 @@
       document.head.appendChild(scriptElement);
     })()
   </script>
+  <script type='text/partytown'>
+    (() => {
+      const scriptElement = document.createElement("script");
+      scriptElement.type = "text/javascript";
+      scriptElement.src = "./regex-test-script.js";
+      scriptElement.id = "regexTestScript";
+      document.head.appendChild(scriptElement);
+    })()
+  </script>
 
   <style>
       body {
@@ -91,6 +101,18 @@ <h1>Load scripts on main thread 🎉</h1>
         })()
       </script>
     </li>
+    <li>
+      <strong>Script Type:</strong>
+      <code id='regexTestScriptType'></code>
+      <script type='text/partytown'>
+        (() => {
+          const scriptElement = document.getElementById('regexTestScript');
+          const codeElement = document.getElementById('regexTestScriptType');
+          
+          codeElement.innerText = scriptElement.type;
+        })()
+      </script>
+    </li>
     <li>
       <strong>Script Source:</strong>
       <code id='testScriptSource'></code>
diff --git a/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts b/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts
index 014685df..97f73fd7 100644
--- a/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts
+++ b/tests/integrations/load-scripts-on-main-thread/load-scripts-on-main-thread.spec.ts
@@ -7,6 +7,9 @@ test('integration window accessor', async ({ page }) => {
   const scriptElement = page.locator('#testScript');
   await expect(scriptElement).toHaveAttribute('type', 'text/javascript')
 
+  const regexScriptElement = page.locator('#regexTestScript');
+  await expect(regexScriptElement).toHaveAttribute('type', 'text/javascript')
+
   await page.waitForSelector('.testInlineScript');
   const testInlineScript = page.locator('#testInlineScript');
   await expect(testInlineScript).toHaveText('12');
diff --git a/tests/integrations/load-scripts-on-main-thread/regex-test-script.js b/tests/integrations/load-scripts-on-main-thread/regex-test-script.js
new file mode 100644
index 00000000..a6facc26
--- /dev/null
+++ b/tests/integrations/load-scripts-on-main-thread/regex-test-script.js
@@ -0,0 +1,3 @@
+(() => {
+    document.body.classList.add('completed');
+})()