List file references in bundle object

[jakearchibald]

Feature Use Case

I like that the bundle object lists chunks that are imported by a given chunk. I use this to generate <link rel="preload"> tags. It would be nice if I could do the same for files references.

Feature Proposal

If index.js contains a file reference (generated via import.meta.ROLLUP_FILE_URL_referenceId) to foo.png, this is documented in the bundle object:

{
  'index.js': {
    imports: […],
    fileRefs: ['foo.abc123.png'],
  }
}

Developers can use this to generate preload tags for these assets.

[frank-dspeed]

@lukastaegert i was looking into this do you see any point where we could get that info from the scenario that @jakearchibald describes here?

I think he means something like this:
plugin-custom-url.js

const fs = require('fs')
const { promisify } = require('util')
const path = require('path')

function url({ exts = ['.svg', '.png', '.jpg', '.gif'] } = {}) {
  return {
    name: 'rollup-plugin-custom-url',
    async load(id) {
      if (exts.some(ext => id.endsWith(ext))) {
        const ref = this.emitFile({
          type: 'asset',
          source: await promisify(fs.readFile)(id, { encoding: 'binary' }),
          name: path.basename(id),
        })
        return 'export default import.meta.ROLLUP_FILE_URL_' + ref
      }
      return null
    },
  }
}

And code importing for example .png file:

import url from './logo.svg'
const el = document.createElement('img')
el.src = url
document.body.appendChild(el)

I see no way how we should know that this belongs to index.js which is probally also the entrypoint. I am missing something?

[lukastaegert]

Yes, we would need to put some new infrastructure in place to support this, so ideally the meta property would register this at some point on the AST context so it is stored with the module. Then we will need to see how this information makes its way into the proper chunk. I can take a look how this pans out while you might take a look at my comments to your other PR 😉

[lukastaegert]

PR at #3661. Note that this contains both assets and chunks that are referenced via import.meta.ROLLUP_FILE_URL_<id>. You could then again check the bundle to determine which is which and get additional information.