chore: introduce ct-core to hard-depend on vite (#22437)

Fixes https://github.com/microsoft/playwright/issues/22233

package-lock.json

@@ -1342,6 +1342,10 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/experimental-ct-core": {
+      "resolved": "packages/playwright-ct-core",
+      "link": true
+    },
     "node_modules/@playwright/experimental-ct-react": {
       "resolved": "packages/playwright-ct-react",
       "link": true
@@ -6194,14 +6198,27 @@
         "node": ">=14"
       }
     },
+    "packages/playwright-ct-core": {
+      "version": "1.33.0-next",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@playwright/test": "1.33.0-next",
+        "vite": "^4.2.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "packages/playwright-ct-react": {
       "name": "@playwright/experimental-ct-react",
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-react": "^3.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-react": "^3.1.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6215,9 +6232,8 @@
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-react": "^3.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-react": "^3.1.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6231,8 +6247,7 @@
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "vite": "^4.2.1",
+        "@playwright/experimental-ct-core": "1.33.0-next",
         "vite-plugin-solid": "^2.6.1"
       },
       "bin": {
@@ -6250,9 +6265,8 @@
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "@sveltejs/vite-plugin-svelte": "^2.0.3",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@sveltejs/vite-plugin-svelte": "^2.0.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6269,9 +6283,8 @@
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-vue": "^4.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-vue": "^4.1.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6321,9 +6334,8 @@
       "version": "1.33.0-next",
       "license": "Apache-2.0",
       "dependencies": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-vue2": "^2.2.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-vue2": "^2.2.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7163,46 +7175,48 @@
         "fastq": "^1.6.0"
       }
     },
