Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use createDOMCompilerError method in Playwright Internal

Best JavaScript code snippet using playwright-internal

compiler-dom.cjs.js

Source:compiler-dom.cjs.js

...2470const parseInlineCSS = (cssText, loc) => {2471    const normalized = shared.parseStringStyle(cssText);2472    return compilerCore.createSimpleExpression(JSON.stringify(normalized), false, loc, 3 /* CAN_STRINGIFY */);2473};2474function createDOMCompilerError(code, loc) {2475    return compilerCore.createCompilerError(code, loc, DOMErrorMessages );2476}2477const DOMErrorMessages = {2478    [50 /* X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,2479    [51 /* X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,2480    [52 /* X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,2481    [53 /* X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,2482    [54 /* X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,2483    [55 /* X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,2484    [56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,2485    [57 /* X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,2486    [58 /* X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,2487    [59 /* X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,2488    [60 /* X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`2489};2490const transformVHtml = (dir, node, context) => {2491    const { exp, loc } = dir;2492    if (!exp) {2493        context.onError(createDOMCompilerError(50 /* X_V_HTML_NO_EXPRESSION */, loc));2494    }2495    if (node.children.length) {2496        context.onError(createDOMCompilerError(51 /* X_V_HTML_WITH_CHILDREN */, loc));2497        node.children.length = 0;2498    }2499    return {2500        props: [2501            compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`innerHTML`, true, loc), exp || compilerCore.createSimpleExpression('', true))2502        ]2503    };2504};2505const transformVText = (dir, node, context) => {2506    const { exp, loc } = dir;2507    if (!exp) {2508        context.onError(createDOMCompilerError(52 /* X_V_TEXT_NO_EXPRESSION */, loc));2509    }2510    if (node.children.length) {2511        context.onError(createDOMCompilerError(53 /* X_V_TEXT_WITH_CHILDREN */, loc));2512        node.children.length = 0;2513    }2514    return {2515        props: [2516            compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`textContent`, true), exp2517                ? compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)2518                : compilerCore.createSimpleExpression('', true))2519        ]2520    };2521};2522const transformModel = (dir, node, context) => {2523    const baseResult = compilerCore.transformModel(dir, node, context);2524    // base transform has errors OR component v-model (only need props)2525    if (!baseResult.props.length || node.tagType === 1 /* COMPONENT */) {2526        return baseResult;2527    }2528    if (dir.arg) {2529        context.onError(createDOMCompilerError(55 /* X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));2530    }2531    function checkDuplicatedValue() {2532        const value = compilerCore.findProp(node, 'value');2533        if (value) {2534            context.onError(createDOMCompilerError(57 /* X_V_MODEL_UNNECESSARY_VALUE */, value.loc));2535        }2536    }2537    const { tag } = node;2538    const isCustomElement = context.isCustomElement(tag);2539    if (tag === 'input' ||2540        tag === 'textarea' ||2541        tag === 'select' ||2542        isCustomElement) {2543        let directiveToUse = V_MODEL_TEXT;2544        let isInvalidType = false;2545        if (tag === 'input' || isCustomElement) {2546            const type = compilerCore.findProp(node, `type`);2547            if (type) {2548                if (type.type === 7 /* DIRECTIVE */) {2549                    // :type="foo"2550                    directiveToUse = V_MODEL_DYNAMIC;2551                }2552                else if (type.value) {2553                    switch (type.value.content) {2554                        case 'radio':2555                            directiveToUse = V_MODEL_RADIO;2556                            break;2557                        case 'checkbox':2558                            directiveToUse = V_MODEL_CHECKBOX;2559                            break;2560                        case 'file':2561                            isInvalidType = true;2562                            context.onError(createDOMCompilerError(56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));2563                            break;2564                        default:2565                            // text type2566                            checkDuplicatedValue();2567                            break;2568                    }2569                }2570            }2571            else if (compilerCore.hasDynamicKeyVBind(node)) {2572                // element has bindings with dynamic keys, which can possibly contain2573                // "type".2574                directiveToUse = V_MODEL_DYNAMIC;2575            }2576            else {2577                // text type2578                checkDuplicatedValue();2579            }2580        }2581        else if (tag === 'select') {2582            directiveToUse = V_MODEL_SELECT;2583        }2584        else {2585            // textarea2586            checkDuplicatedValue();2587        }2588        // inject runtime directive2589        // by returning the helper symbol via needRuntime2590        // the import will replaced a resolveDirective call.2591        if (!isInvalidType) {2592            baseResult.needRuntime = context.helper(directiveToUse);2593        }2594    }2595    else {2596        context.onError(createDOMCompilerError(54 /* X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));2597    }2598    // native vmodel doesn't need the `modelValue` props since they are also2599    // passed to the runtime as `binding.value`. removing it reduces code size.2600    baseResult.props = baseResult.props.filter(p => !(p.key.type === 4 /* SIMPLE_EXPRESSION */ &&2601        p.key.content === 'modelValue'));2602    return baseResult;2603};2604const isEventOptionModifier = /*#__PURE__*/ shared.makeMap(`passive,once,capture`);2605const isNonKeyModifier = /*#__PURE__*/ shared.makeMap(2606// event propagation management2607`stop,prevent,self,` +2608    // system modifiers + exact2609    `ctrl,shift,alt,meta,exact,` +2610    // mouse2611    `middle`);2612// left & right could be mouse or key modifiers based on event type2613const maybeKeyModifier = /*#__PURE__*/ shared.makeMap('left,right');2614const isKeyboardEvent = /*#__PURE__*/ shared.makeMap(`onkeyup,onkeydown,onkeypress`, true);2615const resolveModifiers = (key, modifiers, context, loc) => {2616    const keyModifiers = [];2617    const nonKeyModifiers = [];2618    const eventOptionModifiers = [];2619    for (let i = 0; i < modifiers.length; i++) {2620        const modifier = modifiers[i];2621        if (modifier === 'native' &&2622            compilerCore.checkCompatEnabled("COMPILER_V_ON_NATIVE" /* COMPILER_V_ON_NATIVE */, context, loc)) {2623            eventOptionModifiers.push(modifier);2624        }2625        else if (isEventOptionModifier(modifier)) {2626            // eventOptionModifiers: modifiers for addEventListener() options,2627            // e.g. .passive & .capture2628            eventOptionModifiers.push(modifier);2629        }2630        else {2631            // runtimeModifiers: modifiers that needs runtime guards2632            if (maybeKeyModifier(modifier)) {2633                if (compilerCore.isStaticExp(key)) {2634                    if (isKeyboardEvent(key.content)) {2635                        keyModifiers.push(modifier);2636                    }2637                    else {2638                        nonKeyModifiers.push(modifier);2639                    }2640                }2641                else {2642                    keyModifiers.push(modifier);2643                    nonKeyModifiers.push(modifier);2644                }2645            }2646            else {2647                if (isNonKeyModifier(modifier)) {2648                    nonKeyModifiers.push(modifier);2649                }2650                else {2651                    keyModifiers.push(modifier);2652                }2653            }2654        }2655    }2656    return {2657        keyModifiers,2658        nonKeyModifiers,2659        eventOptionModifiers2660    };2661};2662const transformClick = (key, event) => {2663    const isStaticClick = compilerCore.isStaticExp(key) && key.content.toLowerCase() === 'onclick';2664    return isStaticClick2665        ? compilerCore.createSimpleExpression(event, true)2666        : key.type !== 4 /* SIMPLE_EXPRESSION */2667            ? compilerCore.createCompoundExpression([2668                `(`,2669                key,2670                `) === "onClick" ? "${event}" : (`,2671                key,2672                `)`2673            ])2674            : key;2675};2676const transformOn = (dir, node, context) => {2677    return compilerCore.transformOn(dir, node, context, baseResult => {2678        const { modifiers } = dir;2679        if (!modifiers.length)2680            return baseResult;2681        let { key, value: handlerExp } = baseResult.props[0];2682        const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);2683        // normalize click.right and click.middle since they don't actually fire2684        if (nonKeyModifiers.includes('right')) {2685            key = transformClick(key, `onContextmenu`);2686        }2687        if (nonKeyModifiers.includes('middle')) {2688            key = transformClick(key, `onMouseup`);2689        }2690        if (nonKeyModifiers.length) {2691            handlerExp = compilerCore.createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [2692                handlerExp,2693                JSON.stringify(nonKeyModifiers)2694            ]);2695        }2696        if (keyModifiers.length &&2697            // if event name is dynamic, always wrap with keys guard2698            (!compilerCore.isStaticExp(key) || isKeyboardEvent(key.content))) {2699            handlerExp = compilerCore.createCallExpression(context.helper(V_ON_WITH_KEYS), [2700                handlerExp,2701                JSON.stringify(keyModifiers)2702            ]);2703        }2704        if (eventOptionModifiers.length) {2705            const modifierPostfix = eventOptionModifiers.map(shared.capitalize).join('');2706            key = compilerCore.isStaticExp(key)2707                ? compilerCore.createSimpleExpression(`${key.content}${modifierPostfix}`, true)2708                : compilerCore.createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);2709        }2710        return {2711            props: [compilerCore.createObjectProperty(key, handlerExp)]2712        };2713    });2714};2715const transformShow = (dir, node, context) => {2716    const { exp, loc } = dir;2717    if (!exp) {2718        context.onError(createDOMCompilerError(58 /* X_V_SHOW_NO_EXPRESSION */, loc));2719    }2720    return {2721        props: [],2722        needRuntime: context.helper(V_SHOW)2723    };2724};2725const warnTransitionChildren = (node, context) => {2726    if (node.type === 1 /* ELEMENT */ &&2727        node.tagType === 1 /* COMPONENT */) {2728        const component = context.isBuiltInComponent(node.tag);2729        if (component === TRANSITION) {2730            return () => {2731                if (node.children.length && hasMultipleChildren(node)) {2732                    context.onError(createDOMCompilerError(59 /* X_TRANSITION_INVALID_CHILDREN */, {2733                        start: node.children[0].loc.start,2734                        end: node.children[node.children.length - 1].loc.end,2735                        source: ''2736                    }));2737                }2738            };2739        }2740    }2741};2742function hasMultipleChildren(node) {2743    // #1352 filter out potential comment nodes.2744    const children = (node.children = node.children.filter(c => c.type !== 3 /* COMMENT */ &&2745        !(c.type === 2 /* TEXT */ && !c.content.trim())));2746    const child = children[0];2747    return (children.length !== 1 ||2748        child.type === 11 /* FOR */ ||2749        (child.type === 9 /* IF */ && child.branches.some(hasMultipleChildren)));2750}2751/**2752 * This module is Node-only.2753 */2754/**2755 * Regex for replacing placeholders for embedded constant variables2756 * (e.g. import URL string constants generated by compiler-sfc)2757 */2758const expReplaceRE = /__VUE_EXP_START__(.*?)__VUE_EXP_END__/g;2759/**2760 * Turn eligible hoisted static trees into stringified static nodes, e.g.2761 *2762 * ```js2763 * const _hoisted_1 = createStaticVNode(`<div class="foo">bar</div>`)2764 * ```2765 *2766 * A single static vnode can contain stringified content for **multiple**2767 * consecutive nodes (element and plain text), called a "chunk".2768 * `@vue/runtime-dom` will create the content via innerHTML in a hidden2769 * container element and insert all the nodes in place. The call must also2770 * provide the number of nodes contained in the chunk so that during hydration2771 * we can know how many nodes the static vnode should adopt.2772 *2773 * The optimization scans a children list that contains hoisted nodes, and2774 * tries to find the largest chunk of consecutive hoisted nodes before running2775 * into a non-hoisted node or the end of the list. A chunk is then converted2776 * into a single static vnode and replaces the hoisted expression of the first2777 * node in the chunk. Other nodes in the chunk are considered "merged" and2778 * therefore removed from both the hoist list and the children array.2779 *2780 * This optimization is only performed in Node.js.2781 */2782const stringifyStatic = (children, context, parent) => {2783    // bail stringification for slot content2784    if (context.scopes.vSlot > 0) {2785        return;2786    }2787    let nc = 0; // current node count2788    let ec = 0; // current element with binding count2789    const currentChunk = [];2790    const stringifyCurrentChunk = (currentIndex) => {2791        if (nc >= 20 /* NODE_COUNT */ ||2792            ec >= 5 /* ELEMENT_WITH_BINDING_COUNT */) {2793            // combine all currently eligible nodes into a single static vnode call2794            const staticCall = compilerCore.createCallExpression(context.helper(compilerCore.CREATE_STATIC), [2795                JSON.stringify(currentChunk.map(node => stringifyNode(node, context)).join('')).replace(expReplaceRE, `" + $1 + "`),2796                // the 2nd argument indicates the number of DOM nodes this static vnode2797                // will insert / hydrate2798                String(currentChunk.length)2799            ]);2800            // replace the first node's hoisted expression with the static vnode call2801            replaceHoist(currentChunk[0], staticCall, context);2802            if (currentChunk.length > 1) {2803                for (let i = 1; i < currentChunk.length; i++) {2804                    // for the merged nodes, set their hoisted expression to null2805                    replaceHoist(currentChunk[i], null, context);2806                }2807                // also remove merged nodes from children2808                const deleteCount = currentChunk.length - 1;2809                children.splice(currentIndex - currentChunk.length + 1, deleteCount);2810                return deleteCount;2811            }2812        }2813        return 0;2814    };2815    let i = 0;2816    for (; i < children.length; i++) {2817        const child = children[i];2818        const hoisted = getHoistedNode(child);2819        if (hoisted) {2820            // presence of hoisted means child must be a stringifiable node2821            const node = child;2822            const result = analyzeNode(node);2823            if (result) {2824                // node is stringifiable, record state2825                nc += result[0];2826                ec += result[1];2827                currentChunk.push(node);2828                continue;2829            }2830        }2831        // we only reach here if we ran into a node that is not stringifiable2832        // check if currently analyzed nodes meet criteria for stringification.2833        // adjust iteration index2834        i -= stringifyCurrentChunk(i);2835        // reset state2836        nc = 0;2837        ec = 0;2838        currentChunk.length = 0;2839    }2840    // in case the last node was also stringifiable2841    stringifyCurrentChunk(i);2842};2843const getHoistedNode = (node) => ((node.type === 1 /* ELEMENT */ && node.tagType === 0 /* ELEMENT */) ||2844    node.type == 12 /* TEXT_CALL */) &&2845    node.codegenNode &&2846    node.codegenNode.type === 4 /* SIMPLE_EXPRESSION */ &&2847    node.codegenNode.hoisted;2848const dataAriaRE = /^(data|aria)-/;2849const isStringifiableAttr = (name, ns) => {2850    return ((ns === 0 /* HTML */2851        ? shared.isKnownHtmlAttr(name)2852        : ns === 1 /* SVG */2853            ? shared.isKnownSvgAttr(name)2854            : false) || dataAriaRE.test(name));2855};2856const replaceHoist = (node, replacement, context) => {2857    const hoistToReplace = node.codegenNode.hoisted;2858    context.hoists[context.hoists.indexOf(hoistToReplace)] = replacement;2859};2860const isNonStringifiable = /*#__PURE__*/ shared.makeMap(`caption,thead,tr,th,tbody,td,tfoot,colgroup,col`);2861/**2862 * for a hoisted node, analyze it and return:2863 * - false: bailed (contains non-stringifiable props or runtime constant)2864 * - [nc, ec] where2865 *   - nc is the number of nodes inside2866 *   - ec is the number of element with bindings inside2867 */2868function analyzeNode(node) {2869    if (node.type === 1 /* ELEMENT */ && isNonStringifiable(node.tag)) {2870        return false;2871    }2872    if (node.type === 12 /* TEXT_CALL */) {2873        return [1, 0];2874    }2875    let nc = 1; // node count2876    let ec = node.props.length > 0 ? 1 : 0; // element w/ binding count2877    let bailed = false;2878    const bail = () => {2879        bailed = true;2880        return false;2881    };2882    // TODO: check for cases where using innerHTML will result in different2883    // output compared to imperative node insertions.2884    // probably only need to check for most common case2885    // i.e. non-phrasing-content tags inside `<p>`2886    function walk(node) {2887        for (let i = 0; i < node.props.length; i++) {2888            const p = node.props[i];2889            // bail on non-attr bindings2890            if (p.type === 6 /* ATTRIBUTE */ &&2891                !isStringifiableAttr(p.name, node.ns)) {2892                return bail();2893            }2894            if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {2895                // bail on non-attr bindings2896                if (p.arg &&2897                    (p.arg.type === 8 /* COMPOUND_EXPRESSION */ ||2898                        (p.arg.isStatic && !isStringifiableAttr(p.arg.content, node.ns)))) {2899                    return bail();2900                }2901                if (p.exp &&2902                    (p.exp.type === 8 /* COMPOUND_EXPRESSION */ ||2903                        p.exp.constType < 3 /* CAN_STRINGIFY */)) {2904                    return bail();2905                }2906            }2907        }2908        for (let i = 0; i < node.children.length; i++) {2909            nc++;2910            const child = node.children[i];2911            if (child.type === 1 /* ELEMENT */) {2912                if (child.props.length > 0) {2913                    ec++;2914                }2915                walk(child);2916                if (bailed) {2917                    return false;2918                }2919            }2920        }2921        return true;2922    }2923    return walk(node) ? [nc, ec] : false;2924}2925function stringifyNode(node, context) {2926    if (shared.isString(node)) {2927        return node;2928    }2929    if (shared.isSymbol(node)) {2930        return ``;2931    }2932    switch (node.type) {2933        case 1 /* ELEMENT */:2934            return stringifyElement(node, context);2935        case 2 /* TEXT */:2936            return shared.escapeHtml(node.content);2937        case 3 /* COMMENT */:2938            return `<!--${shared.escapeHtml(node.content)}-->`;2939        case 5 /* INTERPOLATION */:2940            return shared.escapeHtml(shared.toDisplayString(evaluateConstant(node.content)));2941        case 8 /* COMPOUND_EXPRESSION */:2942            return shared.escapeHtml(evaluateConstant(node));2943        case 12 /* TEXT_CALL */:2944            return stringifyNode(node.content, context);2945        default:2946            // static trees will not contain if/for nodes2947            return '';2948    }2949}2950function stringifyElement(node, context) {2951    let res = `<${node.tag}`;2952    for (let i = 0; i < node.props.length; i++) {2953        const p = node.props[i];2954        if (p.type === 6 /* ATTRIBUTE */) {2955            res += ` ${p.name}`;2956            if (p.value) {2957                res += `="${shared.escapeHtml(p.value.content)}"`;2958            }2959        }2960        else if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {2961            const exp = p.exp;2962            if (exp.content[0] === '_') {2963                // internally generated string constant references2964                // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin2965                res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;2966                continue;2967            }2968            // constant v-bind, e.g. :foo="1"2969            let evaluated = evaluateConstant(exp);2970            if (evaluated != null) {2971                const arg = p.arg && p.arg.content;2972                if (arg === 'class') {2973                    evaluated = shared.normalizeClass(evaluated);2974                }2975                else if (arg === 'style') {2976                    evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));2977                }2978                res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;2979            }2980        }2981    }2982    if (context.scopeId) {2983        res += ` ${context.scopeId}`;2984    }2985    res += `>`;2986    for (let i = 0; i < node.children.length; i++) {2987        res += stringifyNode(node.children[i], context);2988    }2989    if (!shared.isVoidTag(node.tag)) {2990        res += `</${node.tag}>`;2991    }2992    return res;2993}2994// __UNSAFE__2995// Reason: eval.2996// It's technically safe to eval because only constant expressions are possible2997// here, e.g. `{{ 1 }}` or `{{ 'foo' }}`2998// in addition, constant exps bail on presence of parens so you can't even2999// run JSFuck in here. But we mark it unsafe for security review purposes.3000// (see compiler-core/src/transformExpressions)3001function evaluateConstant(exp) {3002    if (exp.type === 4 /* SIMPLE_EXPRESSION */) {3003        return new Function(`return ${exp.content}`)();3004    }3005    else {3006        // compound3007        let res = ``;3008        exp.children.forEach(c => {3009            if (shared.isString(c) || shared.isSymbol(c)) {3010                return;3011            }3012            if (c.type === 2 /* TEXT */) {3013                res += c.content;3014            }3015            else if (c.type === 5 /* INTERPOLATION */) {3016                res += shared.toDisplayString(evaluateConstant(c.content));3017            }3018            else {3019                res += evaluateConstant(c);3020            }3021        });3022        return res;3023    }3024}3025const ignoreSideEffectTags = (node, context) => {3026    if (node.type === 1 /* ELEMENT */ &&3027        node.tagType === 0 /* ELEMENT */ &&3028        (node.tag === 'script' || node.tag === 'style')) {3029        context.onError(createDOMCompilerError(60 /* X_IGNORED_SIDE_EFFECT_TAG */, node.loc));3030        context.removeNode();3031    }3032};3033const DOMNodeTransforms = [3034    transformStyle,3035    ...([warnTransitionChildren] )3036];3037const DOMDirectiveTransforms = {3038    cloak: compilerCore.noopDirectiveTransform,3039    html: transformVHtml,3040    text: transformVText,3041    model: transformModel,3042    on: transformOn,3043    show: transformShow...

compiler-dom.cjs.prod.js

Source:compiler-dom.cjs.prod.js

...2470const parseInlineCSS = (cssText, loc) => {2471    const normalized = shared.parseStringStyle(cssText);2472    return compilerCore.createSimpleExpression(JSON.stringify(normalized), false, loc, 3 /* CAN_STRINGIFY */);2473};2474function createDOMCompilerError(code, loc) {2475    return compilerCore.createCompilerError(code, loc, DOMErrorMessages );2476}2477const DOMErrorMessages = {2478    [50 /* X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,2479    [51 /* X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,2480    [52 /* X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,2481    [53 /* X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,2482    [54 /* X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,2483    [55 /* X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,2484    [56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,2485    [57 /* X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,2486    [58 /* X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,2487    [59 /* X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,2488    [60 /* X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`2489};2490const transformVHtml = (dir, node, context) => {2491    const { exp, loc } = dir;2492    if (!exp) {2493        context.onError(createDOMCompilerError(50 /* X_V_HTML_NO_EXPRESSION */, loc));2494    }2495    if (node.children.length) {2496        context.onError(createDOMCompilerError(51 /* X_V_HTML_WITH_CHILDREN */, loc));2497        node.children.length = 0;2498    }2499    return {2500        props: [2501            compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`innerHTML`, true, loc), exp || compilerCore.createSimpleExpression('', true))2502        ]2503    };2504};2505const transformVText = (dir, node, context) => {2506    const { exp, loc } = dir;2507    if (!exp) {2508        context.onError(createDOMCompilerError(52 /* X_V_TEXT_NO_EXPRESSION */, loc));2509    }2510    if (node.children.length) {2511        context.onError(createDOMCompilerError(53 /* X_V_TEXT_WITH_CHILDREN */, loc));2512        node.children.length = 0;2513    }2514    return {2515        props: [2516            compilerCore.createObjectProperty(compilerCore.createSimpleExpression(`textContent`, true), exp2517                ? compilerCore.createCallExpression(context.helperString(compilerCore.TO_DISPLAY_STRING), [exp], loc)2518                : compilerCore.createSimpleExpression('', true))2519        ]2520    };2521};2522const transformModel = (dir, node, context) => {2523    const baseResult = compilerCore.transformModel(dir, node, context);2524    // base transform has errors OR component v-model (only need props)2525    if (!baseResult.props.length || node.tagType === 1 /* COMPONENT */) {2526        return baseResult;2527    }2528    if (dir.arg) {2529        context.onError(createDOMCompilerError(55 /* X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));2530    }2531    const { tag } = node;2532    const isCustomElement = context.isCustomElement(tag);2533    if (tag === 'input' ||2534        tag === 'textarea' ||2535        tag === 'select' ||2536        isCustomElement) {2537        let directiveToUse = V_MODEL_TEXT;2538        let isInvalidType = false;2539        if (tag === 'input' || isCustomElement) {2540            const type = compilerCore.findProp(node, `type`);2541            if (type) {2542                if (type.type === 7 /* DIRECTIVE */) {2543                    // :type="foo"2544                    directiveToUse = V_MODEL_DYNAMIC;2545                }2546                else if (type.value) {2547                    switch (type.value.content) {2548                        case 'radio':2549                            directiveToUse = V_MODEL_RADIO;2550                            break;2551                        case 'checkbox':2552                            directiveToUse = V_MODEL_CHECKBOX;2553                            break;2554                        case 'file':2555                            isInvalidType = true;2556                            context.onError(createDOMCompilerError(56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));2557                            break;2558                    }2559                }2560            }2561            else if (compilerCore.hasDynamicKeyVBind(node)) {2562                // element has bindings with dynamic keys, which can possibly contain2563                // "type".2564                directiveToUse = V_MODEL_DYNAMIC;2565            }2566            else ;2567        }2568        else if (tag === 'select') {2569            directiveToUse = V_MODEL_SELECT;2570        }2571        else ;2572        // inject runtime directive2573        // by returning the helper symbol via needRuntime2574        // the import will replaced a resolveDirective call.2575        if (!isInvalidType) {2576            baseResult.needRuntime = context.helper(directiveToUse);2577        }2578    }2579    else {2580        context.onError(createDOMCompilerError(54 /* X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));2581    }2582    // native vmodel doesn't need the `modelValue` props since they are also2583    // passed to the runtime as `binding.value`. removing it reduces code size.2584    baseResult.props = baseResult.props.filter(p => !(p.key.type === 4 /* SIMPLE_EXPRESSION */ &&2585        p.key.content === 'modelValue'));2586    return baseResult;2587};2588const isEventOptionModifier = /*#__PURE__*/ shared.makeMap(`passive,once,capture`);2589const isNonKeyModifier = /*#__PURE__*/ shared.makeMap(2590// event propagation management2591`stop,prevent,self,` +2592    // system modifiers + exact2593    `ctrl,shift,alt,meta,exact,` +2594    // mouse2595    `middle`);2596// left & right could be mouse or key modifiers based on event type2597const maybeKeyModifier = /*#__PURE__*/ shared.makeMap('left,right');2598const isKeyboardEvent = /*#__PURE__*/ shared.makeMap(`onkeyup,onkeydown,onkeypress`, true);2599const resolveModifiers = (key, modifiers, context, loc) => {2600    const keyModifiers = [];2601    const nonKeyModifiers = [];2602    const eventOptionModifiers = [];2603    for (let i = 0; i < modifiers.length; i++) {2604        const modifier = modifiers[i];2605        if (modifier === 'native' &&2606            compilerCore.checkCompatEnabled("COMPILER_V_ON_NATIVE" /* COMPILER_V_ON_NATIVE */, context, loc)) {2607            eventOptionModifiers.push(modifier);2608        }2609        else if (isEventOptionModifier(modifier)) {2610            // eventOptionModifiers: modifiers for addEventListener() options,2611            // e.g. .passive & .capture2612            eventOptionModifiers.push(modifier);2613        }2614        else {2615            // runtimeModifiers: modifiers that needs runtime guards2616            if (maybeKeyModifier(modifier)) {2617                if (compilerCore.isStaticExp(key)) {2618                    if (isKeyboardEvent(key.content)) {2619                        keyModifiers.push(modifier);2620                    }2621                    else {2622                        nonKeyModifiers.push(modifier);2623                    }2624                }2625                else {2626                    keyModifiers.push(modifier);2627                    nonKeyModifiers.push(modifier);2628                }2629            }2630            else {2631                if (isNonKeyModifier(modifier)) {2632                    nonKeyModifiers.push(modifier);2633                }2634                else {2635                    keyModifiers.push(modifier);2636                }2637            }2638        }2639    }2640    return {2641        keyModifiers,2642        nonKeyModifiers,2643        eventOptionModifiers2644    };2645};2646const transformClick = (key, event) => {2647    const isStaticClick = compilerCore.isStaticExp(key) && key.content.toLowerCase() === 'onclick';2648    return isStaticClick2649        ? compilerCore.createSimpleExpression(event, true)2650        : key.type !== 4 /* SIMPLE_EXPRESSION */2651            ? compilerCore.createCompoundExpression([2652                `(`,2653                key,2654                `) === "onClick" ? "${event}" : (`,2655                key,2656                `)`2657            ])2658            : key;2659};2660const transformOn = (dir, node, context) => {2661    return compilerCore.transformOn(dir, node, context, baseResult => {2662        const { modifiers } = dir;2663        if (!modifiers.length)2664            return baseResult;2665        let { key, value: handlerExp } = baseResult.props[0];2666        const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);2667        // normalize click.right and click.middle since they don't actually fire2668        if (nonKeyModifiers.includes('right')) {2669            key = transformClick(key, `onContextmenu`);2670        }2671        if (nonKeyModifiers.includes('middle')) {2672            key = transformClick(key, `onMouseup`);2673        }2674        if (nonKeyModifiers.length) {2675            handlerExp = compilerCore.createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [2676                handlerExp,2677                JSON.stringify(nonKeyModifiers)2678            ]);2679        }2680        if (keyModifiers.length &&2681            // if event name is dynamic, always wrap with keys guard2682            (!compilerCore.isStaticExp(key) || isKeyboardEvent(key.content))) {2683            handlerExp = compilerCore.createCallExpression(context.helper(V_ON_WITH_KEYS), [2684                handlerExp,2685                JSON.stringify(keyModifiers)2686            ]);2687        }2688        if (eventOptionModifiers.length) {2689            const modifierPostfix = eventOptionModifiers.map(shared.capitalize).join('');2690            key = compilerCore.isStaticExp(key)2691                ? compilerCore.createSimpleExpression(`${key.content}${modifierPostfix}`, true)2692                : compilerCore.createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);2693        }2694        return {2695            props: [compilerCore.createObjectProperty(key, handlerExp)]2696        };2697    });2698};2699const transformShow = (dir, node, context) => {2700    const { exp, loc } = dir;2701    if (!exp) {2702        context.onError(createDOMCompilerError(58 /* X_V_SHOW_NO_EXPRESSION */, loc));2703    }2704    return {2705        props: [],2706        needRuntime: context.helper(V_SHOW)2707    };2708};2709/**2710 * This module is Node-only.2711 */2712/**2713 * Regex for replacing placeholders for embedded constant variables2714 * (e.g. import URL string constants generated by compiler-sfc)2715 */2716const expReplaceRE = /__VUE_EXP_START__(.*?)__VUE_EXP_END__/g;2717/**2718 * Turn eligible hoisted static trees into stringified static nodes, e.g.2719 *2720 * ```js2721 * const _hoisted_1 = createStaticVNode(`<div class="foo">bar</div>`)2722 * ```2723 *2724 * A single static vnode can contain stringified content for **multiple**2725 * consecutive nodes (element and plain text), called a "chunk".2726 * `@vue/runtime-dom` will create the content via innerHTML in a hidden2727 * container element and insert all the nodes in place. The call must also2728 * provide the number of nodes contained in the chunk so that during hydration2729 * we can know how many nodes the static vnode should adopt.2730 *2731 * The optimization scans a children list that contains hoisted nodes, and2732 * tries to find the largest chunk of consecutive hoisted nodes before running2733 * into a non-hoisted node or the end of the list. A chunk is then converted2734 * into a single static vnode and replaces the hoisted expression of the first2735 * node in the chunk. Other nodes in the chunk are considered "merged" and2736 * therefore removed from both the hoist list and the children array.2737 *2738 * This optimization is only performed in Node.js.2739 */2740const stringifyStatic = (children, context, parent) => {2741    // bail stringification for slot content2742    if (context.scopes.vSlot > 0) {2743        return;2744    }2745    let nc = 0; // current node count2746    let ec = 0; // current element with binding count2747    const currentChunk = [];2748    const stringifyCurrentChunk = (currentIndex) => {2749        if (nc >= 20 /* NODE_COUNT */ ||2750            ec >= 5 /* ELEMENT_WITH_BINDING_COUNT */) {2751            // combine all currently eligible nodes into a single static vnode call2752            const staticCall = compilerCore.createCallExpression(context.helper(compilerCore.CREATE_STATIC), [2753                JSON.stringify(currentChunk.map(node => stringifyNode(node, context)).join('')).replace(expReplaceRE, `" + $1 + "`),2754                // the 2nd argument indicates the number of DOM nodes this static vnode2755                // will insert / hydrate2756                String(currentChunk.length)2757            ]);2758            // replace the first node's hoisted expression with the static vnode call2759            replaceHoist(currentChunk[0], staticCall, context);2760            if (currentChunk.length > 1) {2761                for (let i = 1; i < currentChunk.length; i++) {2762                    // for the merged nodes, set their hoisted expression to null2763                    replaceHoist(currentChunk[i], null, context);2764                }2765                // also remove merged nodes from children2766                const deleteCount = currentChunk.length - 1;2767                children.splice(currentIndex - currentChunk.length + 1, deleteCount);2768                return deleteCount;2769            }2770        }2771        return 0;2772    };2773    let i = 0;2774    for (; i < children.length; i++) {2775        const child = children[i];2776        const hoisted = getHoistedNode(child);2777        if (hoisted) {2778            // presence of hoisted means child must be a stringifiable node2779            const node = child;2780            const result = analyzeNode(node);2781            if (result) {2782                // node is stringifiable, record state2783                nc += result[0];2784                ec += result[1];2785                currentChunk.push(node);2786                continue;2787            }2788        }2789        // we only reach here if we ran into a node that is not stringifiable2790        // check if currently analyzed nodes meet criteria for stringification.2791        // adjust iteration index2792        i -= stringifyCurrentChunk(i);2793        // reset state2794        nc = 0;2795        ec = 0;2796        currentChunk.length = 0;2797    }2798    // in case the last node was also stringifiable2799    stringifyCurrentChunk(i);2800};2801const getHoistedNode = (node) => ((node.type === 1 /* ELEMENT */ && node.tagType === 0 /* ELEMENT */) ||2802    node.type == 12 /* TEXT_CALL */) &&2803    node.codegenNode &&2804    node.codegenNode.type === 4 /* SIMPLE_EXPRESSION */ &&2805    node.codegenNode.hoisted;2806const dataAriaRE = /^(data|aria)-/;2807const isStringifiableAttr = (name, ns) => {2808    return ((ns === 0 /* HTML */2809        ? shared.isKnownHtmlAttr(name)2810        : ns === 1 /* SVG */2811            ? shared.isKnownSvgAttr(name)2812            : false) || dataAriaRE.test(name));2813};2814const replaceHoist = (node, replacement, context) => {2815    const hoistToReplace = node.codegenNode.hoisted;2816    context.hoists[context.hoists.indexOf(hoistToReplace)] = replacement;2817};2818const isNonStringifiable = /*#__PURE__*/ shared.makeMap(`caption,thead,tr,th,tbody,td,tfoot,colgroup,col`);2819/**2820 * for a hoisted node, analyze it and return:2821 * - false: bailed (contains non-stringifiable props or runtime constant)2822 * - [nc, ec] where2823 *   - nc is the number of nodes inside2824 *   - ec is the number of element with bindings inside2825 */2826function analyzeNode(node) {2827    if (node.type === 1 /* ELEMENT */ && isNonStringifiable(node.tag)) {2828        return false;2829    }2830    if (node.type === 12 /* TEXT_CALL */) {2831        return [1, 0];2832    }2833    let nc = 1; // node count2834    let ec = node.props.length > 0 ? 1 : 0; // element w/ binding count2835    let bailed = false;2836    const bail = () => {2837        bailed = true;2838        return false;2839    };2840    // TODO: check for cases where using innerHTML will result in different2841    // output compared to imperative node insertions.2842    // probably only need to check for most common case2843    // i.e. non-phrasing-content tags inside `<p>`2844    function walk(node) {2845        for (let i = 0; i < node.props.length; i++) {2846            const p = node.props[i];2847            // bail on non-attr bindings2848            if (p.type === 6 /* ATTRIBUTE */ &&2849                !isStringifiableAttr(p.name, node.ns)) {2850                return bail();2851            }2852            if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {2853                // bail on non-attr bindings2854                if (p.arg &&2855                    (p.arg.type === 8 /* COMPOUND_EXPRESSION */ ||2856                        (p.arg.isStatic && !isStringifiableAttr(p.arg.content, node.ns)))) {2857                    return bail();2858                }2859                if (p.exp &&2860                    (p.exp.type === 8 /* COMPOUND_EXPRESSION */ ||2861                        p.exp.constType < 3 /* CAN_STRINGIFY */)) {2862                    return bail();2863                }2864            }2865        }2866        for (let i = 0; i < node.children.length; i++) {2867            nc++;2868            const child = node.children[i];2869            if (child.type === 1 /* ELEMENT */) {2870                if (child.props.length > 0) {2871                    ec++;2872                }2873                walk(child);2874                if (bailed) {2875                    return false;2876                }2877            }2878        }2879        return true;2880    }2881    return walk(node) ? [nc, ec] : false;2882}2883function stringifyNode(node, context) {2884    if (shared.isString(node)) {2885        return node;2886    }2887    if (shared.isSymbol(node)) {2888        return ``;2889    }2890    switch (node.type) {2891        case 1 /* ELEMENT */:2892            return stringifyElement(node, context);2893        case 2 /* TEXT */:2894            return shared.escapeHtml(node.content);2895        case 3 /* COMMENT */:2896            return `<!--${shared.escapeHtml(node.content)}-->`;2897        case 5 /* INTERPOLATION */:2898            return shared.escapeHtml(shared.toDisplayString(evaluateConstant(node.content)));2899        case 8 /* COMPOUND_EXPRESSION */:2900            return shared.escapeHtml(evaluateConstant(node));2901        case 12 /* TEXT_CALL */:2902            return stringifyNode(node.content, context);2903        default:2904            // static trees will not contain if/for nodes2905            return '';2906    }2907}2908function stringifyElement(node, context) {2909    let res = `<${node.tag}`;2910    for (let i = 0; i < node.props.length; i++) {2911        const p = node.props[i];2912        if (p.type === 6 /* ATTRIBUTE */) {2913            res += ` ${p.name}`;2914            if (p.value) {2915                res += `="${shared.escapeHtml(p.value.content)}"`;2916            }2917        }2918        else if (p.type === 7 /* DIRECTIVE */ && p.name === 'bind') {2919            const exp = p.exp;2920            if (exp.content[0] === '_') {2921                // internally generated string constant references2922                // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin2923                res += ` ${p.arg.content}="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`;2924                continue;2925            }2926            // constant v-bind, e.g. :foo="1"2927            let evaluated = evaluateConstant(exp);2928            if (evaluated != null) {2929                const arg = p.arg && p.arg.content;2930                if (arg === 'class') {2931                    evaluated = shared.normalizeClass(evaluated);2932                }2933                else if (arg === 'style') {2934                    evaluated = shared.stringifyStyle(shared.normalizeStyle(evaluated));2935                }2936                res += ` ${p.arg.content}="${shared.escapeHtml(evaluated)}"`;2937            }2938        }2939    }2940    if (context.scopeId) {2941        res += ` ${context.scopeId}`;2942    }2943    res += `>`;2944    for (let i = 0; i < node.children.length; i++) {2945        res += stringifyNode(node.children[i], context);2946    }2947    if (!shared.isVoidTag(node.tag)) {2948        res += `</${node.tag}>`;2949    }2950    return res;2951}2952// __UNSAFE__2953// Reason: eval.2954// It's technically safe to eval because only constant expressions are possible2955// here, e.g. `{{ 1 }}` or `{{ 'foo' }}`2956// in addition, constant exps bail on presence of parens so you can't even2957// run JSFuck in here. But we mark it unsafe for security review purposes.2958// (see compiler-core/src/transformExpressions)2959function evaluateConstant(exp) {2960    if (exp.type === 4 /* SIMPLE_EXPRESSION */) {2961        return new Function(`return ${exp.content}`)();2962    }2963    else {2964        // compound2965        let res = ``;2966        exp.children.forEach(c => {2967            if (shared.isString(c) || shared.isSymbol(c)) {2968                return;2969            }2970            if (c.type === 2 /* TEXT */) {2971                res += c.content;2972            }2973            else if (c.type === 5 /* INTERPOLATION */) {2974                res += shared.toDisplayString(evaluateConstant(c.content));2975            }2976            else {2977                res += evaluateConstant(c);2978            }2979        });2980        return res;2981    }2982}2983const ignoreSideEffectTags = (node, context) => {2984    if (node.type === 1 /* ELEMENT */ &&2985        node.tagType === 0 /* ELEMENT */ &&2986        (node.tag === 'script' || node.tag === 'style')) {2987        context.onError(createDOMCompilerError(60 /* X_IGNORED_SIDE_EFFECT_TAG */, node.loc));2988        context.removeNode();2989    }2990};2991const DOMNodeTransforms = [2992    transformStyle,2993    ...([])2994];2995const DOMDirectiveTransforms = {2996    cloak: compilerCore.noopDirectiveTransform,2997    html: transformVHtml,2998    text: transformVText,2999    model: transformModel,3000    on: transformOn,3001    show: transformShow...

compiler-dom.esm-bundler.js

Source:compiler-dom.esm-bundler.js

...130const parseInlineCSS = (cssText, loc) => {131    const normalized = parseStringStyle(cssText);132    return createSimpleExpression(JSON.stringify(normalized), false, loc, 3 /* CAN_STRINGIFY */);133};134function createDOMCompilerError(code, loc) {135    return createCompilerError(code, loc, (process.env.NODE_ENV !== 'production') || !true ? DOMErrorMessages : undefined);136}137const DOMErrorMessages = {138    [50 /* X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,139    [51 /* X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,140    [52 /* X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,141    [53 /* X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,142    [54 /* X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,143    [55 /* X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,144    [56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,145    [57 /* X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,146    [58 /* X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,147    [59 /* X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,148    [60 /* X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`149};150const transformVHtml = (dir, node, context) => {151    const { exp, loc } = dir;152    if (!exp) {153        context.onError(createDOMCompilerError(50 /* X_V_HTML_NO_EXPRESSION */, loc));154    }155    if (node.children.length) {156        context.onError(createDOMCompilerError(51 /* X_V_HTML_WITH_CHILDREN */, loc));157        node.children.length = 0;158    }159    return {160        props: [161            createObjectProperty(createSimpleExpression(`innerHTML`, true, loc), exp || createSimpleExpression('', true))162        ]163    };164};165const transformVText = (dir, node, context) => {166    const { exp, loc } = dir;167    if (!exp) {168        context.onError(createDOMCompilerError(52 /* X_V_TEXT_NO_EXPRESSION */, loc));169    }170    if (node.children.length) {171        context.onError(createDOMCompilerError(53 /* X_V_TEXT_WITH_CHILDREN */, loc));172        node.children.length = 0;173    }174    return {175        props: [176            createObjectProperty(createSimpleExpression(`textContent`, true), exp177                ? createCallExpression(context.helperString(TO_DISPLAY_STRING), [exp], loc)178                : createSimpleExpression('', true))179        ]180    };181};182const transformModel = (dir, node, context) => {183    const baseResult = transformModel$1(dir, node, context);184    // base transform has errors OR component v-model (only need props)185    if (!baseResult.props.length || node.tagType === 1 /* COMPONENT */) {186        return baseResult;187    }188    if (dir.arg) {189        context.onError(createDOMCompilerError(55 /* X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));190    }191    function checkDuplicatedValue() {192        const value = findProp(node, 'value');193        if (value) {194            context.onError(createDOMCompilerError(57 /* X_V_MODEL_UNNECESSARY_VALUE */, value.loc));195        }196    }197    const { tag } = node;198    const isCustomElement = context.isCustomElement(tag);199    if (tag === 'input' ||200        tag === 'textarea' ||201        tag === 'select' ||202        isCustomElement) {203        let directiveToUse = V_MODEL_TEXT;204        let isInvalidType = false;205        if (tag === 'input' || isCustomElement) {206            const type = findProp(node, `type`);207            if (type) {208                if (type.type === 7 /* DIRECTIVE */) {209                    // :type="foo"210                    directiveToUse = V_MODEL_DYNAMIC;211                }212                else if (type.value) {213                    switch (type.value.content) {214                        case 'radio':215                            directiveToUse = V_MODEL_RADIO;216                            break;217                        case 'checkbox':218                            directiveToUse = V_MODEL_CHECKBOX;219                            break;220                        case 'file':221                            isInvalidType = true;222                            context.onError(createDOMCompilerError(56 /* X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));223                            break;224                        default:225                            // text type226                            (process.env.NODE_ENV !== 'production') && checkDuplicatedValue();227                            break;228                    }229                }230            }231            else if (hasDynamicKeyVBind(node)) {232                // element has bindings with dynamic keys, which can possibly contain233                // "type".234                directiveToUse = V_MODEL_DYNAMIC;235            }236            else {237                // text type238                (process.env.NODE_ENV !== 'production') && checkDuplicatedValue();239            }240        }241        else if (tag === 'select') {242            directiveToUse = V_MODEL_SELECT;243        }244        else {245            // textarea246            (process.env.NODE_ENV !== 'production') && checkDuplicatedValue();247        }248        // inject runtime directive249        // by returning the helper symbol via needRuntime250        // the import will replaced a resolveDirective call.251        if (!isInvalidType) {252            baseResult.needRuntime = context.helper(directiveToUse);253        }254    }255    else {256        context.onError(createDOMCompilerError(54 /* X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));257    }258    // native vmodel doesn't need the `modelValue` props since they are also259    // passed to the runtime as `binding.value`. removing it reduces code size.260    baseResult.props = baseResult.props.filter(p => !(p.key.type === 4 /* SIMPLE_EXPRESSION */ &&261        p.key.content === 'modelValue'));262    return baseResult;263};264const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`);265const isNonKeyModifier = /*#__PURE__*/ makeMap(266// event propagation management267`stop,prevent,self,` +268    // system modifiers + exact269    `ctrl,shift,alt,meta,exact,` +270    // mouse271    `middle`);272// left & right could be mouse or key modifiers based on event type273const maybeKeyModifier = /*#__PURE__*/ makeMap('left,right');274const isKeyboardEvent = /*#__PURE__*/ makeMap(`onkeyup,onkeydown,onkeypress`, true);275const resolveModifiers = (key, modifiers, context, loc) => {276    const keyModifiers = [];277    const nonKeyModifiers = [];278    const eventOptionModifiers = [];279    for (let i = 0; i < modifiers.length; i++) {280        const modifier = modifiers[i];281        if (modifier === 'native' &&282            checkCompatEnabled("COMPILER_V_ON_NATIVE" /* COMPILER_V_ON_NATIVE */, context, loc)) {283            eventOptionModifiers.push(modifier);284        }285        else if (isEventOptionModifier(modifier)) {286            // eventOptionModifiers: modifiers for addEventListener() options,287            // e.g. .passive & .capture288            eventOptionModifiers.push(modifier);289        }290        else {291            // runtimeModifiers: modifiers that needs runtime guards292            if (maybeKeyModifier(modifier)) {293                if (isStaticExp(key)) {294                    if (isKeyboardEvent(key.content)) {295                        keyModifiers.push(modifier);296                    }297                    else {298                        nonKeyModifiers.push(modifier);299                    }300                }301                else {302                    keyModifiers.push(modifier);303                    nonKeyModifiers.push(modifier);304                }305            }306            else {307                if (isNonKeyModifier(modifier)) {308                    nonKeyModifiers.push(modifier);309                }310                else {311                    keyModifiers.push(modifier);312                }313            }314        }315    }316    return {317        keyModifiers,318        nonKeyModifiers,319        eventOptionModifiers320    };321};322const transformClick = (key, event) => {323    const isStaticClick = isStaticExp(key) && key.content.toLowerCase() === 'onclick';324    return isStaticClick325        ? createSimpleExpression(event, true)326        : key.type !== 4 /* SIMPLE_EXPRESSION */327            ? createCompoundExpression([328                `(`,329                key,330                `) === "onClick" ? "${event}" : (`,331                key,332                `)`333            ])334            : key;335};336const transformOn = (dir, node, context) => {337    return transformOn$1(dir, node, context, baseResult => {338        const { modifiers } = dir;339        if (!modifiers.length)340            return baseResult;341        let { key, value: handlerExp } = baseResult.props[0];342        const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(key, modifiers, context, dir.loc);343        // normalize click.right and click.middle since they don't actually fire344        if (nonKeyModifiers.includes('right')) {345            key = transformClick(key, `onContextmenu`);346        }347        if (nonKeyModifiers.includes('middle')) {348            key = transformClick(key, `onMouseup`);349        }350        if (nonKeyModifiers.length) {351            handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [352                handlerExp,353                JSON.stringify(nonKeyModifiers)354            ]);355        }356        if (keyModifiers.length &&357            // if event name is dynamic, always wrap with keys guard358            (!isStaticExp(key) || isKeyboardEvent(key.content))) {359            handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [360                handlerExp,361                JSON.stringify(keyModifiers)362            ]);363        }364        if (eventOptionModifiers.length) {365            const modifierPostfix = eventOptionModifiers.map(capitalize).join('');366            key = isStaticExp(key)367                ? createSimpleExpression(`${key.content}${modifierPostfix}`, true)368                : createCompoundExpression([`(`, key, `) + "${modifierPostfix}"`]);369        }370        return {371            props: [createObjectProperty(key, handlerExp)]372        };373    });374};375const transformShow = (dir, node, context) => {376    const { exp, loc } = dir;377    if (!exp) {378        context.onError(createDOMCompilerError(58 /* X_V_SHOW_NO_EXPRESSION */, loc));379    }380    return {381        props: [],382        needRuntime: context.helper(V_SHOW)383    };384};385const warnTransitionChildren = (node, context) => {386    if (node.type === 1 /* ELEMENT */ &&387        node.tagType === 1 /* COMPONENT */) {388        const component = context.isBuiltInComponent(node.tag);389        if (component === TRANSITION) {390            return () => {391                if (node.children.length && hasMultipleChildren(node)) {392                    context.onError(createDOMCompilerError(59 /* X_TRANSITION_INVALID_CHILDREN */, {393                        start: node.children[0].loc.start,394                        end: node.children[node.children.length - 1].loc.end,395                        source: ''396                    }));397                }398            };399        }400    }401};402function hasMultipleChildren(node) {403    // #1352 filter out potential comment nodes.404    const children = (node.children = node.children.filter(c => c.type !== 3 /* COMMENT */ &&405        !(c.type === 2 /* TEXT */ && !c.content.trim())));406    const child = children[0];407    return (children.length !== 1 ||408        child.type === 11 /* FOR */ ||409        (child.type === 9 /* IF */ && child.branches.some(hasMultipleChildren)));410}411const ignoreSideEffectTags = (node, context) => {412    if (node.type === 1 /* ELEMENT */ &&413        node.tagType === 0 /* ELEMENT */ &&414        (node.tag === 'script' || node.tag === 'style')) {415        context.onError(createDOMCompilerError(60 /* X_IGNORED_SIDE_EFFECT_TAG */, node.loc));416        context.removeNode();417    }418};419const DOMNodeTransforms = [420    transformStyle,421    ...((process.env.NODE_ENV !== 'production') ? [warnTransitionChildren] : [])422];423const DOMDirectiveTransforms = {424    cloak: noopDirectiveTransform,425    html: transformVHtml,426    text: transformVText,427    model: transformModel,428    on: transformOn,429    show: transformShow...

rollup.config.js

Source:rollup.config.js

...179      ? {180          'context.onError(': '/*#__PURE__*/ context.onError(',181          'emitError(': '/*#__PURE__*/ emitError(',182          'createCompilerError(': '/*#__PURE__*/ createCompilerError(',183          'createDOMCompilerError(': '/*#__PURE__*/ createDOMCompilerError('184        }185      : {})186  }187  Object.keys(replacements).forEach(key => {188    if (key in process.env) {189      replacements[key] = process.env[key]190    }191  })192  return replace(replacements)193}194function createProductionConfig(format) {195  return createConfig(format, {196    file: resolve(`dist/${name}.${format}.prod.js`),197    format: outputConfigs[format].format...

vModel.js

Source:vModel.js

...15  if (!baseResult.props.length || node.tagType === 1) {16    return baseResult17  }18  if (dir.arg) {19    context.onError(createDOMCompilerError(55, dir.arg.loc))20  }21  function checkDuplicatedValue () {22    const value = findProp(node, 'value')23    if (value) {24      context.onError(createDOMCompilerError(57, value.loc))25    }26  }27  const { tag } = node28  const isCustomElement = context.isCustomElement(tag)29  if (30    tag === 'input' ||31    tag === 'textarea' ||32    tag === 'select' ||33    isCustomElement34  ) {35    let directiveToUse = V_MODEL_TEXT36    let isInvalidType = false37    if (tag === 'input' || isCustomElement) {38      const type = findProp(node, `type`)39      if (type) {40        if (type.type === 7) {41          directiveToUse = V_MODEL_DYNAMIC42        } else if (type.value) {43          switch (type.value.content) {44            case 'radio':45              directiveToUse = V_MODEL_RADIO46              break47            case 'checkbox':48              directiveToUse = V_MODEL_CHECKBOX49              break50            case 'file':51              isInvalidType = true52              context.onError(createDOMCompilerError(56, dir.loc))53              break54            default:55              checkDuplicatedValue()56              break57          }58        }59      } else if (hasDynamicKeyVBind(node)) {60        directiveToUse = V_MODEL_DYNAMIC61      } else {62        checkDuplicatedValue()63      }64    } else if (tag === 'select') {65      directiveToUse = V_MODEL_SELECT66    } else {67      checkDuplicatedValue()68    }69    if (!isInvalidType) {70      baseResult.needRuntime = context.helper(directiveToUse)71    }72  } else {73    context.onError(createDOMCompilerError(54, dir.loc))74  }75  baseResult.props = baseResult.props.filter(76    p => !(p.key.type === 4 && p.key.content === 'modelValue')77  )78  return baseResult...

vHtml.js

Source:vHtml.js

1export const transformVHtml = (dir, node, context) => {2  const { exp, loc } = dir3  if (!exp) {4    context.onError(createDOMCompilerError(50, loc))5  }6  if (node.children.length) {7    context.onError(createDOMCompilerError(51, loc))8    node.children.length = 09  }10  return {11    props: [12      createObjectProperty(13        createSimpleExpression(`innerHTML`, true, loc),14        exp || createSimpleExpression('', true)15      )16    ]17  }...

Using AI Code Generation

1const { createDOMCompilerError } = require('playwright-core/lib/server/domErrors');2const error = createDOMCompilerError('message', 'stack');3const { createDOMCompilerError } = require('playwright');4const error = createDOMCompilerError('message', 'stack');5const { createDOMCompilerError } = require('playwright/lib/server/domErrors');6const error = createDOMCompilerError('message', 'stack');7const { createDOMCompilerError } = require('playwright/lib/server/domErrors');8const error = createDOMCompilerError('message', 'stack');9const { createDOMCompilerError } = require('playwright/lib/server/domErrors');10const error = createDOMCompilerError('message', 'stack');

Using AI Code Generation

1const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');2const error = createDOMCompilerError('testError');3console.log(error);4const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');5const error = createDOMCompilerError('testError');6console.log(error);7const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');8const error = createDOMCompilerError('testError');9console.log(error);10const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');11const error = createDOMCompilerError('testError');12console.log(error);13const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');14const error = createDOMCompilerError('testError');15console.log(error);16const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');17const error = createDOMCompilerError('testError');18console.log(error);19const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');20const error = createDOMCompilerError('testError');21console.log(error);22const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');23const error = createDOMCompilerError('testError');24console.log(error);25const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');26const error = createDOMCompilerError('testError');27console.log(error);28const { createDOMCompilerError } = require('playwright/lib/server/domCompiler');29const error = createDOMCompilerError('test

