0

Here's a minimal example of some typescript code:

// codebase.ts
console.log(document.body.shadowRoot);
console.log(document.body.childNodes);

It is proposed that we add the following functions:

// utils.ts
function shadowRoot(n: HTMLElement) {
  // SNIP, check for monkeypatching and maybe return a 'pure' version instead
  return n.shadowRoot;
}

function childNodes(n: HTMLElement) {
  // SNIP, check for monkeypatching and maybe return a 'pure' version instead
  return n.childNodes;
}

And make extensive changes throughout the codebase as follows:

 // codebase.ts
+import { shadowRoot, childNodes } from 'utils';
-console.log(document.body.shadowRoot);
-console.log(document.body.childNodes);
+console.log(shadowRoot(document.body));
+console.log(childNodes(document.body));

The point of these functions is to ensure that we are using 'pure' versions of the underlying DOM functions in the case that they have been monkeypatched via 3rd party code; so as such we don't really want to try to monkeypatch them again.

The correct javascript output is as follows:

"use strict";
function shadowRoot(n) {
    // implementation omitted
    return n.shadowRoot;
}
function childNodes(n) {
    // implementation omitted
    return n.childNodes;
}
console.log(shadowRoot(document.body));
console.log(childNodes(document.body));

My question is whether it is possible to do this transformation as an optional build step, without having to modify codebase.ts?

Without having to ensure that no future developers (or ourselves) regresses and adds code which directly accesses these particular attributes.

Edit: there is a rollup plugin which will do a regex replace, but I don't think that will be robust enough to transform e.g.

 -    const shadowRoot = (n as HTMLElement).shadowRoot;
 +    const shadowRoot = shadowRoot((n as HTMLElement));
3
  • 1
    Ah, okay, you're asking for a code transformation step. TS doesn't provide much in the way of built-in functionality for this. The TypeScript compiler API could potentially give you a way of writing your own AST transformer, but who knows if you want to take that on. Maybe ts-patch is what you're looking for? But it's outside my area of expertise so I'll be quiet now. Commented Jun 17, 2024 at 14:37
  • 1
    Thanks for reading and helping me improve question. And I didn't know about the compiler api, or ts-patch. Commented Jun 17, 2024 at 14:52
  • Note ts-patch. Seen as your doing this to remove monkey patching, it would seem strange then to monkey patch typescript. Be aware this might break in the future like ttypscript it replaced. Typescript having proper plugin support would have been nice.. Commented Jun 17, 2024 at 15:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.