+    "@playwright/experimental-ct-core": {
+      "version": "file:packages/playwright-ct-core",
+      "requires": {
+        "@playwright/test": "1.33.0-next",
+        "vite": "^4.2.1"
+      }
+    },
     "@playwright/experimental-ct-react": {
       "version": "file:packages/playwright-ct-react",
       "requires": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-react": "^3.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-react": "^3.1.0"
       }
     },
     "@playwright/experimental-ct-react17": {
       "version": "file:packages/playwright-ct-react17",
       "requires": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-react": "^3.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-react": "^3.1.0"
       }
     },
     "@playwright/experimental-ct-solid": {
       "version": "file:packages/playwright-ct-solid",
       "requires": {
-        "@playwright/test": "1.33.0-next",
+        "@playwright/experimental-ct-core": "1.33.0-next",
         "solid-js": "^1.7.0",
-        "vite": "^4.2.1",
         "vite-plugin-solid": "^2.6.1"
       }
     },
     "@playwright/experimental-ct-svelte": {
       "version": "file:packages/playwright-ct-svelte",
       "requires": {
-        "@playwright/test": "1.33.0-next",
+        "@playwright/experimental-ct-core": "1.33.0-next",
         "@sveltejs/vite-plugin-svelte": "^2.0.3",
-        "svelte": "^3.55.1",
-        "vite": "^4.2.1"
+        "svelte": "^3.55.1"
       }
     },
     "@playwright/experimental-ct-vue": {
       "version": "file:packages/playwright-ct-vue",
       "requires": {
-        "@playwright/test": "1.33.0-next",
-        "@vitejs/plugin-vue": "^4.1.0",
-        "vite": "^4.2.1"
+        "@playwright/experimental-ct-core": "1.33.0-next",
+        "@vitejs/plugin-vue": "^4.1.0"
       },
       "dependencies": {
         "@vitejs/plugin-vue": {
@@ -7235,9 +7249,8 @@
     "@playwright/experimental-ct-vue2": {
       "version": "file:packages/playwright-ct-vue2",
       "requires": {
-        "@playwright/test": "1.33.0-next",
+        "@playwright/experimental-ct-core": "1.33.0-next",
         "@vitejs/plugin-vue2": "^2.2.0",
-        "vite": "^4.2.1",
         "vue": "^2.7.14"
       }
     },

packages/playwright-ct-core/.npmignore

@@ -0,0 +1,6 @@
+**/*
+
+!README.md
+!LICENSE
+!cli.js
+!lib/**

packages/playwright-ct-core/README.md

@@ -0,0 +1,3 @@
+> **BEWARE** This package is EXPERIMENTAL and does not respect semver.
+
+Read more at https://playwright.dev/docs/test-components

packages/playwright-ct-core/cli.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = require('@playwright/test/cli');

packages/playwright-ct-core/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@playwright/experimental-ct-core",
+  "version": "1.33.0-next",
+  "description": "Playwright Component Testing Helpers",
+  "repository": "github:Microsoft/playwright",
+  "homepage": "https://playwright.dev",
+  "engines": {
+    "node": ">=14"
+  },
+  "author": {
+    "name": "Microsoft Corporation"
+  },
+  "license": "Apache-2.0",
+  "exports": {
+    "./cli": "./cli.js",
+    "./lib/vitePlugin": "./lib/vitePlugin.js"
+  },
+  "dependencies": {
+    "vite": "^4.2.1",
+    "@playwright/test": "1.33.0-next"
+  },
+  "bin": {
+    "playwright": "./cli.js"
+  }
+}

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

@@ -14,21 +14,23 @@
  * limitations under the License.
  */
 
-import fs from 'fs';
-import type { Suite } from '../../types/testReporter';
-import path from 'path';
-import type { InlineConfig, Plugin, ResolveFn, ResolvedConfig } from 'vite';
-import type { TestRunnerPlugin } from '.';
-import { parse, traverse, types as t } from '../common/babelBundle';
-import { stoppable } from '../utilsBundle';
-import type { ComponentInfo } from '../common/tsxTransform';
-import { collectComponentUsages, componentInfo } from '../common/tsxTransform';
-import { assert, calculateSha1 } from 'playwright-core/lib/utils';
-import type { AddressInfo } from 'net';
-import { getPlaywrightVersion } from 'playwright-core/lib/utils';
+import type { Suite } from '@playwright/test/reporter';
 import type { PlaywrightTestConfig as BasePlaywrightTestConfig, FullConfig } from '@playwright/test';
+
+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 { AddressInfo } from 'net';
 import type { PluginContext } from 'rollup';
-import { setExternalDependencies } from '../common/compilationCache';
+
+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';
 
 let stoppableServer: any;
 const playwrightVersion = getPlaywrightVersion();

packages/playwright-ct-react/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('@playwright/test/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-react/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-react').then(plugin => plugin.default()));

packages/playwright-ct-react/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^3.1.0",
-    "@playwright/test": "1.33.0-next",
-    "vite": "^4.2.1"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "@vitejs/plugin-react": "^3.1.0"
   },
   "bin": {
     "playwright": "./cli.js"

packages/playwright-ct-react17/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('playwright-core/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-react17/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-react').then(plugin => plugin.default()));

packages/playwright-ct-react17/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^3.1.0",
-    "@playwright/test": "1.33.0-next",
-    "vite": "^4.2.1"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "@vitejs/plugin-react": "^3.1.0"
   },
   "bin": {
     "playwright": "./cli.js"

packages/playwright-ct-solid/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('@playwright/test/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-solid/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('vite-plugin-solid').then(plugin => plugin.default()));

packages/playwright-ct-solid/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "vite": "^4.2.1",
-    "vite-plugin-solid": "^2.6.1",
-    "@playwright/test": "1.33.0-next"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "vite-plugin-solid": "^2.6.1"
   },
   "devDependencies": {
     "solid-js": "^1.7.0"

packages/playwright-ct-svelte/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('@playwright/test/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-svelte/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@sveltejs/vite-plugin-svelte').then(plugin => plugin.svelte()));

packages/playwright-ct-svelte/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "@playwright/test": "1.33.0-next",
-    "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "vite": "^4.2.1"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "@sveltejs/vite-plugin-svelte": "^2.0.3"
   },
   "devDependencies": {
     "svelte": "^3.55.1"

packages/playwright-ct-vue/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('@playwright/test/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-vue/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-vue').then(plugin => plugin.default()));

