yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sander 2023-10-26 23:57:49 +02:00 committed by GitHub
parent ff206bd9c1
commit 54ebee79f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/playwright-ct-core/types/component.d.ts vendored
View File

@ -19,16 +19,18 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
export type JsonObject = { [Key in string]?: 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 = { export type JsxComponent = {
kind: 'jsx', kind: 'jsx',
type: string, type: string,
props: Record<string, any>, props: Record<string, any>,
children: (Component | string)[], children: JsxComponentChild[],
}; };
export type MountOptions = { export type MountOptions = {
props?: Record<string, any>, props?: Record<string, any>,
slots?: Record<string, any>, slots?: Record<string, string | string[]>,
on?: Record<string, Function>, on?: Record<string, Function>,
hooksConfig?: any, hooksConfig?: any,
}; };
@ -39,7 +41,7 @@ export type ObjectComponent = {
options?: MountOptions options?: MountOptions
}; };
export type Component = JsxComponent | ObjectComponent | number | string | Array<any>; export type Component = JsxComponent | ObjectComponent;
declare global { declare global {
interface Window { interface Window {

22
packages/playwright-ct-react/registerSource.mjs
View File

@ -20,9 +20,8 @@
import * as __pwReact from 'react'; import * as __pwReact from 'react';
import { createRoot as __pwCreateRoot } from 'react-dom/client'; 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').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {import('react').FunctionComponent} FrameworkComponent */ /** @typedef {import('react').FunctionComponent} FrameworkComponent */
/** @type {Map<string, () => Promise<FrameworkComponent>>} */ /** @type {Map<string, () => Promise<FrameworkComponent>>} */
@ -41,15 +40,15 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is JsxComponent}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {JsxComponent | JsxComponentChild} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(component)) if (!isComponent(component))
@ -77,7 +76,7 @@ async function __pwResolveComponent(component) {
} }
/** /**
* @param {Component} component * @param {JsxComponent | JsxComponentChild} component
*/ */
function __pwRender(component) { function __pwRender(component) {
if (!isComponent(component)) if (!isComponent(component))
@ -85,9 +84,6 @@ function __pwRender(component) {
const componentFunc = __pwRegistry.get(component.type); 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 => { return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
if (typeof child === 'string') if (typeof child === 'string')
return child; return child;
@ -100,6 +96,9 @@ function __pwRender(component) {
} }
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
let App = () => __pwRender(component); let App = () => __pwRender(component);
for (const hook of window.__pw_hooks_before_mount || []) { for (const hook of window.__pw_hooks_before_mount || []) {
@ -132,10 +131,13 @@ window.playwrightUnmount = async rootElement => {
}; };
window.playwrightUpdate = async (rootElement, component) => { window.playwrightUpdate = async (rootElement, component) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
const root = __pwRootRegistry.get(rootElement); const root = __pwRootRegistry.get(rootElement);
if (root === undefined) if (root === undefined)
throw new Error('Component was not mounted'); throw new Error('Component was not mounted');
root.render(__pwRender(/** @type {Component} */ (component))); root.render(__pwRender(component));
}; };

24
packages/playwright-ct-react17/registerSource.mjs
View File

@ -21,14 +21,13 @@
import __pwReact from 'react'; import __pwReact from 'react';
import __pwReactDOM from 'react-dom'; 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').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {import('react').FunctionComponent} FrameworkComponent */ /** @typedef {import('react').FunctionComponent} FrameworkComponent */
/** @type {Map<string, () => Promise<FrameworkComponent>>} */ /** @type {Map<string, () => Promise<FrameworkComponent>>} */
const __pwLoaderRegistry = new Map(); const __pwLoaderRegistry = new Map();
/** @type {Map<string, FrameworkComponent} */ /** @type {Map<string, FrameworkComponent>} */
const __pwRegistry = new Map(); const __pwRegistry = new Map();
/** /**
@ -40,15 +39,15 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is JsxComponent}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {JsxComponent | JsxComponentChild} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(component)) if (!isComponent(component))
@ -76,7 +75,7 @@ async function __pwResolveComponent(component) {
} }
/** /**
* @param {Component} component * @param {JsxComponent | JsxComponentChild} component
*/ */
function __pwRender(component) { function __pwRender(component) {
if (!isComponent(component)) if (!isComponent(component))
@ -84,9 +83,6 @@ function __pwRender(component) {
const componentFunc = __pwRegistry.get(component.type); 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 => { return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
if (typeof child === 'string') if (typeof child === 'string')
return child; return child;
@ -99,6 +95,9 @@ function __pwRender(component) {
} }
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
let App = () => __pwRender(component); let App = () => __pwRender(component);
for (const hook of window.__pw_hooks_before_mount || []) { for (const hook of window.__pw_hooks_before_mount || []) {
@ -119,6 +118,9 @@ window.playwrightUnmount = async rootElement => {
}; };
window.playwrightUpdate = async (rootElement, component) => { window.playwrightUpdate = async (rootElement, component) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
__pwReactDOM.render(__pwRender(/** @type {Component} */(component)), rootElement); __pwReactDOM.render(__pwRender(component), rootElement);
}; };

27
packages/playwright-ct-solid/registerSource.mjs
View File

@ -20,9 +20,8 @@
import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web'; import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web';
import __pwH from 'solid-js/h'; 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').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */ /** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */
/** @type {Map<string, () => Promise<FrameworkComponent>>} */ /** @type {Map<string, () => Promise<FrameworkComponent>>} */
@ -39,19 +38,19 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is JsxComponent}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {JsxComponent | JsxComponentChild} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(component)) if (!isComponent(component))
return return;
let componentFactory = __pwLoaderRegistry.get(component.type); let componentFactory = __pwLoaderRegistry.get(component.type);
if (!componentFactory) { if (!componentFactory) {
@ -67,11 +66,11 @@ async function __pwResolveComponent(component) {
if (!componentFactory && component.type[0].toUpperCase() === component.type[0]) if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`); throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
if(componentFactory) if (componentFactory)
__pwRegistry.set(component.type, await componentFactory()) __pwRegistry.set(component.type, await componentFactory());
if ('children' in component) 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) { function __pwCreateChild(child) {
@ -79,7 +78,7 @@ function __pwCreateChild(child) {
} }
/** /**
* @param {Component} component * @param {JsxComponent} component
*/ */
function __pwCreateComponent(component) { function __pwCreateComponent(component) {
if (typeof component !== 'object' || Array.isArray(component)) if (typeof component !== 'object' || Array.isArray(component))
@ -87,8 +86,6 @@ function __pwCreateComponent(component) {
const componentFunc = __pwRegistry.get(component.type); 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 children = component.children.reduce((/** @type {any[]} */ children, current) => {
const child = __pwCreateChild(current); const child = __pwCreateChild(current);
@ -108,6 +105,9 @@ function __pwCreateComponent(component) {
const __pwUnmountKey = Symbol('unmountKey'); const __pwUnmountKey = Symbol('unmountKey');
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
let App = () => __pwCreateComponent(component); let App = () => __pwCreateComponent(component);
for (const hook of window.__pw_hooks_before_mount || []) { for (const hook of window.__pw_hooks_before_mount || []) {
@ -132,6 +132,9 @@ window.playwrightUnmount = async rootElement => {
}; };
window.playwrightUpdate = async (rootElement, component) => { window.playwrightUpdate = async (rootElement, component) => {
if (component.kind !== 'jsx')
throw new Error('Object mount notation is not supported');
window.playwrightUnmount(rootElement); window.playwrightUnmount(rootElement);
window.playwrightMount(component, rootElement, {}); window.playwrightMount(component, rootElement, {});
}; };

21
packages/playwright-ct-svelte/registerSource.mjs
View File

@ -21,7 +21,6 @@
import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'svelte/internal'; 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').Component} Component */
/** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */ /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {any} FrameworkComponent */ /** @typedef {any} FrameworkComponent */
/** @typedef {import('svelte').SvelteComponent} SvelteComponent */ /** @typedef {import('svelte').SvelteComponent} SvelteComponent */
@ -40,15 +39,15 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is ObjectComponent}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {ObjectComponent} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(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()]}`); throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
if (componentFactory) if (componentFactory)
__pwRegistry.set(component.type, await componentFactory()) __pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
await Promise.all(component.children.map(child => __pwResolveComponent(child)))
} }
/** /**
@ -109,12 +105,12 @@ function __pwCreateSlots(slots) {
const __pwSvelteComponentKey = Symbol('svelteComponent'); const __pwSvelteComponentKey = Symbol('svelteComponent');
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {
await __pwResolveComponent(component);
const componentCtor = __pwRegistry.get(component.type);
if (component.kind !== 'object') if (component.kind !== 'object')
throw new Error('JSX mount notation is not supported'); throw new Error('JSX mount notation is not supported');
await __pwResolveComponent(component);
const componentCtor = __pwRegistry.get(component.type);
class App extends componentCtor { class App extends componentCtor {
constructor(options = {}) { constructor(options = {}) {
super({ super({
@ -153,6 +149,9 @@ window.playwrightUnmount = async rootElement => {
}; };
window.playwrightUpdate = async (rootElement, component) => { window.playwrightUpdate = async (rootElement, component) => {
if (component.kind !== 'object')
throw new Error('JSX mount notation is not supported');
await __pwResolveComponent(component); await __pwResolveComponent(component);
const svelteComponent = /** @type {SvelteComponent} */ (rootElement[__pwSvelteComponentKey]); const svelteComponent = /** @type {SvelteComponent} */ (rootElement[__pwSvelteComponentKey]);
if (!svelteComponent) if (!svelteComponent)

9
packages/playwright-ct-vue/registerSource.mjs
View File

@ -22,6 +22,7 @@ import { compile as __pwCompile } from '@vue/compiler-dom';
import * as __pwVue from 'vue'; import * as __pwVue from 'vue';
/** @typedef {import('../playwright-ct-core/types/component').Component} Component */ /** @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').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */ /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {import('vue').Component} FrameworkComponent */ /** @typedef {import('vue').Component} FrameworkComponent */
@ -40,15 +41,15 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is Component}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {Component | JsxComponentChild} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(component)) if (!isComponent(component))
@ -78,7 +79,7 @@ async function __pwResolveComponent(component) {
const __pwAllListeners = new Map(); const __pwAllListeners = new Map();
/** /**
* @param {Component | string} child * @param {JsxComponentChild} child
* @returns {import('vue').VNode | string} * @returns {import('vue').VNode | string}
*/ */
function __pwCreateChild(child) { function __pwCreateChild(child) {

17
packages/playwright-ct-vue2/registerSource.mjs
View File

@ -21,6 +21,7 @@
import __pwVue, { h as __pwH } from 'vue'; import __pwVue, { h as __pwH } from 'vue';
/** @typedef {import('../playwright-ct-core/types/component').Component} Component */ /** @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').JsxComponent} JsxComponent */
/** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */ /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
/** @typedef {import('vue').Component} FrameworkComponent */ /** @typedef {import('vue').Component} FrameworkComponent */
@ -39,19 +40,19 @@ export function pwRegister(components) {
} }
/** /**
* @param {Component} component * @param {any} component
* @returns {component is JsxComponent | ObjectComponent} * @returns {component is Component}
*/ */
function isComponent(component) { function isComponent(component) {
return !(typeof component !== 'object' || Array.isArray(component)); return !(typeof component !== 'object' || Array.isArray(component));
} }
/** /**
* @param {Component} component * @param {Component | JsxComponentChild} component
*/ */
async function __pwResolveComponent(component) { async function __pwResolveComponent(component) {
if (!isComponent(component)) if (!isComponent(component))
return return;
let componentFactory = __pwLoaderRegistry.get(component.type); let componentFactory = __pwLoaderRegistry.get(component.type);
if (!componentFactory) { if (!componentFactory) {
@ -67,15 +68,15 @@ async function __pwResolveComponent(component) {
if (!componentFactory && component.type[0].toUpperCase() === component.type[0]) if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`); throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
if(componentFactory) if (componentFactory)
__pwRegistry.set(component.type, await componentFactory()) __pwRegistry.set(component.type, await componentFactory());
if ('children' in component) if ('children' in component)
await Promise.all(component.children.map(child => __pwResolveComponent(child))) await Promise.all(component.children.map(child => __pwResolveComponent(child)));
} }
/** /**
* @param {Component | string} child * @param {Component | JsxComponentChild} child
*/ */
function __pwCreateChild(child) { function __pwCreateChild(child) {
return typeof child === 'string' ? child : __pwCreateWrapper(child); return typeof child === 'string' ? child : __pwCreateWrapper(child);