chore: only transpile tsx for components (#22504)

packages/playwright-ct-core/src/tsxTransform.ts

@@ -15,9 +15,9 @@
  */
 
 import path from 'path';
-import type { T, BabelAPI } from './babelBundle';
+import type { T, BabelAPI } from '../../playwright-test/src/common/babelBundle';
-import { types, declare, traverse } from './babelBundle';
+import { types, declare, traverse } from '@playwright/test/lib/common/babelBundle';
-import { js2ts } from './transform';
+import { js2ts } from '@playwright/test/lib/util';
 const t: typeof T = types;
 
 const fullNames = new Map<string, string | undefined>();

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;

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]);

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"
   },

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';

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<FullConfigInternal> {
     const loader = new ConfigLoader(data.configCLIOverrides);
+    setBabelPlugins(data.babelTransformPlugins);
+
     if (data.configFile)
       return await loader.loadConfigFile(data.configFile);
     return await loader.loadEmptyConfig(data.configDir);

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;
 }

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 || '';

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<void>;
+  babelPlugins?(): Promise<[string, any?][]>;
   begin?(suite: Suite): Promise<void>;
   end?(): Promise<void>;
   teardown?(): Promise<void>;
@@ -28,6 +29,7 @@ export interface TestRunnerPlugin {
 export type TestRunnerPluginRegistration = {
   factory: TestRunnerPlugin | (() => TestRunnerPlugin | Promise<TestRunnerPlugin>);
   instance?: TestRunnerPlugin;
+  babelPlugins?: [string, any?][];
 };
 
 export { webServer } from './webServerPlugin';

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<Suite> {

packages/playwright-test/src/runner/tasks.ts

@@ -118,6 +118,7 @@ function createPluginSetupTask(plugin: TestRunnerPluginRegistration): Task<TestR
     else
       plugin.instance = plugin.factory;
     await plugin.instance?.setup?.(config.config, config.configDir, reporter);
+    plugin.babelPlugins = await plugin.instance?.babelPlugins?.() || [];
     return () => plugin.instance?.teardown?.();
   };
 }

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;
+}