How to use createSimpleExpression method in Playwright Internal

Best JavaScript code snippet using playwright-internal

codegen.js

Source:codegen.js Github

copy

Full Screen

...13 components: [],14 directives: [],15 hoists: [],16 cached: 0,17 codegenNode: createSimpleExpression(`null`, false),18 loc: 'USELESS2',19 ...options20 }21}22const locStub = {23 source: '',24 start: { line: 1, column: 1, offset: 0 },25 end: { line: 1, column: 1, offset: 0 }26};27function createArrayExpression(elements, loc = locStub) {28 return {29 type: 16 /* JS_ARRAY_EXPRESSION */,30 loc,31 elements32 };33}34function createObjectExpression(properties, loc = locStub) {35 return {36 type: 14 /* JS_OBJECT_EXPRESSION */,37 loc,38 properties39 };40}41function createObjectProperty(key, value) {42 return {43 type: 15 /* JS_PROPERTY */,44 loc: locStub,45 key: isString(key) ? createSimpleExpression(key, true) : key,46 value47 };48}49function createSimpleExpression(content, isStatic, loc = locStub, isConstant = false) {50 return {51 type: 4 /* SIMPLE_EXPRESSION */,52 loc,53 isConstant,54 content,55 isStatic56 };57}58function createInterpolation(content, loc) {59 return {60 type: 5 /* INTERPOLATION */,61 loc,62 content: isString(content)63 ? createSimpleExpression(content, false, loc)64 : content65 };66}67function createCompoundExpression(children, loc = locStub) {68 return {69 type: 8 /* COMPOUND_EXPRESSION */,70 loc,71 children72 };73}74function createCallExpression(callee, args = [], loc = locStub) {75 return {76 type: 13 /* JS_CALL_EXPRESSION */,77 loc,78 callee,79 arguments: args80 };81}82function createFunctionExpression(params, returns, newline = false, loc = locStub) {83 return {84 type: 17 /* JS_FUNCTION_EXPRESSION */,85 params,86 returns,87 newline,88 loc89 };90}91function createSequenceExpression(expressions) {92 return {93 type: 18 /* JS_SEQUENCE_EXPRESSION */,94 expressions,95 loc: locStub96 };97}98function createConditionalExpression(test, consequent, alternate) {99 return {100 type: 19 /* JS_CONDITIONAL_EXPRESSION */,101 test,102 consequent,103 alternate,104 loc: locStub105 };106}107function createCacheExpression(index, value, isVNode = false) {108 return {109 type: 20 /* JS_CACHE_EXPRESSION */,110 index,111 value,112 isVNode,113 loc: locStub114 };115}116function createElementWithCodegen(args) {117 return {118 type: 1,119 loc: locStub,120 ns: 0,121 tag: 'div',122 tagType: 0,123 isSelfClosing: false,124 props: [],125 children: [],126 codegenNode: {127 type: 13,128 loc: locStub,129 callee: CREATE_VNODE,130 arguments: args131 }132 }133}134/**135 * @function createRoot 136 * 通过上面可以发现，这个方法就是返回一个根节点。把参数合并进去137 */138const root = createRoot({139 helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]140})141const rootResult = { 142 type: 0,143 children: [],144 helpers: [ CREATE_VNODE, RESOLVE_DIRECTIVE ],145 components: [],146 directives: [],147 hoists: [],148 cached: 0,149 codegenNode: { 150 type: 4,151 loc: [null],152 isConstant: false,153 content: 'null',154 isStatic: false 155 },156 loc: 'USELESS2' 157}158/**159 * @param { Number 001 }160 * @function generate 161 * 方法入参：根节点root、module模式162 * 方法出参：ast、code163 * 方法总结：164 * 1、generate能够import helpers里面对应的模块165 */166const untest001 = generate(root, { mode: 'module' })167const output001 = { 168 ast: { 169 type: 0,170 children: [],171 helpers: [ CREATE_VNODE, RESOLVE_DIRECTIVE ],172 components: [],173 directives: [],174 hoists: [],175 cached: 0,176 codegenNode: { 177 type: 4,178 loc: [null],179 isConstant: false,180 content: 'null',181 isStatic: false 182 },183 loc: 'USELESS2' 184 },185 code: `186 import { createVNode, resolveDirective } from "vue"187 export default function render() {188 const _ctx = this189 return null190 }191 `,192 map: undefined 193}194/**195 * @symbol 196 * 关注点：我们可以看看Vue里面是如何使用symbol的197 */198function anonymous(){199 const result = `import { ${helperNameMap[CREATE_VNODE]}, ${200 helperNameMap[RESOLVE_DIRECTIVE]201 } } from "vue"`202 const CREATE_VNODE = Symbol('createVNode')203 const RESOLVE_DIRECTIVE = Symbol('resolveDirective')204 const helperNameMap = {205 [CREATE_VNODE]: 'createVNode',206 [RESOLVE_DIRECTIVE]: 'resolveDirective',207 }208 // import { createVNode, resolveDirective } from "vue"209}210/**211 * @param { Number 002 }212 * @function generate 213 * 方法入参：根节点root、function模式214 * 方法出参：ast、code215 * 方法总结：216 * 1、generate能够import helpers里面对应的模块217 * 2、并且会加上下划线的预处理218 */219const untest002 = generate(root, { mode: 'function' })220const output002 = { 221 ast: { 222 root223 },224 code: `225 const _Vue = Vue226 return function render() {227 with (this) {228 const { createVNode: _createVNode , resolveDirective: _resolveDirective } = _Vue229 return null230 }231 }`,232 map: undefined 233}234/**235 * @param { Number 003 }236 * @function generate237 * 方法入参：根节点root、function模式、前缀标志符true238 * 方法出参：ast、code239 * 方法总结：240 * 1、不包含const _Vue241 * 2、包含对helpers里面的解构赋值242 */243const untest003 = generate(root, { mode: 'function', prefixIdentifiers: true })244const output003 = { 245 ast: { 246 root247 },248 code: `249 const { createVNode, resolveDirective } = Vue250 return function render() {251 const _ctx = this252 return null253 }254 `,255 map: undefined 256}257/**258 * @param { Number 004 }259 * @function generate260 * 方法入参：根节点root2、function模式261 * 方法出参：ast、code262 * 方法总结：263 * 1、能够根据根节点root2里面的components、directives，在代码中正确的const引出264 */265const root2 = createRoot({266 components: [`Foo`, `bar-baz`, `barbaz`],267 directives: [`my_dir`]268})269const untest004 = generate(root2, { mode: 'function' })270const output004 = { 271 ast: { 272 components: [ 'Foo', 'bar-baz', 'barbaz' ],273 directives: [ 'my_dir' ],274 ...root2275 },276 code: `277 return function render() {278 with (this) {279 const _component_Foo = _resolveComponent("Foo")280 const _component_bar_baz = _resolveComponent("bar-baz")281 const _component_barbaz = _resolveComponent("barbaz")282 const _directive_my_dir = _resolveDirective("my_dir")283 return null284 }285 }286 `,287 map: undefined 288}289/**290 * @param { Number 005 }291 * @function generate292 * 方法入参：hoists：字符串293 * 方法出参：ast、code294 * 方法总结：295 * 1、createSimpleExpression 创建一个声明字符串的表达式296 * 2、createObjectExpression 创建一个对象297 * 3、createObjectProperty 创建一个对象的属性298 */299const root3 = createRoot({300 hoists: [301 createSimpleExpression(`hello`, false, locStub),302 createObjectExpression(303 [304 createObjectProperty(305 createSimpleExpression(`id`, true, locStub),306 createSimpleExpression(`foo`, true, locStub)307 )308 ],309 locStub310 )311 ]312})313const untest005 = generate(root3)314const output005 = { 315 ast: { 316 root317 },318 code:`319 const _hoisted_1 = hello320 const _hoisted_2 = { id: "foo" }321 return function render() {322 with (this) {323 return null324 }325 }326 `,327 map: undefined 328}329/**330 * @param { Number 006 }331 * @function generate prefixIdentifiers332 * 方法入参：空root，前缀表达式false333 * 方法出参：ast、code334 * 方法总结：335 * 1、包含const _ctx = this 336 */337const untest006 = generate(createRoot(), { prefixIdentifiers: true })338const output006 = { 339 ast: { 340 root341 },342 code:`343 return function render() { 344 const _ctx = this 345 return null346 }347 `,348 map: undefined 349}350/**351 * @param { Number 007 }352 * @function generate 353 * 方法入参：codegenNode354 * 方法出参：ast、code355 * 方法总结：356 * 1、针对NodeTypes.TEXT类型，能够返回codegenNode里面的content字段357 */358const untest007 = generate(359 createRoot({360 codegenNode: {361 type: 2,362 content: 'hello',363 loc: locStub364 }365 })366)367var output007 = { 368 ast: { 369 root370 },371 code:`372 return function render() {373 with (this) {374 return "hello" 375 }376 }377 `,378 map: undefined 379}380/**381 * @param { Number 008 }382 * @function generate interpolation383 * 方法入参：codegenNode 创建插值384 * 方法出参：ast、code385 * 方法总结：386 * 1、针对createInterpolation，能够返回参数的toString387 */388const untest008 = generate(389 createRoot({390 codegenNode: createInterpolation(`hello`, locStub)391 })392)393const output008 = {394 ast: {395 },396 code:`397 return function render() {398 with (this) {399 return _toString(hello) 400 }401 }402 `403}404/**405 * @param { Number 009 }406 * @function generate 407 * 方法入参：codegenNode 创建插值408 * 方法出参：ast、code409 * 方法总结：410 * 1、针对NodeTypes.COMMENT，能够返回参数的_createCommentVNode411 */412const untest009 = generate(413 createRoot({414 codegenNode: {415 type: 3,416 content: 'foo',417 loc: {}418 }419 })420)421const output009 = { 422 ast: {423 },424 code: `425 return function render() {426 with (this) {427 return _createCommentVNode("foo")428 }429 }430 `,431 map: undefined 432}433/**434 * @param { Number 010 }435 * @function generate 436 * 方法入参：codegenNode 创建复合表达式437 * 方法出参：ast、code438 * 方法总结：439 * 1、针对createCompoundExpression，能够返回正确的前缀 + toString440 */441const untest010 = generate(442 createRoot({443 codegenNode: createCompoundExpression([444 `_ctx.`,445 createSimpleExpression(`foo`, false, locStub),446 ` + `,447 {448 type: 5,449 loc: locStub,450 content: createSimpleExpression(`bar`, false, locStub)451 }452 ])453 })454)455const output010 = { 456 ast: {457 },458 code: `459 return function render() {460 with (this) {461 return _ctx.foo + _toString(bar)462 }463 }464 `,465 map: undefined 466}467/**468 * @param { Number 011 }469 * @function generate 470 * 方法入参：codegenNode 创建序列表达式471 * 方法出参：ast、code472 * 方法总结：473 * 1、NodeTypes.IF474 */475const untest011 = generate(476 createRoot({477 codegenNode: {478 type: 9,479 loc: locStub,480 branches: [],481 codegenNode: createSequenceExpression([482 createSimpleExpression('foo', false),483 createSimpleExpression('bar', false)484 ])485 }486 })487)488const output011 = { 489 ast: {490 },491 code:492 `return function render() {493 with (this) {494 return (foo, bar)495 }496 }497 `,498 map: undefined 499}500/**501 * @param { Number 012 }502 * @function generate 503 * 方法入参：codegenNode 创建序列表达式504 * 方法出参：ast、code505 * 方法总结：506 * 1、针对NodeTypes.IF507 */508const expression012 = generate(509 createRoot({510 codegenNode: {511 type: 11,512 loc: locStub,513 source: createSimpleExpression('foo', false),514 valueAlias: undefined,515 keyAlias: undefined,516 objectIndexAlias: undefined,517 children: [],518 codegenNode: createSequenceExpression([519 createSimpleExpression('foo', false),520 createSimpleExpression('bar', false)521 ])522 }523 })524)525const result012 = { ast:526 { type: 0,527 children: [],528 helpers: [],529 components: [],530 directives: [],531 hoists: [],532 cached: 0,533 codegenNode:534 { type: 11,535 loc: [Object],536 source: [Object],537 valueAlias: undefined,538 keyAlias: undefined,539 objectIndexAlias: undefined,540 children: [],541 codegenNode: [Object] },542 loc: 'USELESS2' },543 code:544 `545 return function render() {546 with (this) {547 return (foo, bar)548 }549 }550 `,551 map: undefined }552 /**553 * @param { Number 013 }554 * @function generate 555 * 方法入参：556 * 方法出参：557 * 方法总结：558 * 1、559 */560const expression013 = generate(561 createRoot({562 codegenNode: createElementWithCodegen([563 // string564 `"div"`,565 // ObjectExpression566 createObjectExpression(567 [568 createObjectProperty(569 createSimpleExpression(`id`, true, locStub),570 createSimpleExpression(`foo`, true, locStub)571 ),572 createObjectProperty(573 createSimpleExpression(`prop`, false, locStub),574 createSimpleExpression(`bar`, false, locStub)575 ),576 // compound expression as computed key577 createObjectProperty(578 {579 type: 8,580 loc: locStub,581 children: [582 `foo + `,583 createSimpleExpression(`bar`, false, locStub)584 ]585 },586 createSimpleExpression(`bar`, false, locStub)587 )588 ],589 locStub590 ),591 // ChildNode[]592 [593 createElementWithCodegen([594 `"p"`,595 createObjectExpression(596 [597 createObjectProperty(598 // should quote the key!599 createSimpleExpression(`some-key`, true, locStub),600 createSimpleExpression(`foo`, true, locStub)601 )602 ],603 locStub604 )605 ])606 ],607 // flag608 (1 << 4) + ''609 ])610 })611)612const result013 = { ast:613 { type: 0,614 children: [],615 helpers: [],616 components: [],617 directives: [],618 hoists: [],619 cached: 0,620 codegenNode:621 { type: 1,622 loc: [Object],623 ns: 0,624 tag: 'div',625 tagType: 0,626 isSelfClosing: false,627 props: [],628 children: [],629 codegenNode: [Object] },630 loc: 'USELESS2' },631 code:632 `633 return function render() {634 with (this) {635 return _createVNode("div", {636 id: "foo",637 [prop]: bar,638 [foo + bar]: bar639 }, [640 _createVNode("p", { "some-key": "foo" })641 ], 16)642 }643 }644 `,645 map: undefined }646/**647 * @param { Number 014 }648 * @function generate 649 * 方法入参：650 * 方法出参：651 * 方法总结：652 * 1、653 */654const expression014 = generate(655 createRoot({656 codegenNode: createArrayExpression([657 createSimpleExpression(`foo`, false),658 createCallExpression(`bar`, [`baz`])659 ])660 })661)662const result014 = { ast:663 { type: 0,664 children: [],665 helpers: [],666 components: [],667 directives: [],668 hoists: [],669 cached: 0,670 codegenNode: { type: 16, loc: undefined, elements: [Array] },671 loc: 'USELESS2' },672 code:673 `674 return function render() {675 with (this) {676 return [677 foo,678 bar(baz)679 ]680 }681 }682 `,683 map: undefined }684/**685 * @param { Number 015 }686 * @function generate 687 * 方法入参：688 * 方法出参：689 * 方法总结：690 * 1、691 */692const expression015 = generate(693 createRoot({694 codegenNode: createSequenceExpression([695 createSimpleExpression(`foo`, false),696 createCallExpression(`bar`, [`baz`])697 ])698 })699)700const result015 = { ast:701 { type: 0,702 children: [],703 helpers: [],704 components: [],705 directives: [],706 hoists: [],707 cached: 0,708 codegenNode: { type: 18, expressions: [Array], loc: [Object] },709 loc: 'USELESS2' },710 code:711 `712 return function render() {713 with (this) {714 return (foo, bar(baz))715 }716 }717 `,718 map: undefined }719/**720 * @param { Number 016 }721 * @function generate 722 * 方法入参：723 * 方法出参：724 * 方法总结：725 * 1、726 */727const expression016 = generate(728 createRoot({729 codegenNode: createConditionalExpression(730 createSimpleExpression(`ok`, false),731 createCallExpression(`foo`),732 createConditionalExpression(733 createSimpleExpression(`orNot`, false),734 createCallExpression(`bar`),735 createCallExpression(`baz`)736 )737 )738 })739)740const result016 = { ast:741 { type: 0,742 children: [],743 helpers: [],744 components: [],745 directives: [],746 hoists: [],747 cached: 0,748 codegenNode:749 { type: 19,750 test: [Object],751 consequent: [Object],752 alternate: [Object],753 loc: [Object] },754 loc: 'USELESS2' },755 code:756 `757 return function render() {758 with (this) {759 return ok760 ? foo()761 : orNot762 ? bar()763 : baz()764 }765 }766 `,767 map: undefined }768/**769 * @param { Number 017 }770 * @function generate 771 * 方法入参：772 * 方法出参：773 * 方法总结：774 * 1、775 */776const expression017 = generate(777 createRoot({778 cached: 1,779 codegenNode: createCacheExpression(780 1,781 createSimpleExpression(`foo`, false)782 )783 }),784 {785 mode: 'module',786 prefixIdentifiers: true787 }788)789const result017 = { ast:790 { type: 0,791 children: [],792 helpers: [],793 components: [],794 directives: [],795 hoists: [],796 cached: 1,797 codegenNode:798 { type: 20,799 index: 1,800 value: [Object],801 isVNode: false,802 loc: [Object] },803 loc: 'USELESS2' },804 code:805 `806 export default function render() {807 const _ctx = this808 const _cache = _ctx.$cache809 return _cache[1] || (_cache[1] = foo)810 }811 `,812 map: undefined }813/**814 * @param { Number 018 }815 * @function generate 816 * 方法入参：817 * 方法出参：818 * 方法总结：819 * 1、820 */821const expression018 = generate(822 createRoot({823 cached: 1,824 codegenNode: createCacheExpression(825 1,826 createSimpleExpression(`foo`, false),827 true828 )829 }),830 {831 mode: 'module',832 prefixIdentifiers: true833 }834)835const result018 = { ast:836 { type: 0,837 children: [],838 helpers: [],839 components: [],840 directives: [],...

Full Screen

Full Screen

~codegen.js

Source:~codegen.js Github

copy

Full Screen

...13 components: [],14 directives: [],15 hoists: [],16 cached: 0,17 codegenNode: createSimpleExpression(`null`, false),18 loc: 'USELESS2',19 ...options20 }21}22const locStub = {23 source: '',24 start: { line: 1, column: 1, offset: 0 },25 end: { line: 1, column: 1, offset: 0 }26};27function _generate(ast, options){28 return {29 ast,30 code: context.code,31 map: undefined //context.map ? context.map.toJSON() : undefined32 }33}34/**35 * @function36 * 返回一个root节点37 */38function createArrayExpression(elements, loc = locStub) {39 return {40 type: 16 /* JS_ARRAY_EXPRESSION */,41 loc,42 elements43 };44}45function createObjectExpression(properties, loc = locStub) {46 return {47 type: 14 /* JS_OBJECT_EXPRESSION */,48 loc,49 properties50 };51}52function createObjectProperty(key, value) {53 return {54 type: 15 /* JS_PROPERTY */,55 loc: locStub,56 key: isString(key) ? createSimpleExpression(key, true) : key,57 value58 };59}60function createSimpleExpression(content, isStatic, loc = locStub, isConstant = false) {61 return {62 type: 4 /* SIMPLE_EXPRESSION */,63 loc,64 isConstant,65 content,66 isStatic67 };68}69function createInterpolation(content, loc) {70 return {71 type: 5 /* INTERPOLATION */,72 loc,73 content: isString(content)74 ? createSimpleExpression(content, false, loc)75 : content76 };77}78function createCompoundExpression(children, loc = locStub) {79 return {80 type: 8 /* COMPOUND_EXPRESSION */,81 loc,82 children83 };84}85function createCallExpression(callee, args = [], loc = locStub) {86 return {87 type: 13 /* JS_CALL_EXPRESSION */,88 loc,89 callee,90 arguments: args91 };92}93function createFunctionExpression(params, returns, newline = false, loc = locStub) {94 return {95 type: 17 /* JS_FUNCTION_EXPRESSION */,96 params,97 returns,98 newline,99 loc100 };101}102function createSequenceExpression(expressions) {103 return {104 type: 18 /* JS_SEQUENCE_EXPRESSION */,105 expressions,106 loc: locStub107 };108}109function createConditionalExpression(test, consequent, alternate) {110 return {111 type: 19 /* JS_CONDITIONAL_EXPRESSION */,112 test,113 consequent,114 alternate,115 loc: locStub116 };117}118function createCacheExpression(index, value, isVNode = false) {119 return {120 type: 20 /* JS_CACHE_EXPRESSION */,121 index,122 value,123 isVNode,124 loc: locStub125 };126}127function createElementWithCodegen(args) {128 return {129 type: 1,130 loc: locStub,131 ns: 0,132 tag: 'div',133 tagType: 0,134 isSelfClosing: false,135 props: [],136 children: [],137 codegenNode: {138 type: 13,139 loc: locStub,140 callee: CREATE_VNODE,141 arguments: args142 }143 }144}145/**146 * @function createRoot 147 * 通过上面可以发现，这个方法就是返回一个根节点。把参数合并进去148 */149const root = createRoot({150 helpers: [CREATE_VNODE, RESOLVE_DIRECTIVE]151})152const rootResult = { 153 type: 0,154 helpers: [ CREATE_VNODE, RESOLVE_DIRECTIVE ],155 codegenNode: { 156 type: 4,157 loc: [null],158 isConstant: false,159 content: 'null',160 isStatic: false 161 },162 loc: 'USELESS2' 163}164/**165 * @param { Number 001 }166 * @function generate 167 * 方法入参：根节点root、module模式168 * 方法出参：ast、code169 * 方法总结：170 * 1、generate能够import helpers里面对应的模块171 */172const untest001 = generate(root, { mode: 'module' })173const output001 = { 174 ast: { 175 type: 0,176 children: [],177 helpers: [ CREATE_VNODE, RESOLVE_DIRECTIVE ],178 components: [],179 directives: [],180 hoists: [],181 cached: 0,182 codegenNode: { 183 type: 4,184 loc: [null],185 isConstant: false,186 content: 'null',187 isStatic: false 188 },189 loc: 'USELESS2' 190 },191 code: `192 import { createVNode, resolveDirective } from "vue"193 export default function render() {194 const _ctx = this195 return null196 }197 `,198 map: undefined 199}200/**201 * @symbol 202 * 关注点：我们可以看看Vue里面是如何使用symbol的203 */204function anonymous(){205 const result = `import { ${helperNameMap[CREATE_VNODE]}, ${206 helperNameMap[RESOLVE_DIRECTIVE]207 } } from "vue"`208 const CREATE_VNODE = Symbol('createVNode')209 const RESOLVE_DIRECTIVE = Symbol('resolveDirective')210 const helperNameMap = {211 [CREATE_VNODE]: 'createVNode',212 [RESOLVE_DIRECTIVE]: 'resolveDirective',213 }214 // import { createVNode, resolveDirective } from "vue"215}216/**217 * @param { Number 002 }218 * @function generate 219 * 方法入参：根节点root、function模式220 * 方法出参：ast、code221 * 方法总结：222 * 1、generate能够import helpers里面对应的模块223 * 2、并且会加上下划线的预处理224 */225const untest002 = generate(root, { mode: 'function' })226const output002 = { 227 ast: { 228 root229 },230 code: `231 const _Vue = Vue232 return function render() {233 with (this) {234 const { createVNode: _createVNode , resolveDirective: _resolveDirective } = _Vue235 return null236 }237 }`,238 map: undefined 239}240/**241 * @param { Number 003 }242 * @function generate243 * 方法入参：根节点root、function模式、前缀标志符true244 * 方法出参：ast、code245 * 方法总结：246 * 1、不包含const _Vue247 * 2、包含对helpers里面的解构赋值248 */249const untest003 = generate(root, { mode: 'function', prefixIdentifiers: true })250const output003 = { 251 ast: { 252 root253 },254 code: `255 const { createVNode, resolveDirective } = Vue256 return function render() {257 const _ctx = this258 return null259 }260 `,261 map: undefined 262}263/**264 * @param { Number 004 }265 * @function generate266 * 方法入参：根节点root2、function模式267 * 方法出参：ast、code268 * 方法总结：269 * 1、能够根据根节点root2里面的components、directives，在代码中正确的const引出270 */271const root2 = createRoot({272 components: [`Foo`, `bar-baz`, `barbaz`],273 directives: [`my_dir`]274})275const untest004 = generate(root2, { mode: 'function' })276const output004 = { 277 ast: { 278 components: [ 'Foo', 'bar-baz', 'barbaz' ],279 directives: [ 'my_dir' ],280 ...root2281 },282 code: `283 return function render() {284 with (this) {285 const _component_Foo = _resolveComponent("Foo")286 const _component_bar_baz = _resolveComponent("bar-baz")287 const _component_barbaz = _resolveComponent("barbaz")288 const _directive_my_dir = _resolveDirective("my_dir")289 return null290 }291 }292 `,293 map: undefined 294}295/**296 * @param { Number 005 }297 * @function generate298 * 方法入参：hoists：字符串299 * 方法出参：ast、code300 * 方法总结：301 * 1、createSimpleExpression 创建一个声明字符串的表达式302 * 2、createObjectExpression 创建一个对象303 * 3、createObjectProperty 创建一个对象的属性304 */305const root3 = createRoot({306 hoists: [307 createSimpleExpression(`hello`, false, locStub),308 createObjectExpression(309 [310 createObjectProperty(311 createSimpleExpression(`id`, true, locStub),312 createSimpleExpression(`foo`, true, locStub)313 )314 ],315 locStub316 )317 ]318})319const untest005 = generate(root3)320const output005 = { 321 ast: { 322 root323 },324 code:`325 const _hoisted_1 = hello326 const _hoisted_2 = { id: "foo" }327 return function render() {328 with (this) {329 return null330 }331 }332 `,333 map: undefined 334}335/**336 * @param { Number 006 }337 * @function generate prefixIdentifiers338 * 方法入参：空root，前缀表达式false339 * 方法出参：ast、code340 * 方法总结：341 * 1、包含const _ctx = this 342 */343const untest006 = generate(createRoot(), { prefixIdentifiers: true })344const output006 = { 345 ast: { 346 root347 },348 code:`349 return function render() { 350 const _ctx = this 351 return null352 }353 `,354 map: undefined 355}356/**357 * @param { Number 007 }358 * @function generate 359 * 方法入参：codegenNode360 * 方法出参：ast、code361 * 方法总结：362 * 1、针对NodeTypes.TEXT类型，能够返回codegenNode里面的content字段363 */364const untest007 = generate(365 createRoot({366 codegenNode: {367 type: 2,368 content: 'hello',369 loc: locStub370 }371 })372)373var output007 = { 374 ast: { 375 root376 },377 code:`378 return function render() {379 with (this) {380 return "hello" 381 }382 }383 `,384 map: undefined 385}386/**387 * @param { Number 008 }388 * @function generate interpolation389 * 方法入参：codegenNode 创建插值390 * 方法出参：ast、code391 * 方法总结：392 * 1、针对createInterpolation，能够返回参数的toString393 */394const untest008 = generate(395 createRoot({396 codegenNode: createInterpolation(`hello`, locStub)397 })398)399const output008 = {400 ast: {401 },402 code:`403 return function render() {404 with (this) {405 return _toString(hello) 406 }407 }408 `409}410/**411 * @param { Number 009 }412 * @function generate 413 * 方法入参：codegenNode 创建插值414 * 方法出参：ast、code415 * 方法总结：416 * 1、针对NodeTypes.COMMENT，能够返回参数的_createCommentVNode417 */418const untest009 = generate(419 createRoot({420 codegenNode: {421 type: 3,422 content: 'foo',423 loc: {}424 }425 })426)427const output009 = { 428 ast: {429 },430 code: `431 return function render() {432 with (this) {433 return _createCommentVNode("foo")434 }435 }436 `,437 map: undefined 438}439/**440 * @param { Number 010 }441 * @function generate 442 * 方法入参：codegenNode 创建复合表达式443 * 方法出参：ast、code444 * 方法总结：445 * 1、针对createCompoundExpression，能够返回正确的前缀 + toString446 */447const untest010 = generate(448 createRoot({449 codegenNode: createCompoundExpression([450 `_ctx.`,451 createSimpleExpression(`foo`, false, locStub),452 ` + `,453 {454 type: 5,455 loc: locStub,456 content: createSimpleExpression(`bar`, false, locStub)457 }458 ])459 })460)461const output010 = { 462 ast: {463 },464 code: `465 return function render() {466 with (this) {467 return _ctx.foo + _toString(bar)468 }469 }470 `,471 map: undefined 472}473/**474 * @param { Number 011 }475 * @function generate 476 * 方法入参：codegenNode 创建序列表达式477 * 方法出参：ast、code478 * 方法总结：479 * 1、针对NodeTypes.IF，能返回序列表达式参数480 */481const untest011 = generate(482 createRoot({483 codegenNode: {484 type: 9,485 loc: locStub,486 branches: [],487 codegenNode: createSequenceExpression([488 createSimpleExpression('foo', false),489 createSimpleExpression('bar', false)490 ])491 }492 })493)494const output011 = { 495 ast: {496 },497 code:498 `return function render() {499 with (this) {500 return (foo, bar)501 }502 }503 `,504 map: undefined 505}506/**507 * @param { Number 012 }508 * @function generate 509 * 方法入参：codegenNode 创建序列表达式510 * 方法出参：ast、code511 * 方法总结：512 * 1、针对NodeTypes.FOR，能返回序列表达式参数513 */514const untest012 = generate(515 createRoot({516 codegenNode: {517 type: 11,518 loc: locStub,519 source: createSimpleExpression('foo', false),520 valueAlias: undefined,521 keyAlias: undefined,522 objectIndexAlias: undefined,523 children: [],524 codegenNode: createSequenceExpression([525 createSimpleExpression('foo', false),526 createSimpleExpression('bar', false)527 ])528 }529 })530)531const output012 = { 532 ast: {533 },534 code:`535 return function render() {536 with (this) {537 return (foo, bar)538 }539 }540 `,541 map: undefined 542}543 /**544 * @param { Number 013 }545 * @function generate 546 * 方法入参：若干方法，创建vnode547 * 方法出参：ast、code548 * 方法总结：549 * 0、createElementWithCodegen 根据Codegen创建对象550 * 1、createSimpleExpression 创建一个声明字符串的表达式551 * 2、createObjectExpression 创建一个对象552 * 3、createObjectProperty 创建一个对象的属性553 */554const untest013 = generate(555 createRoot({556 codegenNode: createElementWithCodegen([557 // string558 `"div"`,559 // ObjectExpression560 createObjectExpression(561 [562 createObjectProperty(563 createSimpleExpression(`id`, true, locStub),564 createSimpleExpression(`foo`, true, locStub)565 ),566 createObjectProperty(567 createSimpleExpression(`prop`, false, locStub),568 createSimpleExpression(`bar`, false, locStub)569 ),570 // compound expression as computed key571 createObjectProperty(572 {573 type: 8,574 loc: locStub,575 children: [576 `foo + `,577 createSimpleExpression(`bar`, false, locStub)578 ]579 },580 createSimpleExpression(`bar`, false, locStub)581 )582 ],583 locStub584 ),585 // ChildNode[]586 [587 createElementWithCodegen([588 `"p"`,589 createObjectExpression(590 [591 createObjectProperty(592 // should quote the key!593 createSimpleExpression(`some-key`, true, locStub),594 createSimpleExpression(`foo`, true, locStub)595 )596 ],597 locStub598 )599 ])600 ],601 // flag602 (1 << 4) + ''603 ])604 })605)606const output013 = { 607 ast: {608 },609 code: `610 return function render() {611 with (this) {612 return _createVNode("div", {613 id: "foo",614 [prop]: bar,615 [foo + bar]: bar616 }, [617 _createVNode("p", { "some-key": "foo" })618 ], 16)619 }620 }621 `,622 map: undefined 623}624/**625 * @param { Number 014 }626 * @function generate 627 * 方法入参：createArrayExpression 创建数组表达式628 * 方法出参：ast、code629 * 方法总结：630 * 1、能返回正确的数组表达式631 */632const untest014 = generate(633 createRoot({634 codegenNode: createArrayExpression([635 createSimpleExpression(`foo`, false),636 createCallExpression(`bar`, [`baz`])637 ])638 })639)640const output014 = { 641 ast:{642 },643 code:`644 return function render() {645 with (this) {646 return [647 foo,648 bar(baz)649 ]650 }651 }652 `,653 map: undefined 654}655/**656 * @param { Number 015 }657 * @function generate 658 * 方法入参：createSequenceExpression 创建序列表达式659 * 方法出参：ast、code660 * 方法总结：661 * 1、能返回正确的序列表达式662 */663const untest015 = generate(664 createRoot({665 codegenNode: createSequenceExpression([666 createSimpleExpression(`foo`, false),667 createCallExpression(`bar`, [`baz`])668 ])669 })670)671const output015 = { 672 ast: { 673 },674 code:675 `676 return function render() {677 with (this) {678 return (foo, bar(baz))679 }680 }681 `,682 map: undefined 683}684/**685 * @param { Number 016 }686 * @function generate 687 * 方法入参：createConditionalExpression 创建条件表达式688 * 方法出参：ast、code689 * 方法总结：690 * 1、能返回正确的条件表达式691 */692const untest016 = generate(693 createRoot({694 codegenNode: createConditionalExpression(695 createSimpleExpression(`ok`, false),696 createCallExpression(`foo`),697 createConditionalExpression(698 createSimpleExpression(`orNot`, false),699 createCallExpression(`bar`),700 createCallExpression(`baz`)701 )702 )703 })704)705const output016 = { 706 ast: {707 708 },709 code:`710 return function render() {711 with (this) {712 return ok713 ? foo()714 : orNot715 ? bar()716 : baz()717 }718 }719 `,720 map: undefined 721}722/**723 * @param { Number 017 }724 * @function generate 725 * 方法入参：createCacheExpression 创建缓存表达式726 * 方法出参：ast、code727 * 方法总结：728 * 1、能返回正确的缓存表达式729 */730const untest017 = generate(731 createRoot({732 cached: 1,733 codegenNode: createCacheExpression(734 1,735 createSimpleExpression(`foo`, false)736 )737 }),738 {739 mode: 'module',740 prefixIdentifiers: true741 }742)743const output017 = { 744 ast: {745 },746 code: `747 export default function render() {748 const _ctx = this749 const _cache = _ctx.$cache750 return _cache[1] || (_cache[1] = foo)751 }752 `,753 map: undefined 754}755/**756 * @param { Number 018 }757 * @function generate 758 * 方法入参：createCacheExpression 创建缓存表达式，多了一个true759 * 方法出参：ast、code760 * 方法总结：761 * 1、能返回正确的缓存表达式762 * 2、多了一个setBlockTracking763 */764const untest018 = generate(765 createRoot({766 cached: 1,767 codegenNode: createCacheExpression(768 1,769 createSimpleExpression(`foo`, false),770 true771 )772 }),773 {774 mode: 'module',775 prefixIdentifiers: true776 }777)778const output018 = { 779 ast: {780 },781 code: `782 export default function render() {783 const _ctx = this...

Full Screen

Full Screen

codegen.spec.js

Source:codegen.spec.js Github

copy

Full Screen

...16var testUtils_1 = require("./testUtils");17var shared_1 = require("@vue/shared");18function createRoot(options) {19 if (options === void 0) { options = {}; }20 return __assign({ type: 0, children: [], helpers: [], components: [], directives: [], hoists: [], cached: 0, codegenNode: src_1.createSimpleExpression("null", false), loc: src_1.locStub }, options);21}22describe('compiler: codegen', function () {23 test('module mode preamble', function () {24 var root = createRoot({25 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]26 });27 var code = src_1.generate(root, { mode: 'module' }).code;28 expect(code).toMatch("import { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } from \"vue\"");29 expect(code).toMatchSnapshot();30 });31 test('function mode preamble', function () {32 var root = createRoot({33 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]34 });35 var code = src_1.generate(root, { mode: 'function' }).code;36 expect(code).toMatch("const _Vue = Vue");37 expect(code).toMatch("const { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ": _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + ": _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } = _Vue");38 expect(code).toMatchSnapshot();39 });40 test('function mode preamble w/ prefixIdentifiers: true', function () {41 var root = createRoot({42 helpers: [runtimeHelpers_1.CREATE_VNODE, runtimeHelpers_1.RESOLVE_DIRECTIVE]43 });44 var code = src_1.generate(root, {45 mode: 'function',46 prefixIdentifiers: true47 }).code;48 expect(code).not.toMatch("const _Vue = Vue");49 expect(code).toMatch("const { " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + ", " + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + " } = Vue");50 expect(code).toMatchSnapshot();51 });52 test('assets', function () {53 var root = createRoot({54 components: ["Foo", "bar-baz", "barbaz"],55 directives: ["my_dir"]56 });57 var code = src_1.generate(root, { mode: 'function' }).code;58 expect(code).toMatch("const _component_Foo = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"Foo\")\n");59 expect(code).toMatch("const _component_bar_baz = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"bar-baz\")\n");60 expect(code).toMatch("const _component_barbaz = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_COMPONENT] + "(\"barbaz\")\n");61 expect(code).toMatch("const _directive_my_dir = _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.RESOLVE_DIRECTIVE] + "(\"my_dir\")\n");62 expect(code).toMatchSnapshot();63 });64 test('hoists', function () {65 var root = createRoot({66 hoists: [67 src_1.createSimpleExpression("hello", false, src_1.locStub),68 src_1.createObjectExpression([69 src_1.createObjectProperty(src_1.createSimpleExpression("id", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub))70 ], src_1.locStub)71 ]72 });73 var code = src_1.generate(root).code;74 expect(code).toMatch("const _hoisted_1 = hello");75 expect(code).toMatch("const _hoisted_2 = { id: \"foo\" }");76 expect(code).toMatchSnapshot();77 });78 test('prefixIdentifiers: true should inject _ctx statement', function () {79 var code = src_1.generate(createRoot(), { prefixIdentifiers: true }).code;80 expect(code).toMatch("const _ctx = this\n");81 expect(code).toMatchSnapshot();82 });83 test('static text', function () {84 var code = src_1.generate(createRoot({85 codegenNode: {86 type: 2,87 content: 'hello',88 loc: src_1.locStub89 }90 })).code;91 expect(code).toMatch("return \"hello\"");92 expect(code).toMatchSnapshot();93 });94 test('interpolation', function () {95 var code = src_1.generate(createRoot({96 codegenNode: src_1.createInterpolation("hello", src_1.locStub)97 })).code;98 expect(code).toMatch("return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.TO_STRING] + "(hello)");99 expect(code).toMatchSnapshot();100 });101 test('comment', function () {102 var code = src_1.generate(createRoot({103 codegenNode: {104 type: 3,105 content: 'foo',106 loc: src_1.locStub107 }108 })).code;109 expect(code).toMatch("return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_COMMENT] + "(\"foo\")");110 expect(code).toMatchSnapshot();111 });112 test('compound expression', function () {113 var code = src_1.generate(createRoot({114 codegenNode: src_1.createCompoundExpression([115 "_ctx.",116 src_1.createSimpleExpression("foo", false, src_1.locStub),117 " + ",118 {119 type: 5,120 loc: src_1.locStub,121 content: src_1.createSimpleExpression("bar", false, src_1.locStub)122 }123 ])124 })).code;125 expect(code).toMatch("return _ctx.foo + _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.TO_STRING] + "(bar)");126 expect(code).toMatchSnapshot();127 });128 test('ifNode', function () {129 var code = src_1.generate(createRoot({130 codegenNode: {131 type: 9,132 loc: src_1.locStub,133 branches: [],134 codegenNode: src_1.createSequenceExpression([135 src_1.createSimpleExpression('foo', false),136 src_1.createSimpleExpression('bar', false)137 ])138 }139 })).code;140 expect(code).toMatch("return (foo, bar)");141 expect(code).toMatchSnapshot();142 });143 test('forNode', function () {144 var code = src_1.generate(createRoot({145 codegenNode: {146 type: 11,147 loc: src_1.locStub,148 source: src_1.createSimpleExpression('foo', false),149 valueAlias: undefined,150 keyAlias: undefined,151 objectIndexAlias: undefined,152 children: [],153 codegenNode: src_1.createSequenceExpression([154 src_1.createSimpleExpression('foo', false),155 src_1.createSimpleExpression('bar', false)156 ])157 }158 })).code;159 expect(code).toMatch("return (foo, bar)");160 expect(code).toMatchSnapshot();161 });162 test('Element (callExpression + objectExpression + TemplateChildNode[])', function () {163 var code = src_1.generate(createRoot({164 codegenNode: testUtils_1.createElementWithCodegen([165 "\"div\"",166 src_1.createObjectExpression([167 src_1.createObjectProperty(src_1.createSimpleExpression("id", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub)),168 src_1.createObjectProperty(src_1.createSimpleExpression("prop", false, src_1.locStub), src_1.createSimpleExpression("bar", false, src_1.locStub)),169 src_1.createObjectProperty({170 type: 8,171 loc: src_1.locStub,172 children: [173 "foo + ",174 src_1.createSimpleExpression("bar", false, src_1.locStub)175 ]176 }, src_1.createSimpleExpression("bar", false, src_1.locStub))177 ], src_1.locStub),178 [179 testUtils_1.createElementWithCodegen([180 "\"p\"",181 src_1.createObjectExpression([182 src_1.createObjectProperty(src_1.createSimpleExpression("some-key", true, src_1.locStub), src_1.createSimpleExpression("foo", true, src_1.locStub))183 ], src_1.locStub)184 ])185 ],186 shared_1.PatchFlags.FULL_PROPS + ''187 ])188 })).code;189 expect(code).toMatch("\n return _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + "(\"div\", {\n id: \"foo\",\n [prop]: bar,\n [foo + bar]: bar\n }, [\n _" + runtimeHelpers_1.helperNameMap[runtimeHelpers_1.CREATE_VNODE] + "(\"p\", { \"some-key\": \"foo\" })\n ], " + shared_1.PatchFlags.FULL_PROPS + ")");190 expect(code).toMatchSnapshot();191 });192 test('ArrayExpression', function () {193 var code = src_1.generate(createRoot({194 codegenNode: src_1.createArrayExpression([195 src_1.createSimpleExpression("foo", false),196 src_1.createCallExpression("bar", ["baz"])197 ])198 })).code;199 expect(code).toMatch("return [\n foo,\n bar(baz)\n ]");200 expect(code).toMatchSnapshot();201 });202 test('SequenceExpression', function () {203 var code = src_1.generate(createRoot({204 codegenNode: src_1.createSequenceExpression([205 src_1.createSimpleExpression("foo", false),206 src_1.createCallExpression("bar", ["baz"])207 ])208 })).code;209 expect(code).toMatch("return (foo, bar(baz))");210 expect(code).toMatchSnapshot();211 });212 test('ConditionalExpression', function () {213 var code = src_1.generate(createRoot({214 codegenNode: src_1.createConditionalExpression(src_1.createSimpleExpression("ok", false), src_1.createCallExpression("foo"), src_1.createConditionalExpression(src_1.createSimpleExpression("orNot", false), src_1.createCallExpression("bar"), src_1.createCallExpression("baz")))215 })).code;216 expect(code).toMatch("return ok\n ? foo()\n : orNot\n ? bar()\n : baz()");217 expect(code).toMatchSnapshot();218 });219 test('CacheExpression', function () {220 var code = src_1.generate(createRoot({221 cached: 1,222 codegenNode: src_1.createCacheExpression(1, src_1.createSimpleExpression("foo", false))223 }), {224 mode: 'module',225 prefixIdentifiers: true226 }).code;227 expect(code).toMatch("const _cache = _ctx.$cache");228 expect(code).toMatch("_cache[1] || (_cache[1] = foo)");229 expect(code).toMatchSnapshot();230 });231 test('CacheExpression w/ isVNode: true', function () {232 var code = src_1.generate(createRoot({233 cached: 1,234 codegenNode: src_1.createCacheExpression(1, src_1.createSimpleExpression("foo", false), true)235 }), {236 mode: 'module',237 prefixIdentifiers: true238 }).code;239 expect(code).toMatch("const _cache = _ctx.$cache");240 expect(code).toMatch("\n _cache[1] || (\n setBlockTracking(-1),\n _cache[1] = foo,\n setBlockTracking(1),\n _cache[1]\n )\n ".trim());241 expect(code).toMatchSnapshot();242 });...

