How to use createCacheExpression method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

Sign up Free
›
_
... View Documentation... View sample repo

ast.js

Source: ast.js Github

copy
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3var shared_1 = require("../../shared/js/index");
4exports.locStub = {
5    source: '',
6    start: { line: 1, column: 1, offset: 0 },
7    end: { line: 1, column: 1, offset: 0 }
8};
9function createArrayExpression(elements, loc) {
10    if (loc === void 0) { loc = exports.locStub; }
11    return {
12        type: 16,
13        loc: loc,
14        elements: elements
15    };
16}
17exports.createArrayExpression = createArrayExpression;
18function createObjectExpression(properties, loc) {
19    if (loc === void 0) { loc = exports.locStub; }
20    return {
21        type: 14,
22        loc: loc,
23        properties: properties
24    };
25}
26exports.createObjectExpression = createObjectExpression;
27function createObjectProperty(key, value) {
28    return {
29        type: 15,
30        loc: exports.locStub,
31        key: shared_1.isString(key) ? createSimpleExpression(key, true) : key,
32        value: value
33    };
34}
35exports.createObjectProperty = createObjectProperty;
36function createSimpleExpression(content, isStatic, loc, isConstant) {
37    if (loc === void 0) { loc = exports.locStub; }
38    if (isConstant === void 0) { isConstant = false; }
39    return {
40        type: 4,
41        loc: loc,
42        isConstant: isConstant,
43        content: content,
44        isStatic: isStatic
45    };
46}
47exports.createSimpleExpression = createSimpleExpression;
48function createInterpolation(content, loc) {
49    return {
50        type: 5,
51        loc: loc,
52        content: shared_1.isString(content)
53            ? createSimpleExpression(content, false, loc)
54            : content
55    };
56}
57exports.createInterpolation = createInterpolation;
58function createCompoundExpression(children, loc) {
59    if (loc === void 0) { loc = exports.locStub; }
60    return {
61        type: 8,
62        loc: loc,
63        children: children
64    };
65}
66exports.createCompoundExpression = createCompoundExpression;
67function createCallExpression(callee, args, loc) {
68    if (args === void 0) { args = []; }
69    if (loc === void 0) { loc = exports.locStub; }
70    return {
71        type: 13,
72        loc: loc,
73        callee: callee,
74        arguments: args
75    };
76}
77exports.createCallExpression = createCallExpression;
78function createFunctionExpression(params, returns, newline, loc) {
79    if (newline === void 0) { newline = false; }
80    if (loc === void 0) { loc = exports.locStub; }
81    return {
82        type: 17,
83        params: params,
84        returns: returns,
85        newline: newline,
86        loc: loc
87    };
88}
89exports.createFunctionExpression = createFunctionExpression;
90function createSequenceExpression(expressions) {
91    return {
92        type: 18,
93        expressions: expressions,
94        loc: exports.locStub
95    };
96}
97exports.createSequenceExpression = createSequenceExpression;
98function createConditionalExpression(test, consequent, alternate) {
99    return {
100        type: 19,
101        test: test,
102        consequent: consequent,
103        alternate: alternate,
104        loc: exports.locStub
105    };
106}
107exports.createConditionalExpression = createConditionalExpression;
108function createCacheExpression(index, value, isVNode) {
109    if (isVNode === void 0) { isVNode = false; }
110    return {
111        type: 20,
112        index: index,
113        value: value,
114        isVNode: isVNode,
115        loc: exports.locStub
116    };
117}
118exports.createCacheExpression = createCacheExpression;
119
Full Screen
...

Source: ast.js Github

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var shared_1 = require("../../shared/js/index");
exports.locStub = {
    source: '',
    start: { line: 1, column: 1, offset: 0 },
    end: { line: 1, column: 1, offset: 0 }
};
function createArrayExpression(elements, loc) {
    if (loc === void 0) { loc = exports.locStub; }
    return {
        type: 16,
        loc: loc,
        elements: elements
    };
}
exports.createArrayExpression = createArrayExpression;
function createObjectExpression(properties, loc) {
    if (loc === void 0) { loc = exports.locStub; }
    return {
        type: 14,
        loc: loc,
        properties: properties
    };
}
exports.createObjectExpression = createObjectExpression;
function createObjectProperty(key, value) {
    return {
        type: 15,
        loc: exports.locStub,
        key: shared_1.isString(key) ? createSimpleExpression(key, true) : key,
        value: value
    };
}
exports.createObjectProperty = createObjectProperty;
function createSimpleExpression(content, isStatic, loc, isConstant) {
    if (loc === void 0) { loc = exports.locStub; }
    if (isConstant === void 0) { isConstant = false; }
    return {
        type: 4,
        loc: loc,
        isConstant: isConstant,
        content: content,
        isStatic: isStatic
    };
}
exports.createSimpleExpression = createSimpleExpression;
function createInterpolation(content, loc) {
    return {
        type: 5,
        loc: loc,
        content: shared_1.isString(content)
            ? createSimpleExpression(content, false, loc)
            : content
    };
}
exports.createInterpolation = createInterpolation;
function createCompoundExpression(children, loc) {
    if (loc === void 0) { loc = exports.locStub; }
    return {
        type: 8,
        loc: loc,
        children: children
    };
}
exports.createCompoundExpression = createCompoundExpression;
function createCallExpression(callee, args, loc) {
    if (args === void 0) { args = []; }
    if (loc === void 0) { loc = exports.locStub; }
    return {
        type: 13,
        loc: loc,
        callee: callee,
        arguments: args
    };
}
exports.createCallExpression = createCallExpression;
function createFunctionExpression(params, returns, newline, loc) {
    if (newline === void 0) { newline = false; }
    if (loc === void 0) { loc = exports.locStub; }
    return {
        type: 17,
        params: params,
        returns: returns,
        newline: newline,
        loc: loc
    };
}
exports.createFunctionExpression = createFunctionExpression;
function createSequenceExpression(expressions) {
    return {
        type: 18,
        expressions: expressions,
        loc: exports.locStub
    };
}
exports.createSequenceExpression = createSequenceExpression;
function createConditionalExpression(test, consequent, alternate) {
    return {
        type: 19,
        test: test,
        consequent: consequent,
        alternate: alternate,
        loc: exports.locStub
    };
}
exports.createConditionalExpression = createConditionalExpression;
function createCacheExpression(index, value, isVNode) {
    if (isVNode === void 0) { isVNode = false; }
    return {
        type: 20,
        index: index,
        value: value,
        isVNode: isVNode,
        loc: exports.locStub
    };
}
exports.createCacheExpression = createCacheExpression;

transform.js

Source: transform.js Github

