How to use genConditionalExpression method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

vnode.js

Source: vnode.js Github

copy
1// 生成创建 VNode 树的表达式
2if (ast.codegenNode) {
3  genNode(ast.codegenNode, context);
4}
5else {
6  push(`null`);
7}
8
9
10function genNode(node, context) {
11  if (shared.isString(node)) {
12    context.push(node)
13    return
14  }
15  if (shared.isSymbol(node)) {
16    context.push(context.helper(node))
17    return
18  }
19  switch (node.type) {
20    case 1 /* ELEMENT */:
21    case 9 /* IF */:
22    case 11 /* FOR */:
23      genNode(node.codegenNode, context)
24      break
25    case 2 /* TEXT */:
26      genText(node, context)
27      break
28    case 4 /* SIMPLE_EXPRESSION */:
29      genExpression(node, context)
30      break
31    case 5 /* INTERPOLATION */:
32      genInterpolation(node, context)
33      break
34    case 12 /* TEXT_CALL */:
35      genNode(node.codegenNode, context)
36      break
37    case 8 /* COMPOUND_EXPRESSION */:
38      genCompoundExpression(node, context)
39      break
40    case 3 /* COMMENT */:
41      break
42    case 13 /* VNODE_CALL */:
43      genVNodeCall(node, context)
44      break
45    case 14 /* JS_CALL_EXPRESSION */:
46      genCallExpression(node, context)
47      break
48    case 15 /* JS_OBJECT_EXPRESSION */:
49      genObjectExpression(node, context)
50      break
51    case 17 /* JS_ARRAY_EXPRESSION */:
52      genArrayExpression(node, context)
53      break
54    case 18 /* JS_FUNCTION_EXPRESSION */:
55      genFunctionExpression(node, context)
56      break
57    case 19 /* JS_CONDITIONAL_EXPRESSION */:
58      genConditionalExpression(node, context)
59      break
60    case 20 /* JS_CACHE_EXPRESSION */:
61      genCacheExpression(node, context)
62      break
63    // SSR only types
64    case 21 /* JS_BLOCK_STATEMENT */:
65      genNodeList(node.body, context, true, false)
66      break
67    case 22 /* JS_TEMPLATE_LITERAL */:
68      genTemplateLiteral(node, context)
69      break
70    case 23 /* JS_IF_STATEMENT */:
71      genIfStatement(node, context)
72      break
73    case 24 /* JS_ASSIGNMENT_EXPRESSION */:
74      genAssignmentExpression(node, context)
75      break
76    case 25 /* JS_SEQUENCE_EXPRESSION */:
77      genSequenceExpression(node, context)
78      break
79    case 26 /* JS_RETURN_STATEMENT */:
80      genReturnStatement(node, context)
81      break
82  }
83}
84
85function genVNodeCall(node, context) {
86  const { push, helper, pure } = context
87  const { tag, props, children, patchFlag, dynamicProps, directives, isBlock, disableTracking } = node
88  if (directives) {
89    push(helper(WITH_DIRECTIVES) + `(`)
90  }
91  if (isBlock) {
92    push(`(${helper(OPEN_BLOCK)}(${disableTracking ? `true` : ``}), `)
93  }
94  if (pure) {
95    push(PURE_ANNOTATION)
96  }
97  push(helper(isBlock ? CREATE_BLOCK : CREATE_VNODE) + `(`, node)
98  genNodeList(genNullableArgs([tag, props, children, patchFlag, dynamicProps]), context)
99  push(`)`)
100  if (isBlock) {
101    push(`)`)
102  }
103  if (directives) {
104    push(`, `)
105    genNode(directives, context)
106    push(`)`)
107  }
108}
109
110function genNullableArgs(args) {
111  let i = args.length
112  while (i--) {
113    if (args[i] != null)
114      break
115  }
116  return args.slice(0, i + 1).map(arg => arg || `null`)
117}
118
119function genNodeList(nodes, context, multilines = false, comma = true) {
120  const { push, newline } = context
121  for (let i = 0; i < nodes.length; i++) {
122    const node = nodes[i]
123    if (shared.isString(node)) {
124      push(node)
125    }
126    else if (shared.isArray(node)) {
127      genNodeListAsArray(node, context)
128    }
129    else {
130      genNode(node, context)
131    }
132    if (i < nodes.length - 1) {
133      if (multilines) {
134        comma && push(',')
135        newline()
136      }
137      else {
138        comma && push(', ')
139      }
140    }
141  }
142}
143
144function genExpression(node, context) {
145  const { content, isStatic } = node
146  context.push(isStatic ? JSON.stringify(content) : content, node)
147}
148
149function genNodeListAsArray(nodes, context) {
150  const multilines = nodes.length > 3 || nodes.some(n => isArray(n) || !isText$1(n))
151  context.push(`[`)
152  multilines && context.indent()
153  genNodeList(nodes, context, multilines);
154  multilines && context.deindent()
155  context.push(`]`)
156}
157
158function genConditionalExpression(node, context) {
159  const { test, consequent, alternate, newline: needNewline } = node
160  const { push, indent, deindent, newline } = context
161  // 生成条件表达式
162  if (test.type === 4 /* SIMPLE_EXPRESSION */) {
163    const needsParens = !isSimpleIdentifier(test.content)
164    needsParens && push(`(`)
165    genExpression(test, context)
166    needsParens && push(`)`)
167  }
168  else {
169    push(`(`)
170    genNode(test, context)
171    push(`)`)
172  }
173  // 换行加缩进
174  needNewline && indent()
175  context.indentLevel++
176  needNewline || push(` `)
177  // 生成主逻辑代码
178  push(`? `)
179  genNode(consequent, context)
180  context.indentLevel--
181  needNewline && newline()
182  needNewline || push(` `)
183  // 生成备选逻辑代码
184  push(`: `)
185  const isNested = alternate.type === 19 /* JS_CONDITIONAL_EXPRESSION */
186  if (!isNested) {
187    context.indentLevel++
188  }
189  genNode(alternate, context)
190  if (!isNested) {
191    context.indentLevel--
192  }
193  needNewline && deindent(true /* without newline */)
194}
195
196function createVNode(type, props = null
197  ,children = null) {
198    // 处理 props 相关逻辑,标准化 class 和 style
199    // 对 vnode 类型信息编码 
200    // 创建 vnode 对象
201    // 标准化子节点,把不同数据类型的 children 转成数组或者文本类型。
202    // 添加动态 vnode 节点到 currentBlock 中
203    if (shouldTrack > 0 &&
204      !isBlockNode &&
205      currentBlock &&
206      patchFlag !== 32 /* HYDRATE_EVENTS */ &&
207      (patchFlag > 0 ||
208        shapeFlag & 128 /* SUSPENSE */ ||
209        shapeFlag & 64 /* TELEPORT */ ||
210        shapeFlag & 4 /* STATEFUL_COMPONENT */ ||
211        shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {
212      currentBlock.push(vnode);
213    }
214    return vnode
215  }
216
217  function createBlock(type, props, children, patchFlag, dynamicProps) {
218    const vnode = createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: 阻止这个 block 收集自身 */)
219    // 在 vnode 上保留当前 Block 收集的动态子节点
220    vnode.dynamicChildren = currentBlock || EMPTY_ARR
221    blockStack.pop()
222    // 当前 Block 恢复到父 Block
223    currentBlock = blockStack[blockStack.length - 1] || null
224    // 节点本身作为父 Block 收集的子节点
225    if (currentBlock) {
226      currentBlock.push(vnode)
227    }
228    return vnode
229  }
230
231  const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {
232    for (let i = 0; i < newChildren.length; i++) {
233      const oldVNode = oldChildren[i]
234      const newVNode = newChildren[i]
235      // 确定待更新节点的容器
236      const container =
237        // 对于 Fragment,我们需要提供正确的父容器
238        oldVNode.type === Fragment ||
239        // 在不同节点的情况下,将有一个替换节点,我们也需要正确的父容器
240        !isSameVNodeType(oldVNode, newVNode) ||
241        // 组件的情况,我们也需要提供一个父容器
242        oldVNode.shapeFlag & 6 /* COMPONENT */
243          ? hostParentNode(oldVNode.el)
244          :
245          // 在其他情况下,父容器实际上并没有被使用,所以这里只传递 Block 元素即可
246          fallbackContainer
247      patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true)
248    }
249  }
250  
251
252
Full Screen

