How to use buildDirectiveArgs method in Playwright Internal

Best JavaScript code snippet using playwright-internal

dep-56143c31.js

Source:dep-56143c31.js Github

copy

Full Screen

...4301 dynamicPropNames = propsBuildResult.dynamicPropNames;4302 const directives = propsBuildResult.directives;4303 vnodeDirectives =4304 directives && directives.length4305 ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context)))4306 : undefined;4307 if (propsBuildResult.shouldUseBlock) {4308 shouldUseBlock = true;4309 }4310 }4311 // children4312 if (node.children.length > 0) {4313 if (vnodeTag === KEEP_ALIVE) {4314 // Although a built-in component, we compile KeepAlive with raw children4315 // instead of slot functions so that it can be used inside Transition4316 // or other Transition-wrapping HOCs.4317 // To ensure correct updates with block optimizations, we need to:4318 // 1. Force keep-alive into a block. This avoids its children being4319 // collected by a parent block.4320 shouldUseBlock = true;4321 // 2. Force keep-alive to always be updated, since it uses raw children.4322 patchFlag |= 1024 /* DYNAMIC_SLOTS */;4323 if ((process.env.NODE_ENV !== 'production') && node.children.length > 1) {4324 context.onError(createCompilerError(45 /* X_KEEP_ALIVE_INVALID_CHILDREN */, {4325 start: node.children[0].loc.start,4326 end: node.children[node.children.length - 1].loc.end,4327 source: ''4328 }));4329 }4330 }4331 const shouldBuildAsSlots = isComponent &&4332 // Teleport is not a real component and has dedicated runtime handling4333 vnodeTag !== TELEPORT &&4334 // explained above.4335 vnodeTag !== KEEP_ALIVE;4336 if (shouldBuildAsSlots) {4337 const { slots, hasDynamicSlots } = buildSlots(node, context);4338 vnodeChildren = slots;4339 if (hasDynamicSlots) {4340 patchFlag |= 1024 /* DYNAMIC_SLOTS */;4341 }4342 }4343 else if (node.children.length === 1 && vnodeTag !== TELEPORT) {4344 const child = node.children[0];4345 const type = child.type;4346 // check for dynamic text children4347 const hasDynamicTextChild = type === 5 /* INTERPOLATION */ ||4348 type === 8 /* COMPOUND_EXPRESSION */;4349 if (hasDynamicTextChild &&4350 getConstantType(child, context) === 0 /* NOT_CONSTANT */) {4351 patchFlag |= 1 /* TEXT */;4352 }4353 // pass directly if the only child is a text node4354 // (plain / interpolation / expression)4355 if (hasDynamicTextChild || type === 2 /* TEXT */) {4356 vnodeChildren = child;4357 }4358 else {4359 vnodeChildren = node.children;4360 }4361 }4362 else {4363 vnodeChildren = node.children;4364 }4365 }4366 // patchFlag & dynamicPropNames4367 if (patchFlag !== 0) {4368 if ((process.env.NODE_ENV !== 'production')) {4369 if (patchFlag < 0) {4370 // special flags (negative and mutually exclusive)4371 vnodePatchFlag = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`;4372 }4373 else {4374 // bitwise flags4375 const flagNames = Object.keys(PatchFlagNames)4376 .map(Number)4377 .filter(n => n > 0 && patchFlag & n)4378 .map(n => PatchFlagNames[n])4379 .join(`, `);4380 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;4381 }4382 }4383 else {4384 vnodePatchFlag = String(patchFlag);4385 }4386 if (dynamicPropNames && dynamicPropNames.length) {4387 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);4388 }4389 }4390 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* disableTracking */, isComponent, node.loc);4391 };4392};4393function resolveComponentType(node, context, ssr = false) {4394 let { tag } = node;4395 // 1. dynamic component4396 const isExplicitDynamic = isComponentTag(tag);4397 const isProp = findProp(node, 'is');4398 if (isProp) {4399 if (isExplicitDynamic ||4400 (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context))) {4401 const exp = isProp.type === 6 /* ATTRIBUTE */4402 ? isProp.value && createSimpleExpression(isProp.value.content, true)4403 : isProp.exp;4404 if (exp) {4405 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [4406 exp4407 ]);4408 }4409 }4410 else if (isProp.type === 6 /* ATTRIBUTE */ &&4411 isProp.value.content.startsWith('vue:')) {4412 // <button is="vue:xxx">4413 // if not <component>, only is value that starts with "vue:" will be4414 // treated as component by the parse phase and reach here, unless it's4415 // compat mode where all is values are considered components4416 tag = isProp.value.content.slice(4);4417 }4418 }4419 // 1.5 v-is (TODO: Deprecate)4420 const isDir = !isExplicitDynamic && findDir(node, 'is');4421 if (isDir && isDir.exp) {4422 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [4423 isDir.exp4424 ]);4425 }4426 // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)4427 const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);4428 if (builtIn) {4429 // built-ins are simply fallthroughs / have special handling during ssr4430 // so we don't need to import their runtime equivalents4431 if (!ssr)4432 context.helper(builtIn);4433 return builtIn;4434 }4435 // 5. user component (resolve)4436 context.helper(RESOLVE_COMPONENT);4437 context.components.add(tag);4438 return toValidAssetId(tag, `component`);4439}4440function buildProps(node, context, props = node.props, ssr = false) {4441 const { tag, loc: elementLoc, children } = node;4442 const isComponent = node.tagType === 1 /* COMPONENT */;4443 let properties = [];4444 const mergeArgs = [];4445 const runtimeDirectives = [];4446 const hasChildren = children.length > 0;4447 let shouldUseBlock = false;4448 // patchFlag analysis4449 let patchFlag = 0;4450 let hasRef = false;4451 let hasClassBinding = false;4452 let hasStyleBinding = false;4453 let hasHydrationEventBinding = false;4454 let hasDynamicKeys = false;4455 let hasVnodeHook = false;4456 const dynamicPropNames = [];4457 const analyzePatchFlag = ({ key, value }) => {4458 if (isStaticExp(key)) {4459 const name = key.content;4460 const isEventHandler = isOn(name);4461 if (!isComponent &&4462 isEventHandler &&4463 // omit the flag for click handlers because hydration gives click4464 // dedicated fast path.4465 name.toLowerCase() !== 'onclick' &&4466 // omit v-model handlers4467 name !== 'onUpdate:modelValue' &&4468 // omit onVnodeXXX hooks4469 !isReservedProp(name)) {4470 hasHydrationEventBinding = true;4471 }4472 if (isEventHandler && isReservedProp(name)) {4473 hasVnodeHook = true;4474 }4475 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||4476 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||4477 value.type === 8 /* COMPOUND_EXPRESSION */) &&4478 getConstantType(value, context) > 0)) {4479 // skip if the prop is a cached handler or has constant value4480 return;4481 }4482 if (name === 'ref') {4483 hasRef = true;4484 }4485 else if (name === 'class') {4486 hasClassBinding = true;4487 }4488 else if (name === 'style') {4489 hasStyleBinding = true;4490 }4491 else if (name !== 'key' && !dynamicPropNames.includes(name)) {4492 dynamicPropNames.push(name);4493 }4494 // treat the dynamic class and style binding of the component as dynamic props4495 if (isComponent &&4496 (name === 'class' || name === 'style') &&4497 !dynamicPropNames.includes(name)) {4498 dynamicPropNames.push(name);4499 }4500 }4501 else {4502 hasDynamicKeys = true;4503 }4504 };4505 for (let i = 0; i < props.length; i++) {4506 // static attribute4507 const prop = props[i];4508 if (prop.type === 6 /* ATTRIBUTE */) {4509 const { loc, name, value } = prop;4510 let isStatic = true;4511 if (name === 'ref') {4512 hasRef = true;4513 if (context.scopes.vFor > 0) {4514 properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true')));4515 }4516 }4517 // skip is on <component>, or is="vue:xxx"4518 if (name === 'is' &&4519 (isComponentTag(tag) ||4520 (value && value.content.startsWith('vue:')) ||4521 (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context)))) {4522 continue;4523 }4524 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', isStatic, value ? value.loc : loc)));4525 }4526 else {4527 // directives4528 const { name, arg, exp, loc } = prop;4529 const isVBind = name === 'bind';4530 const isVOn = name === 'on';4531 // skip v-slot - it is handled by its dedicated transform.4532 if (name === 'slot') {4533 if (!isComponent) {4534 context.onError(createCompilerError(40 /* X_V_SLOT_MISPLACED */, loc));4535 }4536 continue;4537 }4538 // skip v-once/v-memo - they are handled by dedicated transforms.4539 if (name === 'once' || name === 'memo') {4540 continue;4541 }4542 // skip v-is and :is on <component>4543 if (name === 'is' ||4544 (isVBind &&4545 isStaticArgOf(arg, 'is') &&4546 (isComponentTag(tag) ||4547 (isCompatEnabled("COMPILER_IS_ON_ELEMENT" /* COMPILER_IS_ON_ELEMENT */, context))))) {4548 continue;4549 }4550 // skip v-on in SSR compilation4551 if (isVOn && ssr) {4552 continue;4553 }4554 if (4555 // #938: elements with dynamic keys should be forced into blocks4556 (isVBind && isStaticArgOf(arg, 'key')) ||4557 // inline before-update hooks need to force block so that it is invoked4558 // before children4559 (isVOn && hasChildren && isStaticArgOf(arg, 'vue:before-update'))) {4560 shouldUseBlock = true;4561 }4562 if (isVBind && isStaticArgOf(arg, 'ref') && context.scopes.vFor > 0) {4563 properties.push(createObjectProperty(createSimpleExpression('ref_for', true), createSimpleExpression('true')));4564 }4565 // special case for v-bind and v-on with no argument4566 if (!arg && (isVBind || isVOn)) {4567 hasDynamicKeys = true;4568 if (exp) {4569 if (properties.length) {4570 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));4571 properties = [];4572 }4573 if (isVBind) {4574 {4575 // 2.x v-bind object order compat4576 if ((process.env.NODE_ENV !== 'production')) {4577 const hasOverridableKeys = mergeArgs.some(arg => {4578 if (arg.type === 15 /* JS_OBJECT_EXPRESSION */) {4579 return arg.properties.some(({ key }) => {4580 if (key.type !== 4 /* SIMPLE_EXPRESSION */ ||4581 !key.isStatic) {4582 return true;4583 }4584 return (key.content !== 'class' &&4585 key.content !== 'style' &&4586 !isOn(key.content));4587 });4588 }4589 else {4590 // dynamic expression4591 return true;4592 }4593 });4594 if (hasOverridableKeys) {4595 checkCompatEnabled("COMPILER_V_BIND_OBJECT_ORDER" /* COMPILER_V_BIND_OBJECT_ORDER */, context, loc);4596 }4597 }4598 if (isCompatEnabled("COMPILER_V_BIND_OBJECT_ORDER" /* COMPILER_V_BIND_OBJECT_ORDER */, context)) {4599 mergeArgs.unshift(exp);4600 continue;4601 }4602 }4603 mergeArgs.push(exp);4604 }4605 else {4606 // v-on="obj" -> toHandlers(obj)4607 mergeArgs.push({4608 type: 14 /* JS_CALL_EXPRESSION */,4609 loc,4610 callee: context.helper(TO_HANDLERS),4611 arguments: [exp]4612 });4613 }4614 }4615 else {4616 context.onError(createCompilerError(isVBind4617 ? 34 /* X_V_BIND_NO_EXPRESSION */4618 : 35 /* X_V_ON_NO_EXPRESSION */, loc));4619 }4620 continue;4621 }4622 const directiveTransform = context.directiveTransforms[name];4623 if (directiveTransform) {4624 // has built-in directive transform.4625 const { props, needRuntime } = directiveTransform(prop, node, context);4626 !ssr && props.forEach(analyzePatchFlag);4627 properties.push(...props);4628 if (needRuntime) {4629 runtimeDirectives.push(prop);4630 if (isSymbol(needRuntime)) {4631 directiveImportMap.set(prop, needRuntime);4632 }4633 }4634 }4635 else if (!isBuiltInDirective(name)) {4636 // no built-in transform, this is a user custom directive.4637 runtimeDirectives.push(prop);4638 // custom dirs may use beforeUpdate so they need to force blocks4639 // to ensure before-update gets called before children update4640 if (hasChildren) {4641 shouldUseBlock = true;4642 }4643 }4644 }4645 }4646 let propsExpression = undefined;4647 // has v-bind="object" or v-on="object", wrap with mergeProps4648 if (mergeArgs.length) {4649 if (properties.length) {4650 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));4651 }4652 if (mergeArgs.length > 1) {4653 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);4654 }4655 else {4656 // single v-bind with nothing else - no need for a mergeProps call4657 propsExpression = mergeArgs[0];4658 }4659 }4660 else if (properties.length) {4661 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);4662 }4663 // patchFlag analysis4664 if (hasDynamicKeys) {4665 patchFlag |= 16 /* FULL_PROPS */;4666 }4667 else {4668 if (hasClassBinding && !isComponent) {4669 patchFlag |= 2 /* CLASS */;4670 }4671 if (hasStyleBinding && !isComponent) {4672 patchFlag |= 4 /* STYLE */;4673 }4674 if (dynamicPropNames.length) {4675 patchFlag |= 8 /* PROPS */;4676 }4677 if (hasHydrationEventBinding) {4678 patchFlag |= 32 /* HYDRATE_EVENTS */;4679 }4680 }4681 if (!shouldUseBlock &&4682 (patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) &&4683 (hasRef || hasVnodeHook || runtimeDirectives.length > 0)) {4684 patchFlag |= 512 /* NEED_PATCH */;4685 }4686 // pre-normalize props, SSR is skipped for now4687 if (!context.inSSR && propsExpression) {4688 switch (propsExpression.type) {4689 case 15 /* JS_OBJECT_EXPRESSION */:4690 // means that there is no v-bind,4691 // but still need to deal with dynamic key binding4692 let classKeyIndex = -1;4693 let styleKeyIndex = -1;4694 let hasDynamicKey = false;4695 for (let i = 0; i < propsExpression.properties.length; i++) {4696 const key = propsExpression.properties[i].key;4697 if (isStaticExp(key)) {4698 if (key.content === 'class') {4699 classKeyIndex = i;4700 }4701 else if (key.content === 'style') {4702 styleKeyIndex = i;4703 }4704 }4705 else if (!key.isHandlerKey) {4706 hasDynamicKey = true;4707 }4708 }4709 const classProp = propsExpression.properties[classKeyIndex];4710 const styleProp = propsExpression.properties[styleKeyIndex];4711 // no dynamic key4712 if (!hasDynamicKey) {4713 if (classProp && !isStaticExp(classProp.value)) {4714 classProp.value = createCallExpression(context.helper(NORMALIZE_CLASS), [classProp.value]);4715 }4716 if (styleProp &&4717 !isStaticExp(styleProp.value) &&4718 // the static style is compiled into an object,4719 // so use `hasStyleBinding` to ensure that it is a dynamic style binding4720 (hasStyleBinding ||4721 // v-bind:style and style both exist,4722 // v-bind:style with static literal object4723 styleProp.value.type === 17 /* JS_ARRAY_EXPRESSION */)) {4724 styleProp.value = createCallExpression(context.helper(NORMALIZE_STYLE), [styleProp.value]);4725 }4726 }4727 else {4728 // dynamic key binding, wrap with `normalizeProps`4729 propsExpression = createCallExpression(context.helper(NORMALIZE_PROPS), [propsExpression]);4730 }4731 break;4732 case 14 /* JS_CALL_EXPRESSION */:4733 // mergeProps call, do nothing4734 break;4735 default:4736 // single v-bind4737 propsExpression = createCallExpression(context.helper(NORMALIZE_PROPS), [4738 createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [4739 propsExpression4740 ])4741 ]);4742 break;4743 }4744 }4745 return {4746 props: propsExpression,4747 directives: runtimeDirectives,4748 patchFlag,4749 dynamicPropNames,4750 shouldUseBlock4751 };4752}4753// Dedupe props in an object literal.4754// Literal duplicated attributes would have been warned during the parse phase,4755// however, it's possible to encounter duplicated `onXXX` handlers with different4756// modifiers. We also need to merge static and dynamic class / style attributes.4757// - onXXX handlers / style: merge into array4758// - class: merge into single expression with concatenation4759function dedupeProperties(properties) {4760 const knownProps = new Map();4761 const deduped = [];4762 for (let i = 0; i < properties.length; i++) {4763 const prop = properties[i];4764 // dynamic keys are always allowed4765 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {4766 deduped.push(prop);4767 continue;4768 }4769 const name = prop.key.content;4770 const existing = knownProps.get(name);4771 if (existing) {4772 if (name === 'style' || name === 'class' || isOn(name)) {4773 mergeAsArray(existing, prop);4774 }4775 // unexpected duplicate, should have emitted error during parse4776 }4777 else {4778 knownProps.set(name, prop);4779 deduped.push(prop);4780 }4781 }4782 return deduped;4783}4784function mergeAsArray(existing, incoming) {4785 if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) {4786 existing.value.elements.push(incoming.value);4787 }4788 else {4789 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);4790 }4791}4792function buildDirectiveArgs(dir, context) {4793 const dirArgs = [];4794 const runtime = directiveImportMap.get(dir);4795 if (runtime) {4796 // built-in directive with runtime4797 dirArgs.push(context.helperString(runtime));4798 }4799 else {4800 {4801 // inject statement for resolving directive4802 context.helper(RESOLVE_DIRECTIVE);4803 context.directives.add(dir.name);4804 dirArgs.push(toValidAssetId(dir.name, `directive`));4805 }4806 }...

