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

ReactPixiFiber.js

Source: ReactPixiFiber.js Github

copy
1import ReactFiberReconciler from "react-reconciler";
2import emptyObject from "fbjs/lib/emptyObject";
3import invariant from "fbjs/lib/invariant";
4import {
5  createInstance,
6  setInitialProperties,
7  diffProperties,
8  updateProperties,
9} from "./ReactPixiFiberComponent";
10import { validateProperties as validateUnknownProperties } from "./ReactPixiFiberUnknownPropertyHook";
11import { findStrictRoot } from "./utils";
12
13let validatePropertiesInDevelopment;
14
15if (process.env.NODE_ENV === "development") {
16  validatePropertiesInDevelopment = function (type, props, internalHandle) {
17    const strictRoot = findStrictRoot(internalHandle);
18    if (strictRoot != null) {
19      validateUnknownProperties(type, props);
20    }
21  };
22}
23
24/* PixiJS Renderer */
25
26const noTimeout = -1;
27
28export function appendChild(parentInstance, child) {
29  // TODO do we need to remove the child first if it's already added?
30  parentInstance.removeChild(child);
31
32  parentInstance.addChild(child);
33  if (typeof child._customDidAttach === "function") {
34    child._customDidAttach(child);
35  }
36}
37
38export function removeChild(parentInstance, child) {
39  if (typeof child._customWillDetach === "function") {
40    child._customWillDetach(child);
41  }
42
43  parentInstance.removeChild(child);
44
45  child.destroy({ children: true });
46}
47
48export function insertBefore(parentInstance, child, beforeChild) {
49  invariant(
50    child !== beforeChild,
51    "ReactPixiFiber cannot insert node before itself"
52  );
53
54  const childExists = parentInstance.children.indexOf(child) !== -1;
55
56  if (childExists) {
57    parentInstance.removeChild(child);
58  }
59
60  const index = parentInstance.getChildIndex(beforeChild);
61  parentInstance.addChildAt(child, index);
62}
63
64export function commitUpdate(
65  instance,
66  updatePayload,
67  type,
68  prevProps,
69  nextProps,
70  internalHandle
71) {
72  updateProperties(
73    type,
74    instance,
75    updatePayload,
76    prevProps,
77    nextProps,
78    internalHandle
79  );
80
81  if (process.env.NODE_ENV === "development") {
82    validatePropertiesInDevelopment(type, nextProps, internalHandle);
83  }
84}
85
86export function createTextInstance(
87  text,
88  rootContainer,
89  hostContext,
90  internalHandle
91) {
92  invariant(
93    false,
94    "ReactPixiFiber does not support text instances. Use `Text` component instead."
95  );
96}
97
98export function finalizeInitialChildren(
99  instance,
100  type,
101  props,
102  rootContainer,
103  hostContext
104) {
105  setInitialProperties(type, instance, props, rootContainer, hostContext);
106  return true;
107}
108
109export function getChildHostContext(parentHostContext, type, rootContainer) {
110  return parentHostContext;
111}
112
113export function getRootHostContext(rootContainer) {
114  return emptyObject;
115}
116
117export function getPublicInstance(instance) {
118  return instance;
119}
120
121export function prepareForCommit(containerInfo) {
122  return null;
123}
124
125export function preparePortalMount(containerInfo) {
126  // Noop
127}
128
129export function prepareUpdate(
130  instance,
131  type,
132  oldProps,
133  newProps,
134  rootContainer,
135  hostContext
136) {
137  return diffProperties(type, instance, oldProps, newProps);
138}
139
140export function resetAfterCommit(containerInfo) {
141  // Noop
142}
143
144export function resetTextContent(instance) {
145  // Noop
146}
147
148export function scheduleTimeout(fn, delay) {
149  setTimeout(fn, delay);
150}
151
152export function shouldSetTextContent(type, props) {
153  return false;
154}
155
156export function commitTextUpdate(textInstance, prevText, nextText) {
157  // Noop
158}
159
160export function cancelTimeout(id) {
161  clearTimeout(id);
162}
163
164export function clearContainer(container) {
165  container.removeChildren();
166}
167
168export function commitMount(instance, type, props, internalHandle) {
169  if (process.env.NODE_ENV === "development") {
170    validatePropertiesInDevelopment(type, props, internalHandle);
171  }
172}
173
174export function hideInstance(instance) {
175  instance.visible = false;
176}
177
178export function unhideInstance(instance, props) {
179  instance.visible =
180    typeof props.visible !== "undefined" ? props.visible : true;
181}
182
183export function hideTextInstance(instance) {
184  // Noop
185}
186
187export function unhideTextInstance(instance, props) {
188  // Noop
189}
190
191export function detachDeletedInstance(instance) {
192  // Noop
193}
194
195export function now() {
196  return typeof performance === "object" &&
197    typeof performance.now === "function"
198    ? () => performance.now()
199    : () => Date.now();
200}
201
202export const supportsMutation = true;
203
204const hostConfig = {
205  appendChild: appendChild,
206  appendChildToContainer: appendChild,
207  appendInitialChild: appendChild,
208  cancelTimeout: cancelTimeout,
209  clearContainer: clearContainer,
210  commitMount: commitMount,
211  commitTextUpdate: commitTextUpdate,
212  commitUpdate: commitUpdate,
213  createInstance: createInstance,
214  createTextInstance: createTextInstance,
215  finalizeInitialChildren: finalizeInitialChildren,
216  getChildHostContext: getChildHostContext,
217  getRootHostContext: getRootHostContext,
218  getPublicInstance: getPublicInstance,
219  hideInstance: hideInstance,
220  hideTextInstance: hideTextInstance,
221  insertBefore: insertBefore,
222  insertInContainerBefore: insertBefore,
223  noTimeout: noTimeout,
224  now: now,
225  prepareForCommit: prepareForCommit,
226  preparePortalMount: preparePortalMount,
227  prepareUpdate: prepareUpdate,
228  removeChild: removeChild,
229  removeChildFromContainer: removeChild,
230  resetAfterCommit: resetAfterCommit,
231  resetTextContent: resetTextContent,
232  scheduleTimeout: scheduleTimeout,
233  shouldSetTextContent: shouldSetTextContent,
234  supportsMutation: supportsMutation,
235  unhideInstance: unhideInstance,
236  unhideTextInstance: unhideTextInstance,
237  detachDeletedInstance: detachDeletedInstance,
238};
239
240// React Pixi Fiber renderer is primary if used without React DOM
241export const ReactPixiFiberAsPrimaryRenderer = ReactFiberReconciler({
242  ...hostConfig,
243  isPrimaryRenderer: true,
244});
245
246// React Pixi Fiber renderer is secondary to React DOM renderer if used together
247export const ReactPixiFiberAsSecondaryRenderer = ReactFiberReconciler({
248  ...hostConfig,
249  isPrimaryRenderer: false,
250});
251
252// If use ReactDOM to render, try use ReactDOM.unstable_batchedUpdates
253export const unstable_batchedUpdates =
254  ReactPixiFiberAsPrimaryRenderer.batchedUpdates;
255
256export default ReactPixiFiberAsSecondaryRenderer;
257
Full Screen