Using AI Code Generation

1const { createDOMCompilerError } = require('playwright/lib/server/common/domCompilerError');2throw createDOMCompilerError('Error message', 'Error type');3    at DOMCompiler._compile (node_modules/playwright/lib/server/common/domCompiler.js:77:13)4    at DOMCompiler.compile (node_modules/playwright/lib/server/common/domCompiler.js:37:21)5    at Frame._compileScript (node_modules/playwright/lib/server/frames.js:123:30)6    at Frame._evaluateExpressionHandle (node_modules/playwright/lib/server/frames.js:353:29)7    at Frame.evaluateHandle (node_modules/playwright/lib/server/frames.js:333:21)8    at Frame.evaluate (node_modules/playwright/lib/server/frames.js:298:17)9    at Frame.waitForFunction (node_modules/playwright/lib/server/frames.js:1222:25)10    at Frame.waitForSelector (node_modules/playwright/lib/server/frames.js:1065:25)11    at Page.waitForSelector (node_modules/playwright/lib/server/page.js:1173:31)

Using AI Code Generation

1const { createDOMCompilerError } = require('@playwright/test/lib/dom');2throw createDOMCompilerError('test error');3it('should test', async ({ page }) => {4  await page.click('text=Get started');5  await page.click('text=Docs');6  await page.click('text=API');7  await page.click('text=Test');8  await page.click('text=Test runner');9  await page.click('text=Test.fixtures

Using AI Code Generation

1const { createDOMCompilerError } = require('playwright/lib/server/domErrors');2const { error } = createDOMCompilerError('some message');3console.log(error);4console.log(error.stack);5  const { error } = JSON.parse('{"error":{"message":"some message","stack":"Error: some message6at Object.<anonymous> (/Users/raghavendra/Desktop/test.js:4:19)7at Module._compile (internal/modules/cjs/loader.js:1108:14)8at Object.Module._extensions..js (internal/modules/cjs/loader.js:1137:10)9at Module.load (internal/modules/cjs/loader.js:973:32)10at Function.Module._load (internal/modules/cjs/loader.js:813:12)11at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)12at internal/main/run_main_module.js:17:47","name":"Error","frames":[]}}');13  console.log(error);

Using AI Code Generation

1const { createDOMCompilerError } = require('@playwright/test/lib/runner');2console.log(createDOMCompilerError('error'));3class CustomError extends Error {4  constructor(message) {5    super(message);6    this.name = 'CustomError';7  }8}9throw new CustomError('error');

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.