@atlaspack/packager-js 2.14.11 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaspack/packager-js
 
+## 2.15.0
+
+### Minor Changes
+
+- [#627](https://github.com/atlassian-labs/atlaspack/pull/627) [`85c52d3`](https://github.com/atlassian-labs/atlaspack/commit/85c52d3f7717b3c84a118d18ab98cfbfd71dcbd2) Thanks [@benjervis](https://github.com/benjervis)! - Expands the situations where scope hoisting may be applied to include assets with no dependencies, regardless of whether if they have a wrapped ancestor.
+
+  Can be enabled with the `applyScopeHoistingImprovement` feature flag.
+
+### Patch Changes
+
+- [#632](https://github.com/atlassian-labs/atlaspack/pull/632) [`10fbcfb`](https://github.com/atlassian-labs/atlaspack/commit/10fbcfbfa49c7a83da5d7c40983e36e87f524a75) Thanks [@marcins](https://github.com/marcins)! - Added a new feature flag `inlineConstOptimisationFix` which when enabled changes the behaviour for output of constant modules. This fixes two issues with constant modules:
+
+  - Previously constant modules, if they needed a namespace anywhere, would have a namespace everywhere, with this change they only have a namespace in the bundles where needed.
+  - Previously in the case of wrapped assets, a constant module dependnecy of that wrapped asset would be rendered after the module - which meant the minifier would not be able to inline the constants safely. With this flag all constant modules are rendered at the top of the bundle.
+
+- Updated dependencies [[`10fbcfb`](https://github.com/atlassian-labs/atlaspack/commit/10fbcfbfa49c7a83da5d7c40983e36e87f524a75), [`85c52d3`](https://github.com/atlassian-labs/atlaspack/commit/85c52d3f7717b3c84a118d18ab98cfbfd71dcbd2), [`e39c6cf`](https://github.com/atlassian-labs/atlaspack/commit/e39c6cf05f7e95ce5420dbcea66f401b1cbd397c)]:
+  - @atlaspack/feature-flags@2.18.0
+  - @atlaspack/utils@2.15.0
+  - @atlaspack/types@2.15.2
+  - @atlaspack/plugin@2.14.12
+
 ## 2.14.11
 
 ### Patch Changes

package/lib/ScopeHoistingPackager.js

@@ -115,7 +115,10 @@ class ScopeHoistingPackager {
   }
   async package() {
     var _sourceMap;
-    let wrappedAssets = await this.loadAssets();
+    let {
+      wrapped: wrappedAssets,
+      constant: constantAssets
+    } = await this.loadAssets();
     this.buildExportedSymbols();
 
     // If building a library, the target is actually another bundler rather
@@ -143,6 +146,14 @@ class ScopeHoistingPackager {
       res += content + '\n';
       lineCount += lines + 1;
     };
+    if ((0, _featureFlags().getFeatureFlag)('inlineConstOptimisationFix')) {
+      // Write out all constant modules used by this bundle
+      for (let asset of constantAssets) {
+        if (!this.seenAssets.has(asset.id)) {
+          processAsset(asset);
+        }
+      }
+    }
 
     // Hoist wrapped asset to the top of the bundle to ensure that they are registered
     // before they are used.
@@ -265,6 +276,7 @@ class ScopeHoistingPackager {
       maxConcurrent: 32
     });
     let wrapped = [];
+    let constant = [];
     this.bundle.traverseAssets(asset => {
       queue.add(async () => {
         let [code, map] = await Promise.all([asset.getCode(), this.bundle.env.sourceMap ? asset.getMapBuffer() : null]);
@@ -278,38 +290,76 @@ class ScopeHoistingPackager {
         if (!asset.meta.isConstantModule || this.bundleGraph.getIncomingDependencies(asset).some(dep => dep.priority === 'lazy')) {
           this.wrappedAssets.add(asset.id);
           wrapped.push(asset);
+        } else if ((0, _featureFlags().getFeatureFlag)('inlineConstOptimisationFix') && asset.meta.isConstantModule) {
+          constant.push(asset);
         }
       }
     });
-    for (let wrappedAssetRoot of [...wrapped]) {
-      this.bundle.traverseAssets((asset, _, actions) => {
-        if (asset === wrappedAssetRoot) {
-          return;
-        }
-        if (this.wrappedAssets.has(asset.id)) {
-          actions.skipChildren();
-          return;
-        }
-        // This prevents children of a wrapped asset also being wrapped - it's an "unsafe" optimisation
-        // that should only be used when you know (or think you know) what you're doing.
-        //
-        // In particular this can force an async bundle to be scope hoisted where it previously would not be
-        // due to the entry asset being wrapped.
-        if (this.forceSkipWrapAssets.length > 0 && this.forceSkipWrapAssets.some(p => p === _path().default.relative(this.options.projectRoot, asset.filePath))) {
-          this.logger.verbose({
-            message: `Force skipping wrapping of ${_path().default.relative(this.options.projectRoot, asset.filePath)}`
-          });
-          actions.skipChildren();
-          return;
-        }
-        if (!asset.meta.isConstantModule) {
-          this.wrappedAssets.add(asset.id);
-          wrapped.push(asset);
-        }
-      }, wrappedAssetRoot);
+    if ((0, _featureFlags().getFeatureFlag)('applyScopeHoistingImprovement')) {
+      // Tracks which assets have been assigned to a wrap group
+      let assignedAssets = new Set();
+      for (let wrappedAsset of wrapped) {
+        this.bundle.traverseAssets((asset, _, actions) => {
+          if (asset === wrappedAsset) {
+            return;
+          }
+          if (this.wrappedAssets.has(asset.id)) {
+            actions.skipChildren();
+            return;
+          }
+          if (assignedAssets.has(asset) || this.isReExported(asset)) {
+            wrapped.push(asset);
+            this.wrappedAssets.add(asset.id);
+            actions.skipChildren();
+            return;
+          }
+          assignedAssets.add(asset);
+        }, wrappedAsset);
+      }
+    } else {
+      for (let wrappedAssetRoot of [...wrapped]) {
+        this.bundle.traverseAssets((asset, _, actions) => {
+          if (asset === wrappedAssetRoot) {
+            return;
+          }
+          if (this.wrappedAssets.has(asset.id)) {
+            actions.skipChildren();
+            return;
+          }
+          // This prevents children of a wrapped asset also being wrapped - it's an "unsafe" optimisation
+          // that should only be used when you know (or think you know) what you're doing.
+          //
+          // In particular this can force an async bundle to be scope hoisted where it previously would not be
+          // due to the entry asset being wrapped.
+          if (this.forceSkipWrapAssets.length > 0 && this.forceSkipWrapAssets.some(p => p === _path().default.relative(this.options.projectRoot, asset.filePath))) {
+            this.logger.verbose({
+              message: `Force skipping wrapping of ${_path().default.relative(this.options.projectRoot, asset.filePath)}`
+            });
+            actions.skipChildren();
+            return;
+          }
+          if (!asset.meta.isConstantModule) {
+            this.wrappedAssets.add(asset.id);
+            wrapped.push(asset);
+          }
+        }, wrappedAssetRoot);
+      }
     }
     this.assetOutputs = new Map(await queue.run());
-    return wrapped;
+    return {
+      wrapped,
+      constant
+    };
+  }
+  isReExported(asset) {
+    let parentSymbols = this.bundleGraph.getIncomingDependencies(asset).map(dep => this.bundleGraph.getAssetWithDependency(dep)).flatMap(parent => {
+      if (parent == null) {
+        return [];
+      }
+      return this.bundleGraph.getExportedSymbols(parent, this.bundle);
+    });
+    let assetSymbols = this.bundleGraph.getExportedSymbols(asset, this.bundle);
+    return assetSymbols.some(assetSymbol => parentSymbols.some(parentSymbol => parentSymbol.symbol === assetSymbol.symbol));
   }
   buildExportedSymbols() {
     if (!this.bundle.env.isLibrary || this.bundle.env.outputFormat !== 'esmodule') {
@@ -489,13 +539,22 @@ class ScopeHoistingPackager {
                 // 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));
+                if ((0, _featureFlags().getFeatureFlag)('applyScopeHoistingImprovement')) {
+                  if (!this.wrappedAssets.has(resolved.id)) {
+                    let [depCode, depMap, depLines] = this.visitAsset(resolved);
+                    res = depCode + '\n' + res;
+                    lines += 1 + depLines;
+                    map = depMap;
+                  }
                 } else {
-                  let [depCode, depMap, depLines] = this.visitAsset(resolved);
-                  res = depCode + '\n' + res;
-                  lines += 1 + depLines;
-                  map = depMap;
+                  if (shouldWrap) {
+                    depContent.push(this.visitAsset(resolved));
+                  } else {
+                    let [depCode, depMap, depLines] = this.visitAsset(resolved);
+                    res = depCode + '\n' + res;
+                    lines += 1 + depLines;
+                    map = depMap;
+                  }
                 }
               }
 
@@ -874,20 +933,26 @@ ${code}
     // 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');
-    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.
-    usedSymbols.has('*') && (this.bundle.env.outputFormat !== 'esmodule' || !this.bundle.env.isLibrary || asset !== this.bundle.getMainEntry() || this.bundleGraph.getIncomingDependencies(asset).some(dep => !dep.isEntry && this.bundle.hasDependency(dep) && (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`) ||
-    // CommonJS library bundle entries always need a namespace.
-    this.bundle.env.isLibrary && this.bundle.env.outputFormat === 'commonjs' && asset === this.bundle.getMainEntry();
+    let usedNamespace;
+    if ((0, _featureFlags().getFeatureFlag)('inlineConstOptimisationFix') && asset.meta.isConstantModule) {
+      // Only set usedNamespace if there is an incoming dependency in the current bundle that uses '*'
+      usedNamespace = this.bundleGraph.getIncomingDependencies(asset).some(dep => this.bundle.hasDependency(dep) && (0, _nullthrows().default)(this.bundleGraph.getUsedSymbols(dep)).has('*'));
+    } else {
+      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.
+      usedSymbols.has('*') && (this.bundle.env.outputFormat !== 'esmodule' || !this.bundle.env.isLibrary || asset !== this.bundle.getMainEntry() || this.bundleGraph.getIncomingDependencies(asset).some(dep => !dep.isEntry && this.bundle.hasDependency(dep) && (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`) ||
+      // CommonJS library bundle entries always need a namespace.
+      this.bundle.env.isLibrary && this.bundle.env.outputFormat === 'commonjs' && asset === this.bundle.getMainEntry();
+    }
 
     // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/packager-js",
-  "version": "2.14.11",
+  "version": "2.15.0",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@atlaspack/diagnostic": "2.14.1",
-    "@atlaspack/feature-flags": "2.17.0",
-    "@atlaspack/plugin": "2.14.11",
+    "@atlaspack/feature-flags": "2.18.0",
+    "@atlaspack/plugin": "2.14.12",
     "@atlaspack/rust": "3.3.5",
     "@parcel/source-map": "^2.1.1",
-    "@atlaspack/types": "2.15.1",
-    "@atlaspack/utils": "2.14.11",
+    "@atlaspack/types": "2.15.2",
+    "@atlaspack/utils": "2.15.0",
     "globals": "^13.2.0",
     "nullthrows": "^1.1.1"
   },

package/src/ScopeHoistingPackager.js

@@ -134,7 +134,8 @@ export class ScopeHoistingPackager {
   }
 
   async package(): Promise<{|contents: string, map: ?SourceMap|}> {
-    let wrappedAssets = await this.loadAssets();
+    let {wrapped: wrappedAssets, constant: constantAssets} =
+      await this.loadAssets();
     this.buildExportedSymbols();
 
     // If building a library, the target is actually another bundler rather
@@ -168,6 +169,15 @@ export class ScopeHoistingPackager {
       lineCount += lines + 1;
     };
 
+    if (getFeatureFlag('inlineConstOptimisationFix')) {
+      // Write out all constant modules used by this bundle
+      for (let asset of constantAssets) {
+        if (!this.seenAssets.has(asset.id)) {
+          processAsset(asset);
+        }
+      }
+    }
+
     // Hoist wrapped asset to the top of the bundle to ensure that they are registered
     // before they are used.
     for (let asset of wrappedAssets) {
@@ -354,15 +364,20 @@ export class ScopeHoistingPackager {
     return `$parcel$global.rwr(${params.join(', ')});`;
   }
 
-  async loadAssets(): Promise<Array<Asset>> {
+  async loadAssets(): Promise<{|
+    wrapped: Array<Asset>,
+    constant: Array<Asset>,
+  |}> {
     let queue = new PromiseQueue({maxConcurrent: 32});
     let wrapped = [];
+    let constant = [];
     this.bundle.traverseAssets((asset) => {
       queue.add(async () => {
         let [code, map] = await Promise.all([
           asset.getCode(),
           this.bundle.env.sourceMap ? asset.getMapBuffer() : null,
         ]);
+
         return [asset.id, {code, map}];
       });
 
@@ -383,50 +398,103 @@ export class ScopeHoistingPackager {
         ) {
           this.wrappedAssets.add(asset.id);
           wrapped.push(asset);
+        } else if (
+          getFeatureFlag('inlineConstOptimisationFix') &&
+          asset.meta.isConstantModule
+        ) {
+          constant.push(asset);
         }
       }
     });
 
-    for (let wrappedAssetRoot of [...wrapped]) {
-      this.bundle.traverseAssets((asset, _, actions) => {
-        if (asset === wrappedAssetRoot) {
-          return;
-        }
+    if (getFeatureFlag('applyScopeHoistingImprovement')) {
+      // Tracks which assets have been assigned to a wrap group
+      let assignedAssets = new Set<Asset>();
 
-        if (this.wrappedAssets.has(asset.id)) {
-          actions.skipChildren();
-          return;
-        }
-        // This prevents children of a wrapped asset also being wrapped - it's an "unsafe" optimisation
-        // that should only be used when you know (or think you know) what you're doing.
-        //
-        // In particular this can force an async bundle to be scope hoisted where it previously would not be
-        // due to the entry asset being wrapped.
-        if (
-          this.forceSkipWrapAssets.length > 0 &&
-          this.forceSkipWrapAssets.some(
-            (p) =>
-              p === path.relative(this.options.projectRoot, asset.filePath),
-          )
-        ) {
-          this.logger.verbose({
-            message: `Force skipping wrapping of ${path.relative(
-              this.options.projectRoot,
-              asset.filePath,
-            )}`,
-          });
-          actions.skipChildren();
-          return;
-        }
-        if (!asset.meta.isConstantModule) {
-          this.wrappedAssets.add(asset.id);
-          wrapped.push(asset);
-        }
-      }, wrappedAssetRoot);
+      for (let wrappedAsset of wrapped) {
+        this.bundle.traverseAssets((asset, _, actions) => {
+          if (asset === wrappedAsset) {
+            return;
+          }
+
+          if (this.wrappedAssets.has(asset.id)) {
+            actions.skipChildren();
+            return;
+          }
+
+          if (assignedAssets.has(asset) || this.isReExported(asset)) {
+            wrapped.push(asset);
+            this.wrappedAssets.add(asset.id);
+
+            actions.skipChildren();
+            return;
+          }
+
+          assignedAssets.add(asset);
+        }, wrappedAsset);
+      }
+    } else {
+      for (let wrappedAssetRoot of [...wrapped]) {
+        this.bundle.traverseAssets((asset, _, actions) => {
+          if (asset === wrappedAssetRoot) {
+            return;
+          }
+
+          if (this.wrappedAssets.has(asset.id)) {
+            actions.skipChildren();
+            return;
+          }
+          // This prevents children of a wrapped asset also being wrapped - it's an "unsafe" optimisation
+          // that should only be used when you know (or think you know) what you're doing.
+          //
+          // In particular this can force an async bundle to be scope hoisted where it previously would not be
+          // due to the entry asset being wrapped.
+          if (
+            this.forceSkipWrapAssets.length > 0 &&
+            this.forceSkipWrapAssets.some(
+              (p) =>
+                p === path.relative(this.options.projectRoot, asset.filePath),
+            )
+          ) {
+            this.logger.verbose({
+              message: `Force skipping wrapping of ${path.relative(
+                this.options.projectRoot,
+                asset.filePath,
+              )}`,
+            });
+            actions.skipChildren();
+            return;
+          }
+          if (!asset.meta.isConstantModule) {
+            this.wrappedAssets.add(asset.id);
+            wrapped.push(asset);
+          }
+        }, wrappedAssetRoot);
+      }
     }
 
     this.assetOutputs = new Map(await queue.run());
-    return wrapped;
+    return {wrapped, constant};
+  }
+
+  isReExported(asset: Asset): boolean {
+    let parentSymbols = this.bundleGraph
+      .getIncomingDependencies(asset)
+      .map((dep) => this.bundleGraph.getAssetWithDependency(dep))
+      .flatMap((parent) => {
+        if (parent == null) {
+          return [];
+        }
+        return this.bundleGraph.getExportedSymbols(parent, this.bundle);
+      });
+
+    let assetSymbols = this.bundleGraph.getExportedSymbols(asset, this.bundle);
+
+    return assetSymbols.some((assetSymbol) =>
+      parentSymbols.some(
+        (parentSymbol) => parentSymbol.symbol === assetSymbol.symbol,
+      ),
+    );
   }
 
   buildExportedSymbols() {
@@ -661,13 +729,24 @@ export class ScopeHoistingPackager {
                   // 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));
+                  if (getFeatureFlag('applyScopeHoistingImprovement')) {
+                    if (!this.wrappedAssets.has(resolved.id)) {
+                      let [depCode, depMap, depLines] =
+                        this.visitAsset(resolved);
+                      res = depCode + '\n' + res;
+                      lines += 1 + depLines;
+                      map = depMap;
+                    }
                   } else {
-                    let [depCode, depMap, depLines] = this.visitAsset(resolved);
-                    res = depCode + '\n' + res;
-                    lines += 1 + depLines;
-                    map = depMap;
+                    if (shouldWrap) {
+                      depContent.push(this.visitAsset(resolved));
+                    } else {
+                      let [depCode, depMap, depLines] =
+                        this.visitAsset(resolved);
+                      res = depCode + '\n' + res;
+                      lines += 1 + depLines;
+                      map = depMap;
+                    }
                   }
                 }
 
@@ -1220,34 +1299,49 @@ ${code}
       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.
-      (usedSymbols.has('*') &&
-        (this.bundle.env.outputFormat !== 'esmodule' ||
-          !this.bundle.env.isLibrary ||
-          asset !== this.bundle.getMainEntry() ||
-          this.bundleGraph
-            .getIncomingDependencies(asset)
-            .some(
-              (dep) =>
-                !dep.isEntry &&
-                this.bundle.hasDependency(dep) &&
-                nullthrows(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`) ||
-      // CommonJS library bundle entries always need a namespace.
-      (this.bundle.env.isLibrary &&
-        this.bundle.env.outputFormat === 'commonjs' &&
-        asset === this.bundle.getMainEntry());
+    let usedNamespace;
+    if (
+      getFeatureFlag('inlineConstOptimisationFix') &&
+      asset.meta.isConstantModule
+    ) {
+      // Only set usedNamespace if there is an incoming dependency in the current bundle that uses '*'
+      usedNamespace = this.bundleGraph
+        .getIncomingDependencies(asset)
+        .some(
+          (dep) =>
+            this.bundle.hasDependency(dep) &&
+            nullthrows(this.bundleGraph.getUsedSymbols(dep)).has('*'),
+        );
+    } else {
+      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.
+        (usedSymbols.has('*') &&
+          (this.bundle.env.outputFormat !== 'esmodule' ||
+            !this.bundle.env.isLibrary ||
+            asset !== this.bundle.getMainEntry() ||
+            this.bundleGraph
+              .getIncomingDependencies(asset)
+              .some(
+                (dep) =>
+                  !dep.isEntry &&
+                  this.bundle.hasDependency(dep) &&
+                  nullthrows(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`) ||
+        // CommonJS library bundle entries always need a namespace.
+        (this.bundle.env.isLibrary &&
+          this.bundle.env.outputFormat === 'commonjs' &&
+          asset === this.bundle.getMainEntry());
+    }
 
     // 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