Full Screen

Full Screen

compiler-dom.global.js

Source:compiler-dom.global.js Github

copy

Full Screen

...2663 const vnode = createCallExpression(context.helper(CREATE_VNODE), args, loc);2664 if (runtimeDirectives && runtimeDirectives.length) {2665 node.codegenNode = createCallExpression(context.helper(WITH_DIRECTIVES), [2666 vnode,2667 createArrayExpression(runtimeDirectives.map(dir => buildDirectiveArgs(dir, context)), loc)2668 ], loc);2669 }2670 else {2671 node.codegenNode = vnode;2672 }2673 };2674 };2675 function buildProps(node, context, props = node.props) {2676 const elementLoc = node.loc;2677 const isComponent = node.tagType === 1 /* COMPONENT */;2678 let properties = [];2679 const mergeArgs = [];2680 const runtimeDirectives = [];2681 // patchFlag analysis2682 let patchFlag = 0;2683 let hasRef = false;2684 let hasClassBinding = false;2685 let hasStyleBinding = false;2686 let hasDynamicKeys = false;2687 const dynamicPropNames = [];2688 const analyzePatchFlag = ({ key, value }) => {2689 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {2690 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||2691 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||2692 value.type === 8 /* COMPOUND_EXPRESSION */) &&2693 isStaticNode(value))) {2694 return;2695 }2696 const name = key.content;2697 if (name === 'ref') {2698 hasRef = true;2699 }2700 else if (name === 'class') {2701 hasClassBinding = true;2702 }2703 else if (name === 'style') {2704 hasStyleBinding = true;2705 }2706 else if (name !== 'key') {2707 dynamicPropNames.push(name);2708 }2709 }2710 else {2711 hasDynamicKeys = true;2712 }2713 };2714 for (let i = 0; i < props.length; i++) {2715 // static attribute2716 const prop = props[i];2717 if (prop.type === 6 /* ATTRIBUTE */) {2718 const { loc, name, value } = prop;2719 if (name === 'ref') {2720 hasRef = true;2721 }2722 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));2723 }2724 else {2725 // directives2726 const { name, arg, exp, loc } = prop;2727 // skip v-slot - it is handled by its dedicated transform.2728 if (name === 'slot') {2729 if (!isComponent) {2730 context.onError(createCompilerError(46 /* X_V_SLOT_MISPLACED */, loc));2731 }2732 continue;2733 }2734 // skip v-once - it is handled by its dedicated transform.2735 if (name === 'once') {2736 continue;2737 }2738 // special case for v-bind and v-on with no argument2739 const isBind = name === 'bind';2740 const isOn = name === 'on';2741 if (!arg && (isBind || isOn)) {2742 hasDynamicKeys = true;2743 if (exp) {2744 if (properties.length) {2745 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));2746 properties = [];2747 }2748 if (isBind) {2749 mergeArgs.push(exp);2750 }2751 else {2752 // v-on="obj" -> toHandlers(obj)2753 mergeArgs.push({2754 type: 13 /* JS_CALL_EXPRESSION */,2755 loc,2756 callee: context.helper(TO_HANDLERS),2757 arguments: [exp]2758 });2759 }2760 }2761 else {2762 context.onError(createCompilerError(isBind2763 ? 39 /* X_V_BIND_NO_EXPRESSION */2764 : 40 /* X_V_ON_NO_EXPRESSION */, loc));2765 }2766 continue;2767 }2768 const directiveTransform = context.directiveTransforms[name];2769 if (directiveTransform) {2770 // has built-in directive transform.2771 const { props, needRuntime } = directiveTransform(prop, node, context);2772 props.forEach(analyzePatchFlag);2773 properties.push(...props);2774 if (needRuntime) {2775 runtimeDirectives.push(prop);2776 if (isSymbol(needRuntime)) {2777 directiveImportMap.set(prop, needRuntime);2778 }2779 }2780 }2781 else {2782 // no built-in transform, this is a user custom directive.2783 runtimeDirectives.push(prop);2784 }2785 }2786 }2787 let propsExpression = undefined;2788 // has v-bind="object" or v-on="object", wrap with mergeProps2789 if (mergeArgs.length) {2790 if (properties.length) {2791 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));2792 }2793 if (mergeArgs.length > 1) {2794 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);2795 }2796 else {2797 // single v-bind with nothing else - no need for a mergeProps call2798 propsExpression = mergeArgs[0];2799 }2800 }2801 else if (properties.length) {2802 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);2803 }2804 // patchFlag analysis2805 if (hasDynamicKeys) {2806 patchFlag |= 16 /* FULL_PROPS */;2807 }2808 else {2809 if (hasClassBinding) {2810 patchFlag |= 2 /* CLASS */;2811 }2812 if (hasStyleBinding) {2813 patchFlag |= 4 /* STYLE */;2814 }2815 if (dynamicPropNames.length) {2816 patchFlag |= 8 /* PROPS */;2817 }2818 }2819 if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {2820 patchFlag |= 32 /* NEED_PATCH */;2821 }2822 return {2823 props: propsExpression,2824 directives: runtimeDirectives,2825 patchFlag,2826 dynamicPropNames2827 };2828 }2829 // Dedupe props in an object literal.2830 // Literal duplicated attributes would have been warned during the parse phase,2831 // however, it's possible to encounter duplicated `onXXX` handlers with different2832 // modifiers. We also need to merge static and dynamic class / style attributes.2833 // - onXXX handlers / style: merge into array2834 // - class: merge into single expression with concatenation2835 function dedupeProperties(properties) {2836 const knownProps = {};2837 const deduped = [];2838 for (let i = 0; i < properties.length; i++) {2839 const prop = properties[i];2840 // dynamic keys are always allowed2841 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {2842 deduped.push(prop);2843 continue;2844 }2845 const name = prop.key.content;2846 const existing = knownProps[name];2847 if (existing) {2848 if (name === 'style' ||2849 name === 'class' ||2850 name.startsWith('on') ||2851 name.startsWith('vnode')) {2852 mergeAsArray(existing, prop);2853 }2854 // unexpected duplicate, should have emitted error during parse2855 }2856 else {2857 knownProps[name] = prop;2858 deduped.push(prop);2859 }2860 }2861 return deduped;2862 }2863 function mergeAsArray(existing, incoming) {2864 if (existing.value.type === 16 /* JS_ARRAY_EXPRESSION */) {2865 existing.value.elements.push(incoming.value);2866 }2867 else {2868 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);2869 }2870 }2871 function buildDirectiveArgs(dir, context) {2872 const dirArgs = [];2873 const runtime = directiveImportMap.get(dir);2874 if (runtime) {2875 context.helper(runtime);2876 dirArgs.push(context.helperString(runtime));2877 }2878 else {2879 // inject statement for resolving directive2880 context.helper(RESOLVE_DIRECTIVE);2881 context.directives.add(dir.name);2882 dirArgs.push(toValidAssetId(dir.name, `directive`));2883 }2884 const { loc } = dir;2885 if (dir.exp)...

Full Screen

Full Screen

compiler-core.cjs.js

Source:compiler-core.cjs.js Github

copy

Full Screen

...3005 const vnode = createCallExpression(context.helper(CREATE_VNODE), args, loc);3006 if (runtimeDirectives && runtimeDirectives.length) {3007 node.codegenNode = createCallExpression(context.helper(WITH_DIRECTIVES), [3008 vnode,3009 createArrayExpression(runtimeDirectives.map(dir => buildDirectiveArgs(dir, context)), loc)3010 ], loc);3011 }3012 else {3013 node.codegenNode = vnode;3014 }3015 };3016};3017function buildProps(node, context, props = node.props) {3018 const elementLoc = node.loc;3019 const isComponent = node.tagType === 1 /* COMPONENT */;3020 let properties = [];3021 const mergeArgs = [];3022 const runtimeDirectives = [];3023 // patchFlag analysis3024 let patchFlag = 0;3025 let hasRef = false;3026 let hasClassBinding = false;3027 let hasStyleBinding = false;3028 let hasDynamicKeys = false;3029 const dynamicPropNames = [];3030 const analyzePatchFlag = ({ key, value }) => {3031 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {3032 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||3033 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||3034 value.type === 8 /* COMPOUND_EXPRESSION */) &&3035 isStaticNode(value))) {3036 return;3037 }3038 const name = key.content;3039 if (name === 'ref') {3040 hasRef = true;3041 }3042 else if (name === 'class') {3043 hasClassBinding = true;3044 }3045 else if (name === 'style') {3046 hasStyleBinding = true;3047 }3048 else if (name !== 'key') {3049 dynamicPropNames.push(name);3050 }3051 }3052 else {3053 hasDynamicKeys = true;3054 }3055 };3056 for (let i = 0; i < props.length; i++) {3057 // static attribute3058 const prop = props[i];3059 if (prop.type === 6 /* ATTRIBUTE */) {3060 const { loc, name, value } = prop;3061 if (name === 'ref') {3062 hasRef = true;3063 }3064 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));3065 }3066 else {3067 // directives3068 const { name, arg, exp, loc } = prop;3069 // skip v-slot - it is handled by its dedicated transform.3070 if (name === 'slot') {3071 if (!isComponent) {3072 context.onError(createCompilerError(46 /* X_V_SLOT_MISPLACED */, loc));3073 }3074 continue;3075 }3076 // skip v-once - it is handled by its dedicated transform.3077 if (name === 'once') {3078 continue;3079 }3080 // special case for v-bind and v-on with no argument3081 const isBind = name === 'bind';3082 const isOn = name === 'on';3083 if (!arg && (isBind || isOn)) {3084 hasDynamicKeys = true;3085 if (exp) {3086 if (properties.length) {3087 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3088 properties = [];3089 }3090 if (isBind) {3091 mergeArgs.push(exp);3092 }3093 else {3094 // v-on="obj" -> toHandlers(obj)3095 mergeArgs.push({3096 type: 13 /* JS_CALL_EXPRESSION */,3097 loc,3098 callee: context.helper(TO_HANDLERS),3099 arguments: [exp]3100 });3101 }3102 }3103 else {3104 context.onError(createCompilerError(isBind3105 ? 39 /* X_V_BIND_NO_EXPRESSION */3106 : 40 /* X_V_ON_NO_EXPRESSION */, loc));3107 }3108 continue;3109 }3110 const directiveTransform = context.directiveTransforms[name];3111 if (directiveTransform) {3112 // has built-in directive transform.3113 const { props, needRuntime } = directiveTransform(prop, node, context);3114 props.forEach(analyzePatchFlag);3115 properties.push(...props);3116 if (needRuntime) {3117 runtimeDirectives.push(prop);3118 if (isSymbol(needRuntime)) {3119 directiveImportMap.set(prop, needRuntime);3120 }3121 }3122 }3123 else {3124 // no built-in transform, this is a user custom directive.3125 runtimeDirectives.push(prop);3126 }3127 }3128 }3129 let propsExpression = undefined;3130 // has v-bind="object" or v-on="object", wrap with mergeProps3131 if (mergeArgs.length) {3132 if (properties.length) {3133 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3134 }3135 if (mergeArgs.length > 1) {3136 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);3137 }3138 else {3139 // single v-bind with nothing else - no need for a mergeProps call3140 propsExpression = mergeArgs[0];3141 }3142 }3143 else if (properties.length) {3144 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);3145 }3146 // patchFlag analysis3147 if (hasDynamicKeys) {3148 patchFlag |= 16 /* FULL_PROPS */;3149 }3150 else {3151 if (hasClassBinding) {3152 patchFlag |= 2 /* CLASS */;3153 }3154 if (hasStyleBinding) {3155 patchFlag |= 4 /* STYLE */;3156 }3157 if (dynamicPropNames.length) {3158 patchFlag |= 8 /* PROPS */;3159 }3160 }3161 if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {3162 patchFlag |= 32 /* NEED_PATCH */;3163 }3164 return {3165 props: propsExpression,3166 directives: runtimeDirectives,3167 patchFlag,3168 dynamicPropNames3169 };3170}3171// Dedupe props in an object literal.3172// Literal duplicated attributes would have been warned during the parse phase,3173// however, it's possible to encounter duplicated `onXXX` handlers with different3174// modifiers. We also need to merge static and dynamic class / style attributes.3175// - onXXX handlers / style: merge into array3176// - class: merge into single expression with concatenation3177function dedupeProperties(properties) {3178 const knownProps = {};3179 const deduped = [];3180 for (let i = 0; i < properties.length; i++) {3181 const prop = properties[i];3182 // dynamic keys are always allowed3183 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {3184 deduped.push(prop);3185 continue;3186 }3187 const name = prop.key.content;3188 const existing = knownProps[name];3189 if (existing) {3190 if (name === 'style' ||3191 name === 'class' ||3192 name.startsWith('on') ||3193 name.startsWith('vnode')) {3194 mergeAsArray(existing, prop);3195 }3196 // unexpected duplicate, should have emitted error during parse3197 }3198 else {3199 knownProps[name] = prop;3200 deduped.push(prop);3201 }3202 }3203 return deduped;3204}3205function mergeAsArray(existing, incoming) {3206 if (existing.value.type === 16 /* JS_ARRAY_EXPRESSION */) {3207 existing.value.elements.push(incoming.value);3208 }3209 else {3210 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);3211 }3212}3213function buildDirectiveArgs(dir, context) {3214 const dirArgs = [];3215 const runtime = directiveImportMap.get(dir);3216 if (runtime) {3217 context.helper(runtime);3218 dirArgs.push(context.helperString(runtime));3219 }3220 else {3221 // inject statement for resolving directive3222 context.helper(RESOLVE_DIRECTIVE);3223 context.directives.add(dir.name);3224 dirArgs.push(toValidAssetId(dir.name, `directive`));3225 }3226 const { loc } = dir;3227 if (dir.exp)...

Full Screen

Full Screen

compiler-core.esm-bundler.js

Source:compiler-core.esm-bundler.js Github

copy

Full Screen

...2774 dynamicPropNames = propsBuildResult.dynamicPropNames;2775 const directives = propsBuildResult.directives;2776 vnodeDirectives =2777 directives && directives.length2778 ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context)))2779 : undefined;2780 }2781 // children2782 if (node.children.length > 0) {2783 if (vnodeTag === KEEP_ALIVE) {2784 // Although a built-in component, we compile KeepAlive with raw children2785 // instead of slot functions so that it can be used inside Transition2786 // or other Transition-wrapping HOCs.2787 // To ensure correct updates with block optimizations, we need to:2788 // 1. Force keep-alive into a block. This avoids its children being2789 // collected by a parent block.2790 shouldUseBlock = true;2791 // 2. Force keep-alive to always be updated, since it uses raw children.2792 patchFlag |= 1024 /* DYNAMIC_SLOTS */;2793 if ((process.env.NODE_ENV !== 'production') && node.children.length > 1) {2794 context.onError(createCompilerError(42 /* X_KEEP_ALIVE_INVALID_CHILDREN */, {2795 start: node.children[0].loc.start,2796 end: node.children[node.children.length - 1].loc.end,2797 source: ''2798 }));2799 }2800 }2801 const shouldBuildAsSlots = isComponent &&2802 // Teleport is not a real component and has dedicated runtime handling2803 vnodeTag !== TELEPORT &&2804 // explained above.2805 vnodeTag !== KEEP_ALIVE;2806 if (shouldBuildAsSlots) {2807 const { slots, hasDynamicSlots } = buildSlots(node, context);2808 vnodeChildren = slots;2809 if (hasDynamicSlots) {2810 patchFlag |= 1024 /* DYNAMIC_SLOTS */;2811 }2812 }2813 else if (node.children.length === 1 && vnodeTag !== TELEPORT) {2814 const child = node.children[0];2815 const type = child.type;2816 // check for dynamic text children2817 const hasDynamicTextChild = type === 5 /* INTERPOLATION */ ||2818 type === 8 /* COMPOUND_EXPRESSION */;2819 if (hasDynamicTextChild && !isStaticNode(child)) {2820 patchFlag |= 1 /* TEXT */;2821 }2822 // pass directly if the only child is a text node2823 // (plain / interpolation / expression)2824 if (hasDynamicTextChild || type === 2 /* TEXT */) {2825 vnodeChildren = child;2826 }2827 else {2828 vnodeChildren = node.children;2829 }2830 }2831 else {2832 vnodeChildren = node.children;2833 }2834 }2835 // patchFlag & dynamicPropNames2836 if (patchFlag !== 0) {2837 if ((process.env.NODE_ENV !== 'production')) {2838 if (patchFlag < 0) {2839 // special flags (negative and mutually exclusive)2840 vnodePatchFlag = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`;2841 }2842 else {2843 // bitwise flags2844 const flagNames = Object.keys(PatchFlagNames)2845 .map(Number)2846 .filter(n => n > 0 && patchFlag & n)2847 .map(n => PatchFlagNames[n])2848 .join(`, `);2849 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;2850 }2851 }2852 else {2853 vnodePatchFlag = String(patchFlag);2854 }2855 if (dynamicPropNames && dynamicPropNames.length) {2856 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);2857 }2858 }2859 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* isForBlock */, node.loc);2860 };2861};2862function resolveComponentType(node, context, ssr = false) {2863 const { tag } = node;2864 // 1. dynamic component2865 const isProp = node.tag === 'component' ? findProp(node, 'is') : findDir(node, 'is');2866 if (isProp) {2867 const exp = isProp.type === 6 /* ATTRIBUTE */2868 ? isProp.value && createSimpleExpression(isProp.value.content, true)2869 : isProp.exp;2870 if (exp) {2871 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [2872 exp2873 ]);2874 }2875 }2876 // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)2877 const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);2878 if (builtIn) {2879 // built-ins are simply fallthroughs / have special handling during ssr2880 // no we don't need to import their runtime equivalents2881 if (!ssr)2882 context.helper(builtIn);2883 return builtIn;2884 }2885 // 3. user component (resolve)2886 context.helper(RESOLVE_COMPONENT);2887 context.components.add(tag);2888 return toValidAssetId(tag, `component`);2889}2890function buildProps(node, context, props = node.props, ssr = false) {2891 const { tag, loc: elementLoc } = node;2892 const isComponent = node.tagType === 1 /* COMPONENT */;2893 let properties = [];2894 const mergeArgs = [];2895 const runtimeDirectives = [];2896 // patchFlag analysis2897 let patchFlag = 0;2898 let hasRef = false;2899 let hasClassBinding = false;2900 let hasStyleBinding = false;2901 let hasHydrationEventBinding = false;2902 let hasDynamicKeys = false;2903 const dynamicPropNames = [];2904 const analyzePatchFlag = ({ key, value }) => {2905 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {2906 const name = key.content;2907 if (!isComponent &&2908 isOn(name) &&2909 // omit the flag for click handlers becaues hydration gives click2910 // dedicated fast path.2911 name.toLowerCase() !== 'onclick' &&2912 // omit v-model handlers2913 name !== 'onUpdate:modelValue') {2914 hasHydrationEventBinding = true;2915 }2916 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||2917 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||2918 value.type === 8 /* COMPOUND_EXPRESSION */) &&2919 isStaticNode(value))) {2920 // skip if the prop is a cached handler or has constant value2921 return;2922 }2923 if (name === 'ref') {2924 hasRef = true;2925 }2926 else if (name === 'class' && !isComponent) {2927 hasClassBinding = true;2928 }2929 else if (name === 'style' && !isComponent) {2930 hasStyleBinding = true;2931 }2932 else if (name !== 'key' && !dynamicPropNames.includes(name)) {2933 dynamicPropNames.push(name);2934 }2935 }2936 else {2937 hasDynamicKeys = true;2938 }2939 };2940 for (let i = 0; i < props.length; i++) {2941 // static attribute2942 const prop = props[i];2943 if (prop.type === 6 /* ATTRIBUTE */) {2944 const { loc, name, value } = prop;2945 if (name === 'ref') {2946 hasRef = true;2947 }2948 // skip :is on <component>2949 if (name === 'is' && tag === 'component') {2950 continue;2951 }2952 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));2953 }2954 else {2955 // directives2956 const { name, arg, exp, loc } = prop;2957 const isBind = name === 'bind';2958 const isOn = name === 'on';2959 // skip v-slot - it is handled by its dedicated transform.2960 if (name === 'slot') {2961 if (!isComponent) {2962 context.onError(createCompilerError(37 /* X_V_SLOT_MISPLACED */, loc));2963 }2964 continue;2965 }2966 // skip v-once - it is handled by its dedicated transform.2967 if (name === 'once') {2968 continue;2969 }2970 // skip v-is and :is on <component>2971 if (name === 'is' ||2972 (isBind && tag === 'component' && isBindKey(arg, 'is'))) {2973 continue;2974 }2975 // skip v-on in SSR compilation2976 if (isOn && ssr) {2977 continue;2978 }2979 // special case for v-bind and v-on with no argument2980 if (!arg && (isBind || isOn)) {2981 hasDynamicKeys = true;2982 if (exp) {2983 if (properties.length) {2984 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));2985 properties = [];2986 }2987 if (isBind) {2988 mergeArgs.push(exp);2989 }2990 else {2991 // v-on="obj" -> toHandlers(obj)2992 mergeArgs.push({2993 type: 14 /* JS_CALL_EXPRESSION */,2994 loc,2995 callee: context.helper(TO_HANDLERS),2996 arguments: [exp]2997 });2998 }2999 }3000 else {3001 context.onError(createCompilerError(isBind3002 ? 31 /* X_V_BIND_NO_EXPRESSION */3003 : 32 /* X_V_ON_NO_EXPRESSION */, loc));3004 }3005 continue;3006 }3007 const directiveTransform = context.directiveTransforms[name];3008 if (directiveTransform) {3009 // has built-in directive transform.3010 const { props, needRuntime } = directiveTransform(prop, node, context);3011 !ssr && props.forEach(analyzePatchFlag);3012 properties.push(...props);3013 if (needRuntime) {3014 runtimeDirectives.push(prop);3015 if (isSymbol(needRuntime)) {3016 directiveImportMap.set(prop, needRuntime);3017 }3018 }3019 }3020 else {3021 // no built-in transform, this is a user custom directive.3022 runtimeDirectives.push(prop);3023 }3024 }3025 }3026 let propsExpression = undefined;3027 // has v-bind="object" or v-on="object", wrap with mergeProps3028 if (mergeArgs.length) {3029 if (properties.length) {3030 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3031 }3032 if (mergeArgs.length > 1) {3033 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);3034 }3035 else {3036 // single v-bind with nothing else - no need for a mergeProps call3037 propsExpression = mergeArgs[0];3038 }3039 }3040 else if (properties.length) {3041 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);3042 }3043 // patchFlag analysis3044 if (hasDynamicKeys) {3045 patchFlag |= 16 /* FULL_PROPS */;3046 }3047 else {3048 if (hasClassBinding) {3049 patchFlag |= 2 /* CLASS */;3050 }3051 if (hasStyleBinding) {3052 patchFlag |= 4 /* STYLE */;3053 }3054 if (dynamicPropNames.length) {3055 patchFlag |= 8 /* PROPS */;3056 }3057 if (hasHydrationEventBinding) {3058 patchFlag |= 32 /* HYDRATE_EVENTS */;3059 }3060 }3061 if ((patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) &&3062 (hasRef || runtimeDirectives.length > 0)) {3063 patchFlag |= 512 /* NEED_PATCH */;3064 }3065 return {3066 props: propsExpression,3067 directives: runtimeDirectives,3068 patchFlag,3069 dynamicPropNames3070 };3071}3072// Dedupe props in an object literal.3073// Literal duplicated attributes would have been warned during the parse phase,3074// however, it's possible to encounter duplicated `onXXX` handlers with different3075// modifiers. We also need to merge static and dynamic class / style attributes.3076// - onXXX handlers / style: merge into array3077// - class: merge into single expression with concatenation3078function dedupeProperties(properties) {3079 const knownProps = new Map();3080 const deduped = [];3081 for (let i = 0; i < properties.length; i++) {3082 const prop = properties[i];3083 // dynamic keys are always allowed3084 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {3085 deduped.push(prop);3086 continue;3087 }3088 const name = prop.key.content;3089 const existing = knownProps.get(name);3090 if (existing) {3091 if (name === 'style' || name === 'class' || name.startsWith('on')) {3092 mergeAsArray(existing, prop);3093 }3094 // unexpected duplicate, should have emitted error during parse3095 }3096 else {3097 knownProps.set(name, prop);3098 deduped.push(prop);3099 }3100 }3101 return deduped;3102}3103function mergeAsArray(existing, incoming) {3104 if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) {3105 existing.value.elements.push(incoming.value);3106 }3107 else {3108 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);3109 }3110}3111function buildDirectiveArgs(dir, context) {3112 const dirArgs = [];3113 const runtime = directiveImportMap.get(dir);3114 if (runtime) {3115 dirArgs.push(context.helperString(runtime));3116 }3117 else {3118 // inject statement for resolving directive3119 context.helper(RESOLVE_DIRECTIVE);3120 context.directives.add(dir.name);3121 dirArgs.push(toValidAssetId(dir.name, `directive`));3122 }3123 const { loc } = dir;3124 if (dir.exp)3125 dirArgs.push(dir.exp); ...

