feat(debug): allow preprocessing JS scripts as well (#11953)

This commit is contained in:
Pavel Feldman 2022-02-09 07:14:11 -08:00 committed by GitHub
parent 19368e93af
commit e9e5de2d57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 28 deletions

View File

@ -120,11 +120,25 @@ function loadAndValidateTsconfigForFile(file: string): ParsedTsConfigData | unde
return cachedTSConfigs.get(cwd);
}
const pathSeparator = process.platform === 'win32' ? ';' : ':';
const scriptPreprocessor = process.env.PW_TEST_SOURCE_TRANSFORM ?
require(process.env.PW_TEST_SOURCE_TRANSFORM) : undefined;
export function transformHook(code: string, filename: string, isModule = false): string {
if (isComponentImport(filename))
return componentStub();
const tsconfigData = loadAndValidateTsconfigForFile(filename);
// If we are not TypeScript and there is no applicable preprocessor - bail out.
const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx');
const hasPreprocessor =
process.env.PW_TEST_SOURCE_TRANSFORM &&
process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE &&
process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE.split(pathSeparator).some(f => filename.startsWith(f));
if (!isTypeScript && !hasPreprocessor)
return code;
const tsconfigData = isTypeScript ? loadAndValidateTsconfigForFile(filename) : undefined;
const cachePath = calculateCachePath(tsconfigData, code, filename);
const codePath = cachePath + '.js';
const sourceMapPath = cachePath + '.map';
@ -135,39 +149,44 @@ export function transformHook(code: string, filename: string, isModule = false):
// Silence the annoying warning.
process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true';
const babel: typeof import('@babel/core') = require('@babel/core');
const plugins = [
[require.resolve('@babel/plugin-proposal-class-properties')],
[require.resolve('@babel/plugin-proposal-numeric-separator')],
[require.resolve('@babel/plugin-proposal-logical-assignment-operators')],
[require.resolve('@babel/plugin-proposal-nullish-coalescing-operator')],
[require.resolve('@babel/plugin-proposal-optional-chaining')],
[require.resolve('@babel/plugin-syntax-json-strings')],
[require.resolve('@babel/plugin-syntax-optional-catch-binding')],
[require.resolve('@babel/plugin-syntax-async-generators')],
[require.resolve('@babel/plugin-syntax-object-rest-spread')],
[require.resolve('@babel/plugin-proposal-export-namespace-from')],
] as any;
const plugins = [];
if (tsconfigData) {
plugins.push([require.resolve('babel-plugin-module-resolver'), {
root: ['./'],
alias: tsconfigData.alias,
// Silences warning 'Could not resovle ...' that we trigger because we resolve
// into 'foo/bar', and not 'foo/bar.ts'.
loglevel: 'silent',
}]);
if (isTypeScript) {
plugins.push(
[require.resolve('@babel/plugin-proposal-class-properties')],
[require.resolve('@babel/plugin-proposal-numeric-separator')],
[require.resolve('@babel/plugin-proposal-logical-assignment-operators')],
[require.resolve('@babel/plugin-proposal-nullish-coalescing-operator')],
[require.resolve('@babel/plugin-proposal-optional-chaining')],
[require.resolve('@babel/plugin-syntax-json-strings')],
[require.resolve('@babel/plugin-syntax-optional-catch-binding')],
[require.resolve('@babel/plugin-syntax-async-generators')],
[require.resolve('@babel/plugin-syntax-object-rest-spread')],
[require.resolve('@babel/plugin-proposal-export-namespace-from')]
);
if (tsconfigData) {
plugins.push([require.resolve('babel-plugin-module-resolver'), {
root: ['./'],
alias: tsconfigData.alias,
// Silences warning 'Could not resovle ...' that we trigger because we resolve
// into 'foo/bar', and not 'foo/bar.ts'.
loglevel: 'silent',
}]);
}
if (!isModule) {
plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs')]);
plugins.push([require.resolve('@babel/plugin-proposal-dynamic-import')]);
}
}
if (process.env.PW_COMPONENT_TESTING)
plugins.unshift([require.resolve('@babel/plugin-transform-react-jsx')]);
if (!isModule) {
plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs')]);
plugins.push([require.resolve('@babel/plugin-proposal-dynamic-import')]);
}
if (process.env.PW_TEST_SOURCE_TRANSFORM)
plugins.push([process.env.PW_TEST_SOURCE_TRANSFORM]);
if (hasPreprocessor)
plugins.push([scriptPreprocessor]);
const result = babel.transformFileSync(filename, {
babelrc: false,
@ -193,7 +212,12 @@ export function transformHook(code: string, filename: string, isModule = false):
}
export function installTransform(): () => void {
return pirates.addHook((code: string, filename: string) => transformHook(code, filename), { exts: ['.ts', '.tsx'] });
const exts = ['.ts', '.tsx'];
// When script preprocessor is engaged, we transpile JS as well.
if (scriptPreprocessor)
exts.push('.js', '.mjs');
return pirates.addHook((code: string, filename: string) => transformHook(code, filename), { exts });
}
export function wrapFunctionWithLocation<A extends any[], R>(func: (location: Location, ...args: A) => R): (...args: A) => R {

View File

@ -127,6 +127,7 @@ async function runPlaywrightTest(childProcess: CommonFixtures['childProcess'], b
PW_TEST_REPORTER: undefined,
PW_TEST_REPORTER_WS_ENDPOINT: undefined,
PW_TEST_SOURCE_TRANSFORM: undefined,
PW_TEST_SOURCE_TRANSFORM_SCOPE: undefined,
PW_OUT_OF_PROCESS_DRIVER: undefined,
NODE_OPTIONS: undefined,
},