chore: unplugin ct generator (#23)

Author: pavelfeldman

assets/playwright.config.js

@@ -1,8 +1,5 @@
 // @ts-check
-const { devices } = require('@playwright/test');
-//--begin-ct
-const ct = require('{{ctPackageName}}');
-//--end-ct
+const { devices } = require('{{testRunnerImport}}');
 
 /**
  * Read environment variables from file.
@@ -34,10 +31,6 @@ const config = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  //--begin-ct
-  /* Enable component testing */
-  plugins: [ ct() ],
-  //--end-ct
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -47,6 +40,11 @@ const config = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    //--begin-ct
+
+    /* Port to use for Playwright component endpoint. */
+    vitePort: 3100,
+    //--end-ct
   },
 
   /* Configure projects for major browsers */

assets/playwright.config.ts

@@ -1,8 +1,5 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
-//--begin-ct
-import ct from '{{ctPackageName}}';
-//--end-ct
+import type { PlaywrightTestConfig } from '{{testRunnerImport}}';
+import { devices } from '{{testRunnerImport}}';
 
 /**
  * Read environment variables from file.
@@ -32,10 +29,6 @@ const config: PlaywrightTestConfig = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  //--begin-ct
-  /* Enable component testing */
-  plugins: [ ct() ],
-  //--end-ct
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -45,6 +38,11 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    //--begin-ct
+
+    /* Port to use for Playwright component endpoint. */
+    vitePort: 3100,
+    //--end-ct
   },
 
   /* Configure projects for major browsers */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-playwright",
-  "version": "1.17.112",
+  "version": "1.17.113",
   "description": "Getting started with writing end-to-end tests with Playwright.",
   "repository": "github:Microsoft/playwright",
   "homepage": "https://playwright.dev",

src/generator.ts

@@ -130,15 +130,15 @@ export class Generator {
     let ctPackageName = '';
     if (answers.framework) {
       ctPackageName = `@playwright/experimental-ct-${answers.framework}`;
-      sections.set('ct', 'show');
       installExamples = false;
+      sections.set('ct', 'show');
     } else {
       sections.set('ct', 'hide');
     }
 
     files.set(`playwright.config.${fileExtension}`, executeTemplate(this._readAsset(`playwright.config.${fileExtension}`), {
       testDir: answers.testDir || '',
-      ctPackageName,
+      testRunnerImport: ctPackageName || '@playwright/test',
     }, sections));
 
     if (answers.installGitHubActions) {
@@ -181,11 +181,6 @@ export class Generator {
 
       const jsTemplate = this._readAsset(path.join('playwright', 'index.js'));
       files.set(`playwright/index.${extension}`, jsTemplate);
-
-      if (answers.language === 'TypeScript') {
-        files.set(`playwright/types.d.ts`, `import '${ctPackageName}';\n`);
-        this._patchTsconfigJSON();
-      }
     }
 
     const browsersSuffix = this.options.browser ? ' ' + this.options.browser.join(' ') : '';
@@ -226,20 +221,6 @@ export class Generator {
     await createFiles(this.rootDir, files, true);
   }
 
-  private async _patchTsconfigJSON() {
-    const tsconfigFile = path.join(this.rootDir, 'tsconfig.json');
-    const files = new Map<string, string>();
-    if (!fs.existsSync(tsconfigFile)) {
-      files.set(`tsconfig.json`, this._readAsset(path.join('tsconfig.json')));
-    } else {
-      const tsconfigJSON = fs.readFileSync(path.join(this.rootDir, 'tsconfig.json'), 'utf-8');
-      const newJSON = tsconfigJSON.replace(/("include"[\s\S]*:[\s\S]\[[\s\S]*"src")/m, '$1, "playwright/types.d.ts"');
-      if (!tsconfigJSON.includes('playwright') && tsconfigJSON !== newJSON)
-        files.set('tsconfig.json', newJSON);
-    }
-    await createFiles(this.rootDir, files, true);
-  }
-
   private _printEpilogue(answers: PromptOptions) {
     console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`));
     const pathToNavigate = path.relative(process.cwd(), this.rootDir);

src/utils.ts

@@ -65,7 +65,7 @@ export function determinePackageManager(rootDir: string): 'yarn' | 'npm' {
 
 export function executeTemplate(input: string, args: Record<string, string>, sections: Map<string, 'show' | 'hide' | 'comment'>): string {
   for (const key in args)
-    input = input.replace(`{{${key}}}`, args[key]);
+    input = input.replace(new RegExp('{{' + key + '}}', 'g'), args[key]);
   const result: string[] = [];
   let mode: 'show' | 'hide' | 'comment' = 'show';
   let indent = '';