I looking to write a esbuild plugin to retrieve the sizes of images.

Basically, I want to have the same behavior as the file loader (the page are remapped with assetNames)

Right now the file loader only returns the image path as default value.

I tried following :

export function createImageLoaderWithAttributePlugin(): Plugin {
  return {
    name: 'angular-image-loader-import-attributes',
    setup(build: PluginBuild) {
      build.onLoad({ filter: /.(png|jpg|jpeg|gif|webp)$/ }, async (args) => {
        const loader = args.with.loader as Loader | undefined;
        if (!loader) {
          return undefined;
        }

        const originalName = basename(args.path);

        // There is probably a better way, this doesn't handle files in subpath. 
        //const outputPath = build.initialOptions.assetNames?.replace('[name]', originalName);

        const image = await readFile(args.path);
        const dimensions = imageSize(image);


        const contents = `export default "${originalName}";
         export const width = ${dimensions.width};
         export const height = ${dimensions.height};
         `;

        return {
          contents,          
        };
      });
    },
  };
}

How would you do this ?