Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use buildDirectiveArgs method in Playwright Internal

Best JavaScript code snippet using playwright-internal

dep-56143c31.js

Source:dep-56143c31.js

...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    }...

compiler-dom.global.js

Source:compiler-dom.global.js

...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)...

compiler-core.cjs.js

Source:compiler-core.cjs.js

...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)...

compiler-core.esm-bundler.js

Source:compiler-core.esm-bundler.js

...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);
...

note-ast-transform.js

Source:note-ast-transform.js

...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 */;...

transformElement.js

Source:transformElement.js

...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);...

transform.js

Source:transform.js

...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: ''...

index.js

Source:index.js

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  }...

Using AI Code Generation

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');

Using AI Code Generation

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)

Using AI Code Generation

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)

Using AI Code Generation

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',

Using AI Code Generation

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);

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:

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.
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.
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.
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.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
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.
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.
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.
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.
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.
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.
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 Documentation Sign up Free

›

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

How to use buildDirectiveArgs method in Playwright Internal

Playwright tutorial

Chapters:

Run Playwright Internal automation tests on LambdaTest cloud grid

Try LambdaTest Now !!

Was this article helpful?