How to use updateDirectives 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

directives.flat1.js

Source: directives.flat1.js Github

copy
1/* @flow */
2
3import { emptyNode } from 'core/vdom/patch'
4import { resolveAsset, handleError } from 'core/util/index'
5import { mergeVNodeHook } from 'core/vdom/helpers/index'
6
7/* directives 模块(全局 Vue.directive 指令处理) */
8export default {
9  // 创建周期处理 directive 指令
10  create: updateDirectives,
11  // 更新周期处理 directive 指令
12  update: updateDirectives,
13  // 销毁周期处理 directive 指令
14  destroy: function unbindDirectives (vnode: VNodeWithData) {
15    updateDirectives(vnode, emptyNode)
16  }
17}
18
19function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
20  if (oldVnode.data.directives || vnode.data.directives) {
21    _update(oldVnode, vnode)
22  }
23}
24
25function _update (oldVnode, vnode) {/* ... */}
26
27const emptyModifiers = Object.create(null)
28
29function normalizeDirectives (
30  dirs: ?Array<VNodeDirective>,
31  vm: Component
32): { [key: string]: VNodeDirective } {/* ... */}
33
34// 获取简单指令名
35function getRawDirName (dir: VNodeDirective): string {/* ... */}
36
37// 调用 vnode 生命周期钩子
38function callHook (dir, hook, vnode, oldVnode, isDestroy) {/* ... */}
39
Full Screen
...

Source: directives.flat1.js Github

/* @flow */

import { emptyNode } from 'core/vdom/patch'
import { resolveAsset, handleError } from 'core/util/index'
import { mergeVNodeHook } from 'core/vdom/helpers/index'

/* directives 模块(全局 Vue.directive 指令处理) */
export default {
  // 创建周期处理 directive 指令
  create: updateDirectives,
  // 更新周期处理 directive 指令
  update: updateDirectives,
  // 销毁周期处理 directive 指令
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}

function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}

function _update (oldVnode, vnode) {/* ... */}

const emptyModifiers = Object.create(null)

function normalizeDirectives (
  dirs: ?Array<VNodeDirective>,
  vm: Component
): { [key: string]: VNodeDirective } {/* ... */}

// 获取简单指令名
function getRawDirName (dir: VNodeDirective): string {/* ... */}

// 调用 vnode 生命周期钩子
function callHook (dir, hook, vnode, oldVnode, isDestroy) {/* ... */}

directives.js

Source: directives.js Github

