Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use stringifyDynamicPropNames method in Playwright Internal
Best JavaScript code snippet using playwright-internal
compiler-core.cjs.js
Source:compiler-core.cjs.js 
...3384 .join(`, `);3385 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;3386 }3387 if (dynamicPropNames && dynamicPropNames.length) {3388 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);3389 }3390 }3391 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, shouldUseBlock, false /* isForBlock */, node.loc);3392 };3393};3394function resolveComponentType(node, context, ssr = false) {3395 const { tag } = node;3396 // 1. dynamic component3397 const isProp = node.tag === 'component' && findProp(node, 'is');3398 if (isProp) {3399 // static <component is="foo" />3400 if (isProp.type === 6 /* ATTRIBUTE */) {3401 const isType = isProp.value && isProp.value.content;3402 if (isType) {3403 context.helper(RESOLVE_COMPONENT);3404 context.components.add(isType);3405 return toValidAssetId(isType, `component`);3406 }3407 }3408 // dynamic <component :is="asdf" />3409 else if (isProp.exp) {3410 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), 3411 // _ctx.$ exposes the owner instance of current render function3412 [isProp.exp, context.prefixIdentifiers ? `_ctx.$` : `$`]);3413 }3414 }3415 // 2. built-in components (Portal, Transition, KeepAlive, Suspense...)3416 const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);3417 if (builtIn) {3418 // built-ins are simply fallthroughs / have special handling during ssr3419 // no we don't need to import their runtime equivalents3420 if (!ssr)3421 context.helper(builtIn);3422 return builtIn;3423 }3424 // 3. user component (resolve)3425 context.helper(RESOLVE_COMPONENT);3426 context.components.add(tag);3427 return toValidAssetId(tag, `component`);3428}3429function buildProps(node, context, props = node.props, ssr = false) {3430 const { tag, loc: elementLoc } = node;3431 const isComponent = node.tagType === 1 /* COMPONENT */;3432 let properties = [];3433 const mergeArgs = [];3434 const runtimeDirectives = [];3435 // patchFlag analysis3436 let patchFlag = 0;3437 let hasRef = false;3438 let hasClassBinding = false;3439 let hasStyleBinding = false;3440 let hasDynamicKeys = false;3441 const dynamicPropNames = [];3442 const analyzePatchFlag = ({ key, value }) => {3443 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {3444 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||3445 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||3446 value.type === 8 /* COMPOUND_EXPRESSION */) &&3447 isStaticNode(value))) {3448 return;3449 }3450 const name = key.content;3451 if (name === 'ref') {3452 hasRef = true;3453 }3454 else if (name === 'class') {3455 hasClassBinding = true;3456 }3457 else if (name === 'style') {3458 hasStyleBinding = true;3459 }3460 else if (name !== 'key') {3461 dynamicPropNames.push(name);3462 }3463 }3464 else {3465 hasDynamicKeys = true;3466 }3467 };3468 for (let i = 0; i < props.length; i++) {3469 // static attribute3470 const prop = props[i];3471 if (prop.type === 6 /* ATTRIBUTE */) {3472 const { loc, name, value } = prop;3473 if (name === 'ref') {3474 hasRef = true;3475 }3476 // skip :is on <component>3477 if (name === 'is' && tag === 'component') {3478 continue;3479 }3480 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));3481 }3482 else {3483 // directives3484 const { name, arg, exp, loc } = prop;3485 const isBind = name === 'bind';3486 const isOn = name === 'on';3487 // skip v-slot - it is handled by its dedicated transform.3488 if (name === 'slot') {3489 if (!isComponent) {3490 context.onError(createCompilerError(45 /* X_V_SLOT_MISPLACED */, loc));3491 }3492 continue;3493 }3494 // skip v-once - it is handled by its dedicated transform.3495 if (name === 'once') {3496 continue;3497 }3498 // skip :is on <component>3499 if (isBind && tag === 'component' && isBindKey(arg, 'is')) {3500 continue;3501 }3502 // skip v-on in SSR compilation3503 if (isOn && ssr) {3504 continue;3505 }3506 // special case for v-bind and v-on with no argument3507 if (!arg && (isBind || isOn)) {3508 hasDynamicKeys = true;3509 if (exp) {3510 if (properties.length) {3511 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3512 properties = [];3513 }3514 if (isBind) {3515 mergeArgs.push(exp);3516 }3517 else {3518 // v-on="obj" -> toHandlers(obj)3519 mergeArgs.push({3520 type: 14 /* JS_CALL_EXPRESSION */,3521 loc,3522 callee: context.helper(TO_HANDLERS),3523 arguments: [exp]3524 });3525 }3526 }3527 else {3528 context.onError(createCompilerError(isBind3529 ? 38 /* X_V_BIND_NO_EXPRESSION */3530 : 39 /* X_V_ON_NO_EXPRESSION */, loc));3531 }3532 continue;3533 }3534 const directiveTransform = context.directiveTransforms[name];3535 if (directiveTransform) {3536 // has built-in directive transform.3537 const { props, needRuntime } = directiveTransform(prop, node, context);3538 !ssr && props.forEach(analyzePatchFlag);3539 properties.push(...props);3540 if (needRuntime) {3541 runtimeDirectives.push(prop);3542 if (isSymbol(needRuntime)) {3543 directiveImportMap.set(prop, needRuntime);3544 }3545 }3546 }3547 else {3548 // no built-in transform, this is a user custom directive.3549 runtimeDirectives.push(prop);3550 }3551 }3552 }3553 let propsExpression = undefined;3554 // has v-bind="object" or v-on="object", wrap with mergeProps3555 if (mergeArgs.length) {3556 if (properties.length) {3557 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3558 }3559 if (mergeArgs.length > 1) {3560 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);3561 }3562 else {3563 // single v-bind with nothing else - no need for a mergeProps call3564 propsExpression = mergeArgs[0];3565 }3566 }3567 else if (properties.length) {3568 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);3569 }3570 // patchFlag analysis3571 if (hasDynamicKeys) {3572 patchFlag |= 16 /* FULL_PROPS */;3573 }3574 else {3575 if (hasClassBinding) {3576 patchFlag |= 2 /* CLASS */;3577 }3578 if (hasStyleBinding) {3579 patchFlag |= 4 /* STYLE */;3580 }3581 if (dynamicPropNames.length) {3582 patchFlag |= 8 /* PROPS */;3583 }3584 }3585 if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {3586 patchFlag |= 32 /* NEED_PATCH */;3587 }3588 return {3589 props: propsExpression,3590 directives: runtimeDirectives,3591 patchFlag,3592 dynamicPropNames3593 };3594}3595// Dedupe props in an object literal.3596// Literal duplicated attributes would have been warned during the parse phase,3597// however, it's possible to encounter duplicated `onXXX` handlers with different3598// modifiers. We also need to merge static and dynamic class / style attributes.3599// - onXXX handlers / style: merge into array3600// - class: merge into single expression with concatenation3601function dedupeProperties(properties) {3602 const knownProps = new Map();3603 const deduped = [];3604 for (let i = 0; i < properties.length; i++) {3605 const prop = properties[i];3606 // dynamic keys are always allowed3607 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {3608 deduped.push(prop);3609 continue;3610 }3611 const name = prop.key.content;3612 const existing = knownProps.get(name);3613 if (existing) {3614 if (name === 'style' || name === 'class' || name.startsWith('on')) {3615 mergeAsArray(existing, prop);3616 }3617 // unexpected duplicate, should have emitted error during parse3618 }3619 else {3620 knownProps.set(name, prop);3621 deduped.push(prop);3622 }3623 }3624 return deduped;3625}3626function mergeAsArray(existing, incoming) {3627 if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) {3628 existing.value.elements.push(incoming.value);3629 }3630 else {3631 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);3632 }3633}3634function buildDirectiveArgs(dir, context) {3635 const dirArgs = [];3636 const runtime = directiveImportMap.get(dir);3637 if (runtime) {3638 context.helper(runtime);3639 dirArgs.push(context.helperString(runtime));3640 }3641 else {3642 // inject statement for resolving directive3643 context.helper(RESOLVE_DIRECTIVE);3644 context.directives.add(dir.name);3645 dirArgs.push(toValidAssetId(dir.name, `directive`));3646 }3647 const { loc } = dir;3648 if (dir.exp)3649 dirArgs.push(dir.exp);3650 if (dir.arg) {3651 if (!dir.exp) {3652 dirArgs.push(`void 0`);3653 }3654 dirArgs.push(dir.arg);3655 }3656 if (Object.keys(dir.modifiers).length) {3657 if (!dir.arg) {3658 if (!dir.exp) {3659 dirArgs.push(`void 0`);3660 }3661 dirArgs.push(`void 0`);3662 }3663 const trueExpression = createSimpleExpression(`true`, false, loc);3664 dirArgs.push(createObjectExpression(dir.modifiers.map(modifier => createObjectProperty(modifier, trueExpression)), loc));3665 }3666 return createArrayExpression(dirArgs, dir.loc);3667}3668function stringifyDynamicPropNames(props) {3669 let propsNamesString = `[`;3670 for (let i = 0, l = props.length; i < l; i++) {3671 propsNamesString += JSON.stringify(props[i]);3672 if (i < l - 1)3673 propsNamesString += ', ';3674 }3675 return propsNamesString + `]`;3676}3677const transformSlotOutlet = (node, context) => {3678 if (isSlotOutlet(node)) {3679 const { children, loc } = node;3680 const { slotName, slotProps } = processSlotOutlet(node, context);3681 const slotArgs = [3682 context.prefixIdentifiers ? `_ctx.$slots` : `$slots`,
...
compiler-dom.esm-browser.js
Source:compiler-dom.esm-browser.js
...2976 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;2977 }2978 }2979 if (dynamicPropNames && dynamicPropNames.length) {2980 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);2981 }2982 }2983 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* isForBlock */, node.loc);2984 };2985};2986function resolveComponentType(node, context, ssr = false) {2987 const { tag } = node;2988 // 1. dynamic component2989 const isProp = node.tag === 'component' ? findProp(node, 'is') : findDir(node, 'is');2990 if (isProp) {2991 const exp = isProp.type === 6 /* ATTRIBUTE */2992 ? isProp.value && createSimpleExpression(isProp.value.content, true)2993 : isProp.exp;2994 if (exp) {2995 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [2996 exp2997 ]);2998 }2999 }3000 // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)3001 const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);3002 if (builtIn) {3003 // built-ins are simply fallthroughs / have special handling during ssr3004 // no we don't need to import their runtime equivalents3005 if (!ssr)3006 context.helper(builtIn);3007 return builtIn;3008 }3009 // 3. user component (resolve)3010 context.helper(RESOLVE_COMPONENT);3011 context.components.add(tag);3012 return toValidAssetId(tag, `component`);3013}3014function buildProps(node, context, props = node.props, ssr = false) {3015 const { tag, loc: elementLoc } = node;3016 const isComponent = node.tagType === 1 /* COMPONENT */;3017 let properties = [];3018 const mergeArgs = [];3019 const runtimeDirectives = [];3020 // patchFlag analysis3021 let patchFlag = 0;3022 let hasRef = false;3023 let hasClassBinding = false;3024 let hasStyleBinding = false;3025 let hasHydrationEventBinding = false;3026 let hasDynamicKeys = false;3027 const dynamicPropNames = [];3028 const analyzePatchFlag = ({ key, value }) => {3029 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {3030 const name = key.content;3031 if (!isComponent &&3032 isOn(name) &&3033 // omit the flag for click handlers becaues hydration gives click3034 // dedicated fast path.3035 name.toLowerCase() !== 'onclick' &&3036 // omit v-model handlers3037 name !== 'onUpdate:modelValue') {3038 hasHydrationEventBinding = true;3039 }3040 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||3041 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||3042 value.type === 8 /* COMPOUND_EXPRESSION */) &&3043 isStaticNode(value))) {3044 // skip if the prop is a cached handler or has constant value3045 return;3046 }3047 if (name === 'ref') {3048 hasRef = true;3049 }3050 else if (name === 'class' && !isComponent) {3051 hasClassBinding = true;3052 }3053 else if (name === 'style' && !isComponent) {3054 hasStyleBinding = true;3055 }3056 else if (name !== 'key' && !dynamicPropNames.includes(name)) {3057 dynamicPropNames.push(name);3058 }3059 }3060 else {3061 hasDynamicKeys = true;3062 }3063 };3064 for (let i = 0; i < props.length; i++) {3065 // static attribute3066 const prop = props[i];3067 if (prop.type === 6 /* ATTRIBUTE */) {3068 const { loc, name, value } = prop;3069 if (name === 'ref') {3070 hasRef = true;3071 }3072 // skip :is on <component>3073 if (name === 'is' && tag === 'component') {3074 continue;3075 }3076 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));3077 }3078 else {3079 // directives3080 const { name, arg, exp, loc } = prop;3081 const isBind = name === 'bind';3082 const isOn = name === 'on';3083 // skip v-slot - it is handled by its dedicated transform.3084 if (name === 'slot') {3085 if (!isComponent) {3086 context.onError(createCompilerError(37 /* X_V_SLOT_MISPLACED */, loc));3087 }3088 continue;3089 }3090 // skip v-once - it is handled by its dedicated transform.3091 if (name === 'once') {3092 continue;3093 }3094 // skip v-is and :is on <component>3095 if (name === 'is' ||3096 (isBind && tag === 'component' && isBindKey(arg, 'is'))) {3097 continue;3098 }3099 // skip v-on in SSR compilation3100 if (isOn && ssr) {3101 continue;3102 }3103 // special case for v-bind and v-on with no argument3104 if (!arg && (isBind || isOn)) {3105 hasDynamicKeys = true;3106 if (exp) {3107 if (properties.length) {3108 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3109 properties = [];3110 }3111 if (isBind) {3112 mergeArgs.push(exp);3113 }3114 else {3115 // v-on="obj" -> toHandlers(obj)3116 mergeArgs.push({3117 type: 14 /* JS_CALL_EXPRESSION */,3118 loc,3119 callee: context.helper(TO_HANDLERS),3120 arguments: [exp]3121 });3122 }3123 }3124 else {3125 context.onError(createCompilerError(isBind3126 ? 31 /* X_V_BIND_NO_EXPRESSION */3127 : 32 /* X_V_ON_NO_EXPRESSION */, loc));3128 }3129 continue;3130 }3131 const directiveTransform = context.directiveTransforms[name];3132 if (directiveTransform) {3133 // has built-in directive transform.3134 const { props, needRuntime } = directiveTransform(prop, node, context);3135 !ssr && props.forEach(analyzePatchFlag);3136 properties.push(...props);3137 if (needRuntime) {3138 runtimeDirectives.push(prop);3139 if (isSymbol(needRuntime)) {3140 directiveImportMap.set(prop, needRuntime);3141 }3142 }3143 }3144 else {3145 // no built-in transform, this is a user custom directive.3146 runtimeDirectives.push(prop);3147 }3148 }3149 }3150 let propsExpression = undefined;3151 // has v-bind="object" or v-on="object", wrap with mergeProps3152 if (mergeArgs.length) {3153 if (properties.length) {3154 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3155 }3156 if (mergeArgs.length > 1) {3157 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);3158 }3159 else {3160 // single v-bind with nothing else - no need for a mergeProps call3161 propsExpression = mergeArgs[0];3162 }3163 }3164 else if (properties.length) {3165 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);3166 }3167 // patchFlag analysis3168 if (hasDynamicKeys) {3169 patchFlag |= 16 /* FULL_PROPS */;3170 }3171 else {3172 if (hasClassBinding) {3173 patchFlag |= 2 /* CLASS */;3174 }3175 if (hasStyleBinding) {3176 patchFlag |= 4 /* STYLE */;3177 }3178 if (dynamicPropNames.length) {3179 patchFlag |= 8 /* PROPS */;3180 }3181 if (hasHydrationEventBinding) {3182 patchFlag |= 32 /* HYDRATE_EVENTS */;3183 }3184 }3185 if ((patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */) &&3186 (hasRef || runtimeDirectives.length > 0)) {3187 patchFlag |= 512 /* NEED_PATCH */;3188 }3189 return {3190 props: propsExpression,3191 directives: runtimeDirectives,3192 patchFlag,3193 dynamicPropNames3194 };3195}3196// Dedupe props in an object literal.3197// Literal duplicated attributes would have been warned during the parse phase,3198// however, it's possible to encounter duplicated `onXXX` handlers with different3199// modifiers. We also need to merge static and dynamic class / style attributes.3200// - onXXX handlers / style: merge into array3201// - class: merge into single expression with concatenation3202function dedupeProperties(properties) {3203 const knownProps = new Map();3204 const deduped = [];3205 for (let i = 0; i < properties.length; i++) {3206 const prop = properties[i];3207 // dynamic keys are always allowed3208 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {3209 deduped.push(prop);3210 continue;3211 }3212 const name = prop.key.content;3213 const existing = knownProps.get(name);3214 if (existing) {3215 if (name === 'style' || name === 'class' || name.startsWith('on')) {3216 mergeAsArray(existing, prop);3217 }3218 // unexpected duplicate, should have emitted error during parse3219 }3220 else {3221 knownProps.set(name, prop);3222 deduped.push(prop);3223 }3224 }3225 return deduped;3226}3227function mergeAsArray(existing, incoming) {3228 if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) {3229 existing.value.elements.push(incoming.value);3230 }3231 else {3232 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);3233 }3234}3235function buildDirectiveArgs(dir, context) {3236 const dirArgs = [];3237 const runtime = directiveImportMap.get(dir);3238 if (runtime) {3239 dirArgs.push(context.helperString(runtime));3240 }3241 else {3242 // inject statement for resolving directive3243 context.helper(RESOLVE_DIRECTIVE);3244 context.directives.add(dir.name);3245 dirArgs.push(toValidAssetId(dir.name, `directive`));3246 }3247 const { loc } = dir;3248 if (dir.exp)3249 dirArgs.push(dir.exp);3250 if (dir.arg) {3251 if (!dir.exp) {3252 dirArgs.push(`void 0`);3253 }3254 dirArgs.push(dir.arg);3255 }3256 if (Object.keys(dir.modifiers).length) {3257 if (!dir.arg) {3258 if (!dir.exp) {3259 dirArgs.push(`void 0`);3260 }3261 dirArgs.push(`void 0`);3262 }3263 const trueExpression = createSimpleExpression(`true`, false, loc);3264 dirArgs.push(createObjectExpression(dir.modifiers.map(modifier => createObjectProperty(modifier, trueExpression)), loc));3265 }3266 return createArrayExpression(dirArgs, dir.loc);3267}3268function stringifyDynamicPropNames(props) {3269 let propsNamesString = `[`;3270 for (let i = 0, l = props.length; i < l; i++) {3271 propsNamesString += JSON.stringify(props[i]);3272 if (i < l - 1)3273 propsNamesString += ', ';3274 }3275 return propsNamesString + `]`;3276}3277const transformSlotOutlet = (node, context) => {3278 if (isSlotOutlet(node)) {3279 const { children, loc } = node;3280 const { slotName, slotProps } = processSlotOutlet(node, context);3281 const slotArgs = [3282 context.prefixIdentifiers ? `_ctx.$slots` : `$slots`,
...
compiler-core.cjs.prod.js
Source:compiler-core.cjs.prod.js
...3332 {3333 vnodePatchFlag = String(patchFlag);3334 }3335 if (dynamicPropNames && dynamicPropNames.length) {3336 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);3337 }3338 }3339 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, shouldUseBlock, false /* isForBlock */, node.loc);3340 };3341};3342function resolveComponentType(node, context, ssr = false) {3343 const { tag } = node;3344 // 1. dynamic component3345 const isProp = node.tag === 'component' && findProp(node, 'is');3346 if (isProp) {3347 // static <component is="foo" />3348 if (isProp.type === 6 /* ATTRIBUTE */) {3349 const isType = isProp.value && isProp.value.content;3350 if (isType) {3351 context.helper(RESOLVE_COMPONENT);3352 context.components.add(isType);3353 return toValidAssetId(isType, `component`);3354 }3355 }3356 // dynamic <component :is="asdf" />3357 else if (isProp.exp) {3358 return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), 3359 // _ctx.$ exposes the owner instance of current render function3360 [isProp.exp, context.prefixIdentifiers ? `_ctx.$` : `$`]);3361 }3362 }3363 // 2. built-in components (Portal, Transition, KeepAlive, Suspense...)3364 const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag);3365 if (builtIn) {3366 // built-ins are simply fallthroughs / have special handling during ssr3367 // no we don't need to import their runtime equivalents3368 if (!ssr)3369 context.helper(builtIn);3370 return builtIn;3371 }3372 // 3. user component (resolve)3373 context.helper(RESOLVE_COMPONENT);3374 context.components.add(tag);3375 return toValidAssetId(tag, `component`);3376}3377function buildProps(node, context, props = node.props, ssr = false) {3378 const { tag, loc: elementLoc } = node;3379 const isComponent = node.tagType === 1 /* COMPONENT */;3380 let properties = [];3381 const mergeArgs = [];3382 const runtimeDirectives = [];3383 // patchFlag analysis3384 let patchFlag = 0;3385 let hasRef = false;3386 let hasClassBinding = false;3387 let hasStyleBinding = false;3388 let hasDynamicKeys = false;3389 const dynamicPropNames = [];3390 const analyzePatchFlag = ({ key, value }) => {3391 if (key.type === 4 /* SIMPLE_EXPRESSION */ && key.isStatic) {3392 if (value.type === 20 /* JS_CACHE_EXPRESSION */ ||3393 ((value.type === 4 /* SIMPLE_EXPRESSION */ ||3394 value.type === 8 /* COMPOUND_EXPRESSION */) &&3395 isStaticNode(value))) {3396 return;3397 }3398 const name = key.content;3399 if (name === 'ref') {3400 hasRef = true;3401 }3402 else if (name === 'class') {3403 hasClassBinding = true;3404 }3405 else if (name === 'style') {3406 hasStyleBinding = true;3407 }3408 else if (name !== 'key') {3409 dynamicPropNames.push(name);3410 }3411 }3412 else {3413 hasDynamicKeys = true;3414 }3415 };3416 for (let i = 0; i < props.length; i++) {3417 // static attribute3418 const prop = props[i];3419 if (prop.type === 6 /* ATTRIBUTE */) {3420 const { loc, name, value } = prop;3421 if (name === 'ref') {3422 hasRef = true;3423 }3424 // skip :is on <component>3425 if (name === 'is' && tag === 'component') {3426 continue;3427 }3428 properties.push(createObjectProperty(createSimpleExpression(name, true, getInnerRange(loc, 0, name.length)), createSimpleExpression(value ? value.content : '', true, value ? value.loc : loc)));3429 }3430 else {3431 // directives3432 const { name, arg, exp, loc } = prop;3433 const isBind = name === 'bind';3434 const isOn = name === 'on';3435 // skip v-slot - it is handled by its dedicated transform.3436 if (name === 'slot') {3437 if (!isComponent) {3438 context.onError(createCompilerError(45 /* X_V_SLOT_MISPLACED */, loc));3439 }3440 continue;3441 }3442 // skip v-once - it is handled by its dedicated transform.3443 if (name === 'once') {3444 continue;3445 }3446 // skip :is on <component>3447 if (isBind && tag === 'component' && isBindKey(arg, 'is')) {3448 continue;3449 }3450 // skip v-on in SSR compilation3451 if (isOn && ssr) {3452 continue;3453 }3454 // special case for v-bind and v-on with no argument3455 if (!arg && (isBind || isOn)) {3456 hasDynamicKeys = true;3457 if (exp) {3458 if (properties.length) {3459 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3460 properties = [];3461 }3462 if (isBind) {3463 mergeArgs.push(exp);3464 }3465 else {3466 // v-on="obj" -> toHandlers(obj)3467 mergeArgs.push({3468 type: 14 /* JS_CALL_EXPRESSION */,3469 loc,3470 callee: context.helper(TO_HANDLERS),3471 arguments: [exp]3472 });3473 }3474 }3475 else {3476 context.onError(createCompilerError(isBind3477 ? 38 /* X_V_BIND_NO_EXPRESSION */3478 : 39 /* X_V_ON_NO_EXPRESSION */, loc));3479 }3480 continue;3481 }3482 const directiveTransform = context.directiveTransforms[name];3483 if (directiveTransform) {3484 // has built-in directive transform.3485 const { props, needRuntime } = directiveTransform(prop, node, context);3486 !ssr && props.forEach(analyzePatchFlag);3487 properties.push(...props);3488 if (needRuntime) {3489 runtimeDirectives.push(prop);3490 if (isSymbol(needRuntime)) {3491 directiveImportMap.set(prop, needRuntime);3492 }3493 }3494 }3495 else {3496 // no built-in transform, this is a user custom directive.3497 runtimeDirectives.push(prop);3498 }3499 }3500 }3501 let propsExpression = undefined;3502 // has v-bind="object" or v-on="object", wrap with mergeProps3503 if (mergeArgs.length) {3504 if (properties.length) {3505 mergeArgs.push(createObjectExpression(dedupeProperties(properties), elementLoc));3506 }3507 if (mergeArgs.length > 1) {3508 propsExpression = createCallExpression(context.helper(MERGE_PROPS), mergeArgs, elementLoc);3509 }3510 else {3511 // single v-bind with nothing else - no need for a mergeProps call3512 propsExpression = mergeArgs[0];3513 }3514 }3515 else if (properties.length) {3516 propsExpression = createObjectExpression(dedupeProperties(properties), elementLoc);3517 }3518 // patchFlag analysis3519 if (hasDynamicKeys) {3520 patchFlag |= 16 /* FULL_PROPS */;3521 }3522 else {3523 if (hasClassBinding) {3524 patchFlag |= 2 /* CLASS */;3525 }3526 if (hasStyleBinding) {3527 patchFlag |= 4 /* STYLE */;3528 }3529 if (dynamicPropNames.length) {3530 patchFlag |= 8 /* PROPS */;3531 }3532 }3533 if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {3534 patchFlag |= 32 /* NEED_PATCH */;3535 }3536 return {3537 props: propsExpression,3538 directives: runtimeDirectives,3539 patchFlag,3540 dynamicPropNames3541 };3542}3543// Dedupe props in an object literal.3544// Literal duplicated attributes would have been warned during the parse phase,3545// however, it's possible to encounter duplicated `onXXX` handlers with different3546// modifiers. We also need to merge static and dynamic class / style attributes.3547// - onXXX handlers / style: merge into array3548// - class: merge into single expression with concatenation3549function dedupeProperties(properties) {3550 const knownProps = new Map();3551 const deduped = [];3552 for (let i = 0; i < properties.length; i++) {3553 const prop = properties[i];3554 // dynamic keys are always allowed3555 if (prop.key.type === 8 /* COMPOUND_EXPRESSION */ || !prop.key.isStatic) {3556 deduped.push(prop);3557 continue;3558 }3559 const name = prop.key.content;3560 const existing = knownProps.get(name);3561 if (existing) {3562 if (name === 'style' || name === 'class' || name.startsWith('on')) {3563 mergeAsArray(existing, prop);3564 }3565 // unexpected duplicate, should have emitted error during parse3566 }3567 else {3568 knownProps.set(name, prop);3569 deduped.push(prop);3570 }3571 }3572 return deduped;3573}3574function mergeAsArray(existing, incoming) {3575 if (existing.value.type === 17 /* JS_ARRAY_EXPRESSION */) {3576 existing.value.elements.push(incoming.value);3577 }3578 else {3579 existing.value = createArrayExpression([existing.value, incoming.value], existing.loc);3580 }3581}3582function buildDirectiveArgs(dir, context) {3583 const dirArgs = [];3584 const runtime = directiveImportMap.get(dir);3585 if (runtime) {3586 context.helper(runtime);3587 dirArgs.push(context.helperString(runtime));3588 }3589 else {3590 // inject statement for resolving directive3591 context.helper(RESOLVE_DIRECTIVE);3592 context.directives.add(dir.name);3593 dirArgs.push(toValidAssetId(dir.name, `directive`));3594 }3595 const { loc } = dir;3596 if (dir.exp)3597 dirArgs.push(dir.exp);3598 if (dir.arg) {3599 if (!dir.exp) {3600 dirArgs.push(`void 0`);3601 }3602 dirArgs.push(dir.arg);3603 }3604 if (Object.keys(dir.modifiers).length) {3605 if (!dir.arg) {3606 if (!dir.exp) {3607 dirArgs.push(`void 0`);3608 }3609 dirArgs.push(`void 0`);3610 }3611 const trueExpression = createSimpleExpression(`true`, false, loc);3612 dirArgs.push(createObjectExpression(dir.modifiers.map(modifier => createObjectProperty(modifier, trueExpression)), loc));3613 }3614 return createArrayExpression(dirArgs, dir.loc);3615}3616function stringifyDynamicPropNames(props) {3617 let propsNamesString = `[`;3618 for (let i = 0, l = props.length; i < l; i++) {3619 propsNamesString += JSON.stringify(props[i]);3620 if (i < l - 1)3621 propsNamesString += ', ';3622 }3623 return propsNamesString + `]`;3624}3625const transformSlotOutlet = (node, context) => {3626 if (isSlotOutlet(node)) {3627 const { children, loc } = node;3628 const { slotName, slotProps } = processSlotOutlet(node, context);3629 const slotArgs = [3630 context.prefixIdentifiers ? `_ctx.$slots` : `$slots`,
...
compiler-core.esm-bundler.js
Source:compiler-core.esm-bundler.js
...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);3126 if (dir.arg) {3127 if (!dir.exp) {3128 dirArgs.push(`void 0`);3129 }3130 dirArgs.push(dir.arg);3131 }3132 if (Object.keys(dir.modifiers).length) {3133 if (!dir.arg) {3134 if (!dir.exp) {3135 dirArgs.push(`void 0`);3136 }3137 dirArgs.push(`void 0`);3138 }3139 const trueExpression = createSimpleExpression(`true`, false, loc);3140 dirArgs.push(createObjectExpression(dir.modifiers.map(modifier => createObjectProperty(modifier, trueExpression)), loc));3141 }3142 return createArrayExpression(dirArgs, dir.loc);3143}3144function stringifyDynamicPropNames(props) {3145 let propsNamesString = `[`;3146 for (let i = 0, l = props.length; i < l; i++) {3147 propsNamesString += JSON.stringify(props[i]);3148 if (i < l - 1)3149 propsNamesString += ', ';3150 }3151 return propsNamesString + `]`;3152}3153const transformSlotOutlet = (node, context) => {3154 if (isSlotOutlet(node)) {3155 const { children, loc } = node;3156 const { slotName, slotProps } = processSlotOutlet(node, context);3157 const slotArgs = [3158 context.prefixIdentifiers ? `_ctx.$slots` : `$slots`,
...
note-ast-transform.js
Source:note-ast-transform.js
...933 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;934 }935 }936 if (dynamicPropNames && dynamicPropNames.length) {937 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);938 }939 }940 // function createVNodeCall(context, tag, props, children, patchFlag, dynamicProps, directives, isBlock = false, disableTracking = false, loc = locStub) 941 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* disableTracking */, node.loc);942 };943 };944 function stringifyDynamicPropNames(props) {945 let propsNamesString = `[`;946 for (let i = 0, l = props.length; i < l; i++) {947 propsNamesString += JSON.stringify(props[i]);948 if (i < l - 1)949 propsNamesString += ', ';950 }951 return propsNamesString + `]`;952 }953 /**954 * Even for a node with no patch flag, it is possible for it to contain955 * non-hoistable expressions that refers to scope variables, e.g. compiler956 * injected keys or cached event handlers. Therefore we need to always check the957 * codegenNode's props to be sure.958 */...
transform.js
Source:transform.js
...298 else {299 vnodePatchFlag = String(patchFlag)300 }301 if (dynamicPropNames && dynamicPropNames.length) {302 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames)303 }304 }305 node.codegenNode = createVNodeCall(context, vnodeTag, vnodeProps, vnodeChildren, vnodePatchFlag, vnodeDynamicProps, vnodeDirectives, !!shouldUseBlock, false /* disableTracking */, node.loc)306 }307}308function createVNodeCall(context, tag, props, children, patchFlag, dynamicProps, directives, isBlock = false, disableTracking = false, loc = locStub) {309 if (context) {310 if (isBlock) {311 context.helper(OPEN_BLOCK)312 context.helper(CREATE_BLOCK)313 }314 else {315 context.helper(CREATE_VNODE)316 }...
transformElement.js
Source:transformElement.js
...71 // å°ä¸é¢çå
容注éå¨ patchFlag åé¢ä½ä¸ºä¸ä¸ªåè72 vnodePatchFlag = patchFlag + ` /* ${flagNames} */`;73 }74 if (dynamicPropNames && dynamicPropNames.length) {75 vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames);76 }77 }78 node.codegenNode = createVNodeCall(79 node.type,80 vnodeTag,81 vnodeProps,82 vnodeChildren,83 vnodePatchFlag,84 vnodeDynamicProps,85 vnodeDirectives,86 isComponent87 );88 };89};90function buildProps(node, context, props = node.props) {91 const isComponent = node.tagType === ElementTypes.COMPONENT;92 let properties = [];93 const mergeArgs = [];94 const runtimeDirectives = [];95 // patchFlag analysis96 let patchFlag = 0;97 let hasClassBinding = false;98 let hasStyleBinding = false;99 let hasHydrationEventBinding = false;100 let hasDynamicKeys = false;101 const dynamicPropNames = [];102 const analyzePatchFlag = ({ key }) => {103 if (isStaticExp(key)) {104 const name = key.content;105 const isEventHandler = isOn(name);106 if (107 !isComponent &&108 isEventHandler &&109 name.toLowerCase() !== 'onclick'110 // æºç è¿éè¿ä¼å¿½ç¥ v-model ååç»å®111 // æºç è¿éè¿ä¼å¿½ç¥ onVnodeXXX hooks112 ) {113 hasHydrationEventBinding = true;114 }115 // æºç å¨è¿éä¼å¿½ç¥ cacheHandler 以åæéæå¼çå±æ§116 if (name === 'class') {117 hasClassBinding = true;118 } else if (name === 'style') {119 hasStyleBinding = true;120 } else if (name !== 'key' && !dynamicPropNames.includes(name)) {121 dynamicPropNames.push(name);122 }123 // å°ç»ä»¶ä¸ç»å®çç±»å以åæ ·å¼è§ä¸ºå¨æå±æ§124 if (125 isComponent &&126 (name === 'class' || name === 'style') &&127 !dynamicPropNames.includes(name)128 ) {129 dynamicPropNames.push(name);130 }131 } else {132 // å±æ§åä¸æ¯ç®åè¡¨è¾¾å¼ (SIMPLE_EXPRESSION) çè¯133 // åè§ä¸ºæå¨æé®å134 hasDynamicKeys = true;135 }136 };137 for (let i = 0; i < props.length; i++) {138 // static attribute139 const prop = props[i];140 if (prop.type === NodeTypes.ATTRIBUTE) {141 const { name, value } = prop;142 let valueNode = createSimpleExpression(value || '', true);143 properties.push(144 createObjectProperty(createSimpleExpression(name, true), valueNode)145 );146 } else {147 // directives148 const { name, arg, exp } = prop;149 const isVBind = name === 'bind';150 const isVOn = name === 'on';151 // æºç è¿éä¼è·³è¿ä»¥ä¸æ令152 // v-slot153 // v-once/v-memo154 // v-is/:is155 // SSR ç¯å¢ä¸ç v-on156 // å¤çæ åæ°ç v-bind 以å v-on157 if (!arg && (isVBind || isVOn)) {158 hasDynamicKeys = true;159 if (exp) {160 if (properties.length) {161 mergeArgs.push(createObjectExpression(properties));162 properties = [];163 }164 if (isVBind) {165 mergeArgs.push(exp);166 } else {167 // v-on="obj" -> toHandlers(obj)168 mergeArgs.push({169 type: NodeTypes.JS_CALL_EXPRESSION,170 arguments: [exp]171 });172 }173 }174 continue;175 }176 const directiveTransform = context.directiveTransforms[name];177 // å
ç½®æ令178 if (directiveTransform) {179 const { props, needRuntime } = directiveTransform(prop, node, context);180 props.forEach(analyzePatchFlag);181 properties.push(...props);182 if (needRuntime) {183 runtimeDirectives.push(prop);184 }185 }186 // èªå®ä¹æ令187 else {188 runtimeDirectives.push(prop);189 }190 }191 }192 let propsExpression = undefined;193 if (mergeArgs.length) {194 if (properties.length) {195 mergeArgs.push(createObjectExpression(properties));196 }197 if (mergeArgs.length > 1) {198 propsExpression = createCallExpression(mergeArgs);199 } else {200 // åªæä¸ä¸ª v-bind201 propsExpression = mergeArgs[0];202 }203 } else if (properties.length) {204 propsExpression = createObjectExpression(properties);205 }206 // patchFlag analysis207 if (hasDynamicKeys) {208 patchFlag |= PatchFlags.FULL_PROPS;209 } else {210 if (hasClassBinding && !isComponent) {211 patchFlag |= PatchFlags.CLASS;212 }213 if (hasStyleBinding && !isComponent) {214 patchFlag |= PatchFlags.STYLE;215 }216 if (dynamicPropNames.length) {217 patchFlag |= PatchFlags.PROPS;218 }219 if (hasHydrationEventBinding) {220 patchFlag |= PatchFlags.HYDRATE_EVENTS;221 }222 }223 // è¿éå¨æºç ä¸è¿ä¼èè ref 以å vnodeHook224 if (225 (patchFlag === 0 || patchFlag === PatchFlags.HYDRATE_EVENTS) &&226 runtimeDirectives.length > 0227 ) {228 patchFlag |= PatchFlags.NEED_PATCH;229 }230 // è§èå props231 if (propsExpression) {232 switch (propsExpression.type) {233 case NodeTypes.JS_OBJECT_EXPRESSION:234 // 说æ props ä¸æ²¡æ v-bindï¼åªéè¦å¤çå¨æçå±æ§ç»å®235 let classKeyIndex = -1;236 let styleKeyIndex = -1;237 let hasDynamicKey = false;238 for (let i = 0; i < propsExpression.properties.length; i++) {239 const key = propsExpression.properties[i].key;240 if (isStaticExp(key)) {241 if (key.content === 'class') {242 classKeyIndex = i;243 } else if (key.content === 'style') {244 styleKeyIndex = i;245 }246 } else if (!key.isHandlerKey) {247 hasDynamicKey = true;248 }249 }250 const classProp = propsExpression.properties[classKeyIndex];251 const styleProp = propsExpression.properties[styleKeyIndex];252 // no dynamic key253 if (!hasDynamicKey) {254 // ç±»åçå¼æ¯å¨æçè¯åå
è£
ä¸ä¸ç±»åçå¼255 if (classProp && !isStaticExp(classProp.value)) {256 classProp.value = createCallExpression([classProp.value]);257 }258 // æ ·å¼çå¼æ¯å¨æçåå
è£
ä¸ä¸æ ·å¼çå¼259 if (260 styleProp &&261 !isStaticExp(styleProp.value) &&262 (hasStyleBinding ||263 styleProp.value.type === NodeTypes.JS_ARRAY_EXPRESSION)264 ) {265 styleProp.value = createCallExpression([styleProp.value]);266 }267 }268 // æå¨æé®ååç´æ¥å
è£
æ´ä¸ª propsExpression269 else {270 propsExpression = createCallExpression([propsExpression]);271 }272 break;273 case NodeTypes.JS_CALL_EXPRESSION:274 // ä¸éè¦å¤ç275 break;276 default:277 // åªæ v-bind ç´æ¥å
è£
æ´ä¸ª propsExpression278 propsExpression = createCallExpression([279 createCallExpression([propsExpression])280 ]);281 break;282 }283 }284 return {285 props: propsExpression,286 directives: runtimeDirectives,287 patchFlag,288 dynamicPropNames289 };290}291function stringifyDynamicPropNames(props) {292 let propsNamesString = '[';293 for (let i = 0, l = props.length; i < l; i++) {294 propsNamesString += JSON.stringify(props[i]);295 if (i < l - 1) propsNamesString += ',';296 }297 return propsNamesString + ']';...
compiler_transformUtils.md.2a6977ae.lean.js
Source:compiler_transformUtils.md.2a6977ae.lean.js
1import { o as n, c as s, a } from './app.547ab472.js'2const p =3 '{"title":"stringifyDynamicPropNames","description":"","frontmatter":{},"headers":[{"level":2,"title":"stringifyDynamicPropNames","slug":"stringifydynamicpropnames"},{"level":2,"title":"buildProps","slug":"buildprops"}],"relativePath":"compiler/transformUtils.md","lastUpdated":1641357564057}',4 t = {},5 o = a('', 4)6t.render = function(a, p, t, e, c, l) {7 return n(), s('div', null, [o])8}9export default t...
Using AI Code Generation
1const { stringifyDynamicPropNames } = require('playwright/lib/utils/utils');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const selector = stringifyDynamicPropNames({ selector: 'button' });7 await page.click(selector);8 await browser.close();9})();
Using AI Code Generation
1const { stringifyDynamicPropNames } = require('playwright/lib/server/frames.js');2const dynamicPropNames = ['prop1', 'prop2', 'prop3'];3console.log(stringifyDynamicPropNames(dynamicPropNames));4const { addCustomAssertions } = require('playwright-custom-assertions');5addCustomAssertions(page);6await page.waitForSelector('.my-element');7await page.assertSelectorContainsText('.my-element', 'some text');8await page.assertSelectorContainsText('.my-element', 'some text');9await page.assertSelectorNotContainsText('.my-element', 'some text');10await page.assertSelectorHasAttribute('.my-element', 'disabled');11await page.assertSelectorNotHasAttribute('.my-element', 'disabled');12await page.assertSelectorHasValue('.my-element', 'some value');13await page.assertSelectorNotHasValue('.my-element', 'some value');14await page.assertSelectorHasClass('.my-element', 'some-class');15await page.assertSelectorNotHasClass('.my-element', 'some-class');
Using AI Code Generation
1const { parseSelector } = require('playwright/lib/client/selectorParser');2const { stringifyDynamicPropNames } = require('playwright/lib/client/selectorEngine');3const selector = parseSelector('text=Submit');4console.log(stringifyDynamicPropNames(selector));5const { parseSelector } = require('playwright/lib/client/selectorParser');6const { stringifyDynamicPropNames } = require('playwright-selector-engine');7const selector = parseSelector('text=Submit');8console.log(stringifyDynamicPropNames(selector));9[MIT](LICENSE)
Using AI Code Generation
1const { parseSelector } = require('@playwright/test/lib/utils/selectorParser');2const { stringifyDynamicPropNames } = require('@playwright/test/lib/utils/selectorEvaluation');3const parsedSelector = parseSelector(selector);4const dynamicPropNames = [];5const selectorText = stringifyDynamicPropNames(parsedSelector, dynamicPropNames);6console.log(selectorText);7const { createSelector } = require('@playwright/test/lib/utils/selectorEvaluation');8const parsedSelector = createSelector(selector);9const { createSelector } = require('@playwright/test/lib/utils/selectorEvaluation');10const parsedSelector = createSelector(selector);11const dynamicPropValues = ['foo', 'bar'];12const element = await parsedSelector.evaluate(document, dynamicPropValues);13import { test } from '@playwright/test';14import { createSelector } from '@playwright/test/lib/utils/selectorEvaluation';15test('Test', async ({ page }) => {16 const parsedSelector = createSelector(selector);17 const dynamicPropValues = ['foo', 'bar'];18 await page.click(parsedSelector, dynamicPropValues);19 await page.fill(parsedSelector, dynamicPropValues, 'some text');20 await page.check(parsedSelector, dynamicPropValues);21 await page.selectOption(parsedSelector, dynamicPropValues, 'some value');22 await page.waitForSelector(parsedSelector, dynamicPropValues);23});
Using AI Code Generation
1const { stringfyDynamicPropNames } = require('@playwright/test/lib/server/frames');2const dynamicProps = { foo: 'foo', bar: 'bar' };3const dynamicPropNames = ['foo', 'bar'];4const result = stringfyDynamicPropNames(dynamicProps, dynamicPropNames);5console.log(result);6[Apache 2.0](LICENSE)
Using AI Code Generation
1const { test } = require('@playwright/test');2test('My test', async ({ page }) => {3 const selector = page.locator('css=div');4 await page.click(selector);5});6const { PlaywrightTestConfig } = require('@playwright/test');7const { stringifyDynamicPropNames } = require('./test');8const config = {9 {10 use: {11 },12 },13 {14 async register(config) {15 config.testDir = __dirname;16 config.testMatch = '**/*.test.js';17 config.testDir = __dirname;18 config.testMatch = '**/*.test.js';19 config.retries = 1;20 config.test.fixtures.stringifyDynamicPropNames = async function (21 ) {22 return stringifyDynamicPropNames(locator, name, value);23 };24 },25 },26};27module.exports = config;
Using AI Code Generation
1const {serializeForTerminal} = require('playwright/lib/server/serializers');2const {stringifyDynamicPropNames} = require('playwright/lib/server/frames');3const obj = {4 baz: {5 },6 qux: {7 },8 quuz: {9 },10};11const serialized = serializeForTerminal(obj);12const stringified = stringifyDynamicPropNames(serialized);13console.log(stringified);14{15 baz: { qux: 'quux' },16 qux: { quux: 'quuz' },17 quuz: { quuz: 'quuz' }18}19[Apache 2.0](LICENSE)
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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
