@playwright/experimental-ct-core 1.41.0 → 1.41.1

package/lib/generated/indexSource.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.source = void 0;
+const source = exports.source = "\"use strict\";\n\n// packages/playwright-ct-core/src/injected/importRegistry.ts\nfunction isImportRef(value) {\n  return typeof value === \"object\" && value && value.__pw_type === \"importRef\";\n}\nvar ImportRegistry = class {\n  constructor() {\n    this._registry = /* @__PURE__ */ new Map();\n  }\n  initialize(components) {\n    for (const [name, value] of Object.entries(components))\n      this._registry.set(name, value);\n  }\n  async resolveImportRef(importRef) {\n    const importFunction = this._registry.get(importRef.id);\n    if (!importFunction)\n      throw new Error(`Unregistered component: ${importRef.id}. Following components are registered: ${[...this._registry.keys()]}`);\n    let importedObject = await importFunction();\n    if (!importedObject)\n      throw new Error(`Could not resolve component: ${importRef.id}.`);\n    if (importRef.property) {\n      importedObject = importedObject[importRef.property];\n      if (!importedObject)\n        throw new Error(`Could not instantiate component: ${importRef.id}.${importRef.property}.`);\n    }\n    return importedObject;\n  }\n};\n\n// packages/playwright-ct-core/src/injected/serializers.ts\nfunction isFunctionRef(value) {\n  return value && typeof value === \"object\" && value.__pw_type === \"function\";\n}\nasync function unwrapObject(value) {\n  return transformObjectAsync(value, async (v) => {\n    if (isFunctionRef(v)) {\n      const result = (...args) => {\n        window.__ctDispatchFunction(v.ordinal, args);\n      };\n      return { result };\n    }\n    if (isImportRef(v))\n      return { result: await window.__pwRegistry.resolveImportRef(v) };\n  });\n}\nfunction transformObject(value, mapping) {\n  const result = mapping(value);\n  if (result)\n    return result.result;\n  if (value === null || typeof value !== \"object\")\n    return value;\n  if (value instanceof Date || value instanceof RegExp || value instanceof URL)\n    return value;\n  if (Array.isArray(value)) {\n    const result3 = [];\n    for (const item of value)\n      result3.push(transformObject(item, mapping));\n    return result3;\n  }\n  const result2 = {};\n  for (const [key, prop] of Object.entries(value))\n    result2[key] = transformObject(prop, mapping);\n  return result2;\n}\nasync function transformObjectAsync(value, mapping) {\n  const result = await mapping(value);\n  if (result)\n    return result.result;\n  if (value === null || typeof value !== \"object\")\n    return value;\n  if (value instanceof Date || value instanceof RegExp || value instanceof URL)\n    return value;\n  if (Array.isArray(value)) {\n    const result3 = [];\n    for (const item of value)\n      result3.push(await transformObjectAsync(item, mapping));\n    return result3;\n  }\n  const result2 = {};\n  for (const [key, prop] of Object.entries(value))\n    result2[key] = await transformObjectAsync(prop, mapping);\n  return result2;\n}\n\n// packages/playwright-ct-core/src/injected/index.ts\nwindow.__pwRegistry = new ImportRegistry();\nwindow.__pwUnwrapObject = unwrapObject;\nwindow.__pwTransformObject = transformObject;\n";

package/lib/injected/importRegistry.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImportRegistry = void 0;
+exports.isImportRef = isImportRef;
+/**
+ * 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.
+ */
+
+function isImportRef(value) {
+  return typeof value === 'object' && value && value.__pw_type === 'importRef';
+}
+class ImportRegistry {
+  constructor() {
+    this._registry = new Map();
+  }
+  initialize(components) {
+    for (const [name, value] of Object.entries(components)) this._registry.set(name, value);
+  }
+  async resolveImportRef(importRef) {
+    const importFunction = this._registry.get(importRef.id);
+    if (!importFunction) throw new Error(`Unregistered component: ${importRef.id}. Following components are registered: ${[...this._registry.keys()]}`);
+    let importedObject = await importFunction();
+    if (!importedObject) throw new Error(`Could not resolve component: ${importRef.id}.`);
+    if (importRef.property) {
+      importedObject = importedObject[importRef.property];
+      if (!importedObject) throw new Error(`Could not instantiate component: ${importRef.id}.${importRef.property}.`);
+    }
+    return importedObject;
+  }
+}
+exports.ImportRegistry = ImportRegistry;

package/lib/injected/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _importRegistry = require("./importRegistry");
+var _serializers = require("./serializers");
+/**
+ * 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.
+ */
+
+window.__pwRegistry = new _importRegistry.ImportRegistry();
+window.__pwUnwrapObject = _serializers.unwrapObject;
+window.__pwTransformObject = _serializers.transformObject;