Full Screen

Full Screen

note-ast-transform.js

Source:note-ast-transform.js Github

copy

Full Screen

...858 dynamicPropNames = propsBuildResult.dynamicPropNames;859 const directives = propsBuildResult.directives;860 vnodeDirectives =861 directives && directives.length862 ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context)))863 : undefined;864 }865 // children866 if (node.children.length > 0) {867 if (vnodeTag === KEEP_ALIVE) {868 // Although a built-in component, we compile KeepAlive with raw children869 // instead of slot functions so that it can be used inside Transition870 // or other Transition-wrapping HOCs.871 // To ensure correct updates with block optimizations, we need to:872 // 1. Force keep-alive into a block. This avoids its children being873 // collected by a parent block.874 shouldUseBlock = true;875 // 2. Force keep-alive to always be updated, since it uses raw children.876 patchFlag |= 1024 /* DYNAMIC_SLOTS */;...

Full Screen

Full Screen

transformElement.js

Source:transformElement.js Github

copy

Full Screen

...121 var vnode = ast_1.createCallExpression(context.helper(runtimeHelpers_1.CREATE_VNODE), args, loc);122 if (runtimeDirectives && runtimeDirectives.length) {123 node.codegenNode = ast_1.createCallExpression(context.helper(runtimeHelpers_1.WITH_DIRECTIVES), [124 vnode,125 ast_1.createArrayExpression(runtimeDirectives.map(function (dir) { return buildDirectiveArgs(dir, context); }), loc)126 ], loc);127 }128 else {129 node.codegenNode = vnode;130 }131 };132};133function buildProps(node, context, props) {134 if (props === void 0) { props = node.props; }135 var elementLoc = node.loc;136 var isComponent = node.tagType === 1;137 var properties = [];138 var mergeArgs = [];139 var runtimeDirectives = [];140 var patchFlag = 0;141 var hasRef = false;142 var hasClassBinding = false;143 var hasStyleBinding = false;144 var hasDynamicKeys = false;145 var dynamicPropNames = [];146 var analyzePatchFlag = function (_a) {147 var key = _a.key, value = _a.value;148 if (key.type === 4 && key.isStatic) {149 if (value.type === 20 ||150 ((value.type === 4 ||151 value.type === 8) &&152 hoistStatic_1.isStaticNode(value))) {153 return;154 }155 var name_1 = key.content;156 if (name_1 === 'ref') {157 hasRef = true;158 }159 else if (name_1 === 'class') {160 hasClassBinding = true;161 }162 else if (name_1 === 'style') {163 hasStyleBinding = true;164 }165 else if (name_1 !== 'key') {166 dynamicPropNames.push(name_1);167 }168 }169 else {170 hasDynamicKeys = true;171 }172 };173 for (var i = 0; i < props.length; i++) {174 var prop = props[i];175 if (prop.type === 6) {176 var loc = prop.loc, name_2 = prop.name, value = prop.value;177 if (name_2 === 'ref') {178 hasRef = true;179 }180 properties.push(ast_1.createObjectProperty(ast_1.createSimpleExpression(name_2, true, utils_1.getInnerRange(loc, 0, name_2.length)), ast_1.createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));181 }182 else {183 var name_3 = prop.name, arg = prop.arg, exp = prop.exp, loc = prop.loc;184 if (name_3 === 'slot') {185 if (!isComponent) {186 context.onError(errors_1.createCompilerError(46, loc));187 }188 continue;189 }190 if (name_3 === 'once') {191 continue;192 }193 var isBind = name_3 === 'bind';194 var isOn = name_3 === 'on';195 if (!arg && (isBind || isOn)) {196 hasDynamicKeys = true;197 if (exp) {198 if (properties.length) {199 mergeArgs.push(ast_1.createObjectExpression(dedupeProperties(properties), elementLoc));200 properties = [];201 }202 if (isBind) {203 mergeArgs.push(exp);204 }205 else {206 mergeArgs.push({207 type: 13,208 loc: loc,209 callee: context.helper(runtimeHelpers_1.TO_HANDLERS),210 arguments: [exp]211 });212 }213 }214 else {215 context.onError(errors_1.createCompilerError(isBind216 ? 39217 : 40, loc));218 }219 continue;220 }221 var directiveTransform = context.directiveTransforms[name_3];222 if (directiveTransform) {223 var _a = directiveTransform(prop, node, context), props_1 = _a.props, needRuntime = _a.needRuntime;224 props_1.forEach(analyzePatchFlag);225 properties.push.apply(properties, props_1);226 if (needRuntime) {227 runtimeDirectives.push(prop);228 if (shared_1.isSymbol(needRuntime)) {229 directiveImportMap.set(prop, needRuntime);230 }231 }232 }233 else {234 runtimeDirectives.push(prop);235 }236 }237 }238 var propsExpression = undefined;239 if (mergeArgs.length) {240 if (properties.length) {241 mergeArgs.push(ast_1.createObjectExpression(dedupeProperties(properties), elementLoc));242 }243 if (mergeArgs.length > 1) {244 propsExpression = ast_1.createCallExpression(context.helper(runtimeHelpers_1.MERGE_PROPS), mergeArgs, elementLoc);245 }246 else {247 propsExpression = mergeArgs[0];248 }249 }250 else if (properties.length) {251 propsExpression = ast_1.createObjectExpression(dedupeProperties(properties), elementLoc);252 }253 if (hasDynamicKeys) {254 patchFlag |= shared_1.PatchFlags.FULL_PROPS;255 }256 else {257 if (hasClassBinding) {258 patchFlag |= shared_1.PatchFlags.CLASS;259 }260 if (hasStyleBinding) {261 patchFlag |= shared_1.PatchFlags.STYLE;262 }263 if (dynamicPropNames.length) {264 patchFlag |= shared_1.PatchFlags.PROPS;265 }266 }267 if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {268 patchFlag |= shared_1.PatchFlags.NEED_PATCH;269 }270 return {271 props: propsExpression,272 directives: runtimeDirectives,273 patchFlag: patchFlag,274 dynamicPropNames: dynamicPropNames275 };276}277exports.buildProps = buildProps;278function dedupeProperties(properties) {279 var knownProps = {};280 var deduped = [];281 for (var i = 0; i < properties.length; i++) {282 var prop = properties[i];283 if (prop.key.type === 8 || !prop.key.isStatic) {284 deduped.push(prop);285 continue;286 }287 var name_4 = prop.key.content;288 var existing = knownProps[name_4];289 if (existing) {290 if (name_4 === 'style' ||291 name_4 === 'class' ||292 name_4.startsWith('on') ||293 name_4.startsWith('vnode')) {294 mergeAsArray(existing, prop);295 }296 }297 else {298 knownProps[name_4] = prop;299 deduped.push(prop);300 }301 }302 return deduped;303}304function mergeAsArray(existing, incoming) {305 if (existing.value.type === 16) {306 existing.value.elements.push(incoming.value);307 }308 else {309 existing.value = ast_1.createArrayExpression([existing.value, incoming.value], existing.loc);310 }311}312function buildDirectiveArgs(dir, context) {313 var dirArgs = [];314 var runtime = directiveImportMap.get(dir);315 if (runtime) {316 context.helper(runtime);317 dirArgs.push(context.helperString(runtime));318 }319 else {320 context.helper(runtimeHelpers_1.RESOLVE_DIRECTIVE);321 context.directives.add(dir.name);322 dirArgs.push(utils_1.toValidAssetId(dir.name, "directive"));323 }324 var loc = dir.loc;325 if (dir.exp)326 dirArgs.push(dir.exp);...

Full Screen

Full Screen

transform.js

Source:transform.js Github

copy

Full Screen

...228 dynamicPropNames = propsBuildResult.dynamicPropNames229 const directives = propsBuildResult.directives230 vnodeDirectives =231 directives && directives.length232 ? createArrayExpression(directives.map(dir => buildDirectiveArgs(dir, context)))233 : undefined234 }235 // 处理 children236 if (node.children.length > 0) {237 if (vnodeTag === KEEP_ALIVE) {238 // 把 KeepAlive 看做是一个 Block，这样可以避免它的子节点的动态节点被父 Block 收集239 shouldUseBlock = true240 // 2. 确保它始终更新241 patchFlag |= 1024 /* DYNAMIC_SLOTS */242 if ((process.env.NODE_ENV !== 'production') && node.children.length > 1) {243 context.onError(createCompilerError(42 /* X_KEEP_ALIVE_INVALID_CHILDREN */, {244 start: node.children[0].loc.start,245 end: node.children[node.children.length - 1].loc.end,246 source: ''...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1import { buildDirectiveArgs } from '@vue/compiler-core';2import { createStore } from 'vuex'3export default createStore({4 state: {5 contador: 0,6 color: ''7 },8 getters: {9 cuadrado(state){10 return state.contador * state.contador;11 }12 },13 mutations: { // we use commit for mutations (store.commit(''))14 subirContador(state, random){15 state.contador += random;16 },17 bajarContador(state, random){18 state.contador -= random;19 },20 colorChange(state, color){21 state.color = color;22 }23 },24 actions: { // we use dispatch for actions (store.dispatch('')) 25 // we can use async in actions but not in mutations26 async subirContador({commit}){27 const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new');28 const results = await res.json();29 commit('subirContador', results)30 },31 async bajarContador({commit}){32 const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new');33 const results = await res.json();34 commit('bajarContador', results)35 },36 colorChange({commit}, color){37 commit('colorChange', color);38 }39 },40 modules: {41 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { PlaywrightInternal } = require('@playwright/test/lib/server/playwright');2const playwrightInternal = new PlaywrightInternal();3const { buildDirectiveArgs } = playwrightInternal;4const args = buildDirectiveArgs({5 params: {6 },7});8console.log(args);9["test",{"foo":"bar"}]10const { test } = require('@playwright/test');11test('test', async ({ page, browser }) => {12 const browserContext = await browser.newContext();13 await browserContext.addInitScript(() => {14 window.foo = 'bar';15 });16 const cookies = await browserContext.cookies();17 console.log(cookies);18});19const { test } = require('@playwright/test');20test('test', async ({ page, context }) => {21 await context.addInitScript(() => {22 window.foo = 'bar';23 });24 const cookies = await context.cookies();25 console.log(cookies);26});27const { test, expect } = require('@playwright/test');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { buildDirectiveArgs } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement');2const args = buildDirectiveArgs('click', [0.5, 0.5], { modifiers: 4, button: 'right' });3{4 "devDependencies": {5 },6 "scripts": {7 }8}9const { test, expect } = require('@playwright/test');10const { buildDirectiveArgs } = require('playwright-internal-api');11test('my test', async ({ page }) => {12 const args = buildDirectiveArgs('click', [0.5, 0.5], { modifiers: 4, button: 'right' });13 expect(args).toEqual(['click', { position: { x: 0.5, y: 0.5 }, modifiers: 4, button: 'right' }]);14});15[MIT](LICENSE)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { PlaywrightInternal } = require('playwright');2const internal = new PlaywrightInternal();3const args = internal.buildDirectiveArgs('page', 'waitForSelector', { selector: 'a' });4console.log(args);5{6 params: { selector: 'a' }7}8[Apache 2.0](LICENSE)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { buildDirectiveArgs } = require('@playwright/test/lib/test');2const args = buildDirectiveArgs();3console.log(args);4{5 viewport: { width: 1280, height: 720 },6 geolocation: { longitude: -122.4194, latitude: 37.7749, accuracy: 0 },7 extraHTTPHeaders: {},8 httpCredentials: { username: '', password: '' },9 userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/86.0.4240.0 Safari/537.36',

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { buildDirectiveArgs } = require('playwright/lib/server/injected/injectedScript.js');2const args = buildDirectiveArgs("click", { selector: 'button' });3console.log(args);4{ selector: 'button' }5const { buildDirectiveArgs } = require('playwright-directive-args');6const args = buildDirectiveArgs("click", { selector: 'button' });7console.log(args);

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