Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: add an on-processed-callback to the plugin api #4025

Open
MartinElsaesser opened this issue Jan 3, 2025 · 0 comments
Open

Feat: add an on-processed-callback to the plugin api #4025

MartinElsaesser opened this issue Jan 3, 2025 · 0 comments

Comments

@MartinElsaesser
Copy link

I propose to extend the plugin api with an onProcessed callback, that is triggered when a file was just bundled and before it is written to disk.
The purpose of this new callback would be to change the bundled content of a file before writing it to disk. This could be used to run third party tools like compressors, or manglers. Additionally it can be utilized to add custom header/footer comments, that depend on context information like the name of the source file, or where the file will be written to, when the build completes.

Example usage of the API

esbuild.mjs

import * as esbuild from 'esbuild'

let exampleOnProcessedCallback = {
  name: 'example',
  setup(build) {
    build.onProcessed({ filter: /\.ts$/ }, async (args) => {
      return {
        contents: `${args.contents}\n// this file ${args.buildFilename} will be outputted to ${args.buildPath}. It was generated from ${args.sourceFilename}, that is located at ${args.sourcePath}.`,
      }
    })
  },
}

await esbuild.build({
  entryPoints: ['src/a.ts', 'src/b.ts'],
  bundle: true,
  outdir: 'out',
  plugins: [exampleOnProcessedCallback],
})

source files

src/a.ts:

const a: string = "log from file a";
console.log(a)

src/b.ts:

const b: string = "log from file b";
console.log(b)

output files, after running esbuild.mjs

out/a.js:

const a = "log from file a";
console.log(a)
// this file a.js will be outputted to out/a.js. It was generated from a.ts, that is located at src/a.ts.

out/b.js:

const b: string = "log from file b";
console.log(b)
// this file b.js will be outputted to out/b.js. It was generated from b.ts, that is located at src/b.ts.

on-processed API

on-processed options

The on-processed callback shares the same options as the on-load callback, thus giving the user the option to pick which files the callback should be called on.

interface OnProcessedOptions {
  filter: RegExp;
  namespace?: string;
}

on-processed arguments

interface OnProcessedArgs {
  contents: string;             // the bundled file as a string
  buildFilename: string;    // filename of the build artifact
  buildPath: string;           // relative path to the build artifact
  sourceFilename: string; // filename of the source file
  sourcePath: string;        // relative path to the source file
  // additional arguments...
}

on-processed results

interface OnProcessedResult {
  contents: string;  // string that will be written into build artifact
 // additional result properties...
}

Remarks

  1. I have no knowledge of the esbuild internals, or Go as a language. This means, I am in need of your help as a community, both to further develop this proposal and to hopefully get it added to esbuild.
  2. This is the first serious proposal I ever wrote. I'd appreciate it, if you could give some feedback, how good, or bad I did and what I should work on.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant