chore: parse-skip .tsx (#12143)

package-lock.json

@@ -17,6 +17,7 @@
         "@babel/preset-react": "^7.16.7",
         "@types/babel__code-frame": "^7.0.3",
         "@types/babel__core": "^7.1.18",
+        "@types/babel__helper-plugin-utils": "^7.10.0",
         "@types/debug": "^4.1.7",
         "@types/formidable": "^2.0.4",
         "@types/mime": "^2.0.3",
@@ -604,6 +605,7 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
       },
@@ -744,6 +746,7 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz",
       "integrity": "sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -1167,6 +1170,15 @@
         "@babel/types": "^7.0.0"
       }
     },
+    "node_modules/@types/babel__helper-plugin-utils": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__helper-plugin-utils/-/babel__helper-plugin-utils-7.10.0.tgz",
+      "integrity": "sha512-60YtHzhQ9HAkToHVV+TB4VLzBn9lrfgrsOjiJMtbv/c1jPdekBxaByd6DMsGBzROXWoIL6U3lEFvvbu69RkUoA==",
+      "dev": true,
+      "dependencies": {
+        "@types/babel__core": "*"
+      }
+    },
     "node_modules/@types/babel__template": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.0.tgz",
@@ -2133,6 +2145,17 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
@@ -2312,30 +2335,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/chokidar/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chokidar/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/chokidar/node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2348,27 +2347,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/chokidar/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/chokidar/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -2455,6 +2433,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
     "node_modules/colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -3691,64 +3675,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/fast-glob/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fast-glob/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fast-glob/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/fast-glob/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3848,6 +3774,17 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-babel-config": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.2.0.tgz",
@@ -3986,20 +3923,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -4550,6 +4473,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -4792,17 +4723,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-message-util/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/jest-message-util/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4834,17 +4754,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/jest-message-util/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/jest-message-util/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -4853,26 +4762,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jest-message-util/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/jest-message-util/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/jest-message-util/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4892,17 +4781,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jest-message-util/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/jest-regex-util": {
       "version": "27.0.6",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.0.6.tgz",
@@ -5255,6 +5133,18 @@
       "integrity": "sha512-+TZ5dUDPKPJaU/rscTzxyN8ZkX7eAVLAiQU/e+YINleXPv03SCmJShaMT1If1liTH8OcmWXZs0CmzCBRBLcMpA==",
       "dev": true
     },
+    "node_modules/micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dependencies": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
@@ -5267,21 +5157,21 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.50.0",
+      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "2.1.33",
+      "version": "2.1.34",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
       "dev": true,
       "dependencies": {
-        "mime-db": "1.50.0"
+        "mime-db": "1.51.0"
       },
       "engines": {
         "node": ">= 0.6"
@@ -6995,6 +6885,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -7242,12 +7143,6 @@
         }
       }
     },
-    "node_modules/webpack-cli/node_modules/colorette": {
-      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
-      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
-      "dev": true
-    },
     "node_modules/webpack-cli/node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -7599,6 +7494,7 @@
       "dependencies": {
         "@babel/code-frame": "7.16.7",
         "@babel/core": "7.16.12",
+        "@babel/helper-plugin-utils": "7.16.7",
         "@babel/plugin-proposal-class-properties": "7.16.7",
         "@babel/plugin-proposal-dynamic-import": "7.16.7",
         "@babel/plugin-proposal-export-namespace-from": "7.16.7",
@@ -7613,7 +7509,6 @@
         "@babel/plugin-syntax-object-rest-spread": "7.8.3",
         "@babel/plugin-syntax-optional-catch-binding": "7.8.3",
         "@babel/plugin-transform-modules-commonjs": "7.16.8",
-        "@babel/plugin-transform-react-jsx": "7.16.7",
         "@babel/preset-typescript": "7.16.7",
         "babel-plugin-module-resolver": "4.1.0",
         "colors": "1.4.0",
@@ -8052,6 +7947,7 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
       "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
       }
