1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import { program } from 'commander';
import { runCLI } from 'jest';
import { getPaths } from './getPaths';
import { compile } from './compile';

program
	.name('ng-esbuild-tests')
	.description('Run Angular tests faster thanks to Jest and esbuild')
	.option('--dir [dir]', 'directory to scan, default: current directory')
	.option('--pattern [pattern]', 'file pattern, default: ./**/*spec.ts')
	.option('--outDir [outDir]', 'output directory, default: ./dist/ng-esbuild-tests/')
	.option('--skipCompile', 'skip compilation part, only for tests!')
	.parse(process.argv);

export async function cli() {
	const opts = program.opts();
	const dir = opts.dir || './';
	const pattern = opts.pattern || '**/*spec.ts';
	const outDir = opts.outDir || './dist/ng-esbuild-tests/';
	const skipCompile = opts.skipCompile || '';

	const paths = await getPaths(dir, pattern);

	if (!skipCompile) {
		console.log('Files to compile with esbuild:');
		// eslint-disable-next-line no-restricted-syntax
		for (const path of paths) {
			console.log(`  ${path}`);
		}

		await compile(outDir, paths);
	} else {
		console.warn('Compilation skipped!');
	}

	const args = {
		roots: ['./'],
		testRegex: '\\.spec\\.js$',
		testEnvironment: 'jsdom'
	};

	await runCLI(args as any, [outDir]);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { glob } from 'glob';
import { join } from 'path';

export async function getPaths(dir, patten) {
	return new Promise<Array<string>>((resolve, reject) => {
		glob(join(dir, patten), (err, files) => {
			if (err) {
				reject(err);
				return;
			}

			resolve(files);
		});
	});
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { build } from 'esbuild';
import { componentMetadataPlugin } from './componentMetadataPlugin';
import { jestPresetAngularPlugin } from './jestPresetAngularPlugin';

export async function compile(outDir: string, paths: Array<string>) {
	const start = new Date().getTime();

	const result = await build({
		outdir: outDir,
		entryPoints: paths,
		bundle: true,
		platform: 'node',
		minify: false,
		format: 'iife',
		plugins: [
			componentMetadataPlugin(),
			jestPresetAngularPlugin()
		],
		loader: {
			'.html': 'text'
		}
	});

	const end = new Date().getTime();
	console.log(`\nCompilation end in ${end - start}ms!\n`);

	return result;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import * as fs from 'fs';
import {
	Loader, OnLoadResult, Plugin, PluginBuild
} from 'esbuild';

const tsLoader: Loader = 'ts';

function processSpecFile(source: string): OnLoadResult {
	try {
		if (!source.includes('import \'jest-preset-angular/setup-jest\'')) {
			const result = `import 'jest-preset-angular/setup-jest';\n${source}`;
			return { contents: result, loader: 'ts' };
		}

		return { contents: source, loader: tsLoader };
	} catch (e) {
		return { errors: [e] };
	}
}

export function jestPresetAngularPlugin(): Plugin {
	return {
		name: 'jestPresetAngularPlugin',
		async setup(build: PluginBuild) {
			build.onLoad({ filter: /.*\.(spec)\.ts$/ }, async (args) => {
				const source = await fs.promises.readFile(args.path, 'utf8');
				return processSpecFile(source);
			});
		}
	};
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

import * as fs from 'fs';
import {
	Loader, OnLoadResult, Plugin, PluginBuild
} from 'esbuild';

const tsLoader: Loader = 'ts';
const correctNumberOfParts = 2;

const styleUrlsRegExp = /^ *styleUrls *: *\[['"]([^'"\]]*)['"]],*/gm;
const templateUrlRegExp = /^ *templateUrl *: *['"]*([^'"]*)['"]/gm;

function getValueByPattern(regex: RegExp, str: string) {
	const results: Array<string> = [];
	let execArray = regex.exec(str);

	while (execArray !== null) {
		results.push(execArray[1]);
		execArray = regex.exec(str);
	}

	return results.pop();
}

async function removeStyles(contents: string) {
	return contents.replace(styleUrlsRegExp, 'styles: [],');
}

function processConstructor(contents) {
	if (!/constructor *\(([^)]*)/gm.test(contents)) {
		return contents;
	}

	let result = contents;
	const matches = result.matchAll(/constructor *\(([^)]*)/gm);
	// eslint-disable-next-line no-restricted-syntax
	for (const match of matches) {
		if (!match[1] && /:/gm.test(match[1])) {
			continue;
		}

		const flat = match[1].replace(/[\n\r]/gm, '');
		const flatArray = flat.split(',')
			.map((inject) => {
				const parts = inject.split(':');
				const partsCorrect = parts.length === correctNumberOfParts;
				const providerDoesNotContainInject = !/@Inject/.test(inject);
				const shouldAddInject = partsCorrect && providerDoesNotContainInject;
				return shouldAddInject ? `@Inject(${parts[1]}) ${inject}` : inject;
			});

		const constructorRegExp = /constructor *\([^)]*\)/gm;
		result = result.replace(constructorRegExp, `constructor(${flatArray.join(',')})`);
	}

	if (!/Inject[ ,}\n\r].*'@angular\/core.*;/.test(result)) {
		result = `import { Inject } from '@angular/core';\n${result}`;
	}

	return result;
}

async function processComponentMetadata(source: string): Promise<OnLoadResult> {
	try {
		let result = source;

		const hasTemplateUrl = /^ *templateUrl *: *['"]*([^'"]*)/gm.test(result);
		if (hasTemplateUrl) {
			const templateUrl = getValueByPattern(/^ *templateUrl *: *['"]*([^'"]*)/gm, source);
			result = `import templateSource from '${templateUrl}';\n${result}`
				.replace(templateUrlRegExp, 'template: templateSource || ""');
		}

		result = await removeStyles(result || '');
		result = processConstructor(result);

		return { contents: result, loader: tsLoader };
	} catch (e) {
		return { errors: [e] };
	}
}

export function componentMetadataPlugin(): Plugin {
	return {
		name: 'componentMetadataPlugin',
		async setup(build: PluginBuild) {
			build.onLoad({ filter: /src.*\.(component|pipe|service|directive|guard|module)\.ts$/ }, async (args) => {
				const source = await fs.promises.readFile(args.path, 'utf8');
				return await processComponentMetadata(source);
			});
		}
	};
}

1
2
3
4
5
6
7
8
9

    // ...
	const args = {
        roots: ['./'],
        testRegex: '\\.spec\\.js$',
        testEnvironment: 'jsdom'
    };
    
    await runCLI(args as any, [outDir]);
    // ...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/**
 * Some NPM packages like `tslib` is distributed in such a way that `esbuild` cannot process it, so we fall back to use TypeScript API
 */
const defaultProcessWithEsbuildPatterns = ['**/*.mjs'];

export class NgJestConfig extends ConfigSet {
    readonly processWithEsbuild: ReturnType<typeof globsToMatcher>;

    constructor(jestConfig: ProjectConfigTsJest | undefined, parentLogger?: Logger | undefined) {
        super(jestConfig, parentLogger);
        const jestGlobalsConfig = jestConfig?.globals?.ngJest ?? Object.create(null);
        this.processWithEsbuild = globsToMatcher([
            ...(jestGlobalsConfig.processWithEsbuild ?? []),
            ...defaultProcessWithEsbuildPatterns,
        ]);
    }
    // ...
}

export class NgJestTransformer extends TsJestTransformer {
    
    // ...
    
    process(fileContent: string, filePath: string, transformOptions: TransformOptionsTsJest): TransformedSource {
        // @ts-expect-error we are accessing the private cache to avoid creating new objects all the time
        const configSet = super._configsFor(transformOptions);
        if (configSet.processWithEsbuild(filePath)) {
            this.#ngJestLogger.debug({ filePath }, 'process with esbuild');

            const compilerOpts = configSet.parsedTsConfig.options;
            const { code, map } = this.#esbuildImpl.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,
            });

            return {
                code,
                map,
            };
        } else {
            return super.process(fileContent, filePath, transformOptions);
        }
    }
}