fix: loadScriptsOnMainThread breaks when using a regexp

[franpeza]

What is it?

• Feature / enhancement
• Bug
• Docs / tests

Description

This PR fixes two issues with loadScriptsOnMainThread:

• When using a regexp in loadScriptsOnMainThread all scripts will be executed in the main thread, even if their url doesn't match the regexp.
• If a string is used and it includes some characters reserved by regexp (such as interrogation marks), even if the script src seems to match, the script won't be executed in the main thread.

You can check the issue if you execute the new tests added (checking out the first commit of the PR) without the fix included in the PR (second commit).
I added new tests in tests/integrations/load-scripts-on-main-thread to display whether the scripts in the page have been executed on the main thread or in the background. In addition I added a new script, background-test-script.js that should be executed in the background since is not included in loadScriptsOnMainThread. If you execute the test before the fix is applied this is what is displayed:

The script is executed on the main thread but it shouldn't. After the fix we get the expected behavior:

• The main problem in the first issue is: when the config is serialised using JSON.stringify https://github.com/BuilderIO/partytown/blob/486b5a9df92dad22137bd0e07b8deeb6f9c2e8c5/src/lib/sandbox/read-main-platform.ts#L64 the regexp gets serialised unexpectedly as an empty object. Once this empty object is used to create a RegExp object it will match any string.

• For the second issue since the string provided is used to create a RegExp https://github.com/BuilderIO/partytown/blob/486b5a9df92dad22137bd0e07b8deeb6f9c2e8c5/src/lib/web-worker/worker-script.ts#L31, if it contains a regexp wildcard/operator (such as dots or question marks) it will be handled as those regexp operators and wildcards instead of an actual character. If this is the case, in most cases (when the resulting regexp is not equivalent to the one expected) the regexp won't match the url to test.

In the solution I provide the regexp is serialised using its source property, and loadScriptsOnMainThread itself with this type [type: 'string' | 'regexp', value: string][]. So if we have these values:

loadScriptsOnMainThread = [/.*mywebsite\.com/, 'https://www.anotherawesomewebsite.com/resource'];

the property will be serialised and used internally as:

loadScriptsOnMainThread = [
  ['regexp', '/.*mywebsite.com/'],
  ['string', 'https://www.anotherawesomewebsite.com/resource'],
];

Note that the type of the public property won't change.

This way we can know beforehand if the string provided is a plain string (that will be escaped when creating the regexp) or a regexp source (and won't be escaped). Therefore, internally the prop will be used as you would expect:

loadScriptsOnMainThread = [
  /.*mywebsite.com/,
  /https:\/\/www\.anotherawesomewebsite\.com\/resource/,
];

It would be great to discuss and apply any suggestion 😄

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
partytown	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 27, 2024 8:04am