metro 0.76.3 → 0.76.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.76.3",
+  "version": "0.76.5",
   "description": "🚇 The JavaScript bundler for React Native.",
   "main": "src/index.js",
   "bin": "src/cli.js",
@@ -30,26 +30,27 @@
     "error-stack-parser": "^2.0.6",
     "graceful-fs": "^4.2.4",
     "hermes-parser": "0.8.0",
-    "image-size": "^0.6.0",
+    "image-size": "^1.0.2",
     "invariant": "^2.2.4",
     "jest-worker": "^27.2.0",
+    "jsc-safe-url": "^0.2.2",
     "lodash.throttle": "^4.1.1",
-    "metro-babel-transformer": "0.76.3",
-    "metro-cache": "0.76.3",
-    "metro-cache-key": "0.76.3",
-    "metro-config": "0.76.3",
-    "metro-core": "0.76.3",
-    "metro-file-map": "0.76.3",
-    "metro-inspector-proxy": "0.76.3",
-    "metro-minify-terser": "0.76.3",
-    "metro-minify-uglify": "0.76.3",
-    "metro-react-native-babel-preset": "0.76.3",
-    "metro-resolver": "0.76.3",
-    "metro-runtime": "0.76.3",
-    "metro-source-map": "0.76.3",
-    "metro-symbolicate": "0.76.3",
-    "metro-transform-plugins": "0.76.3",
-    "metro-transform-worker": "0.76.3",
+    "metro-babel-transformer": "0.76.5",
+    "metro-cache": "0.76.5",
+    "metro-cache-key": "0.76.5",
+    "metro-config": "0.76.5",
+    "metro-core": "0.76.5",
+    "metro-file-map": "0.76.5",
+    "metro-inspector-proxy": "0.76.5",
+    "metro-minify-terser": "0.76.5",
+    "metro-minify-uglify": "0.76.5",
+    "metro-react-native-babel-preset": "0.76.5",
+    "metro-resolver": "0.76.5",
+    "metro-runtime": "0.76.5",
+    "metro-source-map": "0.76.5",
+    "metro-symbolicate": "0.76.5",
+    "metro-transform-plugins": "0.76.5",
+    "metro-transform-worker": "0.76.5",
     "mime-types": "^2.1.27",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",
@@ -62,15 +63,15 @@
     "yargs": "^17.6.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.20.0",
     "babel-jest": "^29.2.1",
     "dedent": "^0.7.0",
     "jest-snapshot": "^26.5.2",
     "jest-snapshot-serializer-raw": "^1.2.0",
-    "metro-babel-register": "0.76.3",
-    "metro-memory-fs": "0.76.3",
-    "metro-react-native-babel-preset": "0.76.3",
-    "metro-react-native-babel-transformer": "0.76.3",
+    "metro-babel-register": "0.76.5",
+    "metro-memory-fs": "0.76.5",
+    "metro-react-native-babel-preset": "0.76.5",
+    "metro-react-native-babel-transformer": "0.76.5",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
     "stack-trace": "^0.0.10"

package/src/Assets.js

@@ -11,15 +11,45 @@
 
 "use strict";
 
-const { isAssetTypeAnImage } = require("./Bundler/util");
 const AssetPaths = require("./node-haste/lib/AssetPaths");
 const crypto = require("crypto");
 const denodeify = require("denodeify");
 const fs = require("fs");
-const imageSize = require("image-size");
+const getImageSize = require("image-size");
 const path = require("path");
 const readDir = denodeify(fs.readdir);
 const readFile = denodeify(fs.readFile);