package/lib/injected/packed/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+// packages/playwright-ct-core/src/injected/importRegistry.ts
+function isImportRef(value) {
+  return typeof value === "object" && value && value.__pw_type === "importRef";
+}
+var ImportRegistry = class {
+  constructor() {
+    this._registry = /* @__PURE__ */ new Map();
+  }
+  initialize(components) {
+    for (const [name, value] of Object.entries(components))
+      this._registry.set(name, value);
+  }
+  async resolveImportRef(importRef) {
+    const importFunction = this._registry.get(importRef.id);
+    if (!importFunction)
+      throw new Error(`Unregistered component: ${importRef.id}. Following components are registered: ${[...this._registry.keys()]}`);
+    let importedObject = await importFunction();
+    if (!importedObject)
+      throw new Error(`Could not resolve component: ${importRef.id}.`);
+    if (importRef.property) {
+      importedObject = importedObject[importRef.property];
+      if (!importedObject)
+        throw new Error(`Could not instantiate component: ${importRef.id}.${importRef.property}.`);
+    }
+    return importedObject;
+  }
+};
+
+// packages/playwright-ct-core/src/injected/serializers.ts
+function isFunctionRef(value) {
+  return value && typeof value === "object" && value.__pw_type === "function";
+}
+async function unwrapObject(value) {
+  return transformObjectAsync(value, async (v) => {
+    if (isFunctionRef(v)) {
+      const result = (...args) => {
+        window.__ctDispatchFunction(v.ordinal, args);
+      };
+      return { result };
+    }
+    if (isImportRef(v))
+      return { result: await window.__pwRegistry.resolveImportRef(v) };
+  });
+}
+function transformObject(value, mapping) {
+  const result = mapping(value);
+  if (result)
+    return result.result;
+  if (value === null || typeof value !== "object")
+    return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL)
+    return value;
+  if (Array.isArray(value)) {
+    const result3 = [];
+    for (const item of value)
+      result3.push(transformObject(item, mapping));
+    return result3;
+  }
+  const result2 = {};
+  for (const [key, prop] of Object.entries(value))
+    result2[key] = transformObject(prop, mapping);
+  return result2;
+}
+async function transformObjectAsync(value, mapping) {
+  const result = await mapping(value);
+  if (result)
+    return result.result;
+  if (value === null || typeof value !== "object")
+    return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL)
+    return value;
+  if (Array.isArray(value)) {
+    const result3 = [];
+    for (const item of value)
+      result3.push(await transformObjectAsync(item, mapping));
+    return result3;
+  }
+  const result2 = {};
+  for (const [key, prop] of Object.entries(value))
+    result2[key] = await transformObjectAsync(prop, mapping);
+  return result2;
+}
+
+// packages/playwright-ct-core/src/injected/index.ts
+window.__pwRegistry = new ImportRegistry();
+window.__pwUnwrapObject = unwrapObject;
+window.__pwTransformObject = transformObject;

package/lib/injected/serializers.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformObject = transformObject;
+exports.transformObjectAsync = transformObjectAsync;
+exports.unwrapObject = unwrapObject;
+exports.wrapObject = wrapObject;
+var _importRegistry = require("./importRegistry");
+/**
+ * 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.
+ */
+
+function isFunctionRef(value) {
+  return value && typeof value === 'object' && value.__pw_type === 'function';
+}
+function wrapObject(value, callbacks) {
+  return transformObject(value, v => {
+    if (typeof v === 'function') {
+      const ordinal = callbacks.length;
+      callbacks.push(v);
+      const result = {
+        __pw_type: 'function',
+        ordinal
+      };
+      return {
+        result
+      };
+    }
+  });
+}
+async function unwrapObject(value) {
+  return transformObjectAsync(value, async v => {
+    if (isFunctionRef(v)) {
+      const result = (...args) => {
+        window.__ctDispatchFunction(v.ordinal, args);
+      };
+      return {
+        result
+      };
+    }
+    if ((0, _importRegistry.isImportRef)(v)) return {
+      result: await window.__pwRegistry.resolveImportRef(v)
+    };
+  });
+}
+function transformObject(value, mapping) {
+  const result = mapping(value);
+  if (result) return result.result;
+  if (value === null || typeof value !== 'object') return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL) return value;
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value) result.push(transformObject(item, mapping));
+    return result;
+  }
+  const result2 = {};
+  for (const [key, prop] of Object.entries(value)) result2[key] = transformObject(prop, mapping);
+  return result2;
+}
+async function transformObjectAsync(value, mapping) {
+  const result = await mapping(value);
+  if (result) return result.result;
+  if (value === null || typeof value !== 'object') return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL) return value;
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value) result.push(await transformObjectAsync(item, mapping));
+    return result;
+  }
+  const result2 = {};
+  for (const [key, prop] of Object.entries(value)) result2[key] = await transformObjectAsync(prop, mapping);
+  return result2;
+}

