Only include polyfills/shims when they are used

[schontz]

Is there a way in vite/rollup to include a polyfill/shim only if it is used by your code? For example, let's say you have the following code:

// util.js
export function onDomChange(node, callback) {
  const observer = new MutationObserver(callback);
  observer.observe(node);
  return () => observer.disconnect()
}

// main.js
import { onDomChange } from './util';

function entry() {
  console.log('I use onDomChange, which uses MutationObserver, so I want to a shim in this chunk.');
  onDomChange(document.querySelector('.something'), () => console.log('changed'));
}
entry();

// some_other_chunk.js
import { onDomChange } from './util';

function entry() {
  console.log('Chunk imports onDomChange, but it is never used, so no need to include MutationObserver shim');
}
entry()

main.js uses MutationObserver and some_other_chunk.js does not, so I would want to include the shim in the former but not the latter. This is similar to how the TS compiler works and some transforms in vite (e.g., #private properties).

My mental model of this would go something like:

1. Transform all your code into final tree-shaken AST
2. Use AST selectors to match usage with shim
3. Include the shim when selectors match

Questions:

1. Does a plugin like this already exist? I was not able to find one.
2. Does the current plugin system allow for such a thing? I'd add that the shims should also get build-time transforms applied to them like they were always included (i.e., minified, remove comments, source maps, etc.)

[sapphi-red]

I don't know if there's an existing plugin.
But I guess it can be achieved with a plugin like below.

const plugin = {
  name: 'inject-polyfill',
  apply: 'build',
  transform(code) {
    if (!code.includes('MutationObserver') return
    const s = new MagicString(code)
    s.prepend('import "/path/to/mutation-observer-polyfill"')
    return { code: s.toString(), map: s.generateMap() }
  }
}

[schontz]

Thanks. I'll explore this option.