+// Test extension against all types supported by image-size module.
+// If it's not one of these, we won't treat it as an image.
+function isAssetTypeAnImage(type) {
+  return (
+    [
+      "png",
+      "jpg",
+      "jpeg",
+      "bmp",
+      "gif",
+      "webp",
+      "psd",
+      "svg",
+      "tiff",
+      "ktx",
+    ].indexOf(type) !== -1
+  );
+}
+function getAssetSize(type, content, filePath) {
+  if (!isAssetTypeAnImage(type)) {
+    return null;
+  }
+  if (content.length === 0) {
+    throw new Error(`Image asset \`${filePath}\` cannot be an empty file.`);
+  }
+  const { width, height } = getImageSize(content);
+  return {
+    width,
+    height,
+  };
+}
 const hashFiles = denodeify(function hashFilesCb(files, hash, callback) {
   if (!files.length) {
     callback(null);
@@ -141,7 +171,7 @@ async function getAssetData(
   const isImageInput = assetInfo.files[0].includes(".zip/")
     ? fs.readFileSync(assetInfo.files[0])
     : assetInfo.files[0];
-  const dimensions = isImage ? imageSize(isImageInput) : null;
+  const dimensions = isImage ? getImageSize(isImageInput) : null;
   const scale = assetInfo.scales[0];
   const assetData = {
     __packager_asset: true,
@@ -227,6 +257,8 @@ function pathBelongsToRoots(pathToCheck, roots) {
 }
 module.exports = {
   getAsset,
+  getAssetSize,
   getAssetData,
   getAssetFiles,
+  isAssetTypeAnImage,
 };

package/src/Assets.js.flow

@@ -13,12 +13,11 @@
 
 import type {AssetPath} from './node-haste/lib/AssetPaths';
 
-const {isAssetTypeAnImage} = require('./Bundler/util');
 const AssetPaths = require('./node-haste/lib/AssetPaths');
 const crypto = require('crypto');
 const denodeify = require('denodeify');
 const fs = require('fs');
-const imageSize = require('image-size');
+const getImageSize = require('image-size');
 const path = require('path');
 
 const readDir = denodeify(fs.readdir);
@@ -56,6 +55,40 @@ export type AssetDataFiltered = {
   ...
 };
 
+// Test extension against all types supported by image-size module.
+// If it's not one of these, we won't treat it as an image.
+function isAssetTypeAnImage(type: string): boolean {
+  return (
+    [
+      'png',
+      'jpg',
+      'jpeg',
+      'bmp',
+      'gif',
+      'webp',
+      'psd',
+      'svg',
+      'tiff',
+      'ktx',
+    ].indexOf(type) !== -1
+  );
+}
+
+function getAssetSize(
+  type: string,
+  content: Buffer,
+  filePath: string,
+): ?{+width: number, +height: number} {
+  if (!isAssetTypeAnImage(type)) {
+    return null;
+  }
+  if (content.length === 0) {
+    throw new Error(`Image asset \`${filePath}\` cannot be an empty file.`);
+  }
+  const {width, height} = getImageSize(content);
+  return {width, height};
+}
+
 export type AssetData = AssetDataWithoutFiles & {+files: Array<string>, ...};
 
 export type AssetDataPlugin = (
@@ -209,7 +242,7 @@ async function getAssetData(
   const isImageInput = assetInfo.files[0].includes('.zip/')
     ? fs.readFileSync(assetInfo.files[0])
     : assetInfo.files[0];
-  const dimensions = isImage ? imageSize(isImageInput) : null;
+  const dimensions = isImage ? getImageSize(isImageInput) : null;
   const scale = assetInfo.scales[0];
 
   const assetData = {
@@ -317,6 +350,8 @@ function pathBelongsToRoots(
 
 module.exports = {
   getAsset,
+  getAssetSize,
   getAssetData,
   getAssetFiles,
+  isAssetTypeAnImage,
 };

package/src/Bundler/util.js

@@ -14,10 +14,6 @@
 const babylon = require("@babel/parser");
 const template = require("@babel/template").default;
 const babelTypes = require("@babel/types");
-const nullthrows = require("nullthrows");
-
-// Structure of the object: dir.name.scale = asset
-
 const assetPropertyBlockList = new Set(["files", "fileSystemLocation", "path"]);
 function generateAssetCodeFileAst(assetRegistryPath, assetDescriptor) {
   const properDescriptor = filterObject(
@@ -44,72 +40,6 @@ function generateAssetCodeFileAst(assetRegistryPath, assetDescriptor) {
     ])
   );
 }
-
-/**
- * Generates the code involved in requiring an asset, but to be loaded remotely.
- * If the asset cannot be found within the map, then it falls back to the
- * standard asset.
- */
-function generateRemoteAssetCodeFileAst(
-  assetUtilsPath,
-  assetDescriptor,
-  remoteServer,
-  remoteFileMap
-) {
-  const t = babelTypes;
-  const file = remoteFileMap[assetDescriptor.fileSystemLocation];
-  const descriptor = file && file[assetDescriptor.name];
-  const data = {};
-  if (!descriptor) {
-    return null;
-  }
-  for (const scale in descriptor) {
-    data[+scale] = descriptor[+scale].handle;
-  }
-
-  // {2: 'path/to/image@2x', 3: 'path/to/image@3x', ...}
-  const astData = babylon.parseExpression(JSON.stringify(data));
-
-  // URI to remote server
-  const URI = t.stringLiteral(remoteServer);
-
-  // Size numbers.
-  const WIDTH = t.numericLiteral(nullthrows(assetDescriptor.width));
-  const HEIGHT = t.numericLiteral(nullthrows(assetDescriptor.height));
-  const buildRequire = template.program(`
-    const {pickScale, getUrlCacheBreaker}= require(ASSET_UTILS_PATH);
-    module.exports = {
-      "width": WIDTH,
-      "height": HEIGHT,
-      "uri": URI + OBJECT_AST[pickScale(SCALE_ARRAY)] + getUrlCacheBreaker()
-    };
-  `);
-  return t.file(
-    buildRequire({
-      WIDTH,
-      HEIGHT,
-      URI,
-      OBJECT_AST: astData,
-      ASSET_UTILS_PATH: t.stringLiteral(assetUtilsPath),
-      SCALE_ARRAY: t.arrayExpression(
-        Object.keys(descriptor)
-          .map(Number)
-          .sort((a, b) => a - b)
-          .map((scale) => t.numericLiteral(scale))
-      ),
-    })
-  );
-}
-
-// Test extension against all types supported by image-size module.
-// If it's not one of these, we won't treat it as an image.
-function isAssetTypeAnImage(type) {
-  return (
-    ["png", "jpg", "jpeg", "bmp", "gif", "webp", "psd", "svg", "tiff"].indexOf(
-      type
-    ) !== -1
-  );
-}
 function filterObject(object, blockList) {
   const copied = {
     ...object,
@@ -190,6 +120,4 @@ class ArrayMap extends Map {
 module.exports = {
   createRamBundleGroups,
   generateAssetCodeFileAst,
-  generateRemoteAssetCodeFileAst,
-  isAssetTypeAnImage,
 };

package/src/Bundler/util.js.flow

@@ -18,31 +18,6 @@ import type {File} from '@babel/types';
 const babylon = require('@babel/parser');
 const template = require('@babel/template').default;
 const babelTypes = require('@babel/types');
-const nullthrows = require('nullthrows');
-
-// Structure of the object: dir.name.scale = asset
-export type RemoteFileMap = {
-  [string]: {
-    [string]: {
-      [number]: {
-        handle: string,
-        hash: string,
-        ...
-      },
-      ...
-    },
-    ...
-  },
-  __proto__: null,
-  ...
-};
-
-// Structure of the object: platform.dir.name.scale = asset
-export type PlatformRemoteFileMap = {
-  [string]: RemoteFileMap,
-  __proto__: null,
-  ...
-};
 
 type SubTree<T: ModuleTransportLike> = (
   moduleTransport: T,
@@ -81,77 +56,6 @@ function generateAssetCodeFileAst(
   );
 }
 
-/**
- * Generates the code involved in requiring an asset, but to be loaded remotely.
- * If the asset cannot be found within the map, then it falls back to the
- * standard asset.
- */
-function generateRemoteAssetCodeFileAst(
-  assetUtilsPath: string,
-  assetDescriptor: AssetDataWithoutFiles,
-  remoteServer: string,
-  remoteFileMap: RemoteFileMap,
-): ?File {
-  const t = babelTypes;
-
-  const file = remoteFileMap[assetDescriptor.fileSystemLocation];
-  const descriptor = file && file[assetDescriptor.name];
-  const data: {[number]: string} = {};
-
-  if (!descriptor) {
-    return null;
-  }
-
-  for (const scale in descriptor) {
-    data[+scale] = descriptor[+scale].handle;
-  }
-
-  // {2: 'path/to/image@2x', 3: 'path/to/image@3x', ...}
-  const astData = babylon.parseExpression(JSON.stringify(data));
-
-  // URI to remote server
-  const URI = t.stringLiteral(remoteServer);
-
-  // Size numbers.
-  const WIDTH = t.numericLiteral(nullthrows(assetDescriptor.width));
-  const HEIGHT = t.numericLiteral(nullthrows(assetDescriptor.height));
-
-  const buildRequire = template.program(`
-    const {pickScale, getUrlCacheBreaker}= require(ASSET_UTILS_PATH);
-    module.exports = {
-      "width": WIDTH,
-      "height": HEIGHT,
-      "uri": URI + OBJECT_AST[pickScale(SCALE_ARRAY)] + getUrlCacheBreaker()
-    };
-  `);
-
-  return t.file(
-    buildRequire({
-      WIDTH,
-      HEIGHT,
-      URI,
-      OBJECT_AST: astData,
-      ASSET_UTILS_PATH: t.stringLiteral(assetUtilsPath),
-      SCALE_ARRAY: t.arrayExpression(
-        Object.keys(descriptor)
-          .map(Number)
-          .sort((a: number, b: number) => a - b)
-          .map((scale: number) => t.numericLiteral(scale)),
-      ),
-    }),
-  );
-}
-
-// Test extension against all types supported by image-size module.
-// If it's not one of these, we won't treat it as an image.
-function isAssetTypeAnImage(type: string): boolean {
-  return (
-    ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(
-      type,
-    ) !== -1
-  );
-}
-
 function filterObject(
   object: AssetDataWithoutFiles,
   blockList: Set<string>,
@@ -246,6 +150,4 @@ class ArrayMap<K, V> extends Map<K, Array<V>> {
 module.exports = {
   createRamBundleGroups,
   generateAssetCodeFileAst,
-  generateRemoteAssetCodeFileAst,
-  isAssetTypeAnImage,
 };

package/src/DeltaBundler/DeltaCalculator.js

@@ -277,10 +277,17 @@ class DeltaCalculator extends EventEmitter {
         reset: false,
       };
     }
+    debug("Traversing dependencies for %s paths", modifiedDependencies.length);
     const { added, modified, deleted } = await this._graph.traverseDependencies(
       modifiedDependencies,
       this._options
     );
+    debug(
+      "Calculated graph delta {added: %s, modified: %d, deleted: %d}",
+      added.size,
+      modified.size,
+      deleted.size
+    );
     return {
       added,
       modified,

package/src/DeltaBundler/DeltaCalculator.js.flow

@@ -323,10 +323,17 @@ class DeltaCalculator<T> extends EventEmitter {
       };
     }
 
+    debug('Traversing dependencies for %s paths', modifiedDependencies.length);
     const {added, modified, deleted} = await this._graph.traverseDependencies(
       modifiedDependencies,
       this._options,
     );
+    debug(
+      'Calculated graph delta {added: %s, modified: %d, deleted: %d}',
+      added.size,
+      modified.size,
+      deleted.size,
+    );
 
     return {
       added,

package/src/DeltaBundler/Graph.js

@@ -134,10 +134,26 @@ class Graph {
       earlyInverseDependencies: new Map(),
     };
     const internalOptions = getInternalOptions(options);
+
+    // Record the paths that are part of the dependency graph before we start
+    // traversing - we'll use this to ensure we don't report modules modified
+    // that only exist as part of the graph mid-traversal, and to eliminate
+    // modules that end up in the same state that they started from the delta.
+    const originalModules = new Map();
     for (const path of paths) {
-      // Start traversing from modules that are already part of the dependency graph.
-      if (this.dependencies.get(path)) {
-        delta.modified.add(path);
+      const originalModule = this.dependencies.get(path);
+      if (originalModule) {
+        originalModules.set(path, originalModule);
+      }
+    }
+    for (const [path] of originalModules) {
+      // Traverse over modules that are part of the dependency graph.
+      //
+      // Note: A given path may not be part of the graph *at this time*, in
+      // particular it may have been removed since we started traversing, but
+      // in that case the path will be visited if and when we add it back to
+      // the graph in a subsequent iteration.
+      if (this.dependencies.has(path)) {
         await this._traverseDependenciesForSingleFile(
           path,
           delta,
@@ -151,10 +167,41 @@ class Graph {
       added.set(path, nullthrows(this.dependencies.get(path)));
     }
     const modified = new Map();
-    for (const path of delta.modified) {
-      // Only report a module as modified if we're not already reporting it as added or deleted.
-      if (!delta.added.has(path) && !delta.deleted.has(path)) {
-        modified.set(path, nullthrows(this.dependencies.get(path)));
+
+    // A path in delta.modified has been processed during this traversal,
+    // but may not actually differ, may be new, or may have been deleted after
+    // processing. The actually-modified modules are the intersection of
+    // delta.modified with the pre-existing paths, minus modules deleted.
+    for (const [path, originalModule] of originalModules) {
+      invariant(
+        !delta.added.has(path),
+        "delta.added has %s, but this path was already in the graph.",
+        path
+      );
+      if (delta.modified.has(path)) {
+        // It's expected that a module may be both modified and subsequently
+        // deleted - we'll only return it as deleted.
+        if (!delta.deleted.has(path)) {
+          // If a module existed before and has not been deleted, it must be
+          // in the dependencies map.
+          const newModule = nullthrows(this.dependencies.get(path));
+          if (
+            // Module.dependencies is mutable, so it's not obviously the case
+            // that referential equality implies no modification. However, we
+            // only mutate dependencies in two cases:
+            // 1. Within _processModule. In that case, we always mutate a new
+            //    module and set a new reference in this.dependencies.
+            // 2. During _releaseModule, when recursively removing
+            //    dependencies. In that case, we immediately discard the module
+            //    object.
+            // TODO: Refactor for more explicit immutability
+            newModule !== originalModule ||
+            transfromOutputMayDiffer(newModule, originalModule) ||
+            !allDependenciesEqual(newModule, originalModule)
+          ) {
+            modified.set(path, newModule);
+          }
+        }
       }
     }
     return {
@@ -203,6 +250,7 @@ class Graph {
   }
   async _processModule(path, delta, options) {
     const resolvedContext = this.#resolvedContexts.get(path);
+
     // Transform the file via the given option.
     // TODO: Unbind the transform method from options
     const result = await options.transform(path, resolvedContext);
@@ -214,47 +262,63 @@ class Graph {
       result.dependencies,
       options
     );
-    const previousModule = this.dependencies.get(path) || {
-      inverseDependencies:
-        delta.earlyInverseDependencies.get(path) || new _CountingSet.default(),
-      path,
-    };
-    const previousDependencies = previousModule.dependencies || new Map();
-
-    // Update the module information.
-    const module = {
-      ...previousModule,
+    const previousModule = this.dependencies.get(path);
+    const previousDependencies = previousModule?.dependencies ?? new Map();
+    const nextModule = {
+      ...(previousModule ?? {
+        inverseDependencies:
+          delta.earlyInverseDependencies.get(path) ??
+          new _CountingSet.default(),
+        path,
+      }),
       dependencies: new Map(previousDependencies),
       getSource: result.getSource,
       output: result.output,
+      unstable_transformResultKey: result.unstable_transformResultKey,
     };
-    this.dependencies.set(module.path, module);
+
+    // Update the module information.
+    this.dependencies.set(nextModule.path, nextModule);
 
     // Diff dependencies (1/2): remove dependencies that have changed or been removed.
+    let dependenciesRemoved = false;
     for (const [key, prevDependency] of previousDependencies) {
       const curDependency = currentDependencies.get(key);
       if (
         !curDependency ||
         !dependenciesEqual(prevDependency, curDependency, options)
       ) {
-        this._removeDependency(module, key, prevDependency, delta, options);
+        dependenciesRemoved = true;
+        this._removeDependency(nextModule, key, prevDependency, delta, options);
       }
     }
 
     // Diff dependencies (2/2): add dependencies that have changed or been added.
-    const promises = [];
+    const addDependencyPromises = [];
     for (const [key, curDependency] of currentDependencies) {
       const prevDependency = previousDependencies.get(key);
       if (
         !prevDependency ||
         !dependenciesEqual(prevDependency, curDependency, options)
       ) {
-        promises.push(
-          this._addDependency(module, key, curDependency, delta, options)
+        addDependencyPromises.push(
+          this._addDependency(nextModule, key, curDependency, delta, options)
         );
       }
     }
-    await Promise.all(promises);
+    if (
+      previousModule &&
+      !transfromOutputMayDiffer(previousModule, nextModule) &&
+      !dependenciesRemoved &&
+      addDependencyPromises.length === 0
+    ) {
+      // We have not operated on nextModule, so restore previousModule
+      // to aid diffing.
+      this.dependencies.set(previousModule.path, previousModule);
+      return previousModule;
+    }
+    delta.modified.add(path);
+    await Promise.all(addDependencyPromises);
 
     // Replace dependencies with the correctly-ordered version. As long as all
     // the above promises have resolved, this will be the same map but without
@@ -264,11 +328,11 @@ class Graph {
 
     // Catch obvious errors with a cheap assertion.
     invariant(
-      module.dependencies.size === currentDependencies.size,
+      nextModule.dependencies.size === currentDependencies.size,
       "Failed to add the correct dependencies"
     );
-    module.dependencies = currentDependencies;
-    return module;
+    nextModule.dependencies = currentDependencies;
+    return nextModule;
   }
   async _addDependency(parentModule, key, dependency, delta, options) {
     const path = dependency.absolutePath;
@@ -659,6 +723,18 @@ function dependenciesEqual(a, b, options) {
       contextParamsEqual(a.data.data.contextParams, b.data.data.contextParams))
   );
 }
+function allDependenciesEqual(a, b, options) {
+  if (a.dependencies.size !== b.dependencies.size) {
+    return false;
+  }
+  for (const [key, depA] of a.dependencies) {
+    const depB = b.dependencies.get(key);
+    if (!depB || !dependenciesEqual(depA, depB, options)) {
+      return false;
+    }
+  }
+  return true;
+}
 function contextParamsEqual(a, b) {
   return (
     a === b ||
@@ -671,3 +747,9 @@ function contextParamsEqual(a, b) {
       a.mode === b.mode)
   );
 }
+function transfromOutputMayDiffer(a, b) {
+  return (
+    a.unstable_transformResultKey == null ||
+    a.unstable_transformResultKey !== b.unstable_transformResultKey
+  );
+}