fix: update worker-script innerHTML implementation

[slawekkolodziej]

What is it?

• Feature / enhancement
• Bug
• Docs / tests

Description

There are some bugs in Partytown's <script> implementation that were reported looong time ago along with MRs that were supposed to fix those bugs, unfortunately none was merged yet:

• fix: update worker-script innerHTML implementation #234
• fix: gtm scripts not working with loadScriptsOnMainThread by id #399

In summary:

1. Partytown does not correctly handle nested innerHTML on <script> elements.

Take a look at this code:

div = document.createElement('div');
div.innerHTML = '<script>console.log(42);</script>';
console.log(div.firstChild.innerHTML);

It should log the content of the script. Unfortunately when run inside Partytown it returns empty string.

2. Partytown does not properly handle code like this:

script = document.createElement('script');
script.text = 'console.log(42);';

GTM uses this internally when setting content of scripts added as custom HTML tags.

Use cases and why

I use GTM through Partytown. However I want to have some custom HTML tags that are always executed on main thread.

Code for custom HTML tag looks somewhat like this:

 <script type="text/javascript" id="load-on-main">
  (function () {
    ... some third-party js code ...
  })()
</script>

I then whitelist script IDs with loadScriptsOnMainThread. When this is deployed, I end up with nested calls for script.innerHTML and script.text. Changes in this MR fixes the problem.

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	Mar 20, 2024 10:22pm

[gioboa]

Thanks @slawekkolodziej for your commitment