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.

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

[eoghanmurray]

I've just noticed that I've added code in stylesheet-assets branch that runs over n.childNodes but can accept either a serializedElementNodeWithId or a HTMLStyleElement (or an rrdom equivalent):
https://github.com/rrweb-io/rrweb/pull/1475/files#diff-0d9a03e75eacff8f6be89336b49419b210455c1a81d8f46fae7cea2d83a8f93eR156

Presumably I'll have to do some type checking to figure out whether to call n.childNodes or dom.childNodes(n) etc. :(

[YunFeng0817]

Great feature for recording LWS based websites!