Emit bundler-friendly URL locators

This PR changes loading of main Wasm binary as well as helper Worker used by PThread integration to use a URL expression that can be both used directly by browsers as well as statically detected by bundlers like Webpack.

The main caveats are:
1. Emscripten is very configurable, so some of the new conditions might look odd but are necessary to keep backward compatibility and allow overriding bundler-friendly URL with a custom one during runtime.
2. None of Closure, our fork of Terser, and `eval` (which is used by Emscripten's JS library preprocessing) support `import.meta` expressions without more work. While Closure seems to have _just_ implemented such support, and it wouldn't be too hard to add it to our Terser too, `eval` usage would still require a string replacement before execution (or complete revamp).
  To keep implementation simple, for now I went with just string replacement that covers all tools - this way, we replace `import.meta` -> `EMSCRIPTEN$IMPORT$META` only once per library when JS is added before any of this tooling is executed, and then replace back after everything is done right before the final emit.
  We might want to revisit this in future, but for now this works well and covers all the tooling incompatibilities together.
3. Webpack assumes that all modules are strict mode, so I updated `worker.js` correspondingly to avoid usages of global `this` (which is `undefined` in strict mode and breaks in bundled code) and instead using `self`; I've also updated the Node.js adapter code to satisfy strict requirements too and to be a bit simpler.
4. This won't work in Node.js, since it's not compatible with `EXPORT_ES6` in general yet.
5. I've only updated places for loading main Wasm binary and PThread code. This should cover majority of use-cases, but other external files like side modules, proxy-to-pthread, proxy-to-worker, external memory loading etc. are not covered by this PR and need to be updated separately if someone wants them to work with bundlers out of the box too.

Fixes #13571.

Author: RReverser

emcc.py

@@ -1206,7 +1206,8 @@ def phase_setup(state):
   else:
     target = 'a.out.js'
 
-  settings.TARGET_BASENAME = unsuffixed_basename(target)
+  settings.TARGET_BASENAME_WITH_EXT = os.path.basename(target)
+  settings.TARGET_BASENAME = unsuffixed(settings.TARGET_BASENAME_WITH_EXT)
 
   if settings.EXTRA_EXPORTED_RUNTIME_METHODS:
     diagnostics.warning('deprecated', 'EXTRA_EXPORTED_RUNTIME_METHODS is deprecated, please use EXPORTED_RUNTIME_METHODS instead')
@@ -2534,6 +2535,16 @@ def phase_final_emitting(options, target, wasm_target, memfile):
     shared.JS.handle_license(final_js)
     shared.run_process([shared.PYTHON, shared.path_from_root('tools', 'hacky_postprocess_around_closure_limitations.py'), final_js])
 
+  # Unmangle previously mangled `import.meta` references in both main code and libraries.
+  # See also: `preprocess` in parseTools.js.
+  if settings.EXPORT_ES6 and settings.USE_ES6_IMPORT_META:
+    with open(final_js, 'r+') as f:
+      src = f.read()
+      src = src.replace('EMSCRIPTEN$IMPORT$META', 'import.meta')
+      f.seek(0)
+      f.write(src)
+      f.truncate()
+
   # Apply pre and postjs files
   if options.extern_pre_js or options.extern_post_js:
     logger.debug('applying extern pre/postjses')

src/closure-externs/closure-externs.js

@@ -11,6 +11,9 @@
  * The closure_compiler() method in tools/shared.py refers to this file when calling closure.
  */
 
+// Special placeholder for `import.meta`.
+var EMSCRIPTEN$IMPORT$META;
+
 // Closure externs used by library_sockfs.js
 
 /**

src/library_pthread.js

@@ -442,7 +442,11 @@ var LibraryPThread = {
         // it could load up the same file. In that case, developer must either deliver the Blob
         // object in Module['mainScriptUrlOrBlob'], or a URL to it, so that pthread Workers can
         // independently load up the same main application file.
-        'urlOrBlob': Module['mainScriptUrlOrBlob'] || _scriptDir,
+        'urlOrBlob': Module['mainScriptUrlOrBlob']
+#if !EXPORT_ES6
+        || _scriptDir
+#endif
+        ,
 #if WASM2JS
         // the polyfill WebAssembly.Memory instance has function properties,
         // which will fail in postMessage, so just send a custom object with the
@@ -469,6 +473,17 @@ var LibraryPThread = {
 #if MINIMAL_RUNTIME
       var pthreadMainJs = Module['worker'];
 #else
+#if EXPORT_ES6 && USE_ES6_IMPORT_META
+      // If we're using module output and there's no explicit override, use bundler-friendly pattern.
+      if (!Module['locateFile']) {
+#if PTHREADS_DEBUG
+        out('Allocating a new web worker from ' + new URL('{{{ PTHREAD_WORKER_FILE }}}', import.meta.url));
+#endif
+        // Use bundler-friendly `new Worker(new URL(..., import.meta.url))` pattern; works in browsers too.
+        PThread.unusedWorkers.push(new Worker(new URL('{{{ PTHREAD_WORKER_FILE }}}', import.meta.url)));
+        return;
+      }
+#endif
       // Allow HTML module to configure the location where the 'worker.js' file will be loaded from,
       // via Module.locateFile() function. If not specified, then the default URL 'worker.js' relative
       // to the main html file is loaded.

src/parseTools.js

@@ -33,6 +33,14 @@ function processMacros(text) {
 // Param filenameHint can be passed as a description to identify the file that is being processed, used
 // to locate errors for reporting and for html files to stop expansion between <style> and </style>.
 function preprocess(text, filenameHint) {
+  if (EXPORT_ES6 && USE_ES6_IMPORT_META) {
+    // `eval`, Terser and Closure don't support module syntax; to allow it,
+    // we need to temporarily replace `import.meta` usages with placeholders
+    // during preprocess phase, and back after all the other ops.
+    // See also: `phase_final_emitting` in emcc.py.
+    text = text.replace(/\bimport\.meta\b/g, 'EMSCRIPTEN$IMPORT$META');
+  }
+
   const IGNORE = 0;
   const SHOW = 1;
   // This state is entered after we have shown one of the block of an if/elif/else sequence.

src/preamble.js

@@ -746,10 +746,15 @@ function instrumentWasmTableWithAbort() {
 }
 #endif
 
+#if EXPORT_ES6
+// Use bundler-friendly `new URL(..., import.meta.url)` pattern; works in browsers too.
+var wasmBinaryFile = new URL('{{{ WASM_BINARY_FILE }}}', import.meta.url).toString();
+#else
 var wasmBinaryFile = '{{{ WASM_BINARY_FILE }}}';
 if (!isDataURI(wasmBinaryFile)) {
   wasmBinaryFile = locateFile(wasmBinaryFile);
 }
+#endif
 
 function getBinary(file) {
   try {
@@ -809,7 +814,7 @@ function getBinaryPromise() {
     }
 #endif
   }
-    
+
   // Otherwise, getBinary should be able to get it synchronously
   return Promise.resolve().then(function() { return getBinary(wasmBinaryFile); });
 }

src/settings_internal.js

@@ -32,6 +32,9 @@ var SIDE_MODULE_IMPORTS = [];
 // stores the base name of the output file (-o TARGET_BASENAME.js)
 var TARGET_BASENAME = '';
 
+// stores the base name of the output file with extension (TARGET_BASENAME.js or TARGET_BASENAME.mjs)
+var TARGET_BASENAME_WITH_EXT = '';
+
 // Indicates that the syscalls (which we see statically) indicate that they need
 // full filesystem support. Otherwise, when just a small subset are used, we can
 // get away without including the full filesystem - in particular, if open() is

src/worker.js

@@ -8,13 +8,53 @@
 // This is the entry point file that is loaded first by each Web Worker
 // that executes pthreads on the Emscripten application.
 
+'use strict';
+
+var Module = {};
+
+#if ENVIRONMENT_MAY_BE_NODE
+// Node.js support
+if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
+  // Create as web-worker-like an environment as we can.
+
+  var nodeWorkerThreads = require('worker_threads');
+
+  var parentPort = nodeWorkerThreads.parentPort;
+
+  parentPort.on('message', function(data) {
+    onmessage({ data: data });
+  });
+
+  var nodeFS = require('fs');
+
+  Object.assign(global, {
+    self: global,
+    require: require,
+    Module: Module,
+    location: {
+      href: __filename
+    },
+    Worker: nodeWorkerThreads.Worker,
+    importScripts: function(f) {
+      (0, eval)(nodeFS.readFileSync(f, 'utf8'));
+    },
+    postMessage: function(msg) {
+      parentPort.postMessage(msg);
+    },
+    performance: global.performance || {
+      now: function() {
+        return Date.now();
+      }
+    },
+  });
+}
+#endif // ENVIRONMENT_MAY_BE_NODE
+
 // Thread-local:
 #if EMBIND
 var initializedJS = false; // Guard variable for one-time init of the JS state (currently only embind types registration)
 #endif
 
-var Module = {};
-
 #if ASSERTIONS
 function assert(condition, text) {
   if (!condition) abort('Assertion failed: ' + text);
@@ -38,7 +78,7 @@ var out = function() {
 }
 #endif
 var err = threadPrintErr;
-this.alert = threadAlert;
+self.alert = threadAlert;
 
 #if !MINIMAL_RUNTIME
 Module['instantiateWasm'] = function(info, receiveInstance) {
@@ -90,7 +130,7 @@ function moduleLoaded() {
 #endif
 }
 
-this.onmessage = function(e) {
+self.onmessage = function(e) {
   try {
     if (e.data.cmd === 'load') { // Preload command that is called once per worker to parse and load the Emscripten code.
 #if MINIMAL_RUNTIME
@@ -128,7 +168,7 @@ this.onmessage = function(e) {
 #endif
 
 #if MODULARIZE && EXPORT_ES6
-      import(e.data.urlOrBlob).then(function({{{ EXPORT_NAME }}}) {
+      (e.data.urlOrBlob ? import(e.data.urlOrBlob) : import('./{{{ TARGET_BASENAME_WITH_EXT }}}')).then(function({{{ EXPORT_NAME }}}) {
         return {{{ EXPORT_NAME }}}.default(Module);
       }).then(function(instance) {
         Module = instance;
@@ -295,55 +335,3 @@ this.onmessage = function(e) {
     throw ex;
   }
 };
-
-#if ENVIRONMENT_MAY_BE_NODE
-// Node.js support
-if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
-  // Create as web-worker-like an environment as we can.
-  self = {
-    location: {
-      href: __filename
-    }
-  };
-
-  var onmessage = this.onmessage;
-
-  var nodeWorkerThreads = require('worker_threads');
-
-  global.Worker = nodeWorkerThreads.Worker;
-
-  var parentPort = nodeWorkerThreads.parentPort;
-
-  parentPort.on('message', function(data) {
-    onmessage({ data: data });
-  });
-
-  var nodeFS = require('fs');
-
-  var nodeRead = function(filename) {
-    return nodeFS.readFileSync(filename, 'utf8');
-  };
-
-  function globalEval(x) {
-    global.require = require;
-    global.Module = Module;
-    eval.call(null, x);
-  }
-
-  importScripts = function(f) {
-    globalEval(nodeRead(f));
-  };
-
-  postMessage = function(msg) {
-    parentPort.postMessage(msg);
-  };
-
-  if (typeof performance === 'undefined') {
-    performance = {
-      now: function() {
-        return Date.now();
-      }
-    };
-  }
-}
-#endif // ENVIRONMENT_MAY_BE_NODE