copy
1/* @flow */
2
3import { emptyNode } from 'core/vdom/patch'
4import { resolveAsset, handleError } from 'core/util/index'
5import { mergeVNodeHook } from 'core/vdom/helpers/index'
6
7export default {
8  create: updateDirectives,
9  update: updateDirectives,
10  destroy: function unbindDirectives (vnode: VNodeWithData) {
11    updateDirectives(vnode, emptyNode)
12  }
13}
14
15function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
16  if (oldVnode.data.directives || vnode.data.directives) {
17    _update(oldVnode, vnode)
18  }
19}
20
21function _update (oldVnode, vnode) {
22  const isCreate = oldVnode === emptyNode
23  const isDestroy = vnode === emptyNode
24  const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
25  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
26
27  const dirsWithInsert = []
28  const dirsWithPostpatch = []
29
30  let key, oldDir, dir
31  for (key in newDirs) {
32    oldDir = oldDirs[key]
33    dir = newDirs[key]
34    if (!oldDir) {
35      // new directive, bind
36      callHook(dir, 'bind', vnode, oldVnode)
37      if (dir.def && dir.def.inserted) {
38        dirsWithInsert.push(dir)
39      }
40    } else {
41      // existing directive, update
42      dir.oldValue = oldDir.value
43      callHook(dir, 'update', vnode, oldVnode)
44      if (dir.def && dir.def.componentUpdated) {
45        dirsWithPostpatch.push(dir)
46      }
47    }
48  }
49
50  if (dirsWithInsert.length) {
51    const callInsert = () => {
52      for (let i = 0; i < dirsWithInsert.length; i++) {
53        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
54      }
55    }
56    if (isCreate) {
57      mergeVNodeHook(vnode, 'insert', callInsert)
58    } else {
59      callInsert()
60    }
61  }
62
63  if (dirsWithPostpatch.length) {
64    mergeVNodeHook(vnode, 'postpatch', () => {
65      for (let i = 0; i < dirsWithPostpatch.length; i++) {
66        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
67      }
68    })
69  }
70
71  if (!isCreate) {
72    for (key in oldDirs) {
73      if (!newDirs[key]) {
74        // no longer present, unbind
75        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
76      }
77    }
78  }
79}
80
81const emptyModifiers = Object.create(null)
82
83function normalizeDirectives (
84  dirs: ?Array<VNodeDirective>,
85  vm: Component
86): { [key: string]: VNodeDirective } {
87  const res = Object.create(null)
88  if (!dirs) {
89    // $flow-disable-line
90    return res
91  }
92  let i, dir
93  for (i = 0; i < dirs.length; i++) {
94    dir = dirs[i]
95    if (!dir.modifiers) {
96      // $flow-disable-line
97      dir.modifiers = emptyModifiers
98    }
99    res[getRawDirName(dir)] = dir
100    dir.def = resolveAsset(vm.$options, 'directives', dir.name, true)
101  }
102  // $flow-disable-line
103  return res
104}
105
106function getRawDirName (dir: VNodeDirective): string {
107  return dir.rawName || `${dir.name}.${Object.keys(dir.modifiers || {}).join('.')}`
108}
109
110function callHook (dir, hook, vnode, oldVnode, isDestroy) {
111  const fn = dir.def && dir.def[hook]
112  if (fn) {
113    try {
114      fn(vnode.elm, dir, vnode, oldVnode, isDestroy)
115    } catch (e) {
116      handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`)
117    }
118  }
119}
120
Full Screen
...

Source: directives.js Github

/* @flow */

import { emptyNode } from 'core/vdom/patch'
import { resolveAsset, handleError } from 'core/util/index'
import { mergeVNodeHook } from 'core/vdom/helpers/index'

export default {
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}

function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}

function _update (oldVnode, vnode) {
  const isCreate = oldVnode === emptyNode
  const isDestroy = vnode === emptyNode
  const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)

  const dirsWithInsert = []
  const dirsWithPostpatch = []

  let key, oldDir, dir
  for (key in newDirs) {
    oldDir = oldDirs[key]
    dir = newDirs[key]
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else {
      // existing directive, update
      dir.oldValue = oldDir.value
      callHook(dir, 'update', vnode, oldVnode)
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }

  if (dirsWithInsert.length) {
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    if (isCreate) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } else {
      callInsert()
    }
  }

  if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    })
  }

  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
      }
    }
  }
}

const emptyModifiers = Object.create(null)

function normalizeDirectives (
  dirs: ?Array<VNodeDirective>,
  vm: Component
): { [key: string]: VNodeDirective } {
  const res = Object.create(null)
  if (!dirs) {
    // $flow-disable-line
    return res
  }
  let i, dir
  for (i = 0; i < dirs.length; i++) {
    dir = dirs[i]
    if (!dir.modifiers) {
      // $flow-disable-line
      dir.modifiers = emptyModifiers
    }
    res[getRawDirName(dir)] = dir
    dir.def = resolveAsset(vm.$options, 'directives', dir.name, true)
  }
  // $flow-disable-line
  return res
}

function getRawDirName (dir: VNodeDirective): string {
  return dir.rawName || `${dir.name}.${Object.keys(dir.modifiers || {}).join('.')}`
}

function callHook (dir, hook, vnode, oldVnode, isDestroy) {
  const fn = dir.def && dir.def[hook]
  if (fn) {
    try {
      fn(vnode.elm, dir, vnode, oldVnode, isDestroy)
    } catch (e) {
      handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`)
    }
  }
}

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