@parcel/packager-js 2.13.3 → 2.14.0

package/lib/DevPackager.js

@@ -40,6 +40,7 @@ function _fs() {
   return data;
 }
 var _utils2 = require("./utils");
+var _helpers = require("./helpers");
 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 {
@@ -71,6 +72,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 +89,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.
@@ -146,7 +151,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 => {
@@ -155,7 +160,50 @@ 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';
+    let load = '';
+    if (usedHelpers & 4) {
+      load += _helpers.helpers.$parcel$import(this.bundle.env, this.bundle, new Set());
+      load += 'newRequire.load = $parcel$import;\n';
+    }
+    if (usedHelpers & 8) {
+      load += _helpers.helpers.$parcel$resolve(this.bundle.env, this.bundle, new Set());
+      load += 'newRequire.resolve = $parcel$resolve;\n';
+    }
+    if (usedHelpers & 16) {
+      load += _helpers.helpers.$parcel$extendImportMap(this.bundle.env);
+      load += `newRequire.extendImportMap = $parcel$extendImportMap;\n`;
+    }
+    if (load) {
+      usedHelpers |= 1 | 2;
+      // Remove newlines to avoid messing up source maps
+      prefix = prefix.replace('// INSERT_LOAD_HERE', load.replace(/\n/g, ''));
+    }
+    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 += '/';
+      }
+      contents += ', ' + JSON.stringify(distDir);
+    } else if (usedHelpers & (2 | 32)) {
+      contents += ', null';
+    }
+    if (usedHelpers & 2) {
+      // Ensure the public url always ends with a slash to code can easily join paths to it.
+      let publicUrl = this.bundle.target.publicUrl;
+      if (!publicUrl.endsWith('/')) {
+        publicUrl += '/';
+      }
+      contents += ', ' + JSON.stringify(publicUrl);
+    } else if (usedHelpers & 32) {
+      contents += ', null';
+    }
+    if (usedHelpers & 32) {
+      let code = _helpers.helpers.$parcel$devServer(this.bundle.env, this.bundle, new Set(), this.options);
+      contents += ', ' + code.slice('var $parcel$devServer = '.length, -2);
+    }
+    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
@@ -190,6 +238,20 @@ 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, {
+        includeInline: false
+      });
+      for (let b of bundles) {
+        if (b.type !== 'js') {
+          continue;
+        }
+        if (this.bundle.env.outputFormat === 'esmodule') {
+          importScripts += `import "${(0, _utils().relativeBundlePath)(this.bundle, b)}";\n`;
+        } else {
+          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

@@ -65,14 +65,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // 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,30 @@ 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.needsPrelude = true;
+        this.usedHelpers.add('$parcel$import');
+      }
+      if (usedHelpers & 8) {
+        this.needsPrelude = true;
+        this.usedHelpers.add('$parcel$resolve');
+      }
+      if (usedHelpers & 16) {
+        this.needsPrelude = true;
+        this.usedHelpers.add('$parcel$extendImportMap');
+      }
+      if (usedHelpers & 32) {
+        this.usedHelpers.add('$parcel$devServer');
+      }
+    }
     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 +1012,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, this.usedHelpers, this.options);
       }
       res += currentHelper;
       if (enableSourceMaps) {
@@ -993,7 +1023,7 @@ ${code}
       // Add the prelude if this is potentially the first JS bundle to load in a
       // particular context (e.g. entry scripts in HTML, workers, etc.).
       let parentBundles = this.bundleGraph.getParentBundles(this.bundle);
-      let mightBeFirstJS = parentBundles.length === 0 || parentBundles.some(b => b.type !== 'js') || this.bundleGraph.getBundleGroupsContainingBundle(this.bundle).some(g => this.bundleGraph.isEntryBundleGroup(g)) || this.bundle.env.isIsolated() || this.bundle.bundleBehavior === 'isolated';
+      let mightBeFirstJS = parentBundles.length === 0 || parentBundles.some(b => b.type !== 'js' || b.env.context !== this.bundle.env.context) || this.bundleGraph.getBundleGroupsContainingBundle(this.bundle).some(g => this.bundleGraph.isEntryBundleGroup(g)) || this.bundle.env.isIsolated() || this.bundle.bundleBehavior === 'isolated';
       if (mightBeFirstJS) {
         let preludeCode = (0, _helpers.prelude)(this.parcelRequireName);
         res += preludeCode;

package/lib/dev-prelude.js

@@ -6,7 +6,15 @@
 // 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,
+  devServer
+) {
   /* eslint-disable no-undef */
   var globalObject =
     typeof globalThis !== 'undefined'
@@ -25,6 +33,7 @@
     typeof globalObject[parcelRequireName] === 'function' &&
     globalObject[parcelRequireName];
 
+  var importMap = previousRequire.i || {};
   var cache = previousRequire.cache || {};
   // Do not use `require` to prevent Webpack from trying to bundle this call
   var nodeRequire =
@@ -93,6 +102,7 @@
   function Module(moduleName) {
     this.id = moduleName;
     this.bundle = newRequire;
+    this.require = nodeRequire;
     this.exports = {};
   }
 
@@ -101,6 +111,10 @@
   newRequire.modules = modules;
   newRequire.cache = cache;
   newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
+  newRequire.devServer = devServer;
+  newRequire.i = importMap;
   newRequire.register = function (id, exports) {
     modules[id] = [
       function (require, module) {
@@ -110,6 +124,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 +154,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,127 @@ 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 += '/';
+  }
+  return `var $parcel$distDir = ${JSON.stringify(distDir)};\n`;
+};
+const $parcel$publicUrl = (env, bundle) => {
+  // Ensure the public url always ends with a slash to code can easily join paths to it.
+  let publicUrl = bundle.target.publicUrl;
+  if (!publicUrl.endsWith('/')) {
+    publicUrl += '/';
+  }
+  return `var $parcel$publicUrl = ${JSON.stringify(publicUrl)};\n`;
+};
+const $parcel$devServer = (env, bundle, _usedHelpers, options) => {
+  if (options.hmrOptions) {
+    let {
+      host = 'localhost',
+      port
+    } = options.hmrOptions;
+    let https = options.serveOptions ? options.serveOptions.https : false;
+    port = port ?? (options.serveOptions ? options.serveOptions.port : null);
+    if (port != null) {
+      let url = (https ? 'https://' : 'http://') + host + ':' + port;
+      return `var $parcel$devServer = ${JSON.stringify(url)};\n`;
+    }
+  }
+  return `var $parcel$devServer = null;\n`;
+};
+const $parcel$extendImportMap = env => {
+  let defineImportMap = env.shouldScopeHoist ? 'parcelRequire.i ??= {}' : 'importMap';
+  return `
+function $parcel$extendImportMap(map) {
+  Object.assign(${defineImportMap}, map);
+}
+`;
+};
+const $parcel$import = (env, bundle, usedHelpers) => {
+  usedHelpers.add('$parcel$distDir');
+  let distDir = env.shouldScopeHoist ? '$parcel$distDir' : 'distDir';
+  let importMap = env.shouldScopeHoist ? 'parcelRequire.i?.' : 'importMap';
+  return `
+function $parcel$import(url) {
+  url = ${importMap}[url] || url;
+  return import(${distDir} + url);
+}
+`;
+};
+const $parcel$resolve = (env, bundle, usedHelpers) => {
+  let distDir = env.shouldScopeHoist ? '$parcel$distDir' : 'distDir';
+  let publicUrl = env.shouldScopeHoist ? '$parcel$publicUrl' : 'publicUrl';
+  let importMap = env.shouldScopeHoist ? 'parcelRequire.i?.' : 'importMap';
+  if (env.context === 'react-server' || env.context === 'react-client') {
+    usedHelpers.add('$parcel$publicUrl');
+    return `
+function $parcel$resolve(url) {
+url = ${importMap}[url] || url;
+return ${publicUrl} + url;
+}
+`;
+  } else if (env.outputFormat === 'esmodule' && env.supports('import-meta-resolve')) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return import.meta.resolve(${distDir} + url);
+}
+`;
+  } else if (env.outputFormat === 'esmodule' && env.supports('import-meta-url')) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return new URL(${distDir} + url, import.meta.url).toString();
+}
+`;
+  } else if (env.outputFormat === 'commonjs' || env.isNode()) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return new URL(${distDir} + url, 'file:' + __filename).toString();
+}
+`;
+  } else {
+    usedHelpers.add('$parcel$distDir');
+    return `
+var $parcel$bundleURL;
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  if (!$parcel$bundleURL) {
+    try {
+      throw new Error();
+    } catch (err) {
+      var matches = ('' + err.stack).match(
+        /(https?|file|ftp|(chrome|moz|safari-web)-extension):\\/\\/[^)\\n]+/g,
+      );
+      if (matches) {
+        $parcel$bundleURL = matches[0];
+      } else {
+        return ${distDir} + url;
+      }
+    }
+  }
+  return new URL(${distDir} + url, $parcel$bundleURL).toString();
+}
+`;
+  }
+};
 const helpers = exports.helpers = {
   $parcel$export,
   $parcel$exportWildcard,
   $parcel$interopDefault,
   $parcel$global,
-  $parcel$defineInteropFlag
+  $parcel$defineInteropFlag,
+  $parcel$distDir,
+  $parcel$publicUrl,
+  $parcel$devServer,
+  $parcel$extendImportMap,
+  $parcel$import,
+  $parcel$resolve
 };

package/lib/index.js

@@ -56,7 +56,7 @@ var _default = exports.default = new (_plugin().Packager)({
     config,
     options
   }) {
-    var _packageName$contents, _conf$contents;
+    var _conf$contents;
     let packageKey = '@parcel/packager-js';
     let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
       packageKey
@@ -75,7 +75,7 @@ var _default = exports.default = new (_plugin().Packager)({
     let packageName = await config.getConfigFrom(options.projectRoot + '/index', [], {
       packageKey: 'name'
     });
-    let name = (packageName === null || packageName === void 0 || (_packageName$contents = packageName.contents) === null || _packageName$contents === void 0 ? void 0 : _packageName$contents.name) ?? '';
+    let name = (packageName === null || packageName === void 0 ? void 0 : packageName.contents) ?? '';
     return {
       parcelRequireName: 'parcelRequire' + (0, _rust().hashString)(name).slice(-4),
       unstable_asyncBundleRuntime: Boolean(conf === null || conf === void 0 || (_conf$contents = conf.contents) === null || _conf$contents === void 0 ? void 0 : _conf$contents.unstable_asyncBundleRuntime)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/packager-js",
-  "version": "2.13.3",
+  "version": "2.14.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,17 +17,17 @@
   "source": "src/index.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.13.3"
+    "parcel": "^2.14.0"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.13.3",
-    "@parcel/plugin": "2.13.3",
-    "@parcel/rust": "2.13.3",
+    "@parcel/diagnostic": "2.14.0",
+    "@parcel/plugin": "2.14.0",
+    "@parcel/rust": "2.14.0",
     "@parcel/source-map": "^2.1.1",
-    "@parcel/types": "2.13.3",
-    "@parcel/utils": "2.13.3",
+    "@parcel/types": "2.14.0",
+    "@parcel/utils": "2.14.0",
     "globals": "^13.2.0",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "d19b1f6bdb05eb5a3085f44daae15c0fe2709ab9"
+  "gitHead": "2306f8f14e8cf7d7c2d94ef5c6e52f9754dd5be8"
 }

package/src/DevPackager.js

@@ -6,12 +6,14 @@ import {
   relativeBundlePath,
   countLines,
   normalizeSeparators,
+  relativePath,
 } from '@parcel/utils';
 import SourceMap from '@parcel/source-map';
 import invariant from 'assert';
 import path from 'path';
 import fs from 'fs';
 import {replaceScriptDependencies, getSpecifier} from './utils';
+import {helpers} from './helpers';
 
 const PRELUDE = fs
   .readFileSync(path.join(__dirname, 'dev-prelude.js'), 'utf8')
@@ -60,6 +62,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 +90,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 (
@@ -171,7 +178,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
@@ -180,6 +187,28 @@ export class DevPackager {
       mainEntry = null;
     }
 
+    let load = '';
+    if (usedHelpers & 4) {
+      load += helpers.$parcel$import(this.bundle.env, this.bundle, new Set());
+      load += 'newRequire.load = $parcel$import;\n';
+    }
+
+    if (usedHelpers & 8) {
+      load += helpers.$parcel$resolve(this.bundle.env, this.bundle, new Set());
+      load += 'newRequire.resolve = $parcel$resolve;\n';
+    }
+
+    if (usedHelpers & 16) {
+      load += helpers.$parcel$extendImportMap(this.bundle.env);
+      load += `newRequire.extendImportMap = $parcel$extendImportMap;\n`;
+    }
+
+    if (load) {
+      usedHelpers |= 1 | 2;
+      // Remove newlines to avoid messing up source maps
+      prefix = prefix.replace('// INSERT_LOAD_HERE', load.replace(/\n/g, ''));
+    }
+
     let contents =
       prefix +
       '({' +
@@ -193,9 +222,41 @@ 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 += '/';
+      }
+      contents += ', ' + JSON.stringify(distDir);
+    } else if (usedHelpers & (2 | 32)) {
+      contents += ', null';
+    }
+
+    if (usedHelpers & 2) {
+      // Ensure the public url always ends with a slash to code can easily join paths to it.
+      let publicUrl = this.bundle.target.publicUrl;
+      if (!publicUrl.endsWith('/')) {
+        publicUrl += '/';
+      }
+      contents += ', ' + JSON.stringify(publicUrl);
+    } else if (usedHelpers & 32) {
+      contents += ', null';
+    }
+
+    if (usedHelpers & 32) {
+      let code = helpers.$parcel$devServer(
+        this.bundle.env,
+        this.bundle,
+        new Set(),
+        this.options,
+      );
+      contents += ', ' + code.slice('var $parcel$devServer = '.length, -2);
+    }
+
+    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
@@ -242,6 +303,23 @@ export class DevPackager {
           b,
         )}");\n`;
       }
