How to use isHostParent 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.

ReactFiberCommitWork.js

Source: ReactFiberCommitWork.js Github

copy
1import { Placement, Deletion, Update, PlacementAndUpdate } from "shared/ReactSideEffectTags";
2import { HostComponent, HostRoot, HostText } from "shared/ReactWorkTags";
3
4import {
5  insertInContainerBefore,
6  appendChildToContainer
7} from 'reactDOM/ReactHostConfig';
8export function commitBeforeMutationEffects(nextEffect) {
9  while (nextEffect) {
10    return nextEffect = null;
11  }
12}
13function getHostParentFiber(fiber) {
14  let parent = fiber.return;
15  while (parent) {
16    if (isHostParent(parent)) {
17      return parent;
18    }
19    parent = parent.return;
20  }
21}
22
23function isHostParent(parent) {
24  return (
25    parent.tag === HostRoot ||
26    parent.tag === HostComponent
27  )
28}
29export function commitMutationEffects(root, nextEffect) {
30  while (nextEffect) {
31    const effectTag = nextEffect.effectTag;
32    const primaryEffectTag = effectTag & (Placement | Deletion | Update);
33    switch (primaryEffectTag) {
34      case Placement:
35        commitPlacement(nextEffect);
36        nextEffect.effectTag &= ~Placement;
37        break;
38      case Update: break;
39      case Deletion: break;
40      case PlacementAndUpdate: break;
41    }
42    nextEffect = nextEffect.nextEffect;
43  }
44  return null;
45}
46function getHostSibling(fiber) {
47  let node = fiber;
48
49  // 嵌套的循环的原因是 fiber节点可能没有对应DOM节点,相应的fiber树层级和DOM树也不一定匹配
50  siblings: while (true) {
51    while (!node.sibling) {
52      // 考虑 fiber.return 是 FunctionComponent,fiber.return.sibling 是 HostCompoennt
53      // 则 fiber.stateNode 和 fiber.return.sibling.stateNode在DOM树上是兄弟关系
54      if (!node.return || isHostParent(node.return)) {
55        return null;
56      }
57      node = node.return;
58    }
59    node.sibling.return = node.return;
60    node = node.sibling;
61
62    // 当前节点不是Host节点,目标节点不能直接插在当前节点之前
63    while (node.tag !== HostComponent && node.tag !== HostText) {
64      if (node.effectTag & Placement) {
65        continue siblings;
66      }
67      // 节点不是Host节点,但是他的子节点如果是Host节点,则目标DOM和子节点DOM是兄弟节点
68      // 目标DOM应该插入在子节点DOM前面
69      // 如果节点没有子节点,则继续寻找兄弟节点
70      if (!node.child) {
71        continue siblings;
72      } else {
73        node.child.return = node;
74        node = node.child;
75      }
76    }
77    // 到这一步时一定是一个Host节点,判断下该节点是否也是需要插入的节点
78    if (!(node.effectTag & Placement)) {
79      return node.stateNode;
80    }
81  }
82}
83
84function commitPlacement(finishedWork) {
85  const parentFiber = getHostParentFiber(finishedWork);
86  const parentStateNode = parentFiber.stateNode;
87  let parent;
88  let isContainer = false;
89  switch (parentFiber.tag) {
90    case HostComponent:
91      parent = parentStateNode;
92      break;
93    case HostRoot:
94      parent = parentStateNode.containerInfo;
95      isContainer = true;
96      break;
97  }
98  const before = getHostSibling(finishedWork);
99  if (isContainer) {
100    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
101    console.log('里程碑!!')
102  } else {
103
104  }
105}
106function insertOrAppendPlacementNodeIntoContainer(fiber, before, parent) {
107  const { tag } = fiber;
108  if (tag === HostComponent || tag === HostText) {
109    const stateNode = fiber.stateNode;
110    if (before) {
111      insertInContainerBefore(parent, stateNode, before);
112    } else {
113      appendChildToContainer(parent, stateNode)
114    }
115  } else {
116    const child = fiber.child;
117    insertOrAppendPlacementNodeIntoContainer(child, before, parent);
118    const sibling = child.sibling;
119    while (sibling) {
120      insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);
121      sibling = sibling.sibling;
122    }
123  }
124}
Full Screen

FiberCommitWork.js

Source: FiberCommitWork.js Github

