perf: process js files in node_modules with esbuild (#1169)

BREAKING CHANGE
`js` files from `node_modules` are now compiled with `esbuild` to improve performance

.gitignore

@@ -18,5 +18,6 @@ e2e/**/.yarn/*
 !e2e/**/.yarn/sdks
 !e2e/**/.yarn/versions
 !/e2e/ng-lib-import/node_modules
+!/e2e/process-js-packages/node_modules
 src/transformers/downlevel_decorators_transform
 src/ngtsc

e2e/__tests__/ast-transformers.test.ts

@@ -1,16 +1,16 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 describe('hoisting', () => {
   const DIR = 'ast-transformers/hoisting';
 
   test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-    const { json } = runWithJson(DIR);
+    const { json } = runWithJsonNoCache(DIR);
 
     expect(json.success).toBe(true);
   });
 
   test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-    const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+    const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
     expect(json.success).toBe(true);
   });
@@ -20,13 +20,13 @@ describe('ng-jit-transformers', () => {
   const DIR = 'ast-transformers/ng-jit-transformers';
 
   test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-    const { json } = runWithJson(DIR);
+    const { json } = runWithJsonNoCache(DIR);
 
     expect(json.success).toBe(true);
   });
 
   test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-    const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+    const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
     expect(json.success).toBe(true);
   });

e2e/__tests__/async.test.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 import { runYarnInstall } from '../utils';
 
 const DIR = path.join(__dirname, '..', 'async');
@@ -10,13 +10,13 @@ beforeAll(() => {
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/babel-support.test.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 import { runYarnInstall } from '../utils';
 
 const DIR = path.join(__dirname, '..', 'babel-support');
@@ -10,13 +10,13 @@ beforeAll(() => {
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/custom-typings.test.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 import { runYarnInstall } from '../utils';
 
 const DIR = path.join(__dirname, '..', 'custom-typings');
@@ -10,13 +10,13 @@ beforeAll(() => {
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/jest-globals.test.ts

@@ -1,15 +1,15 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 const DIR = 'jest-globals';
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/ng-deep-import.test.ts

@@ -1,15 +1,15 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 const DIR = 'ng-deep-import';
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/ng-lib-import.test.ts

@@ -1,15 +1,15 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 const DIR = 'ng-lib-import';
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/path-mapping.test.ts

@@ -1,15 +1,15 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 const DIR = 'path-mapping';
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/__tests__/process-js-packages.test.ts

@@ -0,0 +1,27 @@
+import fs from 'fs';
+import path from 'path';
+
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
+
+const TEST_DIR_NAME = 'process-js-packages';
+const TEST_DIR_PATH = path.join(__dirname, '..', TEST_DIR_NAME);
+const LOG_FILE_NAME = 'ng-jest.log';
+const LOG_FILE_PATH = path.join(TEST_DIR_PATH, LOG_FILE_NAME);
+
+test(`successfully runs the tests inside ${TEST_DIR_NAME}`, () => {
+  process.env.NG_JEST_LOG = LOG_FILE_NAME;
+
+  const { json } = runWithJsonNoCache(TEST_DIR_NAME);
+
+  expect(json.success).toBe(true);
+  expect(fs.existsSync(LOG_FILE_PATH)).toBe(true);
+
+  const logFileContent = fs.readFileSync(LOG_FILE_PATH, 'utf-8');
+  const logFileContentAsJson = JSON.parse(logFileContent);
+
+  expect(/node_modules\/(.*.m?js$)/.test(logFileContentAsJson.context.filePath.replace(/\\/g, '/'))).toBe(true);
+  expect(logFileContentAsJson.message).toBe('process with esbuild');
+
+  delete process.env.NG_JEST_LOG;
+  fs.unlinkSync(LOG_FILE_PATH);
+});

e2e/__tests__/snapshot-serializers.test.ts

@@ -1,15 +1,15 @@
-import { json as runWithJson } from '../run-jest';
+import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
 
 const DIR = 'snapshot-serializers';
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: false`, () => {
-  const { json } = runWithJson(DIR);
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
 });
 
 test(`successfully runs the tests inside ${DIR} with isolatedModules: true`, () => {
-  const { json } = runWithJson(DIR, ['-c=jest-isolated.config.js']);
+  const { json } = runWithJsonNoCache(DIR, ['-c=jest-isolated.config.js']);
 
   expect(json.success).toBe(true);
 });

e2e/process-js-packages/__tests__/foo-js-packages.spec.ts

@@ -0,0 +1,5 @@
+import { foo } from 'my-lib';
+
+test('should pass', () => {
+  expect(foo).toBe(1);
+});

e2e/process-js-packages/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "process-js-packages",
+  "jest": {
+    "moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
+    "globals": {
+      "ts-jest": {
+        "isolatedModules": true
+      }
+    },
+    "transform": {
+      "^.+\\.(ts|js|mjs|html)$": "<rootDir>/../../build/index.js"
+    },
+    "transformIgnorePatterns": ["node_modules/(?!my-lib)"]
+  }
+}

e2e/run-jest.ts

@@ -118,6 +118,10 @@ export const json = function (dir: string, args?: string[], options: RunJestOpti
   }
 };
 
+export const jsonNoCache = (dir: string, args?: string[], options: RunJestOptions = {}): RunJestJsonResult => {
+  return json(dir, args ? [...args, '--no-cache'] : ['--no-cache'], options);
+};
+
 export const onNodeVersions = (versionRange: string, testBody: () => void): void => {
   const description = `on node ${versionRange}`;
   if (semver.satisfies(process.versions.node, versionRange)) {

scripts/test-examples.js

@@ -9,6 +9,7 @@ const { exampleAppsToRun, rootDir } = require('./paths');
 const executeTest = (projectPath) => {
   // we change current directory
   process.chdir(projectPath);
+
   // reading package.json
   const projectPkg = require(join(projectPath, 'package.json'));
   if (!projectPkg.name) projectPkg.name = 'unknown';
@@ -19,6 +20,11 @@ const executeTest = (projectPath) => {
   logger.log('='.repeat(20), `${projectPkg.name}@${projectPkg.version}`, 'in', projectPath, '='.repeat(20));
   logger.log();
 
+  logger.log('cleaning up');
+  logger.log();
+
+  execa.sync('rimraf', [join(projectPath, 'node_modules')]);
+
   // then we install it in the repo
   logger.log('ensuring all dependencies of target project are installed');
   logger.log();
@@ -50,6 +56,7 @@ const executeTest = (projectPath) => {
     env: process.env,
   });
 
+  logger.log();
   logger.log('starting the CommonJS tests with isolatedModules: true using:', ...cmdIsolatedLine);
   logger.log();
 
@@ -61,6 +68,7 @@ const executeTest = (projectPath) => {
 
   // TODO: Enable when fully support ESM with Angular 13
   if (!projectPkg.version.startsWith('13')) {
+    logger.log();
     logger.log('starting the ESM tests with isolatedModules: false using:', ...cmdESMLine);
     logger.log();
 
@@ -70,6 +78,7 @@ const executeTest = (projectPath) => {
       env: process.env,
     });
 
+    logger.log();
     logger.log('starting the ESM tests with isolatedModules: true using:', ...cmdESMIsolatedLine);
     logger.log();