Use indexed watch folder paths for external assets

packages/metro-transform-worker/API.md

@@ -74,10 +74,19 @@ export type MinifierOptions = {
 
 export type MinifierResult = {code: string; map?: BasicSourceMap | undefined};
 
-export const transform: (config: JsTransformerConfig, projectRoot: string, projectRelativePath: string, data: Buffer, options: JsTransformOptions) => Promise<TransformResponse>;
+export const transform: (
+config: JsTransformerConfig,
+projectRoot: string,
+projectRelativePath: string,
+data: Buffer,
+options: JsTransformOptions,
+extras?: TransformExtras,
+) => Promise<TransformResponse>;
 
 export type transform = typeof transform;
 
+export type TransformExtras = Readonly<{assetUrlPath?: string | undefined}>;
+
 export type Type = 'script' | 'module' | 'asset';
 
 ```

packages/metro-transform-worker/src/__tests__/index-test.js

@@ -135,6 +135,27 @@ test('transforms a simple module', async () => {
   expect(result.dependencies).toEqual([]);
 });
 
+test('uses the indexed watch folder path for asset URLs', async () => {
+  fs.mkdirSync('/root/external', {recursive: true});
+  fs.writeFileSync('/root/external/test.mp4', 'asset data');
+
+  const result = await Transformer.transform(
+    baseConfig,
+    '/root',
+    'external/test.mp4',
+    Buffer.from('asset data'),
+    {
+      ...baseTransformOptions,
+      type: 'asset',
+    },
+    {assetUrlPath: '[metro-watchFolders]/1/test.mp4'},
+  );
+
+  expect(result.output[0].data.code).toContain(
+    '"httpServerLocation": "/assets/[metro-watchFolders]/1"',
+  );
+});
+
 test('transforms a module with dependencies', async () => {
   const contents = [
     '"use strict";',

packages/metro-transform-worker/src/index.js

@@ -133,6 +133,15 @@ export type JsTransformOptions = Readonly<{
   unstable_transformProfile: TransformProfile,
 }>;
 
+/**
+ * Inputs computed by Metro and passed alongside the public transform options.
+ * Kept out of JsTransformOptions because those are spread into
+ * BabelTransformerArgs, and these are for the default transformer only.
+ */
+export type TransformExtras = Readonly<{
+  assetUrlPath?: string,
+}>;
+
 opaque type AbsolutePath = string;
 opaque type ProjectRelativePath = string;
 
@@ -164,6 +173,7 @@ type JSONFile = {
 
 type TransformationContext = Readonly<{
   config: JsTransformerConfig,
+  extras: TransformExtras,
   projectRoot: AbsolutePath,
   options: JsTransformOptions,
 }>;
@@ -538,6 +548,7 @@ async function transformAsset(
     getBabelTransformArgs(file, context),
     assetRegistryPath,
     assetPlugins,
+    context.extras.assetUrlPath,
   );
 
   const jsFile = {
@@ -678,8 +689,10 @@ export const transform = async (
   projectRelativePath: string,
   data: Buffer,
   options: JsTransformOptions,
+  extras?: TransformExtras = {},
 ): Promise<TransformResponse> => {
   const context: TransformationContext = {
+    extras,
     config,
     options,
     projectRoot,

packages/metro-transform-worker/src/utils/assetTransformer.js

@@ -20,6 +20,7 @@ export async function transform(
   {filename, options, src}: BabelTransformerArgs,
   assetRegistryPath: string,
   assetDataPlugins: ReadonlyArray<string>,
+  assetUrlPath?: string,
 ): Promise<{ast: File, ...}> {
   options = options || {
     platform: '',
@@ -32,7 +33,7 @@ export async function transform(
 
   const data = await getAssetData(
     absolutePath,
-    filename,
+    assetUrlPath ?? filename,
     assetDataPlugins,
     options.platform,
     options.publicPath,

packages/metro/src/Assets.js

@@ -243,6 +243,50 @@ export async function getAssetData(
   return await applyAssetDataPlugins(assetDataPlugins, assetData);
 }
 
+/**
+ * Returns the path used to identify an asset in its development server URL.
+ * Assets outside projectRoot use an indexed watch folder prefix so that the
+ * URL unambiguously identifies their configured root.
+ *
+ * Roots are resolved as Server does when it decodes these paths, so that the
+ * index here and the index it reads back refer to the same directory.
+ */
+export function getAssetUrlPath(
+  assetPath: string,
+  projectRoot: string,
+  watchFolders: ReadonlyArray<string>,
+): string {
+  const projectRelativePath = path.relative(
+    path.resolve(projectRoot),
+    assetPath,
+  );
+  if (isPathInsideRoot(projectRelativePath)) {
+    return normalizePathSeparatorsToPosix(projectRelativePath);
+  }
+
+  for (let i = 0; i < watchFolders.length; i++) {
+    const watchFolderRelativePath = path.relative(
+      path.resolve(watchFolders[i]),
+      assetPath,
+    );
+    if (isPathInsideRoot(watchFolderRelativePath)) {
+      return normalizePathSeparatorsToPosix(
+        path.join('[metro-watchFolders]', String(i), watchFolderRelativePath),
+      );
+    }
+  }
+
+  return normalizePathSeparatorsToPosix(projectRelativePath);
+}
+
+function isPathInsideRoot(relativePath: string): boolean {
+  return (
+    relativePath !== '..' &&
+    !relativePath.startsWith('..' + path.sep) &&
+    !path.isAbsolute(relativePath)
+  );
+}
+
 async function applyAssetDataPlugins(
   assetDataPlugins: ReadonlyArray<string>,
   assetData: AssetData,

packages/metro/src/DeltaBundler/Serializers/__tests__/getAssets-test.js

@@ -10,14 +10,17 @@
 
 jest.mock('../../../Assets');
 
-import {getAssetData} from '../../../Assets';
+import {getAssetData, getAssetUrlPath} from '../../../Assets';
 import getAssets from '../getAssets';
 
 beforeEach(() => {
   getAssetData.mockImplementation(async (path, localPath) => ({
     path,
     localPath,
   }));
+  getAssetUrlPath.mockImplementation(
+    jest.requireActual('../../../Assets').getAssetUrlPath,
+  );
 });
 
 test('should return the bundle assets', async () => {
@@ -82,16 +85,32 @@ test('should return the bundle assets', async () => {
         ],
       },
     ],
+    [
+      '/external/6.png',
+      {
+        path: '/external/6.png',
+        output: [
+          {
+            type: 'js/module/asset',
+            data: {code: '//', lineCount: 1, map: [], functionMap: null},
+          },
+        ],
+      },
+    ],
   ]);
 
   expect(
     await getAssets(dependencies, {
       projectRoot: '/tmp',
-      watchFolders: ['/tmp'],
+      watchFolders: ['/tmp', '/external'],
       processModuleFilter: () => true,
     }),
   ).toEqual([
     {path: '/tmp/3.png', localPath: '3.png'},
     {path: '/tmp/5.mov', localPath: '5.mov'},
+    {
+      path: '/external/6.png',
+      localPath: '[metro-watchFolders]/1/6.png',
+    },
   ]);
 });

packages/metro/src/DeltaBundler/Serializers/getAssets.js

@@ -12,7 +12,7 @@
 import type {AssetData} from '../../Assets';
 import type {Module, ReadOnlyDependencies} from '../types';
 
-import {getAssetData} from '../../Assets';
+import {getAssetData, getAssetUrlPath} from '../../Assets';
 import {getJsOutput, isJsModule} from './helpers/js';
 import path from 'node:path';
 
@@ -22,6 +22,7 @@ type Options = {
   platform: ?string,
   projectRoot: string,
   publicPath: string,
+  watchFolders: ReadonlyArray<string>,
 };
 
 export default async function getAssets(
@@ -41,7 +42,11 @@ export default async function getAssets(
       promises.push(
         getAssetData(
           module.path,
-          path.relative(options.projectRoot, module.path),
+          getAssetUrlPath(
+            module.path,
+            options.projectRoot,
+            options.watchFolders,
+          ),
           options.assetPlugins,
           options.platform,
           options.publicPath,

packages/metro/src/DeltaBundler/Transformer.js

@@ -13,6 +13,7 @@ import type {TransformResult, TransformResultWithSource} from '../DeltaBundler';
 import type {TransformerConfig, TransformOptions} from './Worker';
 import type {ConfigT} from 'metro-config';
 
+import {getAssetUrlPath} from '../Assets';
 import {normalizePathSeparatorsToPosix} from '../lib/pathUtils';
 import getTransformCacheKey from './getTransformCacheKey';
 import WorkerFarm from './WorkerFarm';
@@ -112,6 +113,14 @@ export default class Transformer {
       this._config.projectRoot,
       filePath,
     );
+    const assetUrlPath =
+      type === 'asset'
+        ? getAssetUrlPath(
+            filePath,
+            this._config.projectRoot,
+            this._config.watchFolders,
+          )
+        : null;
 
     const partialKey = stableHash([
       // This is the hash related to the global Bundler config.
@@ -121,6 +130,9 @@ export default class Transformer {
       // addition to content hash because transformers receive path as an
       // input, and may apply e.g. extension-based logic.
       normalizePathSeparatorsToPosix(projectRelativePath),
+      assetUrlPath == null
+        ? null
+        : normalizePathSeparatorsToPosix(assetUrlPath),
       customTransformOptions,
       dev,
       experimentalImportSupport,
@@ -170,7 +182,9 @@ export default class Transformer {
       ? {result, sha1}
       : await this._workerFarm.transform(
           projectRelativePath,
-          transformerOptions,
+          assetUrlPath == null
+            ? transformerOptions
+            : {...transformerOptions, assetUrlPath},
           content,
         );
 

packages/metro/src/DeltaBundler/Worker.flow.js

@@ -14,14 +14,21 @@ import type {LogEntry} from 'metro-core/private/Logger';
 import type {
   JsTransformerConfig,
   JsTransformOptions,
+  TransformExtras,
 } from 'metro-transform-worker';
 
 import traverse from '@babel/traverse';
 import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 
-export type {JsTransformOptions as TransformOptions} from 'metro-transform-worker';
+export type TransformOptions = Readonly<{
+  ...JsTransformOptions,
+  // Split out of the options before they reach the transformer, which receives
+  // them as a separate TransformExtras argument, so that they are not spread
+  // into BabelTransformerArgs along with the public options.
+  assetUrlPath?: string,
+}>;
 
 type TransformerInterface = {
   transform(
@@ -30,6 +37,7 @@ type TransformerInterface = {
     string,
     Buffer,
     JsTransformOptions,
+    TransformExtras,
   ): Promise<TransformResult<>>,
 };
 
@@ -68,7 +76,7 @@ function asDeserializedBuffer(value: any): Buffer | null {
 
 export const transform = (
   filename: string,
-  transformOptions: JsTransformOptions,
+  transformOptions: TransformOptions,
   projectRoot: string,
   transformerConfig: TransformerConfig,
   fileBuffer?: Buffer,
@@ -97,7 +105,7 @@ export type Worker = {
 async function transformFile(
   projectRelativePath: string,
   data: Buffer,
-  transformOptions: JsTransformOptions,
+  transformOptions: TransformOptions,
   projectRoot: string,
   transformerConfig: TransformerConfig,
 ): Promise<Data> {
@@ -117,12 +125,14 @@ async function transformFile(
 
   const sha1 = crypto.createHash('sha1').update(data).digest('hex');
 
+  const {assetUrlPath, ...publicTransformOptions} = transformOptions;
   const result = await Transformer.transform(
     transformerConfig.transformerConfig,
     projectRoot,
     projectRelativePath,
     data,
-    transformOptions,
+    publicTransformOptions,
+    {assetUrlPath},
   );
 
   // The babel cache caches scopes and pathes for already traversed AST nodes.

packages/metro/src/DeltaBundler/__tests__/Transformer-test.js

@@ -22,6 +22,7 @@ jest
 const Transformer = require('../Transformer').default;
 const {getDefaultValues} = require('metro-config').getDefaultConfig;
 const {mergeConfig} = require('metro-config/private/loadConfig');
+const path = require('node:path');
 
 const fs = jest.requireMock('node:fs');
 
@@ -215,4 +216,37 @@ describe('Transformer', function () {
 
     expect(require('../getTransformCacheKey')).not.toBeCalled();
   });
+
+  test('passes an indexed watch folder URL path to asset transforms', async () => {
+    const workerTransform =
+      require('../WorkerFarm').default.prototype.transform;
+    workerTransform.mockClear();
+    workerTransform.mockReturnValue({
+      sha1: 'abcdefabcdefabcdefabcdefabcdefabcdefabcd',
+      result: {},
+    });
+    fs.mkdirSync('/external', {recursive: true});
+
+    const transformerInstance = new Transformer(
+      {
+        ...commonOptions,
+        cacheStores: [],
+        watchFolders: ['/root', '/external'],
+      },
+      {getOrComputeSha1},
+    );
+
+    await transformerInstance.transformFile('/external/imgs/a.png', {
+      type: 'asset',
+    });
+
+    expect(workerTransform).toHaveBeenCalledWith(
+      path.join('..', 'external', 'imgs', 'a.png'),
+      {
+        type: 'asset',
+        assetUrlPath: '[metro-watchFolders]/1/imgs/a.png',
+      },
+      undefined,
+    );
+  });
 });