@@ -8144,6 +8040,7 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz",
       "integrity": "sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==",
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-module-imports": "^7.16.7",
@@ -8416,6 +8313,7 @@
       "requires": {
         "@babel/code-frame": "7.16.7",
         "@babel/core": "7.16.12",
+        "@babel/helper-plugin-utils": "7.16.7",
         "@babel/plugin-proposal-class-properties": "7.16.7",
         "@babel/plugin-proposal-dynamic-import": "7.16.7",
         "@babel/plugin-proposal-export-namespace-from": "7.16.7",
@@ -8430,7 +8328,6 @@
         "@babel/plugin-syntax-object-rest-spread": "7.8.3",
         "@babel/plugin-syntax-optional-catch-binding": "7.8.3",
         "@babel/plugin-transform-modules-commonjs": "7.16.8",
-        "@babel/plugin-transform-react-jsx": "7.16.7",
         "@babel/preset-typescript": "7.16.7",
         "babel-plugin-module-resolver": "4.1.0",
         "colors": "1.4.0",
@@ -8522,6 +8419,15 @@
         "@babel/types": "^7.0.0"
       }
     },
+    "@types/babel__helper-plugin-utils": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__helper-plugin-utils/-/babel__helper-plugin-utils-7.10.0.tgz",
+      "integrity": "sha512-60YtHzhQ9HAkToHVV+TB4VLzBn9lrfgrsOjiJMtbv/c1jPdekBxaByd6DMsGBzROXWoIL6U3lEFvvbu69RkUoA==",
+      "dev": true,
+      "requires": {
+        "@types/babel__core": "*"
+      }
+    },
     "@types/babel__template": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.0.tgz",
@@ -9322,6 +9228,14 @@
         "concat-map": "0.0.1"
       }
     },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
     "browserslist": {
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
@@ -9453,24 +9367,6 @@
           "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
           "dev": true
         },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
         "is-binary-path": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -9479,21 +9375,6 @@
           "requires": {
             "binary-extensions": "^2.0.0"
           }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
         }
       }
     },
@@ -9572,6 +9453,12 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
     "colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -10481,51 +10368,6 @@
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
         "micromatch": "^4.0.4"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
       }
     },
     "fast-json-stable-stringify": {
@@ -10606,6 +10448,14 @@
         }
       }
     },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
     "find-babel-config": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.2.0.tgz",
@@ -10715,13 +10565,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -11122,6 +10965,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -11296,14 +11144,6 @@
             "color-convert": "^2.0.1"
           }
         },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -11326,33 +11166,11 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
         "slash": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -11365,14 +11183,6 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "requires": {
-            "is-number": "^7.0.0"
-          }
         }
       }
     },
@@ -11661,24 +11471,33 @@
       "integrity": "sha512-+TZ5dUDPKPJaU/rscTzxyN8ZkX7eAVLAiQU/e+YINleXPv03SCmJShaMT1If1liTH8OcmWXZs0CmzCBRBLcMpA==",
       "dev": true
     },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      }
