@playwright/experimental-ct-vue 1.41.0 → 1.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/experimental-ct-vue",
-  "version": "1.41.0",
+  "version": "1.41.1",
   "description": "Playwright Component Testing for Vue",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     }
   },
   "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0",
+    "@playwright/experimental-ct-core": "1.41.1",
     "@vitejs/plugin-vue": "^4.2.1"
   },
   "bin": {

package/registerSource.mjs

@@ -22,69 +22,35 @@ import { compile as __pwCompile } from '@vue/compiler-dom';
 import * as __pwVue from 'vue';
 
 /** @typedef {import('../playwright-ct-core/types/component').Component} Component */
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
 /** @typedef {import('vue').Component} FrameworkComponent */
 
-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
-
-/**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
- */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
-}
+const __pwAllListeners = new Map();
 
 /**
  * @param {any} component
- * @returns {component is Component}
+ * @returns {component is ObjectComponent}
  */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
+function isObjectComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }
 
 /**
- * @param {Component | JsxComponentChild} component
+ * @param {any} component
+ * @returns {component is JsxComponent}
  */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}_vue`)) {
-        componentFactory = value;
-        break;
-      }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if ('children' in component && component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }
 
-const __pwAllListeners = new Map();
-
 /**
- * @param {JsxComponentChild} child
+ * @param {any} child
  */
 function __pwCreateChild(child) {
   if (Array.isArray(child))
     return child.map(grandChild => __pwCreateChild(grandChild));
-  if (isComponent(child))
+  if (isJsxComponent(child) || isObjectComponent(child))
     return __pwCreateWrapper(child);
   return child;
 }
@@ -132,14 +98,23 @@ function __pwSlotToFunction(slot) {
   throw Error(`Invalid slot received.`);
 }
 
+/**
+ * @param {JsxComponent} component
+ * @returns {any[] | undefined}
+ */
+function __pwJsxChildArray(component) {
+  if (!component.props.children)
+    return;
+  if (Array.isArray(component.props.children))
+    return component.props.children;
+  return [component.props.children];
+}
+
 /**
  * @param {Component} component
  */
 function __pwCreateComponent(component) {
-  let componentFunc = __pwRegistry.get(component.type);
-  componentFunc = componentFunc || component.type;
-
-  const isVueComponent = componentFunc !== component.type;
+  const isVueComponent = typeof component.type !== 'string';
 
   /**
    * @type {(import('vue').VNode | string)[]}
@@ -151,12 +126,12 @@ function __pwCreateComponent(component) {
   /** @type {{[key: string]: any}} */
   let props = {};
 
-  if (component.kind === 'jsx') {
-    for (const child of component.children || []) {
-      if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
+  if (component.__pw_type === 'jsx') {
+    for (const child of __pwJsxChildArray(component) || []) {
+      if (isJsxComponent(child) && child.type === 'template') {
         const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
         const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
-        slots[slot] = child.children?.map(__pwCreateChild);
+        slots[slot] = __pwJsxChildArray(child)?.map(__pwCreateChild);
       } else {
         children.push(__pwCreateChild(child));
       }
@@ -175,16 +150,16 @@ function __pwCreateComponent(component) {
     }
   }
 
-  if (component.kind === 'object') {
+  if (component.__pw_type === 'object-component') {
     // Vue test util syntax.
-    for (const [key, value] of Object.entries(component.options?.slots || {})) {
+    for (const [key, value] of Object.entries(component.slots || {})) {
       if (key === 'default')
         children.push(__pwSlotToFunction(value));
       else
         slots[key] = __pwSlotToFunction(value);
     }
-    props = component.options?.props || {};
-    for (const [key, value] of Object.entries(component.options?.on || {}))
+    props = component.props || {};
+    for (const [key, value] of Object.entries(component.on || {}))
       listeners[key] = value;
   }
 
@@ -197,7 +172,7 @@ function __pwCreateComponent(component) {
     lastArg = children;
   }
 
-  return { Component: componentFunc, props, slots: lastArg, listeners };
+  return { Component: component.type, props, slots: lastArg, listeners };
 }
 
 function __pwWrapFunctions(slots) {
@@ -248,7 +223,6 @@ const __pwAppKey = Symbol('appKey');
 const __pwWrapperKey = Symbol('wrapperKey');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  await __pwResolveComponent(component);
   const app = __pwCreateApp({
     render: () => {
       const wrapper = __pwCreateWrapper(component);
@@ -275,7 +249,6 @@ window.playwrightUnmount = async rootElement => {
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
-  await __pwResolveComponent(component);
   const wrapper = rootElement[__pwWrapperKey];
   if (!wrapper)
     throw new Error('Component was not mounted');