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 <[email protected]>

* update documentation

---------

Co-authored-by: Giorgio Boa <[email protected]>

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). |
 

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;

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;

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) {

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>

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

tests/integrations/load-scripts-on-main-thread/regex-test-script.js

@@ -0,0 +1,3 @@
+(() => {
+    document.body.classList.add('completed');
+})()