copy
1import { NOOP } from "../util.js";
2import { defaultOnError } from "./error.js";
3import { __DEV__, isVSlot } from "./utils.js";
4import {
5  NodeTypes,
6  ElementTypes,
7  createSimpleExpression,
8  createCacheExpression,
9} from "./ast.js";
10import { isSingleElementRoot, hoistStatic } from "./transforms/hoistStatic.js";
11import {
12  TO_DISPLAY_STRING,
13  FRAGMENT,
14  helperNameMap,
15  CREATE_BLOCK,
16  CREATE_COMMENT,
17  OPEN_BLOCK,
18} from "./runtimeHelpers.js";
19
20export function createTransformContext(
21  root,
22  {
23    prefixIdentifiers = false,
24    hoistStatic = false,
25    cacheHandlers = false,
26    nodeTransforms = [],
27    directiveTransforms = {},
28    transformHoist = null,
29    isBuiltInComponent = NOOP,
30    expressionPlugins = [],
31    scopeId = null,
32    ssr = false,
33    onError = defaultOnError,
34  }
35) {
36  const context = {
37    // options
38    prefixIdentifiers,
39    hoistStatic,
40    cacheHandlers,
41    nodeTransforms,
42    directiveTransforms,
43    transformHoist,
44    isBuiltInComponent,
45    expressionPlugins,
46    scopeId,
47    ssr,
48    onError,
49
50    // state
51    root,
52    helpers: new Set(),
53    components: new Set(),
54    directives: new Set(),
55    hoists: [],
56    imports: new Set(),
57    temps: 0,
58    cached: 0,
59    identifiers: {},
60    scopes: {
61      vFor: 0,
62      vSlot: 0,
63      vPre: 0,
64      vOnce: 0,
65    },
66    parent: null,
67    currentNode: root,
68    childIndex: 0,
69
70    // methods
71    helper(name) {
72      context.helpers.add(name);
73      return name;
74    },
75    helperString(name) {
76      return `_${helperNameMap[context.helper(name)]}`;
77    },
78    replaceNode(node) {
79      // parent, childIndex 来自 traverseChildren 里面的赋值
80      context.parent.children[context.childIndex] = context.currentNode = node;
81    },
82    removeNode(node) {
83      if (__DEV__ && !context.parent) {
84        throw new Error(`Cannot, remove root node.`);
85      }
86      const list = context.parent.children;
87      // 先从节点孩子中找，然后取当前节点
88      const removalIndex = node
89        ? list.indexOf(node)
90        : context.currentNode
91        ? context.childIndex
92        : -1;
93
94      if (__DEV__ && removalIndex < 0) {
95        throw new Error(`node being removed is not a child of current parent`);
96      }
97
98      if (!node || node === context.currentNode) {
99        // 删除的是当前 traverseNode 递归中正遍历的节点
100        context.currentNode = null;
101        context.onNodeRemoved();
102      } else {
103        // 删除当前节点前面的兄弟节点
104        if (context.childIndex > removalIndex) {
105          context.childIndex--;
106          context.onNodeRemoved();
107        }
108      }
109      // 执行删除
110      context.parent.children.splice(removalIndex, 1);
111    },
112    onNodeRemoved: () => {},
113    addIdentifiers(exp) {},
114    removeIdentifiers(exp) {},
115    hoist(exp) {
116      context.hoists.push(exp);
117      const identifier = createSimpleExpression(
118        `_hoisted_${context.hoists.length}`,
119        false,
120        exp.loc,
121        true
122      );
123      identifier.hoisted = exp;
124      return identifier;
125    },
126    cache(exp, isVNode = false) {
127      return createCacheExpression(++context.cached, exp, isVNode);
128    },
129  };
130
131  function addId(id) {}
132
133  function removeId(id) {}
134
135  return context;
136}
137
138export function traverseNode(node, context) {
139  context.currentNode = node;
140
141  const { nodeTransforms } = context;
142  const exitFns = [];
143
144  for (let i = 0; i < nodeTransforms.length; i++) {
145    // 调用诸如  transformText 的函数
146    const onExit = nodeTransforms[i](node, context);
147    if (onExit) {
148      const fns = Array.isArray(onExit) ? onExit : [onExit];
149      exitFns.push(...fns);
150    }
151
152    if (!context.currentNode) {
153      // 可能被移除了
154      return;
155    } else {
156      // 节点可能被替换过，重新建立引用
157      node = context.currentNode;
158    }
159  }
160
161  switch (node.type) {
162    // ... 省略
163    case NodeTypes.INTERPOLATION:
164      if (!context.ssr) {
165        // 这个函数来自上下文处理中的 helper(name)
166        context.helper(TO_DISPLAY_STRING);
167      }
168      break;
169    case NodeTypes.IF:
170      for (let i = 0; i < node.branches.length; i++) {
171        traverseNode(node.branches[i], context);
172      }
173      break;
174    case NodeTypes.IF_BRANCH:
175    case NodeTypes.ELEMENT:
176    case NodeTypes.ROOT:
177      traverseChildren(node, context);
178      break;
179  }
180
181  context.currentNode = node;
182  let i = exitFns.length;
183  // 执行所有转换
184  while (i--) {
185    exitFns[i]();
186  }
187}
188
189export function transform(root, options) {
190  const context = createTransformContext(root, options);
191
192  traverseNode(root, context);
193
194  console.log(root, "000");
195  if (options.hoistStatic) {
196    hoistStatic(root, context);
197  }
198
199  if (!options.ssr) {
200    createRootCodegen(root, context);
201  }
202
203  // ... ssr 处理
204
205  // root 属性合并，初始化
206  root.helpers = [...context.helpers];
207  root.components = [...context.components];
208  root.directives = [...context.directives];
209  root.imports = [...context.imports];
210  root.hoists = context.hoists;
211  root.temps = context.temps;
212  root.cached = context.cached;
213}
214
215function createRootCodegen(root, context) {
216  const { helper } = context;
217  const { children } = root;
218  const child = children[0];
219
220  if (children.length === 1) {
221    // 只有一个孩子节点
222
223    // 且孩子节点是一个元素 element 类型，将它放在一个代码块钟返回
224    // 如： { code }
225    if (isSingleElementRoot(root, child) && child.codegenNode) {
226      const codegenNode = child.codegenNode;
227      if (codegenNode.type === NodeTypes.VNODE_CALL) {
228        codegenNode.isBlock = true;
229        helper(OPEN_BLOCK);
230        helper(CREATE_BLOCK);
231      }
232      root.codegenNode = codegenNode;
233    } else {
234      root.codegenNode = child;
235    }
236  } else if (children.length > 1) {
237  } else {
238    // 没有孩子节点， codegen 返回 null，看到没
239    // 01 simple text 返回 null 问题找到根源了
240  }
241}
242
243export function traverseChildren(parent, context) {
244  let i = 0;
245  const nodeRemoved = () => {
246    i--;
247  };
248
249  for (; i < parent.children.length; i++) {
250    const child = parent.children[i];
251    // 过略掉字符串，只处理 ast child
252    if (typeof child === "string") continue;
253
254    context.parent = parent;
255    context.childIndex = i;
256    context.onNodeRemoved = nodeRemoved;
257    traverseNode(child, context);
258  }
259}
260
261export function createStructuralDirectiveTransform(name, fn) {
262  const matches =
263    typeof name === "string" ? (n) => n === name : (n) => name.test(n);
264
265  return (node, context) => {
266    if (node.type === NodeTypes.ELEMENT) {
267      const { props } = node;
268
269      // 忽略 v-slot，它在 vSlot.ts 中处理
270      if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
271        return;
272      }
273
274      // 开始收集 v-if 指令的 transform 函数
275      const exitFns = [];
276
277      for (let i = 0; i < props.length; i++) {
278        const prop = props[i];
279        if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
280          // 删除原节点中的指令属性
281          props.splice(i, 1);
282          i--;
283          const onExit = fn(node, prop, context);
284          if (onExit) exitFns.push(onExit);
285        }
286      }
287
288      return exitFns;
289    }
290  };
291}
292
Full Screen
...