Full Screen

Full Screen

vue-forms-module.js

Source:vue-forms-module.js Github

copy

Full Screen

...25 }26 let slotProp = {27 type: 7 /*NodeTypes.DIRECTIVE*/,28 name: 'slot',29 exp: processExpression(createSimpleExpression("{$value, $cont}"), context, true),// createCompoundExpression(["{$value, $cont}"]),30 arg: undefined,31 modifiers: [''],32 loc: node.loc33 }34 node.props.push(slotProp)35 if (context.prefixIdentifiers) {36 context.addIdentifiers(slotProp.exp)37 }38 context.scopes.vSlot++39 context.scopes.f_inCont = context.scopes.f_inCont ? context.scopes.f_inCont + 1 : 140 return () => {41 if (context.prefixIdentifiers) {42 context.removeIdentifiers(slotProp.exp);43 }44 context.scopes.vSlot--;45 context.scopes.f_inCont--;46 };47 }48 if (node.type === 1 && node.tag === 'FCont') {49 if (node.props.some(x=>x.type===7 && x.name === 'slot')) {50 context.onError(createCompilerError(10001, nameProp.loc, null, 'FCont не должен содержать явного указания слотов #=...'))51 }52 let slotProp = {53 type: 7 /*NodeTypes.DIRECTIVE*/,54 name: 'slot',55 exp: processExpression(createSimpleExpression("{$value, $cont}"), context, true),56 arg: undefined,57 modifiers: [''],58 loc: node.loc59 }60 node.props.push(slotProp)61 if (context.prefixIdentifiers) {62 context.addIdentifiers(slotProp.exp)63 }64 context.scopes.vSlot++65 context.scopes.f_inCont = context.scopes.f_inCont ? context.scopes.f_inCont + 1 : 166 return () => {67 if (context.prefixIdentifiers) {68 context.removeIdentifiers(slotProp.exp);69 }70 context.scopes.vSlot--;71 context.scopes.f_inCont--;72 };73 }74 if (node.type === 1 && (node.tag === 'FArray' || node.tag === 'FObject')) {75 let nameProp = findProp(node, 'name')76 if (node.props.some(x=>x.type===7 && x.name === 'slot')) {77 context.onError(createCompilerError(10001, nameProp.loc, null, 'FArray и FObject не должены содержать явного указания слотов #=...'))78 }79 if (!nameProp) {80 context.onError(createCompilerError(10001, nameProp.loc, null, 'FArray и FObject должены содержать свойство name'))81 }82 let nameExpr83 if (nameProp.type === 6 /*ATTRIBUTE*/) {84 nameExpr = JSON.stringify(nameProp.value.content)85 } else if (nameProp.type === 7 /*DIRECTIVE*/ && nameProp.name === 'bind') {86 nameExpr = nameProp.exp.content87 } else {88 context.onError(createCompilerError(10001, nameProp.loc, null, 'Неизвестный тип узла имени'))89 }90 node.props.push({91 type: 7 /*NodeTypes.DIRECTIVE*/,92 name: 'bind',93 exp: `$value[${nameExpr}]`,94 arg: createSimpleExpression('value', true, locStub, true),95 modifiers: [],96 loc: node.loc97 })98 if (findProp(node, 'default')) {99 node.props.push({100 type: 7 /*NodeTypes.DIRECTIVE*/,101 name: 'on',102 exp: createSimpleExpression(`$value[${nameExpr}]=$event`),103 arg: createSimpleExpression('setDefault', true, locStub, true),104 modifiers: [],105 loc: node.loc106 })107 }108 let slotProp = {109 type: 7 /*NodeTypes.DIRECTIVE*/,110 name: 'slot',111 exp: processExpression(createSimpleExpression(node.tag === 'FArray' ? "{$parentCont, $cont, $value, $index}" : "{$parentCont, $cont, $value}"), context, true),// createCompoundExpression(["{$value, $cont}"]),112 arg: undefined,113 modifiers: [''],114 loc: node.loc115 }116 node.props.push(slotProp)117 if (context.prefixIdentifiers) {118 context.addIdentifiers(slotProp.exp)119 }120 context.scopes.vSlot++121 context.scopes.f_inCont = context.scopes.f_inCont ? context.scopes.f_inCont + 1 : 1122 return () => {123 if (context.prefixIdentifiers) {124 context.removeIdentifiers(slotProp.exp);125 }126 context.scopes.vSlot--;127 context.scopes.f_inCont--;128 };129 }130 if (node.type === 1 && context.scopes.f_inCont) {131 let nameProp = findProp(node, 'name')132 if (nameProp) {133 let isComponent = /^([A-Z]{2}|[a-z]-)/.test(node.tag)134 let nameExpr135 if (nameProp.type === 6 /*ATTRIBUTE*/) {136 nameExpr = JSON.stringify(nameProp.value.content)137 } else if (nameProp.type === 7 /*DIRECTIVE*/ && nameProp.name === 'bind') {138 nameExpr = nameProp.exp.content139 } else {140 context.onError(createCompilerError(10001, nameProp.loc, null, 'Неизвестный тип узла имени'))141 }142 if (!isComponent) {143 node.props.push({144 type: 7 /*NodeTypes.DIRECTIVE*/,145 name: 'fname',146 exp: processExpression(createSimpleExpression(`{name: ${nameExpr}, cont: $cont}`), context),147 arg: undefined,148 modifiers: [],149 loc: nameProp.loc150 })151 }152 let vModelExpr = `$value[${nameExpr}]`153 node.props.push({154 type: 7 /*NodeTypes.DIRECTIVE*/,155 name: 'model',156 exp: processExpression(createSimpleExpression(vModelExpr, false, {...nameProp.loc, source: vModelExpr}), context),157 arg: undefined,158 modifiers: [],159 loc: nameProp.loc160 })161 if (!isComponent) {162 for (let i = node.props.length - 1; i >= 0; i--) {163 if (node.props[i] === nameProp) {164 node.props.splice(i, 1)165 }166 }167 }168 }169 if (nameProp || node.tag === 'f-button' || node.tag === 'FButton' || node.tag === 'button' || node.tag === 'fieldset') {170 let disabledProp = findProp(node, 'disabled', false, true)171 if (disabledProp) {172 if (disabledProp.type === 7 /*DIRECTIVE*/) {173 disabledProp.exp = createCompoundExpression(174 [175 '(',176 disabledProp.exp,177 ')||(',178 processExpression(createSimpleExpression("$cont.isDisabled"), context),179 ')'180 ],181 disabledProp.exp.loc182 )183 }184 } else {185 node.props.push({186 type: 7 /*NodeTypes.DIRECTIVE*/,187 name: 'bind',188 exp: processExpression(createSimpleExpression("$cont.isDisabled"), context),189 arg: createSimpleExpression('disabled', true, locStub, true),190 modifiers: [],191 loc: node.loc192 })193 }194 }195 }...

Full Screen

Full Screen

compiler.js

Source:compiler.js Github

copy

Full Screen

...48 const props = createObjectExpression(49 node.props.map(prop =>50 createObjectProperty(51 prop.name,52 prop.value ? createSimpleExpression(prop.value.content, true) : 'true'53 )54 )55 )56 node.codegenNode = createCallExpression('h', [57 createSimpleExpression(node.tag, true),58 props,59 createArrayExpression(node.children),60 ])61 }...