base.js

Source: base.js Github

copy
1class Base {
2  constructor(type, props, rootContainerInstance, hostContext) {
3    this.type = type;
4    this.props = props;
5    this.rootContainerInstance = rootContainerInstance;
6    this.hostContext = hostContext;
7  }
8
9  appendChild(child) {}
10
11  removeChild(child) {}
12
13  unmount() {}
14
15  static getHostContext() {}
16
17  getPublicInstance() {
18    return this;
19  }
20
21  /**
22   * Default event handler. Not yet implemented until we make events more
23   * generic. For now handled in subclass.
24   */
25  handleEvent(event) {
26    throw new Error('event handler not implemented');
27  }
28
29  /**
30   * Definition of all (non-event) props that an element handles. Format can
31   * be either:
32   * { propKey: handlerFunction }
33   * or:
34   * { propKey: [mountHandler, updateHandler] }
35   * Should be overridden in subclass
36   *
37   * If you use the same handler for multiple props, it will get called only
38   * once on mount / update when multiple props are set / update.
39   *
40   * TODO: `propHandlers` being an object prevents us from forcing a processing
41   * order, might want to change that. (App.onInit and App.onReady are in the
42   * correct order by accident for example)
43   */
44  get propHandlers() {
45    return {};
46  }
47
48  /**
49   * Definition of all event props that an element handles. Format:
50   * { propKey: 'event-name' }
51   * * Should be overridden in subclass
52   *
53   * TODO: think about whether we want to support some kind of `once` event
54   * handling, vs `on`.
55   */
56  get propEvents() {
57    return {};
58  }
59
60  /**
61   * Helper that turns all entries in `propEvents` into actual event handlers.
62   * Changes:
63   * { propKey: 'event-name' }
64   * Into:
65   * { propKey: handlerFunction }
66   * Where `handlerFunction` defaults to `this.handleEvent('event-name')`.
67   */
68  propEventHandlers = Object.entries(
69    this.propEvents
70  ).reduce((eventHandlers, [propKey, eventName]) => {
71    eventHandlers[propKey] = this.handleEvent(eventName);
72    return eventHandlers;
73  }, {});
74
75  /**
76   * An object containing all props that an element handles, based on
77   * `propHandlers` and `propEvents`.
78   */
79  allPropHandlers = {
80    ...this.propHandlers,
81    ...this.propEventHandlers
82  };
83
84  /**
85   * First finalization pass. Here we check whether we'll need to do anything
86   * in `commitMount` by checking if any of the handled props has a value.
87   */
88  finalizeInitialChildren(props) {
89    let commitMount = false;
90
91    Object.entries(props).forEach(([propKey, eventHandler]) => {
92      if (this.allPropHandlers.hasOwnProperty(propKey)) {
93        commitMount = true;
94      }
95    });
96
97    return commitMount;
98  }
99
100  /**
101   * Handle any props that were passed in the initial mount of the element. We
102   * should probably register any events here as well, instead of in
103   * `finalizeInitialChildren`
104   */
105  commitMount(props) {
106    // We keep a list of handlers we've already called. We assume that if the
107    // same handler is used for multiple props in a subclass, that handler will
108    // make sure that calling it once is sufficient (we pass all props as a
109    // second argument for that situation).
110    const calledHandlers = new Set();
111    Object.entries(props).forEach(([propKey, propValue]) => {
112      if (this.allPropHandlers.hasOwnProperty(propKey)) {
113        const handler = this.allPropHandlers[propKey];
114
115        if (Array.isArray(handler)) {
116          const mountHandler = handler[0];
117          if (mountHandler && !calledHandlers.has(mountHandler)) {
118            mountHandler(propValue, props);
119            calledHandlers.add(mountHandler);
120          }
121          return;
122        }
123
124        handler(propValue, props);
125        calledHandlers.add(handler);
126      }
127    });
128  }
129
130  /**
131   * Diff all props and check whether we're handling them in this element
132   * instance. If a handled prop was changed, return the change as
133   * `updatePayload` so `commitUpdate` can work with the changes.
134   *
135   * `updatePayload` will be a list of tuples: [[propKey, newValue]]
136   */
137  prepareUpdate(oldProps, newProps) {
138    const updatePayload = [];
139    const mergedProps = {};
140
141    Object.entries(oldProps).forEach(([key, value]) => {
142      if (!this.allPropHandlers.hasOwnProperty(key)) {
143        return;
144      }
145
146      mergedProps[key] = [value, undefined];
147    });
148
149    Object.entries(newProps).forEach(([key, value]) => {
150      if (!this.allPropHandlers.hasOwnProperty(key)) {
151        return;
152      }
153
154      if (mergedProps[key]) {
155        mergedProps[key][1] = value;
156        return;
157      }
158
159      mergedProps[key] = [undefined, value];
160    });
161
162    Object.entries(mergedProps).forEach(([propKey, [oldValue, newValue]]) => {
163      if (oldValue !== newValue) {
164        updatePayload.push([propKey, newValue]);
165      }
166    });
167
168    return updatePayload.length ? updatePayload : null;
169  }
170
171  /**
172   * Handle any props (that this element handles) that changed since the last
173   * pass. See `prepareUpdate` for the origin / shape of `updatePayload`.
174   */
175  commitUpdate(updatePayload, oldProps, newProps) {
176    // Same as in `commitMount`, but this time we pass the full sets of old and
177    // new props so handlers can do their thing.
178    const calledHandlers = new Set();
179    updatePayload.forEach(([propKey, value]) => {
180      if (this.allPropHandlers.hasOwnProperty(propKey)) {
181        const handler = this.allPropHandlers[propKey];
182
183        if (Array.isArray(handler)) {
184          const updateHandler = handler[1];
185          if (updateHandler && !calledHandlers.has(updateHandler)) {
186            updateHandler(value, newProps, oldProps);
187            calledHandlers.add(updateHandler);
188          }
189          return;
190        }
191
192        handler(value, newProps, oldProps);
193        calledHandlers.add(handler);
194      }
195    });
196  }
197}
198
199export default Base;
200
Full Screen

