From 3c495c5590ee87b04403810be185a8c89bef9c8d Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Wed, 19 Apr 2023 14:20:53 -0700 Subject: [PATCH] chore: only transpile tsx for components (#22504) --- .../src}/tsxTransform.ts | 6 +++--- packages/playwright-ct-core/src/vitePlugin.ts | 8 ++++++-- .../bundles/babel/src/babelBundleImpl.ts | 11 +++++++++-- packages/playwright-test/package.json | 2 +- .../playwright-test/src/common/babelBundle.ts | 3 ++- .../playwright-test/src/common/configLoader.ts | 3 +++ packages/playwright-test/src/common/ipc.ts | 5 +++++ packages/playwright-test/src/common/transform.ts | 16 ++-------------- packages/playwright-test/src/plugins/index.ts | 2 ++ .../playwright-test/src/runner/loaderHost.ts | 5 +++++ packages/playwright-test/src/runner/tasks.ts | 1 + packages/playwright-test/src/util.ts | 12 ++++++++++++ 12 files changed, 51 insertions(+), 23 deletions(-) rename packages/{playwright-test/src/common => playwright-ct-core/src}/tsxTransform.ts (97%) diff --git a/packages/playwright-test/src/common/tsxTransform.ts b/packages/playwright-ct-core/src/tsxTransform.ts similarity index 97% rename from packages/playwright-test/src/common/tsxTransform.ts rename to packages/playwright-ct-core/src/tsxTransform.ts index ac34320455..43493ab5ab 100644 --- a/packages/playwright-test/src/common/tsxTransform.ts +++ b/packages/playwright-ct-core/src/tsxTransform.ts @@ -15,9 +15,9 @@ */ import path from 'path'; -import type { T, BabelAPI } from './babelBundle'; -import { types, declare, traverse } from './babelBundle'; -import { js2ts } from './transform'; +import type { T, BabelAPI } from '../../playwright-test/src/common/babelBundle'; +import { types, declare, traverse } from '@playwright/test/lib/common/babelBundle'; +import { js2ts } from '@playwright/test/lib/util'; const t: typeof T = types; const fullNames = new Map(); diff --git a/packages/playwright-ct-core/src/vitePlugin.ts b/packages/playwright-ct-core/src/vitePlugin.ts index e639b156a4..a04d1a27ad 100644 --- a/packages/playwright-ct-core/src/vitePlugin.ts +++ b/packages/playwright-ct-core/src/vitePlugin.ts @@ -19,7 +19,7 @@ import type { PlaywrightTestConfig as BasePlaywrightTestConfig, FullConfig } fro import type { InlineConfig, Plugin, ResolveFn, ResolvedConfig } from 'vite'; import type { TestRunnerPlugin } from '../../playwright-test/src/plugins'; -import type { ComponentInfo } from '../../playwright-test/src/common/tsxTransform'; +import type { ComponentInfo } from './tsxTransform'; import type { AddressInfo } from 'net'; import type { PluginContext } from 'rollup'; @@ -27,10 +27,10 @@ import fs from 'fs'; import path from 'path'; import { parse, traverse, types as t } from '@playwright/test/lib/common/babelBundle'; import { stoppable } from '@playwright/test/lib/utilsBundle'; -import { collectComponentUsages, componentInfo } from '@playwright/test/lib/common/tsxTransform'; import { assert, calculateSha1 } from 'playwright-core/lib/utils'; import { getPlaywrightVersion } from 'playwright-core/lib/utils'; import { setExternalDependencies } from '@playwright/test/lib/common/compilationCache'; +import { collectComponentUsages, componentInfo } from './tsxTransform'; let stoppableServer: any; const playwrightVersion = getPlaywrightVersion(); @@ -58,6 +58,10 @@ export function createPlugin( configDir = configDirectory; }, + babelPlugins: async () => [ + [require.resolve('./tsxTransform')] + ], + begin: async (suite: Suite) => { const use = config.projects[0].use as CtConfig; const port = use.ctPort || 3100; diff --git a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts index 3bdb473ac7..e124dae03b 100644 --- a/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts +++ b/packages/playwright-test/bundles/babel/src/babelBundleImpl.ts @@ -26,7 +26,14 @@ export { parse } from '@babel/parser'; import traverseFunction from '@babel/traverse'; export const traverse = traverseFunction; -export function babelTransform(filename: string, isTypeScript: boolean, isModule: boolean, scriptPreprocessor: string | undefined, additionalPlugin: babel.PluginObj): BabelFileResult { + +let additionalPlugins: [string, any?][] = []; + +export function setBabelPlugins(plugins: [string, any?][]) { + additionalPlugins = plugins; +} + +export function babelTransform(filename: string, isTypeScript: boolean, isModule: boolean, scriptPreprocessor: string | undefined): BabelFileResult { const plugins = []; if (isTypeScript) { @@ -72,7 +79,7 @@ export function babelTransform(filename: string, isTypeScript: boolean, isModule plugins.push([require('@babel/plugin-syntax-import-assertions')]); } - plugins.unshift(additionalPlugin); + plugins.unshift(...additionalPlugins.map(([name, options]) => [require(name), options])); if (scriptPreprocessor) plugins.push([scriptPreprocessor]); diff --git a/packages/playwright-test/package.json b/packages/playwright-test/package.json index 7db534e867..3d823e84fc 100644 --- a/packages/playwright-test/package.json +++ b/packages/playwright-test/package.json @@ -20,11 +20,11 @@ "./lib/cli": "./lib/cli.js", "./lib/common/babelBundle": "./lib/common/babelBundle.js", "./lib/common/compilationCache": "./lib/common/compilationCache.js", - "./lib/common/tsxTransform": "./lib/common/tsxTransform.js", "./lib/internalsForTest": "./lib/internalsForTest.js", "./lib/experimentalLoader": "./lib/experimentalLoader.js", "./lib/mount": "./lib/mount.js", "./lib/plugins": "./lib/plugins/index.js", + "./lib/util": "./lib/util.js", "./lib/utilsBundle": "./lib/utilsBundle.js", "./reporter": "./reporter.js" }, diff --git a/packages/playwright-test/src/common/babelBundle.ts b/packages/playwright-test/src/common/babelBundle.ts index 70f143e20d..a3505b4414 100644 --- a/packages/playwright-test/src/common/babelBundle.ts +++ b/packages/playwright-test/src/common/babelBundle.ts @@ -20,7 +20,8 @@ export const declare: typeof import('../../bundles/babel/node_modules/@types/bab export const types: typeof import('../../bundles/babel/node_modules/@types/babel__core').types = require('./babelBundleImpl').types; export const parse: typeof import('../../bundles/babel/node_modules/@babel/parser/typings/babel-parser').parse = require('./babelBundleImpl').parse; export const traverse: typeof import('../../bundles/babel/node_modules/@types/babel__traverse').default = require('./babelBundleImpl').traverse; -export type BabelTransformFunction = (filename: string, isTypeScript: boolean, isModule: boolean, scriptPreprocessor: string | undefined, additionalPlugin: [string]) => BabelFileResult; +export type BabelTransformFunction = (filename: string, isTypeScript: boolean, isModule: boolean, scriptPreprocessor: string | undefined) => BabelFileResult; +export const setBabelPlugins: (plugins: [string, any?][]) => void = require('./babelBundleImpl').setBabelPlugins; export const babelTransform: BabelTransformFunction = require('./babelBundleImpl').babelTransform; export type { NodePath, types as T } from '../../bundles/babel/node_modules/@types/babel__core'; export type { BabelAPI } from '../../bundles/babel/node_modules/@types/babel__helper-plugin-utils'; diff --git a/packages/playwright-test/src/common/configLoader.ts b/packages/playwright-test/src/common/configLoader.ts index 1e29e67dfb..40898c43db 100644 --- a/packages/playwright-test/src/common/configLoader.ts +++ b/packages/playwright-test/src/common/configLoader.ts @@ -23,6 +23,7 @@ import type { Config, Project } from '../../types/test'; import { errorWithFile } from '../util'; import { setCurrentConfig } from './globals'; import { FullConfigInternal } from './config'; +import { setBabelPlugins } from './babelBundle'; const kDefineConfigWasUsed = Symbol('defineConfigWasUsed'); export const defineConfig = (config: any) => { @@ -40,6 +41,8 @@ export class ConfigLoader { static async deserialize(data: SerializedConfig): Promise { const loader = new ConfigLoader(data.configCLIOverrides); + setBabelPlugins(data.babelTransformPlugins); + if (data.configFile) return await loader.loadConfigFile(data.configFile); return await loader.loadEmptyConfig(data.configDir); diff --git a/packages/playwright-test/src/common/ipc.ts b/packages/playwright-test/src/common/ipc.ts index 5e9d6fe1d4..7852dcc789 100644 --- a/packages/playwright-test/src/common/ipc.ts +++ b/packages/playwright-test/src/common/ipc.ts @@ -42,6 +42,7 @@ export type SerializedConfig = { configDir: string; configCLIOverrides: ConfigCLIOverrides; compilationCache: any; + babelTransformPlugins: [string, any?][]; }; export type TtyParams = { @@ -126,11 +127,15 @@ export type TeardownErrorsPayload = { export type EnvProducedPayload = [string, string | null][]; export function serializeConfig(config: FullConfigInternal): SerializedConfig { + const babelTransformPlugins: [string, any?][] = []; + for (const plugin of config.plugins) + babelTransformPlugins.push(...plugin.babelPlugins || []); const result: SerializedConfig = { configFile: config.config.configFile, configDir: config.configDir, configCLIOverrides: config.configCLIOverrides, compilationCache: serializeCompilationCache(), + babelTransformPlugins, }; return result; } diff --git a/packages/playwright-test/src/common/transform.ts b/packages/playwright-test/src/common/transform.ts index cdef485841..b200e96934 100644 --- a/packages/playwright-test/src/common/transform.ts +++ b/packages/playwright-test/src/common/transform.ts @@ -23,7 +23,7 @@ import type { TsConfigLoaderResult } from '../third_party/tsconfig-loader'; import { tsConfigLoader } from '../third_party/tsconfig-loader'; import Module from 'module'; import type { BabelTransformFunction } from './babelBundle'; -import { fileIsModule } from '../util'; +import { fileIsModule, js2ts } from '../util'; import { getFromCompilationCache, currentFileDepsCollector, belongsToNodeModules } from './compilationCache'; type ParsedTsConfigData = { @@ -132,18 +132,6 @@ export function resolveHook(filename: string, specifier: string): string | undef return js2ts(path.resolve(path.dirname(filename), specifier)); } -export function js2ts(resolved: string): string | undefined { - const match = resolved.match(/(.*)(\.js|\.jsx|\.mjs)$/); - if (!match || fs.existsSync(resolved)) - return; - const tsResolved = match[1] + match[2].replace('js', 'ts'); - if (fs.existsSync(tsResolved)) - return tsResolved; - const tsxResolved = match[1] + match[2].replace('js', 'tsx'); - if (fs.existsSync(tsxResolved)) - return tsxResolved; -} - export function transformHook(code: string, filename: string, moduleUrl?: string): string { const { cachedCode, addToCache } = getFromCompilationCache(filename, code, moduleUrl); if (cachedCode) @@ -161,7 +149,7 @@ export function transformHook(code: string, filename: string, moduleUrl?: string try { const { babelTransform }: { babelTransform: BabelTransformFunction } = require('./babelBundle'); - const { code, map } = babelTransform(filename, isTypeScript, !!moduleUrl, hasPreprocessor ? scriptPreprocessor : undefined, [require.resolve('./tsxTransform')]); + const { code, map } = babelTransform(filename, isTypeScript, !!moduleUrl, hasPreprocessor ? scriptPreprocessor : undefined); if (code) addToCache!(code, map); return code || ''; diff --git a/packages/playwright-test/src/plugins/index.ts b/packages/playwright-test/src/plugins/index.ts index 1e700ef493..6f24e6b5dd 100644 --- a/packages/playwright-test/src/plugins/index.ts +++ b/packages/playwright-test/src/plugins/index.ts @@ -20,6 +20,7 @@ import type { Multiplexer } from '../reporters/multiplexer'; export interface TestRunnerPlugin { name: string; setup?(config: FullConfig, configDir: string, reporter: Multiplexer): Promise; + babelPlugins?(): Promise<[string, any?][]>; begin?(suite: Suite): Promise; end?(): Promise; teardown?(): Promise; @@ -28,6 +29,7 @@ export interface TestRunnerPlugin { export type TestRunnerPluginRegistration = { factory: TestRunnerPlugin | (() => TestRunnerPlugin | Promise); instance?: TestRunnerPlugin; + babelPlugins?: [string, any?][]; }; export { webServer } from './webServerPlugin'; diff --git a/packages/playwright-test/src/runner/loaderHost.ts b/packages/playwright-test/src/runner/loaderHost.ts index 29a697c286..68ca6cbbb5 100644 --- a/packages/playwright-test/src/runner/loaderHost.ts +++ b/packages/playwright-test/src/runner/loaderHost.ts @@ -22,6 +22,7 @@ import { loadTestFile } from '../common/testLoader'; import type { FullConfigInternal } from '../common/config'; import { PoolBuilder } from '../common/poolBuilder'; import { addToCompilationCache } from '../common/compilationCache'; +import { setBabelPlugins } from '../common/babelBundle'; export class InProcessLoaderHost { private _config: FullConfigInternal; @@ -30,6 +31,10 @@ export class InProcessLoaderHost { constructor(config: FullConfigInternal) { this._config = config; this._poolBuilder = PoolBuilder.createForLoader(); + const babelTransformPlugins: [string, any?][] = []; + for (const plugin of config.plugins) + babelTransformPlugins.push(...plugin.babelPlugins || []); + setBabelPlugins(babelTransformPlugins); } async loadTestFile(file: string, testErrors: TestError[]): Promise { diff --git a/packages/playwright-test/src/runner/tasks.ts b/packages/playwright-test/src/runner/tasks.ts index 41fa04ae92..28d55043fa 100644 --- a/packages/playwright-test/src/runner/tasks.ts +++ b/packages/playwright-test/src/runner/tasks.ts @@ -118,6 +118,7 @@ function createPluginSetupTask(plugin: TestRunnerPluginRegistration): Task plugin.instance?.teardown?.(); }; } diff --git a/packages/playwright-test/src/util.ts b/packages/playwright-test/src/util.ts index e81eb60d00..6165b11345 100644 --- a/packages/playwright-test/src/util.ts +++ b/packages/playwright-test/src/util.ts @@ -306,3 +306,15 @@ export function envWithoutExperimentalLoaderOptions(): NodeJS.ProcessEnv { result.NODE_OPTIONS = result.NODE_OPTIONS.replace(substring, '').trim() || undefined; return result; } + +export function js2ts(resolved: string): string | undefined { + const match = resolved.match(/(.*)(\.js|\.jsx|\.mjs)$/); + if (!match || fs.existsSync(resolved)) + return; + const tsResolved = match[1] + match[2].replace('js', 'ts'); + if (fs.existsSync(tsResolved)) + return tsResolved; + const tsxResolved = match[1] + match[2].replace('js', 'tsx'); + if (fs.existsSync(tsxResolved)) + return tsxResolved; +}