@parcel/packager-js 2.0.0-dev.1712 → 2.0.0-dev.1789

package/lib/DevPackager.js

@@ -40,7 +40,7 @@ function _fs() {
   return data;
 }
 var _utils2 = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PRELUDE = _fs().default.readFileSync(_path().default.join(__dirname, 'dev-prelude.js'), 'utf8').trim().replace(/;$/, '');
 class DevPackager {
   constructor(options, bundleGraph, bundle, parcelRequireName) {
@@ -71,6 +71,7 @@ class DevPackager {
     let prefix = this.getPrefix();
     let lineOffset = (0, _utils().countLines)(prefix);
     let script = null;
+    let usedHelpers = 0;
     this.bundle.traverse(node => {
       let wrapped = first ? '' : ',';
       if (node.type === 'dependency') {
@@ -87,6 +88,9 @@ class DevPackager {
       if (node.type === 'asset') {
         let asset = node.value;
         (0, _assert().default)(asset.type === 'js', 'all assets in a js bundle must be js assets');
+        if (typeof asset.meta.usedHelpers === 'number') {
+          usedHelpers |= asset.meta.usedHelpers;
+        }
 
         // If this is the main entry of a script rather than a module, we need to hoist it
         // outside the bundle wrapper function so that its variables are exposed as globals.
@@ -98,13 +102,24 @@ class DevPackager {
         let dependencies = this.bundleGraph.getDependencies(asset);
         for (let dep of dependencies) {
           let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
+          let specifier = (0, _utils2.getSpecifier)(dep);
           if (this.bundleGraph.isDependencySkipped(dep)) {
-            deps[(0, _utils2.getSpecifier)(dep)] = false;
+            deps[specifier] = false;
           } else if (resolved) {
-            deps[(0, _utils2.getSpecifier)(dep)] = this.bundleGraph.getAssetPublicId(resolved);
+            deps[specifier] = this.bundleGraph.getAssetPublicId(resolved);
           } else {
             // An external module - map placeholder to original specifier.
-            deps[(0, _utils2.getSpecifier)(dep)] = dep.specifier;
+            deps[specifier] = dep.specifier;
+          }
+        }
+
+        // Add dependencies for parcelRequire calls added by runtimes
+        // so that the HMR runtime can correctly traverse parents.
+        let hmrDeps = asset.meta.hmrDeps;
+        if (this.options.hmrOptions && Array.isArray(hmrDeps)) {
+          for (let id of hmrDeps) {
+            (0, _assert().default)(typeof id === 'string');
+            deps[id] = id;
           }
         }
         let {
@@ -135,7 +150,7 @@ class DevPackager {
     });
     let entries = this.bundle.getEntryAssets();
     let mainEntry = this.bundle.getMainEntry();
-    if (!this.isEntry() && this.bundle.env.outputFormat === 'global' || this.bundle.env.sourceType === 'script') {
+    if (!this.isEntry() && this.bundle.env.outputFormat !== 'commonjs' || this.bundle.env.sourceType === 'script') {
       // In async bundles we don't want the main entry to execute until we require it
       // as there might be dependencies in a sibling bundle that hasn't loaded yet.
       entries = entries.filter(a => {
@@ -144,7 +159,24 @@ class DevPackager {
       });
       mainEntry = null;
     }
-    let contents = prefix + '({' + assets + '},' + JSON.stringify(entries.map(asset => this.bundleGraph.getAssetPublicId(asset))) + ', ' + JSON.stringify(mainEntry ? this.bundleGraph.getAssetPublicId(mainEntry) : null) + ', ' + JSON.stringify(this.parcelRequireName) + ')' + '\n';
+    if (usedHelpers & 4) {
+      prefix = prefix.replace('// INSERT_LOAD_HERE', 'newRequire.load = function (url) { return import(distDir + "/" + url); }');
+    }
+    let contents = prefix + '({' + assets + '},' + JSON.stringify(entries.map(asset => this.bundleGraph.getAssetPublicId(asset))) + ', ' + JSON.stringify(mainEntry ? this.bundleGraph.getAssetPublicId(mainEntry) : null) + ', ' + JSON.stringify(this.parcelRequireName);
+    if (usedHelpers & 1) {
+      // Generate a relative path from this bundle to the root of the dist dir.
+      let distDir = (0, _utils().relativePath)(_path().default.dirname(this.bundle.name), '');
+      if (distDir.endsWith('/')) {
+        distDir = distDir.slice(0, -1);
+      }
+      contents += ', ' + JSON.stringify(distDir);
+    } else if (usedHelpers & 2) {
+      contents += ', null';
+    }
+    if (usedHelpers & 2) {
+      contents += ', ' + JSON.stringify(this.bundle.target.publicUrl);
+    }
+    contents += ')\n';
 
     // The entry asset of a script bundle gets hoisted outside the bundle wrapper function
     // so that its variables become globals. We need to replace any require calls for
@@ -179,6 +211,14 @@ class DevPackager {
       for (let b of bundles) {
         importScripts += `importScripts("${(0, _utils().relativeBundlePath)(this.bundle, b)}");\n`;
       }
+    } else if (this.bundle.env.isNode()) {
+      let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
+      for (let b of bundles) {
+        if (b.type !== 'js') {
+          continue;
+        }
+        importScripts += `require("${(0, _utils().relativeBundlePath)(this.bundle, b)}");\n`;
+      }
     }
     return (
       // If the entry asset included a hashbang, repeat it at the top of the bundle

package/lib/ScopeHoistingPackager.js

@@ -59,20 +59,24 @@ var _GlobalOutputFormat = require("./GlobalOutputFormat");
 var _helpers = require("./helpers");
 var _utils2 = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // General regex used to replace imports with the resolved code, references with resolutions,
 // and count the number of newlines in the file for source maps.
 const REPLACEMENT_RE = /\n|import\s+"([0-9a-f]{16}:.+?)";|(?:\$[0-9a-f]{16}\$exports)|(?:\$[0-9a-f]{16}\$(?:import|importAsync|require)\$[0-9a-f]+(?:\$[0-9a-f]+)?)/g;
 const BUILTINS = Object.keys(_globals().default.builtin);
+const BROWSER_BUILTINS = new Set([...BUILTINS, ...Object.keys(_globals().default.browser)]);
+const NODE_BUILTINS = new Set([...BUILTINS, ...Object.keys(_globals().default.node)]);
 const GLOBALS_BY_CONTEXT = {
-  browser: new Set([...BUILTINS, ...Object.keys(_globals().default.browser)]),
+  browser: BROWSER_BUILTINS,
+  'react-client': BROWSER_BUILTINS,
   'web-worker': new Set([...BUILTINS, ...Object.keys(_globals().default.worker)]),
   'service-worker': new Set([...BUILTINS, ...Object.keys(_globals().default.serviceworker)]),
   worklet: new Set([...BUILTINS]),
-  node: new Set([...BUILTINS, ...Object.keys(_globals().default.node)]),
-  'electron-main': new Set([...BUILTINS, ...Object.keys(_globals().default.node)]),
-  'electron-renderer': new Set([...BUILTINS, ...Object.keys(_globals().default.node), ...Object.keys(_globals().default.browser)])
+  node: NODE_BUILTINS,
+  'electron-main': NODE_BUILTINS,
+  'electron-renderer': new Set([...BUILTINS, ...Object.keys(_globals().default.node), ...Object.keys(_globals().default.browser)]),
+  'react-server': NODE_BUILTINS
 };
 const OUTPUT_FORMATS = {
   esmodule: _ESMOutputFormat.ESMOutputFormat,
@@ -110,11 +114,13 @@ class ScopeHoistingPackager {
     // runtimes are excluded, and instead we add imports into the entry bundle
     // of each bundle group pointing at the sibling bundles. These can be
     // picked up by another bundler later at which point runtimes will be added.
-    if (this.bundle.env.isLibrary || this.bundle.env.outputFormat === 'commonjs') {
+    if (this.bundle.env.isLibrary || this.bundle.env.outputFormat === 'commonjs' || this.bundle.env.outputFormat === 'esmodule' && !this.isAsyncBundle) {
       for (let b of this.bundleGraph.getReferencedBundles(this.bundle, {
         recursive: false
       })) {
-        this.externals.set((0, _utils().relativeBundlePath)(this.bundle, b), new Map());
+        if (this.bundle.env.isLibrary || b.type === 'js') {
+          this.externals.set((0, _utils().relativeBundlePath)(this.bundle, b), new Map());
+        }
       }
     }
     let res = '';
@@ -286,7 +292,7 @@ class ScopeHoistingPackager {
           // If the module has a namespace (e.g. commonjs), and this is not an entry, only export the namespace
           // as default, without individual exports. This mirrors the importing logic in addExternal, avoiding
           // extra unused exports and potential for non-identifier export names.
-          if (hasNamespace && this.isAsyncBundle && exportAs !== '*') {
+          if (hasNamespace && !this.bundle.needsStableName && exportAs !== '*') {
             continue;
           }
           let symbols = (_this$exportedSymbols = this.exportedSymbols.get(symbol === '*' ? (0, _nullthrows().default)((_entry$symbols$get2 = entry.symbols.get('*')) === null || _entry$symbols$get2 === void 0 ? void 0 : _entry$symbols$get2.local) : symbol)) === null || _this$exportedSymbols === void 0 ? void 0 : _this$exportedSymbols.exportAs;
@@ -387,6 +393,18 @@ class ScopeHoistingPackager {
     if (code.includes('$parcel$global')) {
       this.usedHelpers.add('$parcel$global');
     }
+    let usedHelpers = asset.meta.usedHelpers;
+    if (typeof usedHelpers === 'number') {
+      if (usedHelpers & 1) {
+        this.usedHelpers.add('$parcel$distDir');
+      }
+      if (usedHelpers & 2) {
+        this.usedHelpers.add('$parcel$publicUrl');
+      }
+      if (usedHelpers & 4) {
+        this.usedHelpers.add('$parcel$import');
+      }
+    }
     if (this.bundle.env.isNode() && asset.meta.has_node_replacements) {
       const relPath = (0, _utils().normalizeSeparators)(_path().default.relative(this.bundle.target.distDir, _path().default.dirname(asset.filePath)));
       code = code.replace('$parcel$dirnameReplace', relPath);
@@ -982,7 +1000,7 @@ ${code}
     for (let helper of this.usedHelpers) {
       let currentHelper = _helpers.helpers[helper];
       if (typeof currentHelper === 'function') {
-        currentHelper = _helpers.helpers[helper](this.bundle.env);
+        currentHelper = _helpers.helpers[helper](this.bundle.env, this.bundle);
       }
       res += currentHelper;
       if (enableSourceMaps) {

package/lib/dev-prelude.js

@@ -6,7 +6,7 @@
 // anything defined in a previous bundle is accessed via the
 // orig method which is the require for previous bundles
 
-(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+(function (modules, entry, mainEntry, parcelRequireName, distDir, publicUrl) {
   /* eslint-disable no-undef */
   var globalObject =
     typeof globalThis !== 'undefined'
@@ -101,6 +101,8 @@
   newRequire.modules = modules;
   newRequire.cache = cache;
   newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
   newRequire.register = function (id, exports) {
     modules[id] = [
       function (require, module) {
@@ -110,6 +112,10 @@
     ];
   };
 
+  // Only insert newRequire.load when it is actually used.
+  // The code in this file is linted against ES5, so dynamic import is not allowed.
+  // INSERT_LOAD_HERE
+
   Object.defineProperty(newRequire, 'root', {
     get: function () {
       return globalObject[parcelRequireName];
@@ -136,10 +142,6 @@
       define(function () {
         return mainExports;
       });
-
-      // <script>
-    } else if (globalName) {
-      this[globalName] = mainExports;
     }
   }
 });

package/lib/helpers.js

@@ -4,6 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.prelude = exports.helpers = exports.fnExpr = exports.bundleQueuePrelude = void 0;
+function _utils() {
+  const data = require("@parcel/utils");
+  _utils = function () {
+    return data;
+  };
+  return data;
+}
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const prelude = parcelRequireName => `
 var $parcel$modules = {};
 var $parcel$inits = {};
@@ -120,10 +135,27 @@ function $parcel$defineInteropFlag(a) {
   Object.defineProperty(a, '__esModule', {value: true, configurable: true});
 }
 `;
+const $parcel$distDir = (env, bundle) => {
+  // Generate a relative path from this bundle to the root of the dist dir.
+  let distDir = (0, _utils().relativePath)(_path().default.dirname(bundle.name), '');
+  if (distDir.endsWith('/')) {
+    distDir = distDir.slice(0, -1);
+  }
+  return `var $parcel$distDir = ${JSON.stringify(distDir)};\n`;
+};
+const $parcel$publicUrl = (env, bundle) => {
+  return `var $parcel$publicUrl = ${JSON.stringify(bundle.target.publicUrl)};\n`;
+};
+const $parcel$import = env => {
+  return `var $parcel$import = ${fnExpr(env, ['url'], ['return import($parcel$distDir + "/" + url);'])};\n`;
+};
 const helpers = exports.helpers = {
   $parcel$export,
   $parcel$exportWildcard,
   $parcel$interopDefault,
   $parcel$global,
-  $parcel$defineInteropFlag
+  $parcel$defineInteropFlag,
+  $parcel$distDir,
+  $parcel$publicUrl,
+  $parcel$import
 };

package/lib/index.js

@@ -41,7 +41,7 @@ function _nullthrows() {
 }
 var _DevPackager = require("./DevPackager");
 var _ScopeHoistingPackager = require("./ScopeHoistingPackager");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CONFIG_SCHEMA = {
   type: 'object',
   properties: {

package/lib/utils.js

@@ -14,7 +14,7 @@ function _nullthrows() {
   };
   return data;
 }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // This replaces __parcel__require__ references left by the transformer with
 // parcelRequire calls of the resolved asset id. This lets runtimes work within
 // script bundles, which must be outside the bundle wrapper so their variables are global.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/packager-js",
-  "version": "2.0.0-dev.1712+c6bc8e411",
+  "version": "2.0.0-dev.1789+0b82b13d6",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,17 +17,17 @@
   "source": "src/index.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.0.0-dev.1710+c6bc8e411"
+    "parcel": "^2.0.0-dev.1787+0b82b13d6"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.0.0-dev.1712+c6bc8e411",
-    "@parcel/plugin": "2.0.0-dev.1712+c6bc8e411",
-    "@parcel/rust": "2.12.1-dev.3335+c6bc8e411",
+    "@parcel/diagnostic": "2.0.0-dev.1789+0b82b13d6",
+    "@parcel/plugin": "2.0.0-dev.1789+0b82b13d6",
+    "@parcel/rust": "2.13.3-dev.3412+0b82b13d6",
     "@parcel/source-map": "^2.1.1",
-    "@parcel/types": "2.0.0-dev.1712+c6bc8e411",
-    "@parcel/utils": "2.0.0-dev.1712+c6bc8e411",
+    "@parcel/types": "2.0.0-dev.1789+0b82b13d6",
+    "@parcel/utils": "2.0.0-dev.1789+0b82b13d6",
     "globals": "^13.2.0",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "c6bc8e41105247c437089ec3cb91e53f12ac5519"
+  "gitHead": "0b82b13d6c0dae58ae636983bbd57dbcf94fff89"
 }

package/src/DevPackager.js

@@ -6,6 +6,7 @@ import {
   relativeBundlePath,
   countLines,
   normalizeSeparators,
+  relativePath,
 } from '@parcel/utils';
 import SourceMap from '@parcel/source-map';
 import invariant from 'assert';
@@ -60,6 +61,7 @@ export class DevPackager {
     let lineOffset = countLines(prefix);
     let script: ?{|code: string, mapBuffer: ?Buffer|} = null;
 
+    let usedHelpers = 0;
     this.bundle.traverse(node => {
       let wrapped = first ? '' : ',';
 
@@ -87,6 +89,10 @@ export class DevPackager {
           'all assets in a js bundle must be js assets',
         );
 
+        if (typeof asset.meta.usedHelpers === 'number') {
+          usedHelpers |= asset.meta.usedHelpers;
+        }
+
         // If this is the main entry of a script rather than a module, we need to hoist it
         // outside the bundle wrapper function so that its variables are exposed as globals.
         if (
@@ -101,14 +107,24 @@ export class DevPackager {
         let dependencies = this.bundleGraph.getDependencies(asset);
         for (let dep of dependencies) {
           let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
+          let specifier = getSpecifier(dep);
           if (this.bundleGraph.isDependencySkipped(dep)) {
-            deps[getSpecifier(dep)] = false;
+            deps[specifier] = false;
           } else if (resolved) {
-            deps[getSpecifier(dep)] =
-              this.bundleGraph.getAssetPublicId(resolved);
+            deps[specifier] = this.bundleGraph.getAssetPublicId(resolved);
           } else {
             // An external module - map placeholder to original specifier.
-            deps[getSpecifier(dep)] = dep.specifier;
+            deps[specifier] = dep.specifier;
+          }
+        }
+
+        // Add dependencies for parcelRequire calls added by runtimes
+        // so that the HMR runtime can correctly traverse parents.
+        let hmrDeps = asset.meta.hmrDeps;
+        if (this.options.hmrOptions && Array.isArray(hmrDeps)) {
+          for (let id of hmrDeps) {
+            invariant(typeof id === 'string');
+            deps[id] = id;
           }
         }
 
@@ -161,7 +177,7 @@ export class DevPackager {
     let entries = this.bundle.getEntryAssets();
     let mainEntry = this.bundle.getMainEntry();
     if (
-      (!this.isEntry() && this.bundle.env.outputFormat === 'global') ||
+      (!this.isEntry() && this.bundle.env.outputFormat !== 'commonjs') ||
       this.bundle.env.sourceType === 'script'
     ) {
       // In async bundles we don't want the main entry to execute until we require it
@@ -170,6 +186,13 @@ export class DevPackager {
       mainEntry = null;
     }
 
+    if (usedHelpers & 4) {
+      prefix = prefix.replace(
+        '// INSERT_LOAD_HERE',
+        'newRequire.load = function (url) { return import(distDir + "/" + url); }',
+      );
+    }
+
     let contents =
       prefix +
       '({' +
@@ -183,9 +206,24 @@ export class DevPackager {
         mainEntry ? this.bundleGraph.getAssetPublicId(mainEntry) : null,
       ) +
       ', ' +
-      JSON.stringify(this.parcelRequireName) +
-      ')' +
-      '\n';
+      JSON.stringify(this.parcelRequireName);
+
+    if (usedHelpers & 1) {
+      // Generate a relative path from this bundle to the root of the dist dir.
+      let distDir = relativePath(path.dirname(this.bundle.name), '');
+      if (distDir.endsWith('/')) {
+        distDir = distDir.slice(0, -1);
+      }
+      contents += ', ' + JSON.stringify(distDir);
+    } else if (usedHelpers & 2) {
+      contents += ', null';
+    }
+
+    if (usedHelpers & 2) {
+      contents += ', ' + JSON.stringify(this.bundle.target.publicUrl);
+    }
+
+    contents += ')\n';
 
     // The entry asset of a script bundle gets hoisted outside the bundle wrapper function
     // so that its variables become globals. We need to replace any require calls for
@@ -232,6 +270,14 @@ export class DevPackager {
           b,
         )}");\n`;
       }
+    } else if (this.bundle.env.isNode()) {
+      let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
+      for (let b of bundles) {
+        if (b.type !== 'js') {
+          continue;
+        }
+        importScripts += `require("${relativeBundlePath(this.bundle, b)}");\n`;
+      }
     }
 
     return (

package/src/ScopeHoistingPackager.js

@@ -40,21 +40,28 @@ const REPLACEMENT_RE =
   /\n|import\s+"([0-9a-f]{16}:.+?)";|(?:\$[0-9a-f]{16}\$exports)|(?:\$[0-9a-f]{16}\$(?:import|importAsync|require)\$[0-9a-f]+(?:\$[0-9a-f]+)?)/g;
 
 const BUILTINS = Object.keys(globals.builtin);
+const BROWSER_BUILTINS = new Set([
+  ...BUILTINS,
+  ...Object.keys(globals.browser),
+]);
+const NODE_BUILTINS = new Set([...BUILTINS, ...Object.keys(globals.node)]);
 const GLOBALS_BY_CONTEXT = {
-  browser: new Set([...BUILTINS, ...Object.keys(globals.browser)]),
+  browser: BROWSER_BUILTINS,
+  'react-client': BROWSER_BUILTINS,
   'web-worker': new Set([...BUILTINS, ...Object.keys(globals.worker)]),
   'service-worker': new Set([
     ...BUILTINS,
     ...Object.keys(globals.serviceworker),
   ]),
   worklet: new Set([...BUILTINS]),
-  node: new Set([...BUILTINS, ...Object.keys(globals.node)]),
-  'electron-main': new Set([...BUILTINS, ...Object.keys(globals.node)]),
+  node: NODE_BUILTINS,
+  'electron-main': NODE_BUILTINS,
   'electron-renderer': new Set([
     ...BUILTINS,
     ...Object.keys(globals.node),
     ...Object.keys(globals.browser),
   ]),
+  'react-server': NODE_BUILTINS,
 };
 
 const OUTPUT_FORMATS = {
@@ -131,12 +138,15 @@ export class ScopeHoistingPackager {
     // picked up by another bundler later at which point runtimes will be added.
     if (
       this.bundle.env.isLibrary ||
-      this.bundle.env.outputFormat === 'commonjs'
+      this.bundle.env.outputFormat === 'commonjs' ||
+      (this.bundle.env.outputFormat === 'esmodule' && !this.isAsyncBundle)
     ) {
       for (let b of this.bundleGraph.getReferencedBundles(this.bundle, {
         recursive: false,
       })) {
-        this.externals.set(relativeBundlePath(this.bundle, b), new Map());
+        if (this.bundle.env.isLibrary || b.type === 'js') {
+          this.externals.set(relativeBundlePath(this.bundle, b), new Map());
+        }
       }
     }
 
@@ -374,7 +384,11 @@ export class ScopeHoistingPackager {
           // If the module has a namespace (e.g. commonjs), and this is not an entry, only export the namespace
           // as default, without individual exports. This mirrors the importing logic in addExternal, avoiding
           // extra unused exports and potential for non-identifier export names.
-          if (hasNamespace && this.isAsyncBundle && exportAs !== '*') {
+          if (
+            hasNamespace &&
+            !this.bundle.needsStableName &&
+            exportAs !== '*'
+          ) {
             continue;
           }
 
@@ -502,6 +516,19 @@ export class ScopeHoistingPackager {
       this.usedHelpers.add('$parcel$global');
     }
 
+    let usedHelpers = asset.meta.usedHelpers;
+    if (typeof usedHelpers === 'number') {
+      if (usedHelpers & 1) {
+        this.usedHelpers.add('$parcel$distDir');
+      }
+      if (usedHelpers & 2) {
+        this.usedHelpers.add('$parcel$publicUrl');
+      }
+      if (usedHelpers & 4) {
+        this.usedHelpers.add('$parcel$import');
+      }
+    }
+
     if (this.bundle.env.isNode() && asset.meta.has_node_replacements) {
       const relPath = normalizeSeparators(
         path.relative(this.bundle.target.distDir, path.dirname(asset.filePath)),
@@ -1357,7 +1384,7 @@ ${code}
     for (let helper of this.usedHelpers) {
       let currentHelper = helpers[helper];
       if (typeof currentHelper === 'function') {
-        currentHelper = helpers[helper](this.bundle.env);
+        currentHelper = helpers[helper](this.bundle.env, this.bundle);
       }
       res += currentHelper;
       if (enableSourceMaps) {

package/src/dev-prelude.js

@@ -6,7 +6,7 @@
 // anything defined in a previous bundle is accessed via the
 // orig method which is the require for previous bundles
 
-(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+(function (modules, entry, mainEntry, parcelRequireName, distDir, publicUrl) {
   /* eslint-disable no-undef */
   var globalObject =
     typeof globalThis !== 'undefined'
@@ -101,6 +101,8 @@
   newRequire.modules = modules;
   newRequire.cache = cache;
   newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
   newRequire.register = function (id, exports) {
     modules[id] = [
       function (require, module) {
@@ -110,6 +112,10 @@
     ];
   };
 
+  // Only insert newRequire.load when it is actually used.
+  // The code in this file is linted against ES5, so dynamic import is not allowed.
+  // INSERT_LOAD_HERE
+
   Object.defineProperty(newRequire, 'root', {
     get: function () {
       return globalObject[parcelRequireName];
@@ -136,10 +142,6 @@
       define(function () {
         return mainExports;
       });
-
-      // <script>
-    } else if (globalName) {
-      this[globalName] = mainExports;
     }
   }
 });

package/src/helpers.js

@@ -1,5 +1,7 @@
 // @flow strict-local
-import type {Environment} from '@parcel/types';
+import type {Environment, NamedBundle} from '@parcel/types';
+import {relativePath} from '@parcel/utils';
+import path from 'path';
 
 export const prelude = (parcelRequireName: string): string => `
 var $parcel$modules = {};
@@ -160,10 +162,36 @@ function $parcel$defineInteropFlag(a) {
 }
 `;
 
+const $parcel$distDir = (env: Environment, bundle: NamedBundle): string => {
+  // Generate a relative path from this bundle to the root of the dist dir.
+  let distDir = relativePath(path.dirname(bundle.name), '');
+  if (distDir.endsWith('/')) {
+    distDir = distDir.slice(0, -1);
+  }
+  return `var $parcel$distDir = ${JSON.stringify(distDir)};\n`;
+};
+
+const $parcel$publicUrl = (env: Environment, bundle: NamedBundle): string => {
+  return `var $parcel$publicUrl = ${JSON.stringify(
+    bundle.target.publicUrl,
+  )};\n`;
+};
+
+const $parcel$import = (env: Environment): string => {
+  return `var $parcel$import = ${fnExpr(
+    env,
+    ['url'],
+    ['return import($parcel$distDir + "/" + url);'],
+  )};\n`;
+};
+
 export const helpers = {
   $parcel$export,
   $parcel$exportWildcard,
   $parcel$interopDefault,
   $parcel$global,
   $parcel$defineInteropFlag,
+  $parcel$distDir,
+  $parcel$publicUrl,
+  $parcel$import,
 };