reconciler.js

Source: reconciler.js Github

copy
1/* eslint no-unused-vars: 0 */
2
3const R = require('ramda');
4
5const withoutChildren = R.omit([ 'children' ]);
6
7const stringify = JSON.stringify;
8
9module.exports = function (imports, publicComponents, log) {
10    const Gtk = imports.gi.Gtk;
11
12    const GtkReconciler = {
13        now: Date.now,
14        useSyncScheduling: true,
15
16        createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
17            log('createInstance', type, props);
18            const Type = publicComponents[type];
19
20            if (!Type) {
21                throw new Error(`Unknown component: ${type}`);
22            }
23
24            return new Type(props, rootContainerInstance, hostContext, internalInstanceHandle);
25        },
26
27        createTextInstance(
28            text,
29            rootContainerInstance,
30            hostContext,
31            internalInstanceHandle
32        ) {
33            log('createTextInstance');
34            throw new Error('ReactGTK does not support text instances. Use gtk-label to display text');
35        },
36
37        appendInitialChild(parentInstance, child) {
38            log('appendInitialChild', parentInstance, child);
39            child.instance.show();
40
41            if (!R.is(Gtk.Application, parentInstance)) {
42                parentInstance.appendChild(child);
43            }
44        },
45
46        finalizeInitialChildren(instance, type, props, rootContainerInstance) {
47            log('finalizeInitialChildren');
48            return false;
49        },
50
51        getPublicInstance(instance) {
52            log('getPublicInstance');
53            return instance;
54        },
55
56        prepareForCommit() {
57            log('prepareForCommit');
58        },
59
60        prepareUpdate(
61            instance,
62            type,
63            oldProps,
64            newProps,
65            rootContainerInstance,
66            hostContext
67        ) {
68            const oldNoChildren = withoutChildren(oldProps);
69            const newNoChildren = withoutChildren(newProps);
70            const propsAreEqual = R.equals(oldNoChildren, newNoChildren);
71            const unset = R.without(R.keys(newNoChildren), R.keys(oldNoChildren));
72            const set = R.reject(R.contains(R.__, R.toPairs(oldNoChildren)), R.toPairs(newNoChildren));
73
74            log('prepareUpdate', stringify(oldNoChildren), stringify(newNoChildren), !propsAreEqual);
75            return propsAreEqual ? null : { unset, set };
76        },
77
78        resetAfterCommit() {
79            log('resetAfterCommit');
80        },
81
82        resetTextContent(instance) {
83            log('resetTextContent');
84        },
85
86        shouldDeprioritizeSubtree(type, props) {
87            return false;
88        },
89
90        getRootHostContext(rootContainerInstance) {
91            return {};
92        },
93
94        getChildHostContext(parentHostContext, type) {
95            return parentHostContext;
96        },
97
98        shouldSetTextContent(props) {
99            return false;
100        },
101
102        scheduleAnimationCallback() {
103            log('scheduleAnimationCallback');
104        },
105
106        scheduleDeferredCallback() {
107            log('scheduleDeferredCallback');
108        },
109
110        mutation: {
111            appendChild(parentInstance, child) {
112                log('appendChild', parentInstance, child);
113                child.instance.show();
114                if (!R.is(Gtk.Application, parentInstance)) {
115                    parentInstance.appendChild(child);
116                }
117            },
118
119            appendChildToContainer(parentInstance, child) {
120                log('appendChildToContainer', parentInstance, child);
121                child.instance.show();
122                if (!R.is(Gtk.Application, parentInstance)) {
123                    parentInstance.appendChild(child);
124                }
125            },
126
127            insertBefore(parentInstance, child, beforeChild) {
128                log('insertInContainerBefore', parentInstance, child, beforeChild);
129                child.instance.show();
130                if (!R.is(Gtk.Application, parentInstance)) {
131                    parentInstance.insertBefore(child, beforeChild);
132                }
133            },
134
135            insertInContainerBefore(parentInstance, child, beforeChild) {
136                log('insertInContainerBefore', parentInstance, child, beforeChild);
137                child.instance.show();
138                if (!R.is(Gtk.Application, parentInstance)) {
139                    parentInstance.insertBefore(child, beforeChild);
140                }
141            },
142
143            removeChild(parentInstance, child) {
144                log('removeChild', parentInstance, child);
145                if (!R.is(Gtk.Application, parentInstance)) {
146                    parentInstance.removeChild(child);
147                }
148            },
149
150            removeChildFromContainer(parentInstance, child) {
151                log('removeChildFromContainer', parentInstance, child);
152                if (!R.is(Gtk.Application, parentInstance)) {
153                    parentInstance.removeChild(child);
154                }
155            },
156
157            commitTextUpdate(
158                textInstance,
159                oldText,
160                newText
161            ) {
162                log('commitTextUpdate');
163                throw new Error('commitTextUpdate should not be called');
164            },
165
166            // commitMount is called after initializeFinalChildren *if*
167            // `initializeFinalChildren` returns true.
168
169            commitMount(
170                instance,
171                type,
172                newProps,
173                internalInstanceHandle
174            ) {
175                log('commitMount');
176            },
177
178            commitUpdate(
179                instance,
180                changes,
181                type,
182                oldProps,
183                newProps,
184                internalInstanceHandle
185            ) {
186                log('commitUpdate', stringify(changes));
187                instance.update(changes);
188            }
189        }
190    };
191
192    return GtkReconciler;
193};
194
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)