@parcel/packager-js 2.0.0-beta.3.1 → 2.0.0-nightly.1006

package/lib/ScopeHoistingPackager.js

@@ -15,10 +15,10 @@ function _utils() {
   return data;
 }
 
-function _sourceMap() {
+function _sourceMap2() {
   const data = _interopRequireDefault(require("@parcel/source-map"));
 
-  _sourceMap = function () {
+  _sourceMap2 = function () {
     return data;
   };
 
@@ -65,117 +65,66 @@ function _globals() {
   return data;
 }
 
-function _ESMOutputFormat() {
-  const data = require("./ESMOutputFormat");
+var _ESMOutputFormat = require("./ESMOutputFormat");
 
-  _ESMOutputFormat = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _CJSOutputFormat() {
-  const data = require("./CJSOutputFormat");
-
-  _CJSOutputFormat = function () {
-    return data;
-  };
+var _CJSOutputFormat = require("./CJSOutputFormat");
 
-  return data;
-}
+var _GlobalOutputFormat = require("./GlobalOutputFormat");
 
-function _GlobalOutputFormat() {
-  const data = require("./GlobalOutputFormat");
+var _helpers = require("./helpers");
 
-  _GlobalOutputFormat = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _helpers() {
-  const data = require("./helpers");
-
-  _helpers = function () {
-    return data;
-  };
-
-  return data;
-}
+var _utils2 = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 // https://262.ecma-international.org/6.0/#sec-names-and-keywords
 const IDENTIFIER_RE = /^[$_\p{ID_Start}][$_\u200C\u200D\p{ID_Continue}]*$/u;
 const ID_START_RE = /^[$_\p{ID_Start}]/u;
-const NON_ID_CONTINUE_RE = /[^$_\u200C\u200D\p{ID_Continue}]/gu;
+const NON_ID_CONTINUE_RE = /[^$_\u200C\u200D\p{ID_Continue}]/gu; // 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 GLOBALS_BY_CONTEXT = {
   browser: new Set([...BUILTINS, ...Object.keys(_globals().default.browser)]),
   '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)])
 };
 const OUTPUT_FORMATS = {
-  esmodule: _ESMOutputFormat().ESMOutputFormat,
-  commonjs: _CJSOutputFormat().CJSOutputFormat,
-  global: _GlobalOutputFormat().GlobalOutputFormat
+  esmodule: _ESMOutputFormat.ESMOutputFormat,
+  commonjs: _CJSOutputFormat.CJSOutputFormat,
+  global: _GlobalOutputFormat.GlobalOutputFormat
 };
 
 class ScopeHoistingPackager {
-  constructor(options, bundleGraph, bundle, parcelRequireName) {
-    var _this$bundle$getMainE;
-
-    _defineProperty(this, "options", void 0);
-
-    _defineProperty(this, "bundleGraph", void 0);
-
-    _defineProperty(this, "bundle", void 0);
-
-    _defineProperty(this, "parcelRequireName", void 0);
-
-    _defineProperty(this, "outputFormat", void 0);
-
-    _defineProperty(this, "isAsyncBundle", void 0);
-
-    _defineProperty(this, "globalNames", void 0);
-
-    _defineProperty(this, "assetOutputs", void 0);
-
-    _defineProperty(this, "exportedSymbols", new Map());
-
-    _defineProperty(this, "externals", new Map());
-
-    _defineProperty(this, "topLevelNames", new Map());
-
-    _defineProperty(this, "seenAssets", new Set());
-
-    _defineProperty(this, "wrappedAssets", new Set());
-
-    _defineProperty(this, "hoistedRequires", new Map());
-
-    _defineProperty(this, "needsPrelude", false);
-
-    _defineProperty(this, "usedHelpers", new Set());
+  exportedSymbols = new Map();
+  externals = new Map();
+  topLevelNames = new Map();
+  seenAssets = new Set();
+  wrappedAssets = new Set();
+  hoistedRequires = new Map();
+  needsPrelude = false;
+  usedHelpers = new Set();
 
+  constructor(options, bundleGraph, bundle, parcelRequireName) {
     this.options = options;
     this.bundleGraph = bundleGraph;
     this.bundle = bundle;
     this.parcelRequireName = parcelRequireName;
     let OutputFormat = OUTPUT_FORMATS[this.bundle.env.outputFormat];
     this.outputFormat = new OutputFormat(this);
-    this.isAsyncBundle = this.bundleGraph.hasParentBundleOfType(this.bundle, 'js') && !this.bundle.env.isIsolated() && !((_this$bundle$getMainE = this.bundle.getMainEntry()) !== null && _this$bundle$getMainE !== void 0 && _this$bundle$getMainE.isIsolated);
+    this.isAsyncBundle = this.bundleGraph.hasParentBundleOfType(this.bundle, 'js') && !this.bundle.env.isIsolated() && this.bundle.bundleBehavior !== 'isolated';
     this.globalNames = GLOBALS_BY_CONTEXT[bundle.env.context];
   }
 
   async package() {
-    await this.loadAssets();
+    var _sourceMap;
+
+    let wrappedAssets = await this.loadAssets();
     this.buildExportedSymbols(); // If building a library, the target is actually another bundler rather
     // than the final output that could be loaded in a browser. So, loader
     // runtimes are excluded, and instead we add imports into the entry bundle
@@ -188,32 +137,48 @@ class ScopeHoistingPackager {
       for (let b of bundles) {
         this.externals.set((0, _utils().relativeBundlePath)(this.bundle, b), new Map());
       }
-    } // Add each asset that is directly connected to the bundle. Dependencies will be handled
-    // by replacing `import` statements in the code.
-
+    }
 
     let res = '';
     let lineCount = 0;
-    let sourceMap = this.bundle.env.sourceMap ? new (_sourceMap().default)(this.options.projectRoot) : null;
-    this.bundle.traverseAssets((asset, _, actions) => {
-      if (this.seenAssets.has(asset.id)) {
-        actions.skipChildren();
-        return;
-      }
+    let sourceMap = null;
 
+    let processAsset = asset => {
       let [content, map, lines] = this.visitAsset(asset);
 
       if (sourceMap && map) {
         sourceMap.addSourceMap(map, lineCount);
+      } else if (this.bundle.env.sourceMap) {
+        sourceMap = map;
       }
 
       res += content + '\n';
       lineCount += lines + 1;
+    }; // Hoist wrapped asset to the top of the bundle to ensure that they are registered
+    // before they are used.
+
+
+    for (let asset of wrappedAssets) {
+      if (!this.seenAssets.has(asset.id)) {
+        processAsset(asset);
+      }
+    } // Add each asset that is directly connected to the bundle. Dependencies will be handled
+    // by replacing `import` statements in the code.
+
+
+    this.bundle.traverseAssets((asset, _, actions) => {
+      if (this.seenAssets.has(asset.id)) {
+        actions.skipChildren();
+        return;
+      }
+
+      processAsset(asset);
       actions.skipChildren();
     });
     let [prelude, preludeLines] = this.buildBundlePrelude();
     res = prelude + res;
-    sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap.offsetLines(1, preludeLines);
+    lineCount += preludeLines;
+    (_sourceMap = sourceMap) === null || _sourceMap === void 0 ? void 0 : _sourceMap.offsetLines(1, preludeLines);
     let entries = this.bundle.getEntryAssets();
     let mainEntry = this.bundle.getMainEntry();
 
@@ -230,7 +195,7 @@ class ScopeHoistingPackager {
 
 
     for (let entry of entries) {
-      if (this.wrappedAssets.has(entry.id)) {
+      if (this.wrappedAssets.has(entry.id) && !this.isScriptEntry(entry)) {
         var _entry$symbols$get;
 
         let parcelRequire = `parcelRequire(${JSON.stringify(this.bundleGraph.getAssetPublicId(entry))});\n`;
@@ -241,10 +206,38 @@ class ScopeHoistingPackager {
         } else {
           res += `\n${parcelRequire}`;
         }
+
+        lineCount += 2;
+      }
+    }
+
+    let [postlude, postludeLines] = this.outputFormat.buildBundlePostlude();
+    res += postlude;
+    lineCount += postludeLines; // The entry asset of a script bundle gets hoisted outside the bundle wrapper so that
+    // its top-level variables become globals like a real browser script. We need to replace
+    // all dependency references for runtimes with a parcelRequire call.
+
+    if (this.bundle.env.outputFormat === 'global' && this.bundle.env.sourceType === 'script') {
+      res += '\n';
+      lineCount++;
+      let mainEntry = (0, _nullthrows().default)(this.bundle.getMainEntry());
+      let {
+        code,
+        map: mapBuffer
+      } = (0, _nullthrows().default)(this.assetOutputs.get(mainEntry.id));
+      let map;
+
+      if (mapBuffer) {
+        map = new (_sourceMap2().default)(this.options.projectRoot, mapBuffer);
+      }
+
+      res += (0, _utils2.replaceScriptDependencies)(this.bundleGraph, this.bundle, code, map, this.parcelRequireName);
+
+      if (sourceMap && map) {
+        sourceMap.addSourceMap(map, lineCount);
       }
     }
 
-    res += this.outputFormat.buildBundlePostlude();
     return {
       contents: res,
       map: sourceMap
@@ -255,74 +248,61 @@ class ScopeHoistingPackager {
     let queue = new (_utils().PromiseQueue)({
       maxConcurrent: 32
     });
-    this.bundle.traverse((node, shouldWrap) => {
-      switch (node.type) {
-        case 'dependency':
-          // Mark assets that should be wrapped, based on metadata in the incoming dependency tree
-          if (node.value.meta.shouldWrap) {
-            let resolved = this.bundleGraph.getDependencyResolution(node.value, this.bundle);
-
-            if (resolved && resolved.sideEffects) {
-              this.wrappedAssets.add(resolved.id);
-            }
-
-            return true;
-          }
-
-          break;
-
-        case 'asset':
-          queue.add(async () => {
-            let [code, map] = await Promise.all([node.value.getCode(), this.bundle.env.sourceMap ? node.value.getMapBuffer() : null]);
-            return [node.value.id, {
-              code,
-              map
-            }];
-          });
-
-          if (shouldWrap || node.value.meta.shouldWrap || this.isAsyncBundle || this.bundleGraph.isAssetReferencedByDependant(this.bundle, node.value)) {
-            this.wrappedAssets.add(node.value.id);
-            return true;
-          }
+    let wrapped = [];
+    this.bundle.traverseAssets((asset, shouldWrap) => {
+      queue.add(async () => {
+        let [code, map] = await Promise.all([asset.getCode(), this.bundle.env.sourceMap ? asset.getMapBuffer() : null]);
+        return [asset.id, {
+          code,
+          map
+        }];
+      });
 
+      if (shouldWrap || asset.meta.shouldWrap || this.isAsyncBundle || this.bundle.env.sourceType === 'script' || this.bundleGraph.isAssetReferenced(this.bundle, asset) || this.bundleGraph.getIncomingDependencies(asset).some(dep => dep.meta.shouldWrap && dep.specifierType !== 'url')) {
+        this.wrappedAssets.add(asset.id);
+        wrapped.push(asset);
+        return true;
       }
     });
     this.assetOutputs = new Map(await queue.run());
+    return wrapped;
   }
 
   buildExportedSymbols() {
-    if (this.isAsyncBundle || this.bundle.env.outputFormat !== 'esmodule') {
+    if (this.isAsyncBundle || !this.bundle.env.isLibrary || this.bundle.env.outputFormat !== 'esmodule') {
       return;
-    }
+    } // TODO: handle ESM exports of wrapped entry assets...
+
 
     let entry = this.bundle.getMainEntry();
 
-    if (entry) {
+    if (entry && !this.wrappedAssets.has(entry.id)) {
       for (let {
+        asset,
         exportAs,
-        symbol
+        symbol,
+        exportSymbol
       } of this.bundleGraph.getExportedSymbols(entry)) {
         if (typeof symbol === 'string') {
-          var _entry$symbols$get2;
+          var _this$exportedSymbols, _entry$symbols$get2;
 
-          let symbols = 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);
-          let local = symbol;
+          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;
 
-          if (symbols) {
-            local = symbols[0].local;
-          } else {
+          if (!symbols) {
             symbols = [];
-            this.exportedSymbols.set(symbol, symbols);
+            this.exportedSymbols.set(symbol, {
+              asset,
+              exportSymbol,
+              local: symbol,
+              exportAs: symbols
+            });
           }
 
           if (exportAs === '*') {
             exportAs = 'default';
           }
 
-          symbols.push({
-            exportAs,
-            local
-          });
+          symbols.push(exportAs);
         } else if (symbol === null) {// TODO `meta.exportsIdentifier[exportSymbol]` should be exported
           // let relativePath = relative(options.projectRoot, asset.filePath);
           // throw getThrowableDiagnosticForNode(
@@ -359,6 +339,14 @@ class ScopeHoistingPackager {
     return name + count;
   }
 
+  getPropertyAccess(obj, property) {
+    if (IDENTIFIER_RE.test(property)) {
+      return `${obj}.${property}`;
+    }
+
+    return `${obj}[${JSON.stringify(property)}]`;
+  }
+
   visitAsset(asset) {
     (0, _assert().default)(!this.seenAssets.has(asset.id), 'Already visited asset');
     this.seenAssets.add(asset.id);
@@ -372,19 +360,14 @@ class ScopeHoistingPackager {
   buildAsset(asset, code, map) {
     let shouldWrap = this.wrappedAssets.has(asset.id);
     let deps = this.bundleGraph.getDependencies(asset);
-    let sourceMap = this.bundle.env.sourceMap ? new (_sourceMap().default)(this.options.projectRoot) : null;
-
-    if (sourceMap && map) {
-      sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap.addBuffer(map);
-    } // If this asset is skipped, just add dependencies and not the asset's content.
-
+    let sourceMap = this.bundle.env.sourceMap && map ? new (_sourceMap2().default)(this.options.projectRoot, map) : null; // If this asset is skipped, just add dependencies and not the asset's content.
 
     if (this.shouldSkipAsset(asset)) {
       let depCode = '';
       let lineCount = 0;
 
       for (let dep of deps) {
-        let resolved = this.bundleGraph.getDependencyResolution(dep, this.bundle);
+        let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
         let skipped = this.bundleGraph.isDependencySkipped(dep);
 
         if (!resolved || skipped) {
@@ -419,92 +402,103 @@ class ScopeHoistingPackager {
       code = prepend + code;
     }
 
-    code += append; // Build a regular expression for all the replacements we need to do.
-    // We need to track how many newlines there are for source maps, replace
-    // all import statements with dependency code, and perform inline replacements
-    // of all imported symbols with their resolved export symbols. This is all done
-    // in a single regex so that we only do one pass over the whole code.
-
-    let regex = new RegExp('\n|import\\s+"([0-9a-f]{32}:.+?)";' + (replacements.size > 0 ? '|' + [...replacements.keys()].sort((a, b) => b.length - a.length).map(k => k.replace(/[$]/g, '\\$&')).join('|') : ''), 'g');
+    code += append;
     let lineCount = 0;
-    let offset = 0;
-    let columnStartIndex = 0;
     let depContent = [];
-    code = code.replace(regex, (m, d, i) => {
-      var _replacements$get;
-
-      if (m === '\n') {
-        columnStartIndex = i + offset + 1;
-        lineCount++;
-        return '\n';
-      } // If we matched an import, replace with the source code for the dependency.
 
+    if (depMap.size === 0 && replacements.size === 0) {
+      // If there are no dependencies or replacements, use a simple function to count the number of lines.
+      lineCount = (0, _utils().countLines)(code) - 1;
+    } else {
+      // Otherwise, use a regular expression to perform replacements.
+      // We need to track how many newlines there are for source maps, replace
+      // all import statements with dependency code, and perform inline replacements
+      // of all imported symbols with their resolved export symbols. This is all done
+      // in a single regex so that we only do one pass over the whole code.
+      let offset = 0;
+      let columnStartIndex = 0;
+      code = code.replace(REPLACEMENT_RE, (m, d, i) => {
+        var _replacements$get;
+
+        if (m === '\n') {
+          columnStartIndex = i + offset + 1;
+          lineCount++;
+          return '\n';
+        } // If we matched an import, replace with the source code for the dependency.
+
+
+        if (d != null) {
+          let dep = depMap.get(d);
+
+          if (!dep) {
+            return m;
+          }
 
-      if (d != null) {
-        let dep = (0, _nullthrows().default)(depMap.get(d));
-        let resolved = this.bundleGraph.getDependencyResolution(dep, this.bundle);
-        let skipped = this.bundleGraph.isDependencySkipped(dep);
+          let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
+          let skipped = this.bundleGraph.isDependencySkipped(dep);
+
+          if (resolved && !skipped) {
+            // Hoist variable declarations for the referenced parcelRequire dependencies
+            // after the dependency is declared. This handles the case where the resulting asset
+            // is wrapped, but the dependency in this asset is not marked as wrapped. This means
+            // that it was imported/required at the top-level, so its side effects should run immediately.
+            let [res, lines] = this.getHoistedParcelRequires(asset, dep, resolved);
+            let map;
+
+            if (this.bundle.hasAsset(resolved) && !this.seenAssets.has(resolved.id)) {
+              // If this asset is wrapped, we need to hoist the code for the dependency
+              // outside our parcelRequire.register wrapper. This is safe because all
+              // assets referenced by this asset will also be wrapped. Otherwise, inline the
+              // asset content where the import statement was.
+              if (shouldWrap) {
+                depContent.push(this.visitAsset(resolved));
+              } else {
+                let [depCode, depMap, depLines] = this.visitAsset(resolved);
+                res = depCode + '\n' + res;
+                lines += 1 + depLines;
+                map = depMap;
+              }
+            } // Push this asset's source mappings down by the number of lines in the dependency
+            // plus the number of hoisted parcelRequires. Then insert the source map for the dependency.
 
-        if (resolved && !skipped) {
-          // Hoist variable declarations for the referenced parcelRequire dependencies
-          // after the dependency is declared. This handles the case where the resulting asset
-          // is wrapped, but the dependency in this asset is not marked as wrapped. This means
-          // that it was imported/required at the top-level, so its side effects should run immediately.
-          let [res, lines] = this.getHoistedParcelRequires(asset, dep, resolved);
-          let map;
-
-          if (this.bundle.hasAsset(resolved) && !this.seenAssets.has(resolved.id)) {
-            // If this asset is wrapped, we need to hoist the code for the dependency
-            // outside our parcelRequire.register wrapper. This is safe because all
-            // assets referenced by this asset will also be wrapped. Otherwise, inline the
-            // asset content where the import statement was.
-            if (shouldWrap) {
-              depContent.push(this.visitAsset(resolved));
-            } else {
-              let [depCode, depMap, depLines] = this.visitAsset(resolved);
-              res = depCode + '\n' + res;
-              lines += 1 + depLines;
-              map = depMap;
-            }
-          } // Push this asset's source mappings down by the number of lines in the dependency
-          // plus the number of hoisted parcelRequires. Then insert the source map for the dependency.
 
+            if (sourceMap) {
+              if (lines > 0) {
+                sourceMap.offsetLines(lineCount + 1, lines);
+              }
 
-          if (sourceMap) {
-            if (lines > 0) {
-              sourceMap.offsetLines(lineCount + 1, lines);
+              if (map) {
+                sourceMap.addSourceMap(map, lineCount);
+              }
             }
 
-            if (map) {
-              sourceMap.addSourceMap(map, lineCount, 0);
-            }
+            lineCount += lines;
+            return res;
           }
 
-          lineCount += lines;
-          return res;
-        }
-
-        return '';
-      } // If it wasn't a dependency, then it was an inline replacement (e.g. $id$import$foo -> $id$export$foo).
+          return '';
+        } // If it wasn't a dependency, then it was an inline replacement (e.g. $id$import$foo -> $id$export$foo).
 
 
-      let replacement = (_replacements$get = replacements.get(m)) !== null && _replacements$get !== void 0 ? _replacements$get : '';
+        let replacement = (_replacements$get = replacements.get(m)) !== null && _replacements$get !== void 0 ? _replacements$get : m;
 
-      if (sourceMap) {
-        // Offset the source map columns for this line if the replacement was a different length.
-        // This assumes that the match and replacement both do not contain any newlines.
-        let lengthDifference = replacement.length - m.length;
+        if (sourceMap) {
+          // Offset the source map columns for this line if the replacement was a different length.
+          // This assumes that the match and replacement both do not contain any newlines.
+          let lengthDifference = replacement.length - m.length;
 
-        if (lengthDifference !== 0) {
-          sourceMap.offsetColumns(lineCount + 1, i + offset - columnStartIndex + m.length, lengthDifference);
-          offset += lengthDifference;
+          if (lengthDifference !== 0) {
+            sourceMap.offsetColumns(lineCount + 1, i + offset - columnStartIndex + m.length, lengthDifference);
+            offset += lengthDifference;
+          }
         }
-      }
 
-      return replacement;
-    }); // If the asset is wrapped, we need to insert the dependency code outside the parcelRequire.register
+        return replacement;
+      });
+    } // If the asset is wrapped, we need to insert the dependency code outside the parcelRequire.register
     // wrapper. Dependencies must be inserted AFTER the asset is registered so that circular dependencies work.
 
+
     if (shouldWrap) {
       // Offset by one line for the parcelRequire.register wrapper.
       sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap.offsetLines(1, 1);
@@ -520,7 +514,7 @@ ${code}
         code += depCode + '\n';
 
         if (sourceMap && map) {
-          sourceMap.addSourceMap(map, lineCount, 0);
+          sourceMap.addSourceMap(map, lineCount);
         }
 
         lineCount += lines + 1;
@@ -541,11 +535,11 @@ ${code}
     let replacements = new Map();
 
     for (let dep of deps) {
-      depMap.set(`${assetId}:${dep.moduleSpecifier}`, dep);
+      depMap.set(`${assetId}:${(0, _utils2.getSpecifier)(dep)}`, dep);
       let asyncResolution = this.bundleGraph.resolveAsyncDependency(dep, this.bundle);
       let resolved = (asyncResolution === null || asyncResolution === void 0 ? void 0 : asyncResolution.type) === 'asset' ? // Prefer the underlying asset over a runtime to load it. It will
       // be wrapped in Promise.resolve() later.
-      asyncResolution.value : this.bundleGraph.getDependencyResolution(dep, this.bundle);
+      asyncResolution.value : this.bundleGraph.getResolvedAsset(dep, this.bundle);
 
       if (!resolved && !dep.isOptional && !this.bundleGraph.isDependencySkipped(dep)) {
         let external = this.addExternal(dep);
@@ -559,28 +553,54 @@ ${code}
           if (renamed && local !== '*') {
             replacements.set(local, renamed);
             continue;
-          } // Rename the specifier so that multiple local imports of the same imported specifier
-          // are deduplicated. We have to prefix the imported name with the bundle id so that
-          // local variables do not shadow it.
+          } // For CJS output, always use a property lookup so that exports remain live.
+          // For ESM output, use named imports which are always live.
+
+
+          if (this.bundle.env.outputFormat === 'commonjs') {
+            renamed = external.get('*');
+
+            if (!renamed) {
+              renamed = this.getTopLevelName(`$${this.bundle.publicId}$${dep.specifier}`);
+              external.set('*', renamed);
+            }
+
+            if (local !== '*') {
+              let replacement;
 
+              if (imported === '*') {
+                replacement = renamed;
+              } else if (imported === 'default') {
+                replacement = `($parcel$interopDefault(${renamed}))`;
+                this.usedHelpers.add('$parcel$interopDefault');
+              } else {
+                replacement = this.getPropertyAccess(renamed, imported);
+              }
 
-          if (this.exportedSymbols.has(local)) {
-            renamed = local;
-          } else if (imported === 'default' || imported === '*') {
-            renamed = this.getTopLevelName(`$${this.bundle.publicId}$${dep.moduleSpecifier}`);
+              replacements.set(local, replacement);
+            }
           } else {
-            renamed = this.getTopLevelName(`$${this.bundle.publicId}$${imported}`);
-          }
+            // Rename the specifier so that multiple local imports of the same imported specifier
+            // are deduplicated. We have to prefix the imported name with the bundle id so that
+            // local variables do not shadow it.
+            if (this.exportedSymbols.has(local)) {
+              renamed = local;
+            } else if (imported === 'default' || imported === '*') {
+              renamed = this.getTopLevelName(`$${this.bundle.publicId}$${dep.specifier}`);
+            } else {
+              renamed = this.getTopLevelName(`$${this.bundle.publicId}$${imported}`);
+            }
 
-          external.set(imported, renamed);
+            external.set(imported, renamed);
 
-          if (local !== '*') {
-            replacements.set(local, renamed);
+            if (local !== '*') {
+              replacements.set(local, renamed);
+            }
           }
         }
       }
 
-      if (!resolved || resolved === asset) {
+      if (!resolved) {
         continue;
       }
 
@@ -591,7 +611,7 @@ ${code}
           continue;
         }
 
-        let symbol = this.resolveSymbol(asset, resolved, imported, dep);
+        let symbol = this.getSymbolResolution(asset, resolved, imported, dep);
         replacements.set(local, // If this was an internalized async asset, wrap in a Promise.resolve.
         (asyncResolution === null || asyncResolution === void 0 ? void 0 : asyncResolution.type) === 'asset' ? `Promise.resolve(${symbol})` : symbol);
       } // Async dependencies need a namespace object even if all used symbols were statically analyzed.
@@ -599,10 +619,10 @@ ${code}
       // symbols so that we don't mark all symbols as used.
 
 
-      if (dep.isAsync && dep.meta.promiseSymbol) {
+      if (dep.priority === 'lazy' && dep.meta.promiseSymbol) {
         let promiseSymbol = dep.meta.promiseSymbol;
         (0, _assert().default)(typeof promiseSymbol === 'string');
-        let symbol = this.resolveSymbol(asset, resolved, '*', dep);
+        let symbol = this.getSymbolResolution(asset, resolved, '*', dep);
         replacements.set(promiseSymbol, (asyncResolution === null || asyncResolution === void 0 ? void 0 : asyncResolution.type) === 'asset' ? `Promise.resolve(${symbol})` : symbol);
       }
     } // If this asset is wrapped, we need to replace the exports namespace with `module.exports`,
@@ -624,36 +644,42 @@ ${code}
       throw new (_diagnostic().default)({
         diagnostic: {
           message: 'External modules are not supported when building for browser',
-          filePath: (0, _nullthrows().default)(dep.sourcePath),
-          codeFrame: {
+          codeFrames: [{
+            filePath: (0, _nullthrows().default)(dep.sourcePath),
             codeHighlights: dep.loc ? [{
               start: dep.loc.start,
               end: dep.loc.end
             }] : []
-          }
+          }]
         }
       });
-    } // Map of ModuleSpecifier -> Map<ExportedSymbol, Identifier>>
+    } // Map of DependencySpecifier -> Map<ExportedSymbol, Identifier>>
 
 
-    let external = this.externals.get(dep.moduleSpecifier);
+    let external = this.externals.get(dep.specifier);
 
     if (!external) {
       external = new Map();
-      this.externals.set(dep.moduleSpecifier, external);
+      this.externals.set(dep.specifier, external);
     }
 
     return external;
   }
 
-  resolveSymbol(parentAsset, resolved, imported, dep) {
+  getSymbolResolution(parentAsset, resolved, imported, dep) {
     var _resolvedAsset$symbol;
 
     let {
       asset: resolvedAsset,
       exportSymbol,
       symbol
-    } = this.bundleGraph.resolveSymbol(resolved, imported, this.bundle);
+    } = this.bundleGraph.getSymbolResolution(resolved, imported, this.bundle);
+
+    if (resolvedAsset.type !== 'js') {
+      // Graceful fallback for non-js imports
+      return '{}';
+    }
+
     let isWrapped = !this.bundle.hasAsset(resolvedAsset) || this.wrappedAssets.has(resolvedAsset.id) && resolvedAsset !== parentAsset;
     let staticExports = resolvedAsset.meta.staticExports !== false;
     let publicId = this.bundleGraph.getAssetPublicId(resolvedAsset); // If the rsolved asset is wrapped, but imported at the top-level by this asset,
@@ -676,7 +702,7 @@ ${code}
     // and no __esModule flag, we need to resolve to the namespace instead.
 
 
-    let isDefaultInterop = exportSymbol === 'default' && staticExports && !isWrapped && (dep === null || dep === void 0 ? void 0 : dep.meta.kind) === 'Import' && resolvedAsset.symbols.hasExportSymbol('*') && resolvedAsset.symbols.hasExportSymbol('default') && !resolvedAsset.symbols.hasExportSymbol('__esModule'); // Find the namespace object for the resolved module. If wrapped and this
+    let isDefaultInterop = exportSymbol === 'default' && staticExports && !isWrapped && ((dep === null || dep === void 0 ? void 0 : dep.meta.kind) === 'Import' || (dep === null || dep === void 0 ? void 0 : dep.meta.kind) === 'Export') && resolvedAsset.symbols.hasExportSymbol('*') && resolvedAsset.symbols.hasExportSymbol('default') && !resolvedAsset.symbols.hasExportSymbol('__esModule'); // Find the namespace object for the resolved module. If wrapped and this
     // is an inline require (not top-level), use a parcelRequire call, otherwise
     // the hoisted variable declared above. Otherwise, if not wrapped, use the
     // namespace export symbol.
@@ -694,15 +720,13 @@ ${code}
       // we need to use a member access off the namespace object rather
       // than a direct reference. If importing default from a CJS module,
       // use a helper to check the __esModule flag at runtime.
-      if ((dep === null || dep === void 0 ? void 0 : dep.meta.kind) === 'Import' && exportSymbol === 'default' && resolvedAsset.symbols.hasExportSymbol('*') && this.needsDefaultInterop(resolvedAsset)) {
+      let kind = dep === null || dep === void 0 ? void 0 : dep.meta.kind;
+
+      if ((!dep || kind === 'Import' || kind === 'Export') && exportSymbol === 'default' && resolvedAsset.symbols.hasExportSymbol('*') && this.needsDefaultInterop(resolvedAsset)) {
         this.usedHelpers.add('$parcel$interopDefault');
         return `(/*@__PURE__*/$parcel$interopDefault(${obj}))`;
       } else {
-        if (IDENTIFIER_RE.test(exportSymbol)) {
-          return `${obj}.${exportSymbol}`;
-        }
-
-        return `${obj}[${JSON.stringify(exportSymbol)}]`;
+        return this.getPropertyAccess(obj, exportSymbol);
       }
     } else if (!symbol) {
       (0, _assert().default)(false, 'Asset was skipped or not found.');
@@ -743,18 +767,22 @@ ${code}
     let prependLineCount = 0;
     let append = '';
     let shouldWrap = this.wrappedAssets.has(asset.id);
-    let usedSymbols = this.bundleGraph.getUsedSymbols(asset);
+    let usedSymbols = (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(asset));
     let assetId = asset.meta.id;
     (0, _assert().default)(typeof assetId === 'string'); // If the asset has a namespace export symbol, it is CommonJS.
     // If there's no __esModule flag, and default is a used symbol, we need
     // to insert an interop helper.
 
-    let defaultInterop = asset.symbols.hasExportSymbol('*') && usedSymbols.has('default') && !asset.symbols.hasExportSymbol('__esModule'); // If the asset has * in its used symbols, we might need the exports namespace.
+    let defaultInterop = asset.symbols.hasExportSymbol('*') && usedSymbols.has('default') && !asset.symbols.hasExportSymbol('__esModule');
+    let usedNamespace = // If the asset has * in its used symbols, we might need the exports namespace.
     // The one case where this isn't true is in ESM library entries, where the only
     // dependency on * is the entry dependency. In this case, we will use ESM exports
     // instead of the namespace object.
-
-    let usedNamespace = usedSymbols.has('*') && (this.bundle.env.outputFormat !== 'esmodule' || !this.bundle.env.isLibrary || asset !== this.bundle.getMainEntry() || this.bundleGraph.getIncomingDependencies(asset).some(dep => !dep.isEntry && this.bundleGraph.getUsedSymbols(dep).has('*'))); // If the asset doesn't have static exports, should wrap, the namespace is used,
+    usedSymbols.has('*') && (this.bundle.env.outputFormat !== 'esmodule' || !this.bundle.env.isLibrary || asset !== this.bundle.getMainEntry() || this.bundleGraph.getIncomingDependencies(asset).some(dep => !dep.isEntry && (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(dep)).has('*'))) || // If a symbol is imported (used) from a CJS asset but isn't listed in the symbols,
+    // we fallback on the namespace object.
+    asset.symbols.hasExportSymbol('*') && [...usedSymbols].some(s => !asset.symbols.hasExportSymbol(s)) || // If the exports has this asset's namespace (e.g. ESM output from CJS input),
+    // include the namespace object for the default export.
+    this.exportedSymbols.has(`$${assetId}$exports`); // If the asset doesn't have static exports, should wrap, the namespace is used,
     // or we need default interop, then we need to synthesize a namespace object for
     // this asset.
 
@@ -793,7 +821,7 @@ ${code}
         }
 
         let unused = incomingDeps.every(d => {
-          let symbols = this.bundleGraph.getUsedSymbols(d);
+          let symbols = (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(d));
           return !symbols.has(symbol) && !symbols.has('*');
         });
         return !unused;
@@ -805,8 +833,10 @@ ${code}
         // required to simulate ESM live bindings. It's easier to do it this way rather than inserting
         // additional assignments after each mutation of the original binding.
         prepend += `\n${usedExports.map(exp => {
-          let resolved = this.resolveSymbol(asset, asset, exp);
-          return `$parcel$export($${assetId}$exports, ${JSON.stringify(exp)}, () => ${resolved}${asset.meta.hasCJSExports ? `, (v) => ${resolved} = v` : ''});`;
+          let resolved = this.getSymbolResolution(asset, asset, exp);
+          let get = this.buildFunctionExpression([], resolved);
+          let set = asset.meta.hasCJSExports ? ', ' + this.buildFunctionExpression(['v'], `${resolved} = v`) : '';
+          return `$parcel$export($${assetId}$exports, ${JSON.stringify(exp)}, ${get}${set});`;
         }).join('\n')}\n`;
         this.usedHelpers.add('$parcel$export');
         prependLineCount += 1 + usedExports.length;
@@ -814,13 +844,13 @@ ${code}
 
 
       for (let dep of deps) {
-        let resolved = this.bundleGraph.getDependencyResolution(dep, this.bundle);
+        let resolved = this.bundleGraph.getResolvedAsset(dep, this.bundle);
 
         if (dep.isOptional || this.bundleGraph.isDependencySkipped(dep)) {
           continue;
         }
 
-        let isWrapped = resolved && this.wrappedAssets.has(resolved.id);
+        let isWrapped = resolved && resolved.meta.shouldWrap;
 
         for (let [imported, {
           local
@@ -828,7 +858,7 @@ ${code}
           if (imported === '*' && local === '*') {
             if (!resolved) {
               // Re-exporting an external module. This should have already been handled in buildReplacements.
-              let external = (0, _nullthrows().default)((0, _nullthrows().default)(this.externals.get(dep.moduleSpecifier)).get('*'));
+              let external = (0, _nullthrows().default)((0, _nullthrows().default)(this.externals.get(dep.specifier)).get('*'));
               append += `$parcel$exportWildcard($${assetId}$exports, ${external});\n`;
               this.usedHelpers.add('$parcel$exportWildcard');
               continue;
@@ -837,14 +867,23 @@ ${code}
             // $parcel$export calls for each used symbol of the dependency.
 
 
-            if (isWrapped || resolved.meta.staticExports === false || this.bundleGraph.getUsedSymbols(resolved).has('*')) {
-              let obj = this.resolveSymbol(asset, resolved, '*', dep);
+            if (isWrapped || resolved.meta.staticExports === false || (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(resolved)).has('*') || // an empty asset
+            !resolved.meta.hasCJSExports && resolved.symbols.hasExportSymbol('*')) {
+              let obj = this.getSymbolResolution(asset, resolved, '*', dep);
               append += `$parcel$exportWildcard($${assetId}$exports, ${obj});\n`;
               this.usedHelpers.add('$parcel$exportWildcard');
             } else {
-              for (let symbol of this.bundleGraph.getUsedSymbols(dep)) {
-                let resolvedSymbol = this.resolveSymbol(asset, resolved, symbol);
-                prepend += `$parcel$export($${assetId}$exports, ${JSON.stringify(symbol)}, () => ${resolvedSymbol}${asset.meta.hasCJSExports ? `, (v) => ${resolvedSymbol} = v` : ''});\n`;
+              for (let symbol of (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(dep))) {
+                if (symbol === 'default' || // `export * as ...` does not include the default export
+                symbol === '__esModule') {
+                  continue;
+                }
+
+                let resolvedSymbol = this.getSymbolResolution(asset, resolved, symbol);
+                let get = this.buildFunctionExpression([], resolvedSymbol);
+                let set = asset.meta.hasCJSExports ? ', ' + this.buildFunctionExpression(['v'], `${resolvedSymbol} = v`) : '';
+                prepend += `$parcel$export($${assetId}$exports, ${JSON.stringify(symbol)}, ${get}${set});\n`;
+                this.usedHelpers.add('$parcel$export');
                 prependLineCount++;
               }
             }
@@ -883,23 +922,21 @@ ${code}
     }
 
     for (let helper of this.usedHelpers) {
-      res += _helpers().helpers[helper];
+      res += _helpers.helpers[helper];
 
       if (enableSourceMaps) {
-        lines += (0, _utils().countLines)(_helpers().helpers[helper]) - 1;
+        lines += (0, _utils().countLines)(_helpers.helpers[helper]) - 1;
       }
     }
 
     if (this.needsPrelude) {
-      var _this$bundle$getMainE2;
-
       // 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$getMainE2 = this.bundle.getMainEntry()) !== null && _this$bundle$getMainE2 !== void 0 && _this$bundle$getMainE2.isIsolated);
+      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';
 
       if (mightBeFirstJS) {
-        let preludeCode = (0, _helpers().prelude)(this.parcelRequireName);
+        let preludeCode = (0, _helpers.prelude)(this.parcelRequireName);
         res += preludeCode;
 
         if (enableSourceMaps) {
@@ -913,12 +950,17 @@ ${code}
     } // Add importScripts for sibling bundles in workers.
 
 
-    if (this.bundle.env.isWorker()) {
+    if (this.bundle.env.isWorker() || this.bundle.env.isWorklet()) {
       let importScripts = '';
       let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
 
       for (let b of bundles) {
-        importScripts += `importScripts("${(0, _utils().relativeBundlePath)(this.bundle, b)}");\n`;
+        if (this.bundle.env.outputFormat === 'esmodule') {
+          // importScripts() is not allowed in native ES module workers.
+          importScripts += `import "${(0, _utils().relativeBundlePath)(this.bundle, b)}";\n`;
+        } else {
+          importScripts += `importScripts("${(0, _utils().relativeBundlePath)(this.bundle, b)}");\n`;
+        }
       }
 
       res += importScripts;
@@ -939,7 +981,19 @@ ${code}
   }
 
   shouldSkipAsset(asset) {
-    return asset.sideEffects === false && this.bundleGraph.getUsedSymbols(asset).size == 0 && !this.bundleGraph.isAssetReferencedByDependant(this.bundle, asset);
+    if (this.isScriptEntry(asset)) {
+      return true;
+    }
+
+    return asset.sideEffects === false && (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(asset)).size == 0 && !this.bundleGraph.isAssetReferenced(this.bundle, asset);
+  }
+
+  isScriptEntry(asset) {
+    return this.bundle.env.outputFormat === 'global' && this.bundle.env.sourceType === 'script' && asset === this.bundle.getMainEntry();
+  }
+
+  buildFunctionExpression(args, expr) {
+    return this.bundle.env.supports('arrow-functions', true) ? `(${args.join(', ')}) => ${expr}` : `function (${args.join(', ')}) { return ${expr}; }`;
   }
 
 }