copy
1import { resetTextContent } from "../dom/client/DOMHostConfig"
2import { ContentReset, Placement } from "./FiberFlags"
3import { HostComponent, HostPortal, HostRoot, HostText } from "./WorkTags"
4
5
6
7
8export function commitPlacement(finishedWork) {
9
10
11  const parentFiber = getHostParentFiber(finishedWork)
12
13
14  let parent
15  let isContainer
16  const parentStateNode = parentFiber.stateNode
17  switch(parentFiber.tag) {
18    case HostComponent:
19      parent = parentStateNode
20      isContainer = false
21      break;
22    case HostRoot:
23      parent = parentStateNode.containerInfo
24      isContainer = true
25      break
26    default:
27      throw new Error('Invalid host parent fiber')
28  }
29
30  if (parentFiber.flags & ContentReset) {
31    resetTextContent(parent)
32    parentFiber.flags &= ~ContentReset
33  }
34
35  const before = getHostSibling(finishedWork)
36
37  if (isContainer) {
38    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent)
39  } else {
40    insertOrAppendPlacementNode(finishedWork, before, parent)
41  }
42
43}
44
45function getHostParentFiber(fiber) {
46  let parent = fiber.return
47  while(parent !== null)  {
48    if (isHostParent(parent)) {
49      return parent
50    }
51    parent = parent.return
52  }
53  throw new Error('Not find a host parent node')
54}
55
56function isHostParent(fiber) {
57  return (
58    fiber.tag === HostComponent ||
59    fiber.tag === HostRoot ||
60    fiber.tag === HostPortal
61  )
62}
63
64function getHostSibling(fiber) {
65  let node = fiber
66  siblings: while(true) {
67    // 找到下一个兄弟,或者找到上级的下一个兄弟
68    while(node.sibling === null) {
69      if (node.return === null || isHostParent(node.return)) {
70        return null
71      }
72      node = node.return
73    }
74    // 将 siblging 连接到 parent
75    node.sibling.return = node.return
76    node = node.sibling
77    while(
78      node.tag !== HostComponent &&
79      node.tag !== HostText
80    ) {
81      if (node.flags & Placement) {
82        continue siblings
83      }
84
85      if (node.child === null || node.tag === HostPortal) {
86        continue siblings
87      } else {
88        node.child.return = node
89        node = node.child
90      }
91    }
92
93    if (!(node.flags & Placement)) {
94      // Found it
95      return node.stateNode
96    }
97  }
98}
99
100function insertOrAppendPlacementNode(
101  node,
102  before,
103  parent
104) {
105  const {tag} = node
106  const isHost = tag === HostComponent || tag === HostText
107  if (isHost) {
108    const stateNode = isHost ? node.stateNode : node.stateNode.instance
109    if (before) {
110      insertBefore(parent, stateNode, before)
111    } else {
112      appendChild(parent, stateNode)
113    }
114  } else if (tag === HostPortal) {
115
116  } else {
117    const child = node.child
118    if (child !== null) {
119      // 不是 host DOM 元素就是 component 组件,需要递归的将整个组件都插入到DOM 中
120      insertOrAppendPlacementNode(child, before, parent)
121      let sibling = child.sibling
122      while(sibling !== null) {
123        insertOrAppendPlacementNode(sibling, before, parent)
124        sibling = sibling.sibling
125      }
126    }
127  }
128}
129
130
131function commitWork(current, finishedWork) {
132  switch(finishedWork.tag) {
133    case HostComponent: 
134      const instance = finishedWork.stateNode
135      if (instance !== null) {
136        const newProps = finishedWork.memoizedProps
137        const oldProps = current !== null ? current.memoizedProps : newProps
138
139        const type = finishedWork.type
140        const updatePayload = finishedWork.updateQueue
141        finishedWork.updateQueue = null
142        if (updatePayload !== null) {
143          commitUpdate(
144            instance,
145            updatePayload,
146            type,
147            oldProps,
148            newProps,
149            finishedWork
150          )
151        }
152      }
153      return 
154  }
155}
156
157function unmountHostComponents(
158  finishedWork,
159  current
160) {
161  let node = current
162
163  let currentParentIsValid = false
164  let currentParent
165  let currentParentIsContainer
166  while(true) {
167    if (currentParentIsValid) {
168      let parent = node.return
169      findParent: while(true) {
170        const parentStateNode = parent.staetNode
171        switch(parent.tag) {
172          case HostComponent:
173            currentParent  = parentStateNode
174            currentParentIsContainer = false
175            break findParent
176          case HostRoot:
177            currentParent = parentStateNode
178            currentParentIsContainer = true
179        }
180
181        parent = parent.return
182      }
183      currentParentIsValid = false
184    }
185
186
187    if (node.tag === HostComponent || node.tag === HostText) {
188      commitNestedUnmounts(finishedWork, node)
189      remvoeChild(currentParent, ndoe.stateNode)
190    } else if (kk){
191      const fundamentalNode = node.staetNode.instance
192      commitNestedUnmounts(finishedWork, nod)
193      remvoeChild(currentParent, fundamentalNode)
194    } else {
195      // 组件 DOM 要依次从根到叶子全部去掉
196      commitUnmount(finishedWork, node)
197      if (node.child !== null) {
198        node.child.return = node
199        node = node.child
200        continue
201      }
202    }
203  }
204}
Full Screen

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.

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)