gen.js

Source: gen.js Github

copy
1export const NORMAL_FUNCTION = 1 // 普通类型
2export const ASYNC_FUNCTION = 1 << 1 // Async 函数
3export const ARROW_FUNCTION = 1 << 2 // 箭头函数
4
5export const ASSIGNMENT_NODE = 1 // 赋值节点
6export const FUNCTION_NODE = 1 << 2 // 函数节点
7export const IF_NODE = 1 << 3 // if 节点
8export const FOR_NODE = 1 << 4 // for 节点
9export const FUNCTION_CALL_NODE = 1 << 5 // 函数调用节点
10export const EXPRESSION_NODE = 1 << 6 // 表达式节点
11export const TRY_CATCH_NODE = 1 << 7 // try 节点
12export const RETURN_NODE = 1 << 8 // return
13
14export default function generate(node, context) {
15  while (node) {
16    const { type } = node
17
18    switch (type) {
19      case ASSIGNMENT_NODE: {
20        genAssignment(node, context)
21        break
22      }
23      case FUNCTION_NODE: {
24        genFunction(node, context)
25        break
26      }
27      case IF_NODE: {
28        genIf(node, context)
29        break
30      }
31      case FOR_NODE: {
32        genFor(node, context)
33        break
34      }
35      case FUNCTION_CALL_NODE: {
36        genFunctionCall(node, context)
37        break
38      }
39      case TRY_CATCH_NODE: {
40        genTryCatch(node, context)
41        break
42      }
43    }
44
45    node = node.next
46  }
47}
48
49export function genAssignment(node, context) {
50  const {
51    id,
52    type,
53    data: {
54      variable: { type: varType, name },
55      value: { isStatic, content }
56    },
57    next,
58    meta
59  } = node
60
61  context.code += `let ${name} = ${
62    isStatic ? JSON.stringify(content) : content
63  };`
64}
65
66/**
67 *
68 * @param {} funNode
69 */
70export function genFunction(funNode, context) {
71  const {
72    id,
73    type,
74    data: {
75      retType,
76      funType = ASYNC_FUNCTION | ARROW_FUNCTION,
77      name,
78      args,
79      body
80    },
81    next,
82    meta
83  } = funNode
84
85  switch (funType) {
86    case NORMAL_FUNCTION: {
87      context.code += `function ${name ? name : ''}`
88      break
89    }
90    case NORMAL_FUNCTION | ASYNC_FUNCTION: {
91      context.code += `async function ${name ? name : ''}`
92      break
93    }
94    case ARROW_FUNCTION | ASYNC_FUNCTION: {
95      context.code += `async `
96      break
97    }
98  }
99
100  context.code += '('
101  for (let i = 0; args && i < args.length; i++) {
102    const { type, name } = args[i]
103
104    context.code += `${i > 0 ? ' ,' : ''}${name}`
105  }
106  context.code += `)${funType | ARROW_FUNCTION ? ' =>' : ''} {\r\n`
107
108  generate(body, context)
109
110  context.code += `\r\n}`
111}
112
113export function genIf(node, context) {
114  const {
115    id,
116    type,
117    data: { branchs },
118    next
119  } = node
120
121  for (let i = 0; branchs && i < branchs.length; i++) {
122    const { condition, body } = branchs[i]
123
124    if (i === 0) {
125      context.code += `if (`
126      genExpression(condition, context)
127      context.code += `) {\r\n`
128    } else if (condition) {
129      context.code += ` else if (`
130      genExpression(condition, context)
131      context.code += `) {\r\n`
132    } else {
133      context.code += ' else {\r\n'
134    }
135
136    generate(body, context)
137
138    context.code += '\r\n}'
139  }
140}
141
142export function genFor(node, context) {
143  const {
144    data: { assignment, condition, iterator, body }
145  } = node
146
147  context.code += 'for ('
148
149  genAssignment(assignment, context)
150  context.code += ' '
151  genConditionalExpression(condition, context)
152
153  context.code += '; '
154
155  genExpression(iterator, context)
156
157  context.code += ') {\r\n'
158
159  generate(body, context)
160
161  context.code += '\r\n}'
162}
163
164export function genFunctionCall(node, context) {
165  const {
166    data: {
167      variable: { type: varType, name: varName },
168      name,
169      args
170    }
171  } = node
172
173  context.code += `let ${name} = `
174
175  context.code += `${context.inAsync ? 'async ' : ''}${name}(`
176
177  for (let i = 0; args && i < args.length; i++) {
178    context.code += `${i > 0 ? ', ' : ''}${genExpression(args[i], context)}`
179  }
180
181  context.code += ');'
182}
183
184export function genTryCatch(node, context) {
185  const {
186    data: { tryBody, catchBody, finallyBody }
187  } = node
188
189  context.code += 'try {\r\n'
190
191  context.code += generate(tryBody, context)
192
193  context.code += '\r\n}'
194
195  if (catchBody) {
196    const { varName, body } = catchBody
197
198    context.code += `catch (${varName ? varName : ''}) {\r\n`
199    context.code += generate(body, context)
200    context.code += '\r\n}'
201  }
202
203  if (finallyBody) {
204    context.code += `finall {\r\n`
205    context.code += generate(finallyBody, context)
206    context.code += '\r\n}'
207  }
208}
209
210export function genConditionalExpression(parts, context) {
211  for (let i = 0; parts && i < parts.length; i++) {
212    const { concat, expression } = parts[i]
213
214    context.code += `${concat ? ` ${concat}` : ''}`
215    genExpression(expression, context)
216  }
217}
218
219/**
220 * 暂时直接使用js 表达式
221 * @param {*} node
222 * @param {*} context
223 */
224export function genExpression(node, context) {
225  const {
226    data: { type, content }
227  } = node
228
229  context.code += content
230}
231
Full Screen