+    },
     "mime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="
     },
     "mime-db": {
-      "version": "1.50.0",
+      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.33",
+      "version": "2.1.34",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
       "dev": true,
       "requires": {
-        "mime-db": "1.50.0"
+        "mime-db": "1.51.0"
       }
     },
     "mimic-fn": {
@@ -12975,6 +12794,14 @@
       "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
       "dev": true
     },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -13172,12 +12999,6 @@
         "webpack-merge": "^5.7.3"
       },
       "dependencies": {
-        "colorette": {
-          "version": "2.0.16",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
-          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
-          "dev": true
-        },
         "commander": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",

package.json

@@ -18,7 +18,7 @@
     "wtest": "playwright test --config=tests/config/default.playwright.config.ts --project=webkit",
     "atest": "playwright test --config=tests/config/android.config.ts",
     "etest": "playwright test --config=tests/config/electron.config.ts",
-    "htest": "cross-env PW_COMPONENT_TESTING=1 playwright test --config=packages/html-reporter",
+    "htest": "playwright test --config=packages/html-reporter",
     "ttest": "node ./tests/playwright-test/stable-test-runner/node_modules/@playwright/test/cli test --config=tests/playwright-test/playwright-test.config.ts",
     "vtest": "cross-env PLAYWRIGHT_DOCKER=1 node ./tests/playwright-test/stable-test-runner/node_modules/@playwright/test/cli test --config=tests/playwright-test/playwright-test.config.ts",
     "test": "playwright test --config=tests/config/default.playwright.config.ts",
@@ -47,6 +47,7 @@
     "@babel/preset-react": "^7.16.7",
     "@types/babel__code-frame": "^7.0.3",
     "@types/babel__core": "^7.1.18",
+    "@types/babel__helper-plugin-utils": "^7.10.0",
     "@types/debug": "^4.1.7",
     "@types/formidable": "^2.0.4",
     "@types/mime": "^2.0.3",

packages/html-reporter/src/chip.spec.tsx

@@ -21,32 +21,29 @@ import { AutoChip, Chip } from './chip';
 test.use({ webpack: require.resolve('../webpack.config.js') });
 test.use({ viewport: { width: 500, height: 500 } });
 
-test('expand collapse', async ({ render, capture }) => {
+test('expand collapse', async ({ mount }) => {
-  const component = await render(<AutoChip header='title'>
+  const component = await mount(<AutoChip header='title'>
     Chip body
   </AutoChip>);
   await expect(component.locator('text=Chip body')).toBeVisible();
-  await capture(component, 'expanded');
   await component.locator('text=Title').click();
   await expect(component.locator('text=Chip body')).not.toBeVisible();
-  await capture(component, 'collapsed');
   await component.locator('text=Title').click();
   await expect(component.locator('text=Chip body')).toBeVisible();
 });
 
-test('render long title', async ({ render, capture }) => {
+test('render long title', async ({ mount }) => {
   const title = 'Extremely long title. '.repeat(10);
-  const component = await render(<AutoChip header={title}>
+  const component = await mount(<AutoChip header={title}>
     Chip body
   </AutoChip>);
   await expect(component).toContainText('Extremely long title.');
   await expect(component.locator('text=Extremely long title.')).toHaveAttribute('title', title);
-  await capture(component, 'long-title');
 });
 
-test('setExpanded is called', async ({ render, capture }) => {
+test('setExpanded is called', async ({ mount }) => {
   const expandedValues: boolean[] = [];
-  const component = await render(<Chip header='Title'
+  const component = await mount(<Chip header='Title'
     setExpanded={(expanded: boolean) => expandedValues.push(expanded)}>
   </Chip>);
 

packages/html-reporter/src/headerView.spec.tsx

@@ -21,8 +21,8 @@ import { HeaderView } from './headerView';
 test.use({ webpack: require.resolve('../webpack.config.js') });
 test.use({ viewport: { width: 720, height: 200 } });
 
-test('should render counters', async ({ render, capture }) => {
+test('should render counters', async ({ mount }) => {
-  const component = await render(<HeaderView stats={{
+  const component = await mount(<HeaderView stats={{
     total: 100,
     expected: 42,
     unexpected: 31,
@@ -36,12 +36,11 @@ test('should render counters', async ({ render, capture }) => {
   await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
   await expect(component.locator('a', { hasText: 'Flaky' }).locator('.counter')).toHaveText('17');
   await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
-  await capture(component, 'counters');
 });
 
-test('should toggle filters', async ({ page, render: render }) => {
+test('should toggle filters', async ({ page, mount: mount }) => {
   const filters: string[] = [];
-  const component = await render(<HeaderView
+  const component = await mount(<HeaderView
     stats={{
       total: 100,
       expected: 42,

packages/html-reporter/src/testCaseView.spec.tsx

@@ -62,9 +62,8 @@ const testCase: TestCase = {
   results: [result]
 };
 
-test('should render test case', async ({ render, capture }) => {
+test('should render test case', async ({ mount }) => {
-  const component = await render(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase}></TestCaseView>);
+  const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase}></TestCaseView>);
-  await capture(component, 'testcase');
   await expect(component.locator('text=Annotation text').first()).toBeVisible();
   await component.locator('text=Annotations').click();
   await expect(component.locator('text=Annotation text')).not.toBeVisible();
@@ -74,5 +73,4 @@ test('should render test case', async ({ render, capture }) => {
   await expect(component.locator('text=Inner step')).toBeVisible();
   await expect(component.locator('text=test.spec.ts:42')).toBeVisible();
   await expect(component.locator('text=My test')).toBeVisible();
-  await capture(component, 'testcase-expanded');
 });

packages/html-reporter/test/component.js

@@ -57,15 +57,21 @@ const Component = ({ style, children }) => {
 
 const registry = new Map();
 
-export const registerComponent = (name, component) => {
+export const registerComponent = (name, componentFunc) => {
-  registry.set(name, component);
+  registry.set(name, componentFunc);
 };
 
-function render(name, params) {
+function render(component) {
-  const component = registry.get(name);
+  const componentFunc = registry.get(component.type) || component.type;
-  ReactDOM.render(
+  return React.createElement(componentFunc, component.props, ...component.children.map(child => {
-      React.createElement(Component, null, React.createElement(component, params || null)),
+    if (typeof child === 'string')
-      document.getElementById('root'));
+      return child;
+    return render(child);
+  }));
 }
 
-window.__playwright_render = render;
+window.__playwright_render = component => {
+  ReactDOM.render(
+    React.createElement(Component, null, render(component)),
+    document.getElementById('root'));
+};

packages/html-reporter/test/componentTest.ts

@@ -17,32 +17,37 @@
 import * as path from 'path';
 import { test as baseTest, Locator } from '@playwright/test';
 
+type Component = {
+  type: string;
+  props: Object;
+  children: Object[];
+};
+
 declare global {
   interface Window {
-    __playwright_render: (component: string, props: any) => void;
+    __playwright_render: (component: Component) => void;
   }
 }
 
 type TestFixtures = {
-  render: (component: { type: string, props: Object }) => Promise<Locator>;
+  mount: (component: any) => Promise<Locator>;
-  capture: (locator: Locator, name: string) => Promise<void>;
   webpack: string;
 };
 
 export const test = baseTest.extend<TestFixtures>({
   webpack: '',
-  render: async ({ page, webpack }, use) => {
+  mount: async ({ page, webpack }, use) => {
     const webpackConfig = require(webpack);
     const outputPath = webpackConfig.output.path;
     const filename = webpackConfig.output.filename.replace('[name]', 'playwright');
-    await use(async (component: { type: string, props: Object }) => {
+    await use(async (component: Component) => {
       await page.route('http://component/index.html', route => {
         route.fulfill({
           body: `<html>
-            <meta name='color-scheme' content='dark light'>
+              <meta name='color-scheme' content='dark light'>
-            <style>html, body { padding: 0; margin: 0; background: #aaa; }</style>
+              <style>html, body { padding: 0; margin: 0; background: #aaa; }</style>
-            <div id='root' style='width: 100%; height: 100%;'></div>
+              <div id='root' style='width: 100%; height: 100%;'></div>
-          </html>`,
+            </html>`,
           contentType: 'text/html'
         });
       });
@@ -64,23 +69,11 @@ export const test = baseTest.extend<TestFixtures>({
           if (typeof value === 'string' && (value as string).startsWith('__pw_func_'))
             (props as any)[key] = (window as any)[value];
         }
-        window.__playwright_render(v.type, props);
+        window.__playwright_render({ ...v, props });
-      }, { type: component.type, props });
+      }, { ...component, props });
       return page.locator('#pw-root');
     });
   },
-
-  capture: async ({}, use, testInfo) => {
-    await use(async (locator: Locator, name: string) => {
-      const screenshotPath = path.join(__dirname, '..', 'screenshots', sanitizeForFilePath(path.basename(testInfo.file) + '-' + testInfo.title + '-' + name) + '.png');
-      testInfo.attachments.push({ name, path: screenshotPath, contentType: 'image/png' });
-      await locator.screenshot({ path: screenshotPath });
-    });
-  }
 });
 
-export function sanitizeForFilePath(s: string) {
-  return s.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, '-');
-}
-
 export { expect } from '@playwright/test';

packages/playwright-test/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@babel/code-frame": "7.16.7",
     "@babel/core": "7.16.12",
+    "@babel/helper-plugin-utils": "7.16.7",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-dynamic-import": "7.16.7",
     "@babel/plugin-proposal-export-namespace-from": "7.16.7",
@@ -43,7 +44,6 @@
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
     "@babel/plugin-syntax-optional-catch-binding": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.16.8",
-    "@babel/plugin-transform-react-jsx": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "babel-plugin-module-resolver": "4.1.0",
     "colors": "1.4.0",

packages/playwright-test/src/loader.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { installTransform } from './transform';
+import { installTransform, setCurrentlyLoadingTestFile } from './transform';
 import type { FullConfig, Config, FullProject, Project, ReporterDescription, PreserveOutput } from './types';
 import { mergeObjects, errorWithFile } from './util';
 import { setCurrentlyLoadingFileSuite } from './globals';
@@ -121,6 +121,7 @@ export class Loader {
     suite._requireFile = file;
     suite.location = { file, line: 0, column: 0 };
 
+    setCurrentlyLoadingTestFile(file);
     setCurrentlyLoadingFileSuite(suite);
     try {
       await this._requireOrImport(file);
@@ -130,6 +131,7 @@ export class Loader {
         throw e;
       suite._loadError = serializeError(e);
     } finally {
+      setCurrentlyLoadingTestFile(null);
       setCurrentlyLoadingFileSuite(undefined);
     }
 

packages/playwright-test/src/runner.ts

@@ -221,7 +221,7 @@ export class Runner {
       const allFiles = await collectFiles(project.config.testDir);
       const testMatch = createFileMatcher(project.config.testMatch);
       const testIgnore = createFileMatcher(project.config.testIgnore);
-      const extensions = ['.js', '.ts', '.mjs', ...(process.env.PW_COMPONENT_TESTING ? ['.tsx', '.jsx'] : [])];
+      const extensions = ['.js', '.ts', '.mjs', '.tsx', '.jsx'];
       const testFileExtension = (file: string) => extensions.includes(path.extname(file));
       const testFiles = allFiles.filter(file => !testIgnore(file) && testMatch(file) && testFileFilter(file) && testFileExtension(file));
       files.set(project, testFiles);

packages/playwright-test/src/transform.ts

@@ -182,9 +182,7 @@ export function transformHook(code: string, filename: string, isModule = false):
     }
   }
 
-  if (process.env.PW_COMPONENT_TESTING)
+  plugins.unshift([require.resolve('./tsxTransform')]);
-    plugins.unshift([require.resolve('@babel/plugin-transform-react-jsx')]);
-
 
   if (hasPreprocessor)
     plugins.push([scriptPreprocessor]);
@@ -251,15 +249,17 @@ export function wrapFunctionWithLocation<A extends any[], R>(func: (location: Lo
   };
 }
 
-// Experimental components support for internal testing.
+
+let currentlyLoadingTestFile: string | null = null;
+
+export function setCurrentlyLoadingTestFile(file: string | null) {
+  currentlyLoadingTestFile = file;
+}
+
 function isComponentImport(filename: string): boolean {
-  if (!process.env.PW_COMPONENT_TESTING)
+  if (filename === currentlyLoadingTestFile)
     return false;
-  if (filename.endsWith('.tsx') && !filename.endsWith('spec.tsx') && !filename.endsWith('test.tsx'))
+  return filename.endsWith('.tsx') || filename.endsWith('.jsx');
-    return true;
-  if (filename.endsWith('.jsx') && !filename.endsWith('spec.jsx') && !filename.endsWith('test.jsx'))
-    return true;
-  return false;
 }
 
 function componentStub(): string {

packages/playwright-test/src/tsxTransform.ts

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+
+import { types as t } from '@babel/core';
+import { declare } from '@babel/helper-plugin-utils';
+
+export default declare(api => {
+  api.assertVersion(7);
+
+  return {
+    name: 'playwright-debug-transform',
+    visitor: {
+      JSXElement(path) {
+        const jsxElement = path.node;
+        const jsxName = jsxElement.openingElement.name;
+        if (!t.isJSXIdentifier(jsxName))
+          return;
+
+        const name = jsxName.name;
+        const props: (t.ObjectProperty | t.SpreadElement)[] = [];
+
+        for (const jsxAttribute of jsxElement.openingElement.attributes) {
+          if (t.isJSXAttribute(jsxAttribute)) {
+            if (!t.isJSXIdentifier(jsxAttribute.name))
+              continue;
+            const attrName = jsxAttribute.name.name;
+            if (t.isStringLiteral(jsxAttribute.value))
+              props.push(t.objectProperty(t.stringLiteral(attrName), jsxAttribute.value));
+            else if (t.isJSXExpressionContainer(jsxAttribute.value) && t.isExpression(jsxAttribute.value.expression))
+              props.push(t.objectProperty(t.stringLiteral(attrName), jsxAttribute.value.expression));
+            else
+              props.push(t.objectProperty(t.stringLiteral(attrName), t.nullLiteral()));
+          } else if (t.isJSXSpreadAttribute(jsxAttribute)) {
+            props.push(t.spreadElement(jsxAttribute.argument));
+          }
+        }
+
+        const children: (t.Expression | t.SpreadElement)[] = [];
+        for (const child of jsxElement.children) {
+          if (t.isJSXText(child))
+            children.push(t.stringLiteral(child.value));
+          else if (t.isJSXElement(child))
+            children.push(child);
+          else if (t.isJSXExpressionContainer(child) && !t.isJSXEmptyExpression(child.expression))
+            children.push(child.expression);
+          else if (t.isJSXSpreadChild(child))
+            children.push(t.spreadElement(child.expression));
+
+        }
+
+        path.replaceWith(t.objectExpression([
+          t.objectProperty(t.identifier('type'), t.stringLiteral(name)),
+          t.objectProperty(t.identifier('props'), t.objectExpression(props)),
+          t.objectProperty(t.identifier('children'), t.arrayExpression(children)),
+        ]));
+      }
+    }
+  };
+});