+    } else if (this.bundle.env.isNode()) {
+      let bundles = this.bundleGraph.getReferencedBundles(this.bundle, {
+        includeInline: false,
+      });
+      for (let b of bundles) {
+        if (b.type !== 'js') {
+          continue;
+        }
+        if (this.bundle.env.outputFormat === 'esmodule') {
+          importScripts += `import "${relativeBundlePath(this.bundle, b)}";\n`;
+        } else {
+          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,31 @@ 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.needsPrelude = true;
+        this.usedHelpers.add('$parcel$import');
+      }
+      if (usedHelpers & 8) {
+        this.needsPrelude = true;
+        this.usedHelpers.add('$parcel$resolve');
+      }
+      if (usedHelpers & 16) {
+        this.needsPrelude = true;
+        this.usedHelpers.add('$parcel$extendImportMap');
+      }
+      if (usedHelpers & 32) {
+        this.usedHelpers.add('$parcel$devServer');
+      }
+    }
+
     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 +1396,12 @@ ${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,
+          this.usedHelpers,
+          this.options,
+        );
       }
       res += currentHelper;
       if (enableSourceMaps) {
@@ -1371,7 +1415,9 @@ ${code}
       let parentBundles = this.bundleGraph.getParentBundles(this.bundle);
       let mightBeFirstJS =
         parentBundles.length === 0 ||
-        parentBundles.some(b => b.type !== 'js') ||
+        parentBundles.some(
+          b => b.type !== 'js' || b.env.context !== this.bundle.env.context,
+        ) ||
         this.bundleGraph
           .getBundleGroupsContainingBundle(this.bundle)
           .some(g => this.bundleGraph.isEntryBundleGroup(g)) ||

package/src/dev-prelude.js

@@ -6,7 +6,15 @@
 // 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,
+  devServer
+) {
   /* eslint-disable no-undef */
   var globalObject =
     typeof globalThis !== 'undefined'
@@ -25,6 +33,7 @@
     typeof globalObject[parcelRequireName] === 'function' &&
     globalObject[parcelRequireName];
 
+  var importMap = previousRequire.i || {};
   var cache = previousRequire.cache || {};
   // Do not use `require` to prevent Webpack from trying to bundle this call
   var nodeRequire =
@@ -93,6 +102,7 @@
   function Module(moduleName) {
     this.id = moduleName;
     this.bundle = newRequire;
+    this.require = nodeRequire;
     this.exports = {};
   }
 
@@ -101,6 +111,10 @@
   newRequire.modules = modules;
   newRequire.cache = cache;
   newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
+  newRequire.devServer = devServer;
+  newRequire.i = importMap;
   newRequire.register = function (id, exports) {
     modules[id] = [
       function (require, module) {
@@ -110,6 +124,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 +154,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, PluginOptions} from '@parcel/types';
+import {relativePath} from '@parcel/utils';
+import path from 'path';
 
 export const prelude = (parcelRequireName: string): string => `
 var $parcel$modules = {};
@@ -160,10 +162,151 @@ 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 += '/';
+  }
+  return `var $parcel$distDir = ${JSON.stringify(distDir)};\n`;
+};
+
+const $parcel$publicUrl = (env: Environment, bundle: NamedBundle): string => {
+  // Ensure the public url always ends with a slash to code can easily join paths to it.
+  let publicUrl = bundle.target.publicUrl;
+  if (!publicUrl.endsWith('/')) {
+    publicUrl += '/';
+  }
+  return `var $parcel$publicUrl = ${JSON.stringify(publicUrl)};\n`;
+};
+
+const $parcel$devServer = (
+  env: Environment,
+  bundle: NamedBundle,
+  _usedHelpers: Set<string>,
+  options: PluginOptions,
+): string => {
+  if (options.hmrOptions) {
+    let {host = 'localhost', port} = options.hmrOptions;
+    let https = options.serveOptions ? options.serveOptions.https : false;
+    port = port ?? (options.serveOptions ? options.serveOptions.port : null);
+    if (port != null) {
+      let url = (https ? 'https://' : 'http://') + host + ':' + port;
+      return `var $parcel$devServer = ${JSON.stringify(url)};\n`;
+    }
+  }
+  return `var $parcel$devServer = null;\n`;
+};
+
+const $parcel$extendImportMap = (env: Environment): string => {
+  let defineImportMap = env.shouldScopeHoist
+    ? 'parcelRequire.i ??= {}'
+    : 'importMap';
+  return `
+function $parcel$extendImportMap(map) {
+  Object.assign(${defineImportMap}, map);
+}
+`;
+};
+
+const $parcel$import = (
+  env: Environment,
+  bundle: NamedBundle,
+  usedHelpers: Set<string>,
+): string => {
+  usedHelpers.add('$parcel$distDir');
+  let distDir = env.shouldScopeHoist ? '$parcel$distDir' : 'distDir';
+  let importMap = env.shouldScopeHoist ? 'parcelRequire.i?.' : 'importMap';
+  return `
+function $parcel$import(url) {
+  url = ${importMap}[url] || url;
+  return import(${distDir} + url);
+}
+`;
+};
+
+const $parcel$resolve = (
+  env: Environment,
+  bundle: NamedBundle,
+  usedHelpers: Set<string>,
+): string => {
+  let distDir = env.shouldScopeHoist ? '$parcel$distDir' : 'distDir';
+  let publicUrl = env.shouldScopeHoist ? '$parcel$publicUrl' : 'publicUrl';
+  let importMap = env.shouldScopeHoist ? 'parcelRequire.i?.' : 'importMap';
+  if (env.context === 'react-server' || env.context === 'react-client') {
+    usedHelpers.add('$parcel$publicUrl');
+    return `
+function $parcel$resolve(url) {
+url = ${importMap}[url] || url;
+return ${publicUrl} + url;
+}
+`;
+  } else if (
+    env.outputFormat === 'esmodule' &&
+    env.supports('import-meta-resolve')
+  ) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return import.meta.resolve(${distDir} + url);
+}
+`;
+  } else if (
+    env.outputFormat === 'esmodule' &&
+    env.supports('import-meta-url')
+  ) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return new URL(${distDir} + url, import.meta.url).toString();
+}
+`;
+  } else if (env.outputFormat === 'commonjs' || env.isNode()) {
+    usedHelpers.add('$parcel$distDir');
+    return `
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  return new URL(${distDir} + url, 'file:' + __filename).toString();
+}
+`;
+  } else {
+    usedHelpers.add('$parcel$distDir');
+    return `
+var $parcel$bundleURL;
+function $parcel$resolve(url) {
+  url = ${importMap}[url] || url;
+  if (!$parcel$bundleURL) {
+    try {
+      throw new Error();
+    } catch (err) {
+      var matches = ('' + err.stack).match(
+        /(https?|file|ftp|(chrome|moz|safari-web)-extension):\\/\\/[^)\\n]+/g,
+      );
+      if (matches) {
+        $parcel$bundleURL = matches[0];
+      } else {
+        return ${distDir} + url;
+      }
+    }
+  }
+  return new URL(${distDir} + url, $parcel$bundleURL).toString();
+}
+`;
+  }
+};
+
 export const helpers = {
   $parcel$export,
   $parcel$exportWildcard,
   $parcel$interopDefault,
   $parcel$global,
   $parcel$defineInteropFlag,
+  $parcel$distDir,
+  $parcel$publicUrl,
+  $parcel$devServer,
+  $parcel$extendImportMap,
+  $parcel$import,
+  $parcel$resolve,
 };

package/src/index.js

@@ -60,7 +60,7 @@ export default (new Packager({
       },
     );
 
-    let name = packageName?.contents?.name ?? '';
+    let name = packageName?.contents ?? '';
     return {
       parcelRequireName: 'parcelRequire' + hashString(name).slice(-4),
       unstable_asyncBundleRuntime: Boolean(