How to use genVNodeCall 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.

compiler_generateFunction.md.b1cfb2cf.lean.js

Source: compiler_generateFunction.md.b1cfb2cf.lean.js Github

copy
1import { o as n, c as s, a } from './app.547ab472.js'
2const p =
3    '{"title":"genAssets 生成组件 指令 过滤器","description":"","frontmatter":{},"headers":[{"level":2,"title":"genAssets 生成组件 指令 过滤器","slug":"genassets-生成组件-指令-过滤器"},{"level":2,"title":"genVNodeCall 生成VNode","slug":"genvnodecall-生成vnode"},{"level":2,"title":"genNode 生成Node","slug":"gennode-生成node"},{"level":2,"title":"genNodeList 生成NodeList","slug":"gennodelist-生成nodelist"},{"level":2,"title":"genHoists 生成静态提升的节点","slug":"genhoists-生成静态提升的节点"}],"relativePath":"compiler/generateFunction.md","lastUpdated":1641357564051}',
4  t = {},
5  o = a('', 13)
6t.render = function(a, p, t, e, c, u) {
7  return n(), s('div', null, [o])
8}
9export default t
10export { p as __pageData }
11
Full Screen

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

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)