package/lib/mount.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fixtures = void 0;
+var _serializers = require("./injected/serializers");
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -35,7 +36,7 @@ const fixtures = exports.fixtures = {
   }, use, info) => {
     if (!info._configInternal.defineConfigWasUsed) throw new Error('Component testing requires the use of the defineConfig() in your playwright-ct.config.{ts,js}: https://aka.ms/playwright/ct-define-config');
     await page._wrapApiCall(async () => {
-      await page.exposeFunction('__ct_dispatch', (ordinal, args) => {
+      await page.exposeFunction('__ctDispatchFunction', (ordinal, args) => {
         boundCallbacksForMount[ordinal](...args);
       });
       await page.goto(process.env.PLAYWRIGHT_TEST_BASE_URL);
@@ -45,9 +46,9 @@ const fixtures = exports.fixtures = {
   mount: async ({
     page
   }, use) => {
-    await use(async (component, options) => {
+    await use(async (componentRef, options) => {
       const selector = await page._wrapApiCall(async () => {
-        return await innerMount(page, component, options);
+        return await innerMount(page, componentRef, options);
       }, true);
       const locator = page.locator(selector);
       return Object.assign(locator, {
@@ -58,45 +59,31 @@ const fixtures = exports.fixtures = {
           });
         },
         update: async options => {
-          if (isJsxApi(options)) return await innerUpdate(page, options);
-          await innerUpdate(page, component, options);
+          if (isJsxComponent(options)) return await innerUpdate(page, options);
+          await innerUpdate(page, componentRef, options);
         }
       });
     });
     boundCallbacksForMount = [];
   }
 };
-function isJsxApi(options) {
-  return (options === null || options === void 0 ? void 0 : options.kind) === 'jsx';
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }
-async function innerUpdate(page, jsxOrType, options = {}) {
-  const component = createComponent(jsxOrType, options);
-  wrapFunctions(component, page, boundCallbacksForMount);
+async function innerUpdate(page, componentRef, options = {}) {
+  const component = (0, _serializers.wrapObject)(createComponent(componentRef, options), boundCallbacksForMount);
   await page.evaluate(async ({
     component
   }) => {
-    const unwrapFunctions = object => {
-      for (const [key, value] of Object.entries(object)) {
-        if (typeof value === 'string' && value.startsWith('__pw_func_')) {
-          const ordinal = +value.substring('__pw_func_'.length);
-          object[key] = (...args) => {
-            window['__ct_dispatch'](ordinal, args);
-          };
-        } else if (typeof value === 'object' && value) {
-          unwrapFunctions(value);
-        }
-      }
-    };
-    unwrapFunctions(component);
+    component = await window.__pwUnwrapObject(component);
     const rootElement = document.getElementById('root');
     return await window.playwrightUpdate(rootElement, component);
   }, {
     component
   });
 }
-async function innerMount(page, jsxOrType, options = {}) {
-  const component = createComponent(jsxOrType, options);
-  wrapFunctions(component, page, boundCallbacksForMount);
+async function innerMount(page, componentRef, options = {}) {
+  const component = (0, _serializers.wrapObject)(createComponent(componentRef, options), boundCallbacksForMount);
 
   // WebKit does not wait for deferred scripts.
   await page.waitForFunction(() => !!window.playwrightMount);
@@ -104,19 +91,7 @@ async function innerMount(page, jsxOrType, options = {}) {
     component,
     hooksConfig
   }) => {
-    const unwrapFunctions = object => {
-      for (const [key, value] of Object.entries(object)) {
-        if (typeof value === 'string' && value.startsWith('__pw_func_')) {
-          const ordinal = +value.substring('__pw_func_'.length);
-          object[key] = (...args) => {
-            window['__ct_dispatch'](ordinal, args);
-          };
-        } else if (typeof value === 'object' && value) {
-          unwrapFunctions(value);
-        }
-      }
-    };
-    unwrapFunctions(component);
+    component = await window.__pwUnwrapObject(component);
     let rootElement = document.getElementById('root');
     if (!rootElement) {
       rootElement = document.createElement('div');
@@ -131,24 +106,11 @@ async function innerMount(page, jsxOrType, options = {}) {
   });
   return selector;
 }
-function createComponent(jsxOrType, options = {}) {
-  if (typeof jsxOrType !== 'string') return jsxOrType;
+function createComponent(component, options = {}) {
+  if (component.__pw_type === 'jsx') return component;
   return {
-    __pw_component_marker: true,
-    kind: 'object',
-    type: jsxOrType,
-    options
+    __pw_type: 'object-component',
+    type: component,
+    ...options
   };
-}
-function wrapFunctions(object, page, callbacks) {
-  for (const [key, value] of Object.entries(object)) {
-    const type = typeof value;
-    if (type === 'function') {
-      const functionName = '__pw_func_' + callbacks.length;
-      callbacks.push(value);
-      object[key] = functionName;
-    } else if (type === 'object' && value) {
-      wrapFunctions(value, page, callbacks);
-    }
-  }
 }

package/lib/tsxTransform.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.collectComponentUsages = collectComponentUsages;
-exports.componentInfo = componentInfo;
 exports.default = void 0;
+exports.importInfo = importInfo;
 var _path = _interopRequireDefault(require("path"));
 var _babelBundle = require("playwright/lib/transform/babelBundle");
 var _util = require("playwright/lib/util");
+var _transform = require("playwright/lib/transform/transform");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Microsoft Corporation.
@@ -27,160 +27,119 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 
 const t = _babelBundle.types;
-const fullNames = new Map();
-let componentNames;
-let componentIdentifiers;
+let jsxComponentNames;
+let importInfos;
 var _default = exports.default = (0, _babelBundle.declare)(api => {
   api.assertVersion(7);
   const result = {
     name: 'playwright-debug-transform',
     visitor: {
-      Program(path) {
-        fullNames.clear();
-        const result = collectComponentUsages(path.node);
-        componentNames = result.names;
-        componentIdentifiers = result.identifiers;
+      Program: {
+        enter(path) {
+          jsxComponentNames = collectJsxComponentUsages(path.node);
+          importInfos = new Map();
+        },
+        exit(path) {
+          let firstDeclaration;
+          let lastImportDeclaration;
+          path.get('body').forEach(p => {
+            if (p.isImportDeclaration()) lastImportDeclaration = p;else if (!firstDeclaration) firstDeclaration = p;
+          });
+          const insertionPath = lastImportDeclaration || firstDeclaration;
+          if (!insertionPath) return;
+          for (const [localName, componentImport] of [...importInfos.entries()].reverse()) {
+            insertionPath.insertAfter(t.variableDeclaration('const', [t.variableDeclarator(t.identifier(localName), t.objectExpression([t.objectProperty(t.identifier('__pw_type'), t.stringLiteral('importRef')), t.objectProperty(t.identifier('id'), t.stringLiteral(componentImport.id))]))]));
+          }
+          (0, _transform.setTransformData)('playwright-ct-core', [...importInfos.values()]);
+        }
       },
       ImportDeclaration(p) {
         const importNode = p.node;
         if (!t.isStringLiteral(importNode.source)) return;
-        let components = 0;
+        const ext = _path.default.extname(importNode.source.value);
+
+        // Convert all non-JS imports into refs.
+        if (!allJsExtensions.has(ext)) {
+          for (const specifier of importNode.specifiers) {
+            if (t.isImportNamespaceSpecifier(specifier)) continue;
+            const {
+              localName,
+              info
+            } = importInfo(importNode, specifier, this.filename);
+            importInfos.set(localName, info);
+          }
+          p.skip();
+          p.remove();
+          return;
+        }
+
+        // Convert JS imports that are used as components in JSX expressions into refs.
+        let importCount = 0;
         for (const specifier of importNode.specifiers) {
-          const specifierName = specifier.local.name;
-          const componentName = componentNames.has(specifierName) ? specifierName : [...componentNames].find(c => c.startsWith(specifierName + '.'));
-          if (!componentName) continue;
           if (t.isImportNamespaceSpecifier(specifier)) continue;
           const {
-            fullName
-          } = componentInfo(specifier, importNode.source.value, this.filename, componentName);
-          fullNames.set(componentName, fullName);
-          ++components;
+            localName,
+            info
+          } = importInfo(importNode, specifier, this.filename);
+          if (jsxComponentNames.has(localName)) {
+            importInfos.set(localName, info);
+            ++importCount;
+          }
         }
 
-        // All the imports were components => delete.
-        if (components && components === importNode.specifiers.length) {
+        // All the imports were from JSX => delete.
+        if (importCount && importCount === importNode.specifiers.length) {
           p.skip();
           p.remove();
         }
       },
-      Identifier(p) {
-        if (componentIdentifiers.has(p.node)) {
-          const componentName = fullNames.get(p.node.name) || p.node.name;
-          p.replaceWith(t.stringLiteral(componentName));
-        }
-      },
-      JSXElement(path) {
-        const jsxElement = path.node;
-        const jsxName = jsxElement.openingElement.name;
-        let nameOrExpression = '';
-        if (t.isJSXIdentifier(jsxName)) nameOrExpression = jsxName.name;else if (t.isJSXMemberExpression(jsxName) && t.isJSXIdentifier(jsxName.object) && t.isJSXIdentifier(jsxName.property)) nameOrExpression = jsxName.object.name + '.' + jsxName.property.name;
-        if (!nameOrExpression) return;
-        const componentName = fullNames.get(nameOrExpression) || nameOrExpression;
-        const props = [];
-        for (const jsxAttribute of jsxElement.openingElement.attributes) {
-          if (t.isJSXAttribute(jsxAttribute)) {
-            let namespace;
-            let name;
-            if (t.isJSXNamespacedName(jsxAttribute.name)) {
-              namespace = jsxAttribute.name.namespace;
-              name = jsxAttribute.name.name;
-            } else if (t.isJSXIdentifier(jsxAttribute.name)) {
-              name = jsxAttribute.name;
-            }
-            if (!name) continue;
-            const attrName = (namespace ? namespace.name + ':' : '') + 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 if (jsxAttribute.value === null) props.push(t.objectProperty(t.stringLiteral(attrName), t.booleanLiteral(true)));else props.push(t.objectProperty(t.stringLiteral(attrName), t.nullLiteral()));
-          } else if (t.isJSXSpreadAttribute(jsxAttribute)) {
-            props.push(t.spreadElement(jsxAttribute.argument));
-          }
-        }
-        const children = [];
-        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));
-        }
-        const component = [t.objectProperty(t.identifier('__pw_component_marker'), t.booleanLiteral(true)), t.objectProperty(t.identifier('kind'), t.stringLiteral('jsx')), t.objectProperty(t.identifier('type'), t.stringLiteral(componentName)), t.objectProperty(t.identifier('props'), t.objectExpression(props))];
-        if (children.length) component.push(t.objectProperty(t.identifier('children'), t.arrayExpression(children)));
-        path.replaceWith(t.objectExpression(component));
+      MemberExpression(path) {
+        if (!t.isIdentifier(path.node.object)) return;
+        if (!importInfos.has(path.node.object.name)) return;
+        if (!t.isIdentifier(path.node.property)) return;
+        path.replaceWith(t.objectExpression([t.spreadElement(t.identifier(path.node.object.name)), t.objectProperty(t.identifier('property'), t.stringLiteral(path.node.property.name))]));
       }
     }
   };
   return result;
 });
-function collectComponentUsages(node) {
-  const importedLocalNames = new Set();
+function collectJsxComponentUsages(node) {
   const names = new Set();
-  const identifiers = new Set();
   (0, _babelBundle.traverse)(node, {
     enter: p => {
-      // First look at all the imports.
-      if (t.isImportDeclaration(p.node)) {
-        const importNode = p.node;
-        if (!t.isStringLiteral(importNode.source)) return;
-        for (const specifier of importNode.specifiers) {
-          if (t.isImportNamespaceSpecifier(specifier)) continue;
-          importedLocalNames.add(specifier.local.name);
-        }
-      }
-
       // Treat JSX-everything as component usages.
       if (t.isJSXElement(p.node)) {
         if (t.isJSXIdentifier(p.node.openingElement.name)) names.add(p.node.openingElement.name.name);
-        if (t.isJSXMemberExpression(p.node.openingElement.name) && t.isJSXIdentifier(p.node.openingElement.name.object) && t.isJSXIdentifier(p.node.openingElement.name.property)) names.add(p.node.openingElement.name.object.name + '.' + p.node.openingElement.name.property.name);
-      }
-
-      // Treat mount(identifier, ...) as component usage if it is in the importedLocalNames list.
-      if (t.isAwaitExpression(p.node) && t.isCallExpression(p.node.argument) && t.isIdentifier(p.node.argument.callee) && p.node.argument.callee.name === 'mount') {
-        const callExpression = p.node.argument;
-        const arg = callExpression.arguments[0];
-        if (!t.isIdentifier(arg) || !importedLocalNames.has(arg.name)) return;
-        names.add(arg.name);
-        identifiers.add(arg);
+        if (t.isJSXMemberExpression(p.node.openingElement.name) && t.isJSXIdentifier(p.node.openingElement.name.object) && t.isJSXIdentifier(p.node.openingElement.name.property)) names.add(p.node.openingElement.name.object.name);
       }
     }
   });
-  return {
-    names,
-    identifiers
-  };
+  return names;
 }
-function componentInfo(specifier, importSource, filename, componentName) {
+function importInfo(importNode, specifier, filename) {
+  const importSource = importNode.source.value;
   const isModuleOrAlias = !importSource.startsWith('.');
   const unresolvedImportPath = _path.default.resolve(_path.default.dirname(filename), importSource);
   // Support following notations for Button.tsx:
   // - import { Button } from './Button.js' - via resolveImportSpecifierExtension
   // - import { Button } from './Button' - via require.resolve
   const importPath = isModuleOrAlias ? importSource : (0, _util.resolveImportSpecifierExtension)(unresolvedImportPath) || require.resolve(unresolvedImportPath);
-  const prefix = importPath.replace(/[^\w_\d]/g, '_');
-  const pathInfo = {
+  const idPrefix = importPath.replace(/[^\w_\d]/g, '_');
+  const result = {
+    id: idPrefix,
     importPath,
-    isModuleOrAlias
+    isModuleOrAlias,
+    remoteName: undefined
   };
-  const specifierName = specifier.local.name;
-  let fullNameSuffix = '';
-  let importedNameProperty = '';
-  if (componentName !== specifierName) {
-    const suffix = componentName.substring(specifierName.length + 1);
-    fullNameSuffix = '_' + suffix;
-    importedNameProperty = '.' + suffix;
+  if (t.isImportDefaultSpecifier(specifier)) {} else if (t.isIdentifier(specifier.imported)) {
+    result.remoteName = specifier.imported.name;
+  } else {
+    result.remoteName = specifier.imported.value;
   }
-  if (t.isImportDefaultSpecifier(specifier)) return {
-    fullName: prefix + fullNameSuffix,
-    importedNameProperty,
-    deps: [],
-    ...pathInfo
-  };
-  if (t.isIdentifier(specifier.imported)) return {
-    fullName: prefix + '_' + specifier.imported.name + fullNameSuffix,
-    importedName: specifier.imported.name,
-    importedNameProperty,
-    deps: [],
-    ...pathInfo
-  };
+  if (result.remoteName) result.id += '_' + result.remoteName;
   return {
-    fullName: prefix + '_' + specifier.imported.value + fullNameSuffix,
-    importedName: specifier.imported.value,
-    importedNameProperty,
-    deps: [],
-    ...pathInfo
+    localName: specifier.local.name,
+    info: result
   };
-}
+}
+const allJsExtensions = new Set(['.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx', '.cts', '.mts', '']);

package/lib/vitePlugin.js

@@ -7,12 +7,11 @@ exports.createPlugin = createPlugin;
 var _utilsBundle = require("playwright-core/lib/utilsBundle");
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
-var _babelBundle = require("playwright/lib/transform/babelBundle");
 var _utilsBundle2 = require("playwright/lib/utilsBundle");
 var _utils = require("playwright-core/lib/utils");
 var _compilationCache = require("playwright/lib/transform/compilationCache");
-var _tsxTransform = require("./tsxTransform");
 var _vite = require("vite");
+var _indexSource = require("./generated/indexSource");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Microsoft Corporation.
@@ -88,7 +87,7 @@ function createPlugin(registerSourceFile, frameworkPluginFactory) {
       const buildInfoFile = _path.default.join(baseAndUserConfig.build.outDir, 'metainfo.json');
       let buildExists = false;
       let buildInfo;
-      const registerSource = await _fs.default.promises.readFile(registerSourceFile, 'utf-8');
+      const registerSource = _indexSource.source + '\n' + (await _fs.default.promises.readFile(registerSourceFile, 'utf-8'));
       const registerSourceHash = (0, _utils.calculateSha1)(registerSource);
       try {
         buildInfo = JSON.parse(await _fs.default.promises.readFile(buildInfoFile, 'utf-8'));
@@ -102,15 +101,15 @@ function createPlugin(registerSourceFile, frameworkPluginFactory) {
           viteVersion: _vite.version,
           registerSourceHash,
           components: [],
-          tests: {},
-          sources: {}
+          sources: {},
+          deps: {}
         };
       }
       log('build exists:', buildExists);
       const componentRegistry = new Map();
-      // 1. Re-parse changed tests and collect required components.
-      const hasNewTests = await checkNewTests(suite, buildInfo, componentRegistry);
-      log('has new tests:', hasNewTests);
+      const componentsByImportingFile = new Map();
+      // 1. Populate component registry based on tests' component imports.
+      await populateComponentsFromTests(componentRegistry, componentsByImportingFile);
 
       // 2. Check if the set of required components has changed.
       const hasNewComponents = await checkNewComponents(buildInfo, componentRegistry);
@@ -149,7 +148,8 @@ function createPlugin(registerSourceFile, frameworkPluginFactory) {
       if (frameworkPluginFactory && !((_baseAndUserConfig$pl = baseAndUserConfig.plugins) !== null && _baseAndUserConfig$pl !== void 0 && _baseAndUserConfig$pl.length)) frameworkOverrides.plugins = [await frameworkPluginFactory()];
 
       // But only add out own plugin when we actually build / transform.
-      if (sourcesDirty) frameworkOverrides.plugins.push(vitePlugin(registerSource, templateDir, buildInfo, componentRegistry));
+      const depsCollector = new Map();
+      if (sourcesDirty) frameworkOverrides.plugins.push(vitePlugin(registerSource, templateDir, buildInfo, componentRegistry, depsCollector));
       frameworkOverrides.build = {
         target: 'esnext',
         minify: false,
@@ -166,18 +166,28 @@ function createPlugin(registerSourceFile, frameworkPluginFactory) {
         log('build');
         await (0, _vite.build)(finalConfig);
         await _fs.default.promises.rename(`${finalConfig.build.outDir}/${relativeTemplateDir}/index.html`, `${finalConfig.build.outDir}/index.html`);
+        buildInfo.deps = Object.fromEntries(depsCollector.entries());
       }
-      if (hasNewTests || hasNewComponents || sourcesDirty) {
+      if (hasNewComponents || sourcesDirty) {
         log('write manifest');
         await _fs.default.promises.writeFile(buildInfoFile, JSON.stringify(buildInfo, undefined, 2));
       }
-      for (const [filename, testInfo] of Object.entries(buildInfo.tests)) {
-        const deps = new Set();
-        for (const componentName of testInfo.components) {
-          const component = componentRegistry.get(componentName);
-          component === null || component === void 0 ? void 0 : component.deps.forEach(d => deps.add(d));
+      for (const projectSuite of suite.suites) {
+        for (const fileSuite of projectSuite.suites) {
+          // For every test file...
+          const testFile = fileSuite.location.file;
+          const deps = new Set();
+          // Collect its JS dependencies (helpers).
+          for (const file of [testFile, ...((0, _compilationCache.internalDependenciesForTestFile)(testFile) || [])]) {
+            // For each helper, get all the imported components.
+            for (const componentFile of componentsByImportingFile.get(file) || []) {
+              // For each component, get all the dependencies.
+              for (const d of depsCollector.get(componentFile) || []) deps.add(d);
+            }
+          }
+          // Now we have test file => all components along with dependencies.
+          (0, _compilationCache.setExternalDependencies)(testFile, [...deps]);
         }
-        (0, _compilationCache.setExternalDependencies)(filename, [...deps]);
       }
       const previewServer = await (0, _vite.preview)(finalConfig);
       stoppableServer = (0, _utilsBundle2.stoppable)(previewServer.httpServer, 0);
@@ -208,31 +218,16 @@ async function checkSources(buildInfo) {
   }
   return false;
 }
-async function checkNewTests(suite, buildInfo, componentRegistry) {
-  const testFiles = new Set();
-  for (const project of suite.suites) {
-    for (const file of project.suites) testFiles.add(file.location.file);
-  }
-  let hasNewTests = false;
-  for (const testFile of testFiles) {
-    var _buildInfo$tests$test;
-    const timestamp = (await _fs.default.promises.stat(testFile)).mtimeMs;
-    if (((_buildInfo$tests$test = buildInfo.tests[testFile]) === null || _buildInfo$tests$test === void 0 ? void 0 : _buildInfo$tests$test.timestamp) !== timestamp) {
-      const components = await parseTestFile(testFile);
-      log('changed test:', testFile);
-      for (const component of components) componentRegistry.set(component.fullName, component);
-      buildInfo.tests[testFile] = {
-        timestamp,
-        components: components.map(c => c.fullName)
-      };
-      hasNewTests = true;
-    }
+async function populateComponentsFromTests(componentRegistry, componentsByImportingFile) {
+  const importInfos = await (0, _compilationCache.getUserData)('playwright-ct-core');
+  for (const [file, importList] of importInfos) {
+    for (const importInfo of importList) componentRegistry.set(importInfo.id, importInfo);
+    componentsByImportingFile.set(file, importList.filter(i => !i.isModuleOrAlias).map(i => i.importPath));
   }
-  return hasNewTests;
 }
 async function checkNewComponents(buildInfo, componentRegistry) {
   const newComponents = [...componentRegistry.keys()];
-  const oldComponents = new Map(buildInfo.components.map(c => [c.fullName, c]));
+  const oldComponents = new Map(buildInfo.components.map(c => [c.id, c]));
   let hasNewComponents = false;
   for (const c of newComponents) {
     if (!oldComponents.has(c)) {
@@ -240,37 +235,10 @@ async function checkNewComponents(buildInfo, componentRegistry) {
       break;
     }
   }
-  for (const c of oldComponents.values()) componentRegistry.set(c.fullName, c);
+  for (const c of oldComponents.values()) componentRegistry.set(c.id, c);
   return hasNewComponents;
 }
-async function parseTestFile(testFile) {
-  const text = await _fs.default.promises.readFile(testFile, 'utf-8');
-  const ast = (0, _babelBundle.parse)(text, {
-    errorRecovery: true,
-    plugins: ['typescript', 'jsx'],
-    sourceType: 'module'
-  });
-  const componentUsages = (0, _tsxTransform.collectComponentUsages)(ast);
-  const componentNames = componentUsages.names;
-  const result = [];
-  (0, _babelBundle.traverse)(ast, {
-    enter: p => {
-      if (_babelBundle.types.isImportDeclaration(p.node)) {
-        const importNode = p.node;
-        if (!_babelBundle.types.isStringLiteral(importNode.source)) return;
-        for (const specifier of importNode.specifiers) {
-          const specifierName = specifier.local.name;
-          const componentName = componentNames.has(specifierName) ? specifierName : [...componentNames].find(c => c.startsWith(specifierName + '.'));
-          if (!componentName) continue;
-          if (_babelBundle.types.isImportNamespaceSpecifier(specifier)) continue;
-          result.push((0, _tsxTransform.componentInfo)(specifier, importNode.source.value, testFile, componentName));
-        }
-      }
-    }
-  });
-  return result;
-}
-function vitePlugin(registerSource, templateDir, buildInfo, componentRegistry) {
+function vitePlugin(registerSource, templateDir, buildInfo, importInfos, depsCollector) {
   buildInfo.sources = {};
   let moduleResolver;
   return {
@@ -311,11 +279,11 @@ function vitePlugin(registerSource, templateDir, buildInfo, componentRegistry) {
       const folder = _path.default.dirname(id);
       const lines = [content, ''];
       lines.push(registerSource);
-      for (const [alias, value] of componentRegistry) {
+      for (const value of importInfos.values()) {
         const importPath = value.isModuleOrAlias ? value.importPath : './' + _path.default.relative(folder, value.importPath).replace(/\\/g, '/');
-        if (value.importedName) lines.push(`const ${alias} = () => import('${importPath}').then((mod) => mod.${value.importedName + (value.importedNameProperty || '')});`);else lines.push(`const ${alias} = () => import('${importPath}').then((mod) => mod.default${value.importedNameProperty || ''});`);
+        lines.push(`const ${value.id} = () => import('${importPath}').then((mod) => mod.${value.remoteName || 'default'});`);
       }
-      lines.push(`pwRegister({ ${[...componentRegistry.keys()].join(',\n  ')} });`);
+      lines.push(`__pwRegistry.initialize({ ${[...importInfos.keys()].join(',\n  ')} });`);
       return {
         code: lines.join('\n'),
         map: {
@@ -324,12 +292,12 @@ function vitePlugin(registerSource, templateDir, buildInfo, componentRegistry) {
       };
     },
     async writeBundle() {
-      for (const component of componentRegistry.values()) {
-        const id = await moduleResolver(component.importPath);
-        if (!id) continue;
+      for (const importInfo of importInfos.values()) {
         const deps = new Set();
+        const id = await moduleResolver(importInfo.importPath);
+        if (!id) continue;
         collectViteModuleDependencies(this, id, deps);
-        component.deps = [...deps];
+        depsCollector.set(importInfo.importPath, [...deps]);
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/experimental-ct-core",
-  "version": "1.41.0",
+  "version": "1.41.1",
   "description": "Playwright Component Testing Helpers",
   "repository": {
     "type": "git",
@@ -27,9 +27,9 @@
     }
   },
   "dependencies": {
-    "playwright-core": "1.41.0",
+    "playwright-core": "1.41.1",
     "vite": "^4.4.12",
-    "playwright": "1.41.0"
+    "playwright": "1.41.1"
   },
   "bin": {
     "playwright": "cli.js"

package/types/component.d.ts

@@ -14,33 +14,32 @@
  * limitations under the License.
  */
 
+import type { ImportRegistry } from '../src/injected/importRegistry';
+
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 export type JsonObject = { [Key in string]?: JsonValue };
 
-// JsxComponentChild can be anything, consider cases like: <>{1}</>, <>{null}</>
-export type JsxComponentChild = JsxComponent | string | number | boolean | null;
 export type JsxComponent = {
-  __pw_component_marker: true,
-  kind: 'jsx',
-  type: string,
+  __pw_type: 'jsx',
+  type: any,
   props: Record<string, any>,
-  children?: JsxComponentChild[],
 };
 
 export type MountOptions = {
-  props?: Record<string, any>,
-  slots?: Record<string, string | string[]>,
-  on?: Record<string, Function>,
   hooksConfig?: any,
 };
 
-export type ObjectComponent = {
-  __pw_component_marker: true,
-  kind: 'object',
-  type: string,
-  options?: MountOptions
+export type ObjectComponentOptions = {
+  props?: Record<string, any>;
+  slots?: Record<string, string | string[]>;
+  on?: Record<string, Function>;
+};
+
+export type ObjectComponent = ObjectComponentOptions & {
+  __pw_type: 'object-component',
+  type: any,
 };
 
 export type Component = JsxComponent | ObjectComponent;
@@ -56,5 +55,10 @@ declare global {
     __pw_hooks_after_mount?: (<HooksConfig extends JsonObject = JsonObject>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
+    __pwRegistry: ImportRegistry;
+    // Can't start with __pw due to core reuse bindings logic for __pw*.
+    __ctDispatchFunction: (ordinal: number, args: any[]) => void;
+    __pwUnwrapObject: (value: any) => Promise<any>;
+    __pwTransformObject: (value: any, mapping: (v: any) => { result: any } | undefined) => any;
   }
 }