Reverse monkey patch built in methods to support LWC

[Juice10]

LWC monkey patches a lot of built in methods.

This PR gets around that issue by pulling new references from a temporary iframe, which hasn't been monkey patched yet.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 54e33aef89d600c1c452db308fd98db5a150c47e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

| Name | Type | | ---------------------------------------- | ----- | | rrweb-snapshot | Patch | | rrweb | Patch | | @rrweb/utils | Patch | | rrdom | Patch | | rrdom-nodejs | Patch | | rrweb-player | Patch | | @rrweb/all | Patch | | @rrweb/replay | Patch | | @rrweb/record | Patch | | @rrweb/types | Patch | | @rrweb/packer | Patch | | @rrweb/web-extension | Patch | | rrvideo | Patch | | @rrweb/rrweb-plugin-console-record | Patch | | @rrweb/rrweb-plugin-console-replay | Patch | | @rrweb/rrweb-plugin-sequential-id-record | Patch | | @rrweb/rrweb-plugin-sequential-id-replay | Patch | | @rrweb/rrweb-plugin-canvas-webrtc-record | Patch | | @rrweb/rrweb-plugin-canvas-webrtc-replay | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[eoghanmurray]

I've asked a SO question here to see if there are any ideas on how we might achieve the goals of this PR with less invasive code changes: https://stackoverflow.com/questions/78633141/typescript-transform-property-to-function-call

Could we add a new (optional) output target, which pulls in the added functions, and also includes a rollup plugin to find/replace all the needed property accesses?

https://www.npmjs.com/package/rollup-plugin-modify#example-using-regexp-for-find-and-a-function-for-replace

[eoghanmurray]

From SO, the first replier mentions https://www.npmjs.com/package/ts-patch I haven't looked at it, but maybe would work better than a regex solution

[Juice10]

I've asked a SO question here to see if there are any ideas on how we might achieve the goals of this PR with less invasive code changes: https://stackoverflow.com/questions/78633141/typescript-transform-property-to-function-call

Could we add a new (optional) output target, which pulls in the added functions, and also includes a rollup plugin to find/replace all the needed property accesses?

https://www.npmjs.com/package/rollup-plugin-modify#example-using-regexp-for-find-and-a-function-for-replace

I agree that it would be really nice if we could use some sort of general purpose solution to rewrite this out of the box. Currently we have a couple things that make this difficult:

• we only need the rewrite on record side, not replay, and only some shared utils
  • if we move all record code to @rrweb/record we could possibly do this
• one record side we can't rewrite everything because for example we have serializedNode's which include a childNodes reference, and those should not go via the rewrite
  • to deal with this one could add extra checks to see if the node that was passed to childNodes(NODE) is actually a dom node.
  • Downside: instanceof Node won't work as it has to support iframes, so checks become more complicated
  • Downside: every extra check we add is more performance overhead since many of these functions are already hot-paths themselves.
  • we can't gracefully send the wrong type of node to childNodes(NODE) as the errors are pretty harsh and unforgiving.
• tests need to happen using the rewritten code
  • otherwise we might break something and only find out in production
  • we could do this by moving all record tests to @rrweb/record, have it for patched on build time for @rrweb/record. And we'd need to move all integration/e2e tests to @rrweb/all, but which should use the patched version of @rrweb/record under the hood.