Full Screen

Full Screen

vBind.js

Source:vBind.js Github

copy

Full Screen

...26 !exp ||27 (exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim())28 ) {29 return {30 props: [createObjectProperty(arg, createSimpleExpression('', true))]31 };32 }33 return {34 props: [createObjectProperty(arg, exp)]35 };36};37const injectPrefix = (arg, prefix) => {38 if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {39 if (arg.isStatic) {40 arg.content = prefix + arg.content;41 } else {42 arg.content = `\`${prefix}\${${arg.content}}\``;43 }44 } else {...

Full Screen

Full Screen

vOn.js

Source:vOn.js Github

copy

Full Screen

...11 if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {12 if (arg.isStatic) {13 const rawName = arg.content;14 // 驼峰化15 eventName = createSimpleExpression(toHandlerKey(camelize(rawName)), true);16 } else {17 // 源码在这里将动态的事件名处理成组合表达式18 }19 } else {20 eventName = arg;21 }22 // 处理表达式23 let exp = dir.exp;24 if (exp && !exp.content.trim()) {25 exp = undefined;26 }27 // 源码在这里会处理事件缓存28 // 包装并返回 JS_PROPERTY 节点29 let ret = {30 props: [31 createObjectProperty(32 eventName,33 exp || createSimpleExpression('() => {}', false)34 )35 ]36 };37 // 源码在这里会处理外部插件 extended compiler augmentor38 // if (augmentor) {39 // ret = augmentor(ret);40 // }41 // ret.props.forEach(p => (p.key.isHandlerKey = true));42 return ret;...

Full Screen

Full Screen

exportMagrin.js

Source:exportMagrin.js Github

copy

Full Screen

...16 }17 },18 actions: {19 fetchTreeExport(ctx) {20 return createSimpleExpression(1).then(function (doneStr) {21 return axios.get(apiRouters.treeExport).then((res) => {22 ctx.commit("setTreeExport", res.data)23 });24 });25 }26 }27};28function sleep(sec) {29 return new Promise(function (resolve, reject) {30 setTimeout(() => { resolve("done!"); }, sec * 1000)31 })...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('@playwright/test');2const { expect } = require('@playwright/test');3const { test } = require('@playwright/test');4test('test', async ({ page }) => {5 await page.click('text=Get Started');6 await page.click('text=Docs');7 await page.click('text=API');8 const path = createSimpleExpression('text=API');9 const pathText = await path.evaluate(element => element.textContent);10 expect(pathText).toBe('API');11});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('@playwright/test');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 const expression = createSimpleExpression('test');5 await page.evaluate(expression);6});7const { createSimpleExpression } = require('@playwright/test');8const { test } = require('@playwright/test');9test('test', async ({ page }) => {10 const expression = createSimpleExpression('test');11 await page.evaluate(expression);12});13const { test } = require('@playwright/test');14const { createSimpleExpression } = require('@playwright/test');15test('test', async ({ page }) => {16 const expression = createSimpleExpression('test');17 await page.evaluate(expression);18});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('playwright/lib/server/supplements/recorder/javascript');2const { parse } = require('playwright/lib/server/supplements/recorder/javascript/ast');3const { generate } = require('playwright/lib/server/supplements/recorder/javascript/generator');4const expr = createSimpleExpression(parse('document.querySelector("div")'));5console.log(generate(expr));6document.querySelector("div");7const { parse } = require('playwright/lib/server/supplements/recorder/javascript/ast');8const ast = parse('document.querySelector("div")');9console.log(ast);10{11 {12 "expression": {13 "callee": {14 "object": {15 },16 "property": {17 },18 },19 {20 }21 }22 }23}24const { createSimpleExpression } = require('playwright/lib/server

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('@playwright/test');2const expression = createSimpleExpression('Hello World!');3console.log(expression);4const { createSimpleExpression } = require('@playwright/test');5const expression = createSimpleExpression('Hello World!');6console.log(expression);7const { createSimpleExpression } = require('@playwright/test');8const expression = createSimpleExpression('Hello World!');9console.log(expression);10const { createSimpleExpression } = require('@playwright/test');11const expression = createSimpleExpression('Hello World!');12console.log(expression);13const { createSimpleExpression } = require('@playwright/test');14const expression = createSimpleExpression('Hello World!');15console.log(expression);16const { createSimpleExpression } = require('@playwright/test');17const expression = createSimpleExpression('Hello World!');18console.log(expression);19const { createSimpleExpression } = require('@playwright/test');20const expression = createSimpleExpression('Hello World!');21console.log(expression);22const { createSimpleExpression } = require('@playwright/test');23const expression = createSimpleExpression('Hello World!');24console.log(expression);25const { createSimpleExpression } = require('@playwright/test');26const expression = createSimpleExpression('Hello World!');27console.log(expression);28const { createSimpleExpression } = require('@playwright/test');29const expression = createSimpleExpression('Hello World!');30console.log(expression);31const { createSimpleExpression } = require('@playwright/test');32const expression = createSimpleExpression('Hello World!');33console.log(expression);34const { createSimpleExpression } = require('@playwright/test');35const expression = createSimpleExpression('Hello World!');36console.log(expression);37const { createSimpleExpression

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require("@playwright/test").internal;2const { test } = require("@playwright/test");3test("test", async ({ page }) => {4 await page.setContent(`<div id="testDiv" style="color: red">Test</div>`);5 const testDiv = await page.$("#testDiv");6 const colorExpression = createSimpleExpression("element.style.color");7 const color = await colorExpression.evaluate(testDiv);8 console.log(color);9});10const { createSimpleExpression } = require("@playwright/test").internal;11const { test } = require("@playwright/test");12test("test", async ({ page }) => {13 await page.setContent(`<div id="testDiv" style="height: 100px">Test</div>`);14 const testDiv = await page.$("#testDiv");15 const heightExpression = createSimpleExpression("element.offsetHeight");16 const height = await heightExpression.evaluate(testDiv);17 console.log(height);18});19const { createSimpleExpression } = require("@playwright/test").internal;20const { test } = require("@playwright/test");21test("test", async ({ page }) => {22 await page.setContent(`<div id="testDiv" style="height: 100px">Test</div>`);23 const testDiv = await page.$("#testDiv");24 const heightExpression = createSimpleExpression("element.offsetHeight");25 const height = await heightExpression.evaluate(testDiv);26 console.log(height);27});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('playwright/lib/utils/ast');2const { parse } = require('playwright/lib/utils/selectorParser');3const selector = createSimpleExpression('text="Hello World"');4console.log(selector);5const selector2 = parse('text="Hello World"');6console.log(selector2);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('playwright');2const expression = createSimpleExpression('window.innerWidth', false);3console.log(expression);4 const widthElement = document.getElementById('width');5 widthElement.innerHTML = expression.evaluate(document);6### `createSimpleExpression(expression[, isAsync])`

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { createSimpleExpression } = require('@playwright/test/lib/server/frames');2let expr = createSimpleExpression('a.b.c');3console.log(expr);4const { createExpressionHandle } = require('@playwright/test/lib/server/frames');5const { createSimpleExpression } = require('@playwright/test/lib/server/frames');6let expr = createSimpleExpression('a.b.c');7let exprHandle = createExpressionHandle(expr);8console.log(exprHandle);

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

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

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful