onLoad callback not run on a custom esbuild extension

[chihab]

Command

serve

Description

I am trying to develop a custom builder on top of DevServerBuilder.
When I pass in a custom esbuild plugin to the buildPlugins options

{
   buildPlugins: [ esBuildPlugin(pluginOptions) ],
}

The plugin is run, its onStart callback is called, but the onPhase callback is not.

build.onStart(() => {
  console.log();
  console.log("****** onStart ********"); // Run
});

build.onLoad({ filter: /.*/ }, (args) => {
 console.log("****** onLoad ********", args); // Never run
 return undefined;
});

I am suspecting it is somehow related to this "all onLoad callbacks from all plugins will be run in the order they were registered until one takes responsibility for loading the module" from esbuild docs, as it looks like loading is done by internal esbuild plugins.

Minimal Reproduction

Minimal ESbuild plugin

const esBuildPlugin = (options: any): Plugin => {
  console.log("esBuildPlugin", options)
  return {
    name: "esbuild-plugin",
    setup(build: PluginBuild) {
      build.onStart(() => {
        console.log();
        console.log("****** onStart ********");
      });

      build.onLoad({ filter: /.*/ }, (args) => {
        console.log("****** onLoad ********", args);
        return undefined;
      });
    },
  };
};

Custom builder

export const buildWithPlugin = (
  options: DevServerBuilderOptions,
  context: BuilderContext
): ReturnType<typeof executeDevServerBuilder> => {
  console.log("buildWithPlugin");
  const pluginOptions = { ...options, forceEsbuild: true }
  return executeDevServerBuilder(
    pluginOptions,
    context,
    undefined,
    {
      buildPlugins: [esBuildPlugin(pluginOptions)],
    }
  );
};
export default createBuilder<DevServerBuilderOptions>(buildWithPlugin);

> app-17@0.0.0 start
> ng serve

buildWithPlugin
esBuildPlugin {
  buildTarget: 'app-17:build:development',
  browserTarget: undefined,
  port: 4200,
  host: 'localhost',
  proxyConfig: undefined,
  ssl: false,
  sslKey: undefined,
  sslCert: undefined,
  headers: {},
  open: false,
  verbose: undefined,
  liveReload: true,
  publicHost: undefined,
  allowedHosts: [],
  servePath: undefined,
  disableHostCheck: false,
  hmr: false,
  watch: true,
  poll: undefined,
  forceEsbuild: true
}
Warning: Forcing the use of the esbuild-based build system with third-party builders may cause unexpected behavior and/or build failures.
The 'browser-esbuild' builder is a compatibility builder which will be removed in a future major version in favor of the 'application' builder.
⠋ Building...
****** onStart ********

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.55 kB | 
styles.css          | styles        |  95 bytes | 

                    | Initial Total | 106.36 kB

Application bundle generation complete. [1.155 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

Your Environment

❯ npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.0
Node: 18.18.2
Package Manager: npm 9.8.1
OS: darwin arm64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@angular/ssr                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

[clydin]

This is expected behavior. As mentioned, esbuild plugins are executed in order and the first to handle a load request will be used. The internal plugins are required for a build to successfully complete and are placed before any custom plugins. As a result, TS/JS files cannot be loaded by custom esbuild plugins. In a typical application, there are no other file types in the code bundling actions which is way onLoad is never called.

We are evaluating the inclusion of a stable plugin system which may allow this in the future. But there are no definite plans at this point in time.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}