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); 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 { export function transformHook(code: string, filename: string, isModule = false): string {
if (isComponentImport(filename)) if (isComponentImport(filename))
return componentStub(); 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 cachePath = calculateCachePath(tsconfigData, code, filename);
const codePath = cachePath + '.js'; const codePath = cachePath + '.js';
const sourceMapPath = cachePath + '.map'; const sourceMapPath = cachePath + '.map';
@ -135,7 +149,10 @@ export function transformHook(code: string, filename: string, isModule = false):
// Silence the annoying warning. // Silence the annoying warning.
process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true'; process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true';
const babel: typeof import('@babel/core') = require('@babel/core'); const babel: typeof import('@babel/core') = require('@babel/core');
const plugins = [ const plugins = [];
if (isTypeScript) {
plugins.push(
[require.resolve('@babel/plugin-proposal-class-properties')], [require.resolve('@babel/plugin-proposal-class-properties')],
[require.resolve('@babel/plugin-proposal-numeric-separator')], [require.resolve('@babel/plugin-proposal-numeric-separator')],
[require.resolve('@babel/plugin-proposal-logical-assignment-operators')], [require.resolve('@babel/plugin-proposal-logical-assignment-operators')],
@ -145,8 +162,8 @@ export function transformHook(code: string, filename: string, isModule = false):
[require.resolve('@babel/plugin-syntax-optional-catch-binding')], [require.resolve('@babel/plugin-syntax-optional-catch-binding')],
[require.resolve('@babel/plugin-syntax-async-generators')], [require.resolve('@babel/plugin-syntax-async-generators')],
[require.resolve('@babel/plugin-syntax-object-rest-spread')], [require.resolve('@babel/plugin-syntax-object-rest-spread')],
[require.resolve('@babel/plugin-proposal-export-namespace-from')], [require.resolve('@babel/plugin-proposal-export-namespace-from')]
] as any; );
if (tsconfigData) { if (tsconfigData) {
plugins.push([require.resolve('babel-plugin-module-resolver'), { plugins.push([require.resolve('babel-plugin-module-resolver'), {
@ -158,16 +175,18 @@ export function transformHook(code: string, filename: string, isModule = false):
}]); }]);
} }
if (process.env.PW_COMPONENT_TESTING)
plugins.unshift([require.resolve('@babel/plugin-transform-react-jsx')]);
if (!isModule) { if (!isModule) {
plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs')]); plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs')]);
plugins.push([require.resolve('@babel/plugin-proposal-dynamic-import')]); plugins.push([require.resolve('@babel/plugin-proposal-dynamic-import')]);
} }
}
if (process.env.PW_TEST_SOURCE_TRANSFORM) if (process.env.PW_COMPONENT_TESTING)
plugins.push([process.env.PW_TEST_SOURCE_TRANSFORM]); plugins.unshift([require.resolve('@babel/plugin-transform-react-jsx')]);
if (hasPreprocessor)
plugins.push([scriptPreprocessor]);
const result = babel.transformFileSync(filename, { const result = babel.transformFileSync(filename, {
babelrc: false, babelrc: false,
@ -193,7 +212,12 @@ export function transformHook(code: string, filename: string, isModule = false):
} }
export function installTransform(): () => void { 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 { 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: undefined,
PW_TEST_REPORTER_WS_ENDPOINT: undefined, PW_TEST_REPORTER_WS_ENDPOINT: undefined,
PW_TEST_SOURCE_TRANSFORM: undefined, PW_TEST_SOURCE_TRANSFORM: undefined,
PW_TEST_SOURCE_TRANSFORM_SCOPE: undefined,
PW_OUT_OF_PROCESS_DRIVER: undefined, PW_OUT_OF_PROCESS_DRIVER: undefined,
NODE_OPTIONS: undefined, NODE_OPTIONS: undefined,
}, },