[Feature]: Allow deeper customization for esbuild transformation

[remi-amadeus]

🚀 Feature Proposal

At the moment, in https://github.com/thymikee/jest-preset-angular/blob/main/src/ng-jest-transformer.ts, esbuild won't be able to process any typescript file since the loader is hardcoded to JS.

const { code, map } = transformSync(fileContent, {
                loader: 'js',
                format: transformOptions.supportsStaticESM && configSet.useESM ? 'esm' : 'cjs',
                target: compilerOpts.target === configSet.compilerModule.ScriptTarget.ES2015 ? 'es2015' : 'es2016',
                sourcemap: compilerOpts.sourceMap,
                sourcefile: filePath,
                sourcesContent: true,
                sourceRoot: compilerOpts.sourceRoot,
            });

For large applications, it could be useful to be able to do a mix between TS jest transformation and esbuild transformation in order to optimize the performance which are kind of slow on a CI for around 800spec files. (3 agents around 10min per agent)
By allowing the loader to be overridden depending on the file type, it would let us do advanced customization in order to boost the performance of the tests execution. (for example, all the mock files, all the fixtures file, all the spec files can be transformed with esbuild... and any files without decorators because for decorators it would be harder to implement)

As a very simple solution,

const { code, map } = transformSync(fileContent, {
                loader: fileExtension === 'ts' ? 'ts' : 'js',
                format: transformOptions.supportsStaticESM && configSet.useESM ? 'esm' : 'cjs',
                target: compilerOpts.target === configSet.compilerModule.ScriptTarget.ES2015 ? 'es2015' : 'es2016',
                sourcemap: compilerOpts.sourceMap,
                sourcefile: filePath,
                sourcesContent: true,
                sourceRoot: compilerOpts.sourceRoot,
            });

This way, it would not produce any errors while trying to benefit from esbuild for some TS files.

What are your thought @thymikee ?

Thank you :)

Motivation

Tweaking the configuration in order to improve the performance to run the tests on CI agents which are usually slower.

Example

Using

globals: {
    ngJest: {
      processWithEsbuild: [
        '**/src/testing/mocks/*.ts',
        '**/src/common/**/*.ts',
        '**/src/**/*.spec.ts'
      ],
    },
  },

to have all the files not containing any decorators transformed by esbuild which is faster.

[ahnpnl]

Yes I agree with this.

Side notes:

• We plan to switch to @swc instead of esbuild since it's a recommended one to replace Babel and we want to support transform native async/await to Promise for target which is later than ES2016
• We would use transformerOptions instead of globals, e.g

transform: {
     '^.+\\.(ts|js|html|svg)$': ['jest-preset-angular', {
         processWithEsbuild: [
              '**/src/testing/mocks/*.ts',
              '**/src/common/**/*.ts',
              '**/src/**/*.spec.ts'
         ] // `processWithEsbuild` probably should be renamed to something else
    }]
}

[remi-amadeus]

@ahnpnl That would be very nice :) Looking forward for the feature to be implemented! for the time being, i will copy and use a custom transformer.