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

[Feature]: Allow deeper customization for esbuild transformation #2622

Open
remi-amadeus opened this issue Jul 26, 2024 · 2 comments
Open

[Feature]: Allow deeper customization for esbuild transformation #2622

remi-amadeus opened this issue Jul 26, 2024 · 2 comments
Labels
🚀 Feature Request new suggested feature

Comments

@remi-amadeus
Copy link

🚀 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 ahnpnl added the 🚀 Feature Request new suggested feature label Jul 26, 2024
@ahnpnl
Copy link
Collaborator

ahnpnl commented Jul 26, 2024

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
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚀 Feature Request new suggested feature
Projects
None yet
Development

No branches or pull requests

2 participants