05-genNode.js

Source: 05-genNode.js Github

copy
1
2function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
3    if (isString(node)) {
4      context.push(node)
5      return
6    }
7    if (isSymbol(node)) {
8      context.push(context.helper(node))
9      return
10    }
11    switch (node.type) {
12      case NodeTypes.ELEMENT:
13      case NodeTypes.IF:
14      case NodeTypes.FOR:
15        genNode(node.codegenNode!, context)
16        break
17      case NodeTypes.TEXT:
18        genText(node, context)
19        break
20      case NodeTypes.SIMPLE_EXPRESSION:
21        genExpression(node, context)
22        break
23      case NodeTypes.INTERPOLATION:
24        genInterpolation(node, context)
25        break
26      case NodeTypes.TEXT_CALL:
27        genNode(node.codegenNode, context)
28        break
29      case NodeTypes.COMPOUND_EXPRESSION:
30        genCompoundExpression(node, context)
31        break
32      case NodeTypes.COMMENT:
33        genComment(node, context)
34        break
35      case NodeTypes.VNODE_CALL:
36        genVNodeCall(node, context)
37        break
38  
39      case NodeTypes.JS_CALL_EXPRESSION:
40        genCallExpression(node, context)
41        break
42      case NodeTypes.JS_OBJECT_EXPRESSION:
43        genObjectExpression(node, context)
44        break
45      case NodeTypes.JS_ARRAY_EXPRESSION:
46        genArrayExpression(node, context)
47        break
48      case NodeTypes.JS_FUNCTION_EXPRESSION:
49        genFunctionExpression(node, context)
50        break
51      case NodeTypes.JS_CONDITIONAL_EXPRESSION:
52        genConditionalExpression(node, context)
53        break
54      case NodeTypes.JS_CACHE_EXPRESSION:
55        genCacheExpression(node, context)
56        break
57      case NodeTypes.JS_BLOCK_STATEMENT:
58        genNodeList(node.body, context, true, false)
59        break
60  
61      /* istanbul ignore next */
62      case NodeTypes.IF_BRANCH:
63        // noop
64        break
65  
66    }
67  }
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)