chore(ct): resolve internal type errors (#26779)

microsoft · Oct 26, 2023 · 54ebee7 · 54ebee7
1 parent ff206bd
commit 54ebee7
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 59 deletions.
diff --git a/packages/playwright-ct-core/types/component.d.ts b/packages/playwright-ct-core/types/component.d.ts
@@ -19,16 +19,18 @@ 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 = {
   kind: 'jsx',
   type: string,
   props: Record<string, any>,
-  children: (Component | string)[],
+  children: JsxComponentChild[],
 };
 
 export type MountOptions = {
   props?: Record<string, any>,
-  slots?: Record<string, any>,
+  slots?: Record<string, string | string[]>,
   on?: Record<string, Function>,
   hooksConfig?: any,
 };
@@ -39,7 +41,7 @@ export type ObjectComponent = {
   options?: MountOptions
 };
 
-export type Component = JsxComponent | ObjectComponent | number | string | Array<any>;
+export type Component = JsxComponent | ObjectComponent;
 
 declare global {
   interface Window {

diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs
@@ -20,9 +20,8 @@
 import * as __pwReact from 'react';
 import { createRoot as __pwCreateRoot } from 'react-dom/client';
 
-/** @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('react').FunctionComponent} FrameworkComponent */
 
 /** @type {Map<string, () => Promise<FrameworkComponent>>} */
@@ -41,15 +40,15 @@ export function pwRegister(components) {
 }
 
 /**
- * @param {Component} component
- * @returns {component is JsxComponent | ObjectComponent}
+ * @param {any} component
+ * @returns {component is JsxComponent}
  */
 function isComponent(component) {
   return !(typeof component !== 'object' || Array.isArray(component));
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent | JsxComponentChild} component
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
@@ -77,17 +76,14 @@ async function __pwResolveComponent(component) {
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent | JsxComponentChild} component
  */
 function __pwRender(component) {
   if (!isComponent(component))
     return component;
 
   const componentFunc = __pwRegistry.get(component.type);
 
-  if (component.kind !== 'jsx')
-    throw new Error('Object mount notation is not supported');
-
   return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
     if (typeof child === 'string')
       return child;
@@ -100,6 +96,9 @@ function __pwRender(component) {
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   await __pwResolveComponent(component);
   let App = () => __pwRender(component);
   for (const hook of window.__pw_hooks_before_mount || []) {
@@ -132,10 +131,13 @@ window.playwrightUnmount = async rootElement => {
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   await __pwResolveComponent(component);
   const root = __pwRootRegistry.get(rootElement);
   if (root === undefined)
     throw new Error('Component was not mounted');
 
-  root.render(__pwRender(/** @type {Component} */ (component)));
+  root.render(__pwRender(component));
 };
diff --git a/packages/playwright-ct-react17/registerSource.mjs b/packages/playwright-ct-react17/registerSource.mjs
@@ -21,14 +21,13 @@
 import __pwReact from 'react';
 import __pwReactDOM from 'react-dom';
 
-/** @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('react').FunctionComponent} FrameworkComponent */
 
 /** @type {Map<string, () => Promise<FrameworkComponent>>} */
 const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent} */
+/** @type {Map<string, FrameworkComponent>} */
 const __pwRegistry = new Map();
 
 /**
@@ -40,15 +39,15 @@ export function pwRegister(components) {
 }
 
 /**
- * @param {Component} component
- * @returns {component is JsxComponent | ObjectComponent}
+ * @param {any} component
+ * @returns {component is JsxComponent}
  */
 function isComponent(component) {
   return !(typeof component !== 'object' || Array.isArray(component));
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent | JsxComponentChild} component
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
@@ -76,17 +75,14 @@ async function __pwResolveComponent(component) {
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent | JsxComponentChild} component
  */
 function __pwRender(component) {
   if (!isComponent(component))
     return component;
 
   const componentFunc = __pwRegistry.get(component.type);
 
-  if (component.kind !== 'jsx')
-    throw new Error('Object mount notation is not supported');
-
   return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
     if (typeof child === 'string')
       return child;
@@ -99,6 +95,9 @@ function __pwRender(component) {
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   await __pwResolveComponent(component);
   let App = () => __pwRender(component);
   for (const hook of window.__pw_hooks_before_mount || []) {
@@ -119,6 +118,9 @@ window.playwrightUnmount = async rootElement => {
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   await __pwResolveComponent(component);
-  __pwReactDOM.render(__pwRender(/** @type {Component} */(component)), rootElement);
+  __pwReactDOM.render(__pwRender(component), rootElement);
 };
diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
@@ -20,9 +20,8 @@
 import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web';
 import __pwH from 'solid-js/h';
 
-/** @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('solid-js').JSX.Element} FrameworkComponent */
 
 /** @type {Map<string, () => Promise<FrameworkComponent>>} */
@@ -39,19 +38,19 @@ export function pwRegister(components) {
 }
 
 /**
- * @param {Component} component
- * @returns {component is JsxComponent | ObjectComponent}
+ * @param {any} component
+ * @returns {component is JsxComponent}
  */
 function isComponent(component) {
   return !(typeof component !== 'object' || Array.isArray(component));
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent | JsxComponentChild} component
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
-    return
+    return;
 
   let componentFactory = __pwLoaderRegistry.get(component.type);
   if (!componentFactory) {
@@ -67,28 +66,26 @@ async function __pwResolveComponent(component) {
   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 (componentFactory)
+    __pwRegistry.set(component.type, await componentFactory());
 
   if ('children' in component)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)))
+    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
 function __pwCreateChild(child) {
   return typeof child === 'string' ? child : __pwCreateComponent(child);
 }
 
 /**
- * @param {Component} component
+ * @param {JsxComponent} component
  */
 function __pwCreateComponent(component) {
   if (typeof component !== 'object' || Array.isArray(component))
     return component;
 
   const componentFunc = __pwRegistry.get(component.type);
 
-  if (component.kind !== 'jsx')
-    throw new Error('Object mount notation is not supported');
 
   const children = component.children.reduce((/** @type {any[]} */ children, current) => {
     const child = __pwCreateChild(current);
@@ -108,6 +105,9 @@ function __pwCreateComponent(component) {
 const __pwUnmountKey = Symbol('unmountKey');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   await __pwResolveComponent(component);
   let App = () => __pwCreateComponent(component);
   for (const hook of window.__pw_hooks_before_mount || []) {
@@ -132,6 +132,9 @@ window.playwrightUnmount = async rootElement => {
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
+  if (component.kind !== 'jsx')
+    throw new Error('Object mount notation is not supported');
+
   window.playwrightUnmount(rootElement);
   window.playwrightMount(component, rootElement, {});
 };
diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs
@@ -21,7 +21,6 @@
 import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'svelte/internal';
 
 /** @typedef {import('../playwright-ct-core/types/component').Component} Component */
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
 /** @typedef {any} FrameworkComponent */
 /** @typedef {import('svelte').SvelteComponent} SvelteComponent */
@@ -40,15 +39,15 @@ export function pwRegister(components) {
 }
 
 /**
- * @param {Component} component
- * @returns {component is JsxComponent | ObjectComponent}
+ * @param {any} component
+ * @returns {component is ObjectComponent}
  */
 function isComponent(component) {
   return !(typeof component !== 'object' || Array.isArray(component));
 }
 
 /**
- * @param {Component} component
+ * @param {ObjectComponent} component
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
@@ -69,10 +68,7 @@ async function __pwResolveComponent(component) {
     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)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)))
+    __pwRegistry.set(component.type, await componentFactory());
 }
 
 /**
@@ -109,12 +105,12 @@ function __pwCreateSlots(slots) {
 const __pwSvelteComponentKey = Symbol('svelteComponent');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  await __pwResolveComponent(component);
-  const componentCtor = __pwRegistry.get(component.type);
-
   if (component.kind !== 'object')
     throw new Error('JSX mount notation is not supported');
 
+  await __pwResolveComponent(component);
+  const componentCtor = __pwRegistry.get(component.type);
+
   class App extends componentCtor {
     constructor(options = {}) {
       super({
@@ -153,6 +149,9 @@ window.playwrightUnmount = async rootElement => {
 };
 
 window.playwrightUpdate = async (rootElement, component) => {
+  if (component.kind !== 'object')
+    throw new Error('JSX mount notation is not supported');
+
   await __pwResolveComponent(component);
   const svelteComponent = /** @type {SvelteComponent} */ (rootElement[__pwSvelteComponentKey]);
   if (!svelteComponent)

diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs
@@ -22,6 +22,7 @@ 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 */
@@ -40,15 +41,15 @@ export function pwRegister(components) {
 }
 
 /**
- * @param {Component} component
- * @returns {component is JsxComponent | ObjectComponent}
+ * @param {any} component
+ * @returns {component is Component}
  */
 function isComponent(component) {
   return !(typeof component !== 'object' || Array.isArray(component));
 }
 
 /**
- * @param {Component} component
+ * @param {Component | JsxComponentChild} component
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
@@ -78,7 +79,7 @@ async function __pwResolveComponent(component) {
 const __pwAllListeners = new Map();
 
 /**
- * @param {Component | string} child
+ * @param {JsxComponentChild} child
  * @returns {import('vue').VNode | string}
  */
 function __pwCreateChild(child) {