[feat] optional global context setting in ESM

[soma-ryo]

Hi,

Firstly, I love esbuild and use it many times in my dev stuffs.
Thank you for all of your contributions.
And, I have a feature request for esbuild.

I want to change the global context this to some specific value such as this or window.
But esbuild transform them to undefined for now.

// entry.js
import { a } from './a'
(function iife(win) {
  console.log({ a });
  win.someVariable = true;
})(this);

// a.js
export const a = 42;

npx esbuild entry.js --bundle
 > entry.js:5:3: warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
    5 │ })(this);
      ╵    ~~~~
   entry.js:1:0: note: This file is considered an ECMAScript module because of the "import" keyword here
    1 │ import { a } from './a'
      ╵ ~~~~~~

1 warning
(() => {
  // a.js
  var a = 42;

  // entry.js
  (function iife(win) {
    console.log({ a });
    win.someVariable = true;
  })(void 0);
})();

I've already read this doc about the part that mentions it, but actually, rollup can change the global scope this through --context option.

without option

npx rollup entry.js

entry.js → stdout...
const a = 42;

(function iife(win) {
  console.log({ a });
  win.someVariable = true;
})(undefined);
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
entry.js
3:   console.log({ a });
4:   win.someVariable = true;
5: })(this);

with option

npx rollup entry.js --context=this

entry.js → stdout...
const a = 42;

(function iife(win) {
  console.log({ a });
  win.someVariable = true;
})(this);

Then, I'd like to do same thing ultra fast with esbuild.
And, I was wondering what you think about that.

[evanw]

I suppose it could be reasonable to allow you to replace top-level this by adding support for it to the existing define feature. Then you could do --define:this=window.

Edit: Keep in mind that doing this will likely break some packages that expect this to be the CommonJS exports object of the module.

[soma-ryo]

@evanw
Thanks for replying to me!!

I tried that with define option, but it didn't work...
As other variables are working correctly, I kind of think it looks like this is a special variable in global context.

npx esbuild entry.js --bundle --define:this=window
 > entry.js:5:3: warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
    5 │ })(this);
      ╵    ~~~~
   entry.js:1:0: note: This file is considered an ECMAScript module because of the "import" keyword here
    1 │ import { a } from './a'
      ╵ ~~~~~~

1 warning
(() => {
  // a.js
  var a = 42;

  // entry.js
  (function iife(win) {
    console.log({ a });
    win.someVariable = true;
  })(void 0);
})();