packages/playwright-ct-vue/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@playwright/test": "1.33.0-next",
-    "vite": "^4.2.1"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "@vitejs/plugin-vue": "^4.1.0"
   },
   "bin": {
     "playwright": "./cli.js"

packages/playwright-ct-vue2/cli.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = require('@playwright/test/cli');
+module.exports = require('@playwright/experimental-ct-core/cli');

packages/playwright-ct-vue2/index.js

@@ -20,7 +20,7 @@ const path = require('path');
 
 const plugin = () => {
   // Only fetch upon request to avoid resolution in workers.
-  const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+  const { createPlugin } = require('@playwright/experimental-ct-core/lib/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
     () => import('@vitejs/plugin-vue2').then(plugin => plugin.default()));

packages/playwright-ct-vue2/package.json

@@ -26,9 +26,8 @@
     }
   },
   "dependencies": {
-    "@playwright/test": "1.33.0-next",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "vite": "^4.2.1"
+    "@playwright/experimental-ct-core": "1.33.0-next",
+    "@vitejs/plugin-vue2": "^2.2.0"
   },
   "devDependencies": {
     "vue": "^2.7.14"

packages/playwright-test/package.json

@@ -18,11 +18,14 @@
     "./cli": "./cli.js",
     "./package.json": "./package.json",
     "./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/plugins/vitePlugin": "./lib/plugins/vitePlugin.js",
+    "./lib/utilsBundle": "./lib/utilsBundle.js",
     "./reporter": "./reporter.js"
   },
   "bin": {

tests/playwright-test/playwright-test-fixtures.ts

@@ -67,6 +67,13 @@ export async function writeFiles(testInfo: TestInfo, files: Files, initial: bool
     };
   }
 
+  if (initial && !Object.keys(files).some(name => name.includes('tsconfig.json') || name.includes('jsconfig.json'))) {
+    files = {
+      ...files,
+      'tsconfig.json': `{}`,
+    };
+  }
+
   await Promise.all(Object.keys(files).map(async name => {
     const fullName = path.join(baseDir, name);
     await fs.promises.mkdir(path.dirname(fullName), { recursive: true });

tsconfig.json

@@ -7,8 +7,8 @@
     "paths": {
       /*
         The following two serve different purposes:
-         - @foo is for importing types only,
-         - foo/lib means require dependency
+         - @foo/* is for importing types only,
+         - .../lib/* means require dependency
       */
       "@html-reporter/*": ["./packages/html-reporter/src/*"],
       "@injected/*": ["./packages/playwright-core/src/server/injected/*"],
@@ -19,6 +19,7 @@
       "@trace/*": ["./packages/trace/src/*"],
       "@web/*": ["./packages/web/src/*"],
       "playwright-core/lib/*": ["./packages/playwright-core/src/*"],
+      "@playwright/test/lib/*": ["./packages/playwright-test/src/*"],
     },
     "esModuleInterop": true,
     "strict": true,

utils/workspace.js

@@ -173,6 +173,11 @@ const workspace = new Workspace(ROOT_PATH, [
     path: path.join(ROOT_PATH, 'packages', 'playwright-chromium'),
     files: LICENCE_FILES,
   }),
+  new PWPackage({
+    name: '@playwright/experimental-ct-core',
+    path: path.join(ROOT_PATH, 'packages', 'playwright-ct-core'),
+    files: ['LICENSE'],
+  }),
   new PWPackage({
     name: '@playwright/experimental-ct-react',
     path: path.join(ROOT_PATH, 'packages', 'playwright-ct-react'),