Source: transform.js Github

import { NOOP } from "../util.js";
import { defaultOnError } from "./error.js";
import { __DEV__, isVSlot } from "./utils.js";
import {
  NodeTypes,
  ElementTypes,
  createSimpleExpression,
  createCacheExpression,
} from "./ast.js";
import { isSingleElementRoot, hoistStatic } from "./transforms/hoistStatic.js";
import {
  TO_DISPLAY_STRING,
  FRAGMENT,
  helperNameMap,
  CREATE_BLOCK,
  CREATE_COMMENT,
  OPEN_BLOCK,
} from "./runtimeHelpers.js";

export function createTransformContext(
  root,
  {
    prefixIdentifiers = false,
    hoistStatic = false,
    cacheHandlers = false,
    nodeTransforms = [],
    directiveTransforms = {},
    transformHoist = null,
    isBuiltInComponent = NOOP,
    expressionPlugins = [],
    scopeId = null,
    ssr = false,
    onError = defaultOnError,
  }
) {
  const context = {
    // options
    prefixIdentifiers,
    hoistStatic,
    cacheHandlers,
    nodeTransforms,
    directiveTransforms,
    transformHoist,
    isBuiltInComponent,
    expressionPlugins,
    scopeId,
    ssr,
    onError,

    // state
    root,
    helpers: new Set(),
    components: new Set(),
    directives: new Set(),
    hoists: [],
    imports: new Set(),
    temps: 0,
    cached: 0,
    identifiers: {},
    scopes: {
      vFor: 0,
      vSlot: 0,
      vPre: 0,
      vOnce: 0,
    },
    parent: null,
    currentNode: root,
    childIndex: 0,

    // methods
    helper(name) {
      context.helpers.add(name);
      return name;
    },
    helperString(name) {
      return `_${helperNameMap[context.helper(name)]}`;
    },
    replaceNode(node) {
      // parent, childIndex 来自 traverseChildren 里面的赋值
      context.parent.children[context.childIndex] = context.currentNode = node;
    },
    removeNode(node) {
      if (__DEV__ && !context.parent) {
        throw new Error(`Cannot, remove root node.`);
      }
      const list = context.parent.children;
      // 先从节点孩子中找，然后取当前节点
      const removalIndex = node
        ? list.indexOf(node)
        : context.currentNode
        ? context.childIndex
        : -1;

      if (__DEV__ && removalIndex < 0) {
        throw new Error(`node being removed is not a child of current parent`);
      }

      if (!node || node === context.currentNode) {
        // 删除的是当前 traverseNode 递归中正遍历的节点
        context.currentNode = null;
        context.onNodeRemoved();
      } else {
        // 删除当前节点前面的兄弟节点
        if (context.childIndex > removalIndex) {
          context.childIndex--;
          context.onNodeRemoved();
        }
      }
      // 执行删除
      context.parent.children.splice(removalIndex, 1);
    },
    onNodeRemoved: () => {},
    addIdentifiers(exp) {},
    removeIdentifiers(exp) {},
    hoist(exp) {
      context.hoists.push(exp);
      const identifier = createSimpleExpression(
        `_hoisted_${context.hoists.length}`,
        false,
        exp.loc,
        true
      );
      identifier.hoisted = exp;
      return identifier;
    },
    cache(exp, isVNode = false) {
      return createCacheExpression(++context.cached, exp, isVNode);
    },
  };

  function addId(id) {}

  function removeId(id) {}

  return context;
}

export function traverseNode(node, context) {
  context.currentNode = node;

  const { nodeTransforms } = context;
  const exitFns = [];

  for (let i = 0; i < nodeTransforms.length; i++) {
    // 调用诸如  transformText 的函数
    const onExit = nodeTransforms[i](node, context);
    if (onExit) {
      const fns = Array.isArray(onExit) ? onExit : [onExit];
      exitFns.push(...fns);
    }

    if (!context.currentNode) {
      // 可能被移除了
      return;
    } else {
      // 节点可能被替换过，重新建立引用
      node = context.currentNode;
    }
  }

  switch (node.type) {
    // ... 省略
    case NodeTypes.INTERPOLATION:
      if (!context.ssr) {
        // 这个函数来自上下文处理中的 helper(name)
        context.helper(TO_DISPLAY_STRING);
      }
      break;
    case NodeTypes.IF:
      for (let i = 0; i < node.branches.length; i++) {
        traverseNode(node.branches[i], context);
      }
      break;
    case NodeTypes.IF_BRANCH:
    case NodeTypes.ELEMENT:
    case NodeTypes.ROOT:
      traverseChildren(node, context);
      break;
  }

  context.currentNode = node;
  let i = exitFns.length;
  // 执行所有转换
  while (i--) {
    exitFns[i]();
  }
}

export function transform(root, options) {
  const context = createTransformContext(root, options);

  traverseNode(root, context);

  console.log(root, "000");
  if (options.hoistStatic) {
    hoistStatic(root, context);
  }

  if (!options.ssr) {
    createRootCodegen(root, context);
  }

  // ... ssr 处理

  // root 属性合并，初始化
  root.helpers = [...context.helpers];
  root.components = [...context.components];
  root.directives = [...context.directives];
  root.imports = [...context.imports];
  root.hoists = context.hoists;
  root.temps = context.temps;
  root.cached = context.cached;
}

function createRootCodegen(root, context) {
  const { helper } = context;
  const { children } = root;
  const child = children[0];

  if (children.length === 1) {
    // 只有一个孩子节点

    // 且孩子节点是一个元素 element 类型，将它放在一个代码块钟返回
    // 如： { code }
    if (isSingleElementRoot(root, child) && child.codegenNode) {
      const codegenNode = child.codegenNode;
      if (codegenNode.type === NodeTypes.VNODE_CALL) {
        codegenNode.isBlock = true;
        helper(OPEN_BLOCK);
        helper(CREATE_BLOCK);
      }
      root.codegenNode = codegenNode;
    } else {
      root.codegenNode = child;
    }
  } else if (children.length > 1) {
  } else {
    // 没有孩子节点， codegen 返回 null，看到没
    // 01 simple text 返回 null 问题找到根源了
  }
}

export function traverseChildren(parent, context) {
  let i = 0;
  const nodeRemoved = () => {
    i--;
  };

  for (; i < parent.children.length; i++) {
    const child = parent.children[i];
    // 过略掉字符串，只处理 ast child
    if (typeof child === "string") continue;

    context.parent = parent;
    context.childIndex = i;
    context.onNodeRemoved = nodeRemoved;
    traverseNode(child, context);
  }
}

export function createStructuralDirectiveTransform(name, fn) {
  const matches =
    typeof name === "string" ? (n) => n === name : (n) => name.test(n);

  return (node, context) => {
    if (node.type === NodeTypes.ELEMENT) {
      const { props } = node;

      // 忽略 v-slot，它在 vSlot.ts 中处理
      if (node.tagType === ElementTypes.TEMPLATE && props.some(isVSlot)) {
        return;
      }

      // 开始收集 v-if 指令的 transform 函数
      const exitFns = [];

      for (let i = 0; i < props.length; i++) {
        const prop = props[i];
        if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
          // 删除原节点中的指令属性
          props.splice(i, 1);
          i--;
          const onExit = fn(node, prop, context);
          if (onExit) exitFns.push(onExit);
        }
      }

      return exitFns;
    }
  };
}

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Claim Now
Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)

Sign up nowX