How to use stringifyDynamicPropNames method in Playwright Internal

Best JavaScript code snippet using playwright-internal

compiler-core.cjs.js

Source:compiler-core.cjs.js Github

copy

Full Screen

...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`, ...

Full Screen

Full Screen

compiler-dom.esm-browser.js

Source:compiler-dom.esm-browser.js Github

copy

Full Screen

...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`, ...

Full Screen

Full Screen

compiler-core.cjs.prod.js

Source:compiler-core.cjs.prod.js Github

copy

Full Screen

...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`, ...

Full Screen

Full Screen

compiler-core.esm-bundler.js

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

copy

Full Screen

...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`, ...

Full Screen

Full Screen

note-ast-transform.js

Source:note-ast-transform.js Github

copy

Full Screen

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

Full Screen

Full Screen

transform.js

Source:transform.js Github

copy

Full Screen

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

Full Screen

Full Screen

transformElement.js

Source:transformElement.js Github

copy

Full Screen

...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 + ']';...

Full Screen

Full Screen

compiler_transformUtils.md.2a6977ae.lean.js

Source:compiler_transformUtils.md.2a6977ae.lean.js Github

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful