How to use createDOMCompilerError method in Playwright Internal

Best JavaScript code snippet using playwright-internal

compiler-dom.cjs.js

Source:compiler-dom.cjs.js Github

copy

Full Screen

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

Full Screen

Full Screen

compiler-dom.cjs.prod.js

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

copy

Full Screen

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

Full Screen

Full Screen

compiler-dom.esm-bundler.js

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

copy

Full Screen

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

Full Screen

Full Screen

rollup.config.js

Source:rollup.config.js Github

copy

Full Screen

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

Full Screen

Full Screen

vModel.js

Source:vModel.js Github

copy

Full Screen

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

Full Screen

Full Screen

vHtml.js

Source:vHtml.js Github

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

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