Include instance and window on HookOptions

[westonruter]

When experimenting with hooks, I found the context provided in HookOptions to be insufficient for some use cases. For example, I wanted to prevent a script from calling alert() by replacing the call with the construction of a dialog using an apply hook:

<script>
var partytown = {
  apply(opts) {
    if (opts.name === 'alert') {
      const doc = opts.window.document;
      const dialog = doc.createElement('dialog');
      dialog.open = true;
      dialog.appendChild( doc.createTextNode(opts.args[0]) );
      doc.body.appendChild(dialog);
      return undefined;
    }
    return opts.continue;
  },
};
</script>

I found this wasn't possible because the proxied DOM is not exposed to the hook (which I'm here accessing via opts.window.document). So this PR exposes the window as a property on HookOptions.

Another use was trying to solve for was to restrict DOM mutations to the subtree of a given element. I found this was not possible because the instance is not exposed on HookOptions. When it is, I can walk up the DOM node ancestor in a hook to determine if the hook should be prevented or not:

<script>
  var partytown = {
    apply(opts) {
      const { instance } = opts;

      const mutationMethods = new Set(['insertBefore', /*...*/]);
      if (!mutationMethods.has(opts.name)) {
        return opts.continue;
      }

      let isInsideDocument = false;
      let isInsideSandbox = false;
      if ('parentNode' in opts.instance) { // @todo This fails for the style properties which is a CSSStyleDeclaration.
        let parent = instance;
        while (parent) {
          if (parent == instance.ownerDocument.documentElement ) {
            isInsideDocument = true;
          }
          if ( parent.id === 'sandbox' ) {
            isInsideSandbox = true;
          }
          parent = parent.parentNode;
        }
        if ( ! isInsideDocument ) {
          return opts.continue;
        }
        if ( ! isInsideSandbox )  {
          return null;
        }
      }
      return opts.continue;
    },
  };
</script>

(As the @todo notes, this is not going to catch all cases. For example, when mutating an inline style there is no parentNode property available for the CSSStyleDeclaration instance being modified.)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
partytown	✅ Ready (Inspect)	Visit Preview	Nov 14, 2022 at 7:52PM (UTC)

[adamdbradley]

Awesome thanks!