loadScriptsOnMainThread regex stringify bug

[azurre99]

There seems to be a problem with how regex is being serialized in the partytown/src/module.ts. As showed on first picture I pass to partytown config two regular expressions, however on second picture these two regular expressions get converted to empty objects, when inspecting inside the browser.

Current workaround is to include full urls of all the scripts you want to run on the main thread, but this is not optimal, as these are scripts controlled by GTM in my case, and URLs can change, so regex would be really nice here.

[muhsin-life]

can u give a minimal reproducible example?

[elcih17]

I'm experiencing the same issue.

First, loadScriptsOnMainThread is not whitelisted in this context.

partytown/src/module.ts

Line 61 in 4c534d9

const fns = ['resolveUrl', 'get', 'set', 'apply']

As a result, the following code causes RegExp value to be serialized as {} :

partytown/src/module.ts

Line 64 in 4c534d9

([key, value]) => [key, fns.includes(key) ? value : JSON.stringify(value)] as [string, string],

JSON.stringify(['https://example.com', /https:\/\/example\.com/])
// '["https://example.com",{}]'

However, even if loadScriptsOnMainThread is added to whitelist, the problem persists.
It seems that genObjectFromRawEntries method in knitwork does not support RegExp code generation.

partytown/src/module.ts

Line 66 in 4c534d9

const renderedConfig = genObjectFromRawEntries(rawConfig).replace(/\s*\n\s*/g, ' ')

Here's a relevant test case setup (in knitwork):

import { expect, describe, it } from "vitest";
import { genObjectFromRawEntries } from "../src";
import { genTestTitle } from "./_utils";

const genObjectFromRawTests = [
  {
    obj: {
      resolveUrl: "https://example.com",
      loadScriptsOnMainThread: [
        "https://example.com",
        /https:\/\/example\.com/,
      ],
    },
    code: [
      "{",
      "  resolveUrl: https://example.com,",
      "  loadScriptsOnMainThread: [",
      "    https://example.com,",
      "    /https:\\/\\/example\\.com\\/,",
      "  ]",
      "}",
    ].join("\n"),
  },
];

describe("genObjectFromRawEntries", () => {
  for (const t of genObjectFromRawTests) {
    it(genTestTitle(t.code), () => {
      const code = genObjectFromRawEntries(Object.entries(t.obj));
      expect(code).to.equal(t.code);
    });
  }
});

Test results:

FAIL  test/regexp.test.ts > genObjectFromRawEntries > {   resolveUrl: https://example.com,   loadScriptsOnMainThread: [     https://example.com,     /https:\/\/example\.com\/,   ] }
AssertionError: expected '{\n  resolveUrl: https://example.com,…' to equal '{\n  resolveUrl: https://example.com,…'

- Expected
+ Received

  {
    resolveUrl: https://example.com,
    loadScriptsOnMainThread: [
      https://example.com,
-     /https:\/\/example\.com\/,
+     {}
    ]
  }

I hope this information helps in resolving the issue.