[Feature Request]: For entrypoints handled by "file" loader, add the hashed file to the metafile output

[KonnorRogers]

The title is hard to understand, but basically im looking for a map back to the original file that creates an asset chunk.

Example:

// index.js
import("academic-cap.svg")

in my ESBuild metafile:

for (const [hashedPath, details] of Object.entries(result.metafile.outputs)) {
   console.log(hashedPath, details)
   
   // public/esbuild-builds/chunks/academic-cap-JO6NDN2A.js
  // {
  // imports: [],
  // exports: [ 'default' ],
  // entryPoint: 'app/javascript/assets/academic-cap.svg',
  // inputs: { 'app/javascript/assets/academic-cap.svg': { bytesInOutput: 56 } },
  // bytes: 204
  // }
 }

If you notice theres no hashed "public/esbuilds-builds/assets/academic-cap-[hash].svg", it only has the ".js" entrypoint. I'm curious if it would be possible to support the use-case of keeping a referenced to the hashed-file with the original extension and not the generated JS file.

[evanw]

I looked into this a bit. For my own reference, here's a more concrete example:

• entry.js:

  console.log(import("./academic-cap.svg"))

• academic-cap.svg:

  <svg/>

When the above files are bundled with esbuild entry.js --bundle --format=esm --splitting --outdir=out --metafile=meta.json --loader:.svg=file, I get the following meta.json file:

{
  "inputs": {
    "academic-cap.svg": {
      "bytes": 7,
      "imports": []
    },
    "entry.js": {
      "bytes": 42,
      "imports": [
        {
          "path": "academic-cap.svg",
          "kind": "dynamic-import"
        }
      ]
    }
  },
  "outputs": {
    "out/entry.js": {
      "imports": [
        {
          "path": "out/academic-cap-JHXDOPWG.js",
          "kind": "dynamic-import"
        }
      ],
      "exports": [],
      "entryPoint": "entry.js",
      "inputs": {
        "entry.js": {
          "bytesInOutput": 50
        }
      },
      "bytes": 63
    },
    "out/academic-cap-55CCFTCE.svg": {
      "imports": [],
      "exports": [],
      "inputs": {
        "academic-cap.svg": {
          "bytesInOutput": 7
        }
      },
      "bytes": 7
    },
    "out/academic-cap-JHXDOPWG.js": {
      "imports": [],
      "exports": [
        "default"
      ],
      "entryPoint": "academic-cap.svg",
      "inputs": {
        "academic-cap.svg": {
          "bytesInOutput": 56
        }
      },
      "bytes": 124
    }
  }
}

This information lets you map from out/entry.js => out/academic-cap-JHXDOPWG.js => academic-cap.svg but there is no link to out/academic-cap-55CCFTCE.svg (the file referenced by the imported string).