How to use applyDerivedStateFromProps method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberClassComponent.new.js

Source:ReactFiberClassComponent.new.js Github

copy

Full Screen

...49} from './SchedulingProfiler';50// React.Component uses a shared frozen object by default.51// We'll use it to determine whether we need to initialize legacy refs.52export const emptyRefsObject = new React.Component().refs;53export function applyDerivedStateFromProps(54 workInProgress: Fiber,55 ctor: any,56 getDerivedStateFromProps: (props: any, state: any) => any,57 nextProps: any,58) {59 const prevState = workInProgress.memoizedState;60 const partialState = getDerivedStateFromProps(nextProps, prevState);61 // Merge the partial state and the previous state.62 const memoizedState =63 partialState === null || partialState === undefined64 ? prevState65 : Object.assign({}, prevState, partialState);66 workInProgress.memoizedState = memoizedState;67 // Once the update queue is empty, persist the derived state onto the68 // base state.69 if (workInProgress.lanes === NoLanes) {70 // Queue is always non-null for classes71 const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);72 updateQueue.baseState = memoizedState;73 }74}75const classComponentUpdater = {76 isMounted,77 enqueueSetState(inst, payload, callback) {78 // 获取当前触发更新的fiber节点。inst是组件实例79 const fiber = getInstance(inst);80 // eventTime是当前触发更新的时间戳81 const eventTime = requestEventTime();82 // 获取本次update的优先级83 const lane = requestUpdateLane(fiber);84 // 创建update对象85 const update = createUpdate(eventTime, lane);86 // payload就是setState的参数，回调函数或者是对象的形式。87 // 处理更新时参与计算新状态的过程88 update.payload = payload;89 if (callback !== undefined && callback !== null) {90 update.callback = callback;91 }92 // payload就是setState的参数，回调函数或者是对象的形式。93 // 创建的update入队updateQueue94 enqueueUpdate(fiber, update);95 // 开始进行调度96 scheduleUpdateOnFiber(fiber, lane, eventTime);97 if (enableSchedulingProfiler) {98 markStateUpdateScheduled(fiber, lane);99 }100 },101 enqueueReplaceState(inst, payload, callback) {102 const fiber = getInstance(inst);103 const eventTime = requestEventTime();104 const lane = requestUpdateLane(fiber);105 const update = createUpdate(eventTime, lane);106 // 与enqueueSetState的唯一区别107 update.tag = ReplaceState;108 update.payload = payload;109 if (callback !== undefined && callback !== null) {110 update.callback = callback;111 }112 enqueueUpdate(fiber, update);113 scheduleUpdateOnFiber(fiber, lane, eventTime);114 if (enableSchedulingProfiler) {115 markStateUpdateScheduled(fiber, lane);116 }117 },118 enqueueForceUpdate(inst, callback) {119 const fiber = getInstance(inst);120 const eventTime = requestEventTime();121 const lane = requestUpdateLane(fiber);122 const update = createUpdate(eventTime, lane);123 // 与enqueueSetState的唯一区别124 update.tag = ForceUpdate;125 if (callback !== undefined && callback !== null) {126 update.callback = callback;127 }128 enqueueUpdate(fiber, update);129 scheduleUpdateOnFiber(fiber, lane, eventTime);130 if (enableSchedulingProfiler) {131 markForceUpdateScheduled(fiber, lane);132 }133 },134};135// 内部会调用shouldComponentUpdate方法。以及当该ClassComponent为PureComponent时会浅比较state与props136function checkShouldComponentUpdate(137 workInProgress,138 ctor,139 oldProps,140 newProps,141 oldState,142 newState,143 nextContext,144) {145 const instance = workInProgress.stateNode;146 // 优先处理shouldComponentUpdate147 if (typeof instance.shouldComponentUpdate === 'function') {148 const shouldUpdate = instance.shouldComponentUpdate(149 newProps,150 newState,151 nextContext,152 );153 return shouldUpdate;154 }155 // 如果没有shouldComponentUpdate，再处理是否有PureComponent156 if (ctor.prototype && ctor.prototype.isPureReactComponent) {157 // 该ClassComponent为PureComponent时会浅比较state与props158 return (159 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)160 );161 }162 // 否则总是返回更新163 return true;164}165function adoptClassInstance(workInProgress: Fiber, instance: any): void {166 instance.updater = classComponentUpdater;167 workInProgress.stateNode = instance;168 // The instance needs access to the fiber so that it can schedule updates169 setInstance(instance, workInProgress);170}171function constructClassInstance(172 workInProgress: Fiber,173 ctor: any,174 props: any,175): any {176 let isLegacyContextConsumer = false;177 let unmaskedContext = emptyContextObject;178 let context = emptyContextObject;179 const contextType = ctor.contextType;180 if (typeof contextType === 'object' && contextType !== null) {181 context = readContext((contextType: any));182 } else {183 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);184 const contextTypes = ctor.contextTypes;185 isLegacyContextConsumer =186 contextTypes !== null && contextTypes !== undefined;187 context = isLegacyContextConsumer188 ? getMaskedContext(workInProgress, unmaskedContext)189 : emptyContextObject;190 }191 // Instantiate twice to help detect side-effects.192 const instance = new ctor(props, context);193 const state = (workInProgress.memoizedState =194 instance.state !== null && instance.state !== undefined195 ? instance.state196 : null);197 adoptClassInstance(workInProgress, instance);198 // Cache unmasked context so we can avoid recreating masked context unless necessary.199 // ReactFiberContext usually updates this cache but can't for newly-created instances.200 if (isLegacyContextConsumer) {201 cacheContext(workInProgress, unmaskedContext, context);202 }203 return instance;204}205function callComponentWillMount(workInProgress, instance) {206 const oldState = instance.state;207 if (typeof instance.componentWillMount === 'function') {208 instance.componentWillMount();209 }210 if (typeof instance.UNSAFE_componentWillMount === 'function') {211 instance.UNSAFE_componentWillMount();212 }213 if (oldState !== instance.state) {214 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);215 }216}217function callComponentWillReceiveProps(218 workInProgress,219 instance,220 newProps,221 nextContext,222) {223 const oldState = instance.state;224 if (typeof instance.componentWillReceiveProps === 'function') {225 instance.componentWillReceiveProps(newProps, nextContext);226 }227 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {228 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);229 }230 if (instance.state !== oldState) {231 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);232 }233}234// Invokes the mount life-cycles on a previously never rendered instance.235function mountClassInstance(236 workInProgress: Fiber,237 ctor: any,238 newProps: any,239 renderLanes: Lanes,240): void {241 const instance = workInProgress.stateNode;242 instance.props = newProps;243 instance.state = workInProgress.memoizedState;244 instance.refs = emptyRefsObject;245 initializeUpdateQueue(workInProgress);246 const contextType = ctor.contextType;247 if (typeof contextType === 'object' && contextType !== null) {248 instance.context = readContext(contextType);249 } else {250 const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);251 instance.context = getMaskedContext(workInProgress, unmaskedContext);252 }253 processUpdateQueue(workInProgress, newProps, instance, renderLanes);254 instance.state = workInProgress.memoizedState;255 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;256 if (typeof getDerivedStateFromProps === 'function') {257 applyDerivedStateFromProps(258 workInProgress,259 ctor,260 getDerivedStateFromProps,261 newProps,262 );263 instance.state = workInProgress.memoizedState;264 }265 // In order to support react-lifecycles-compat polyfilled components,266 // Unsafe lifecycles should not be invoked for components using the new APIs.267 if (268 typeof ctor.getDerivedStateFromProps !== 'function' &&269 typeof instance.getSnapshotBeforeUpdate !== 'function' &&270 (typeof instance.UNSAFE_componentWillMount === 'function' ||271 typeof instance.componentWillMount === 'function')272 ) {273 callComponentWillMount(workInProgress, instance);274 // If we had additional state updates during this life-cycle, let's275 // process them now.276 processUpdateQueue(workInProgress, newProps, instance, renderLanes);277 instance.state = workInProgress.memoizedState;278 }279 if (typeof instance.componentDidMount === 'function') {280 workInProgress.flags |= Update;281 }282}283function resumeMountClassInstance(284 workInProgress: Fiber,285 ctor: any,286 newProps: any,287 renderLanes: Lanes,288): boolean {289 const instance = workInProgress.stateNode;290 const oldProps = workInProgress.memoizedProps;291 instance.props = oldProps;292 const oldContext = instance.context;293 const contextType = ctor.contextType;294 let nextContext = emptyContextObject;295 if (typeof contextType === 'object' && contextType !== null) {296 nextContext = readContext(contextType);297 } else {298 const nextLegacyUnmaskedContext = getUnmaskedContext(299 workInProgress,300 ctor,301 true,302 );303 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);304 }305 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;306 const hasNewLifecycles =307 typeof getDerivedStateFromProps === 'function' ||308 typeof instance.getSnapshotBeforeUpdate === 'function';309 // Note: During these life-cycles, instance.props/instance.state are what310 // ever the previously attempted to render - not the "current". However,311 // during componentDidUpdate we pass the "current" props.312 // In order to support react-lifecycles-compat polyfilled components,313 // Unsafe lifecycles should not be invoked for components using the new APIs.314 if (315 !hasNewLifecycles &&316 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||317 typeof instance.componentWillReceiveProps === 'function')318 ) {319 if (oldProps !== newProps || oldContext !== nextContext) {320 callComponentWillReceiveProps(321 workInProgress,322 instance,323 newProps,324 nextContext,325 );326 }327 }328 resetHasForceUpdateBeforeProcessing();329 const oldState = workInProgress.memoizedState;330 let newState = (instance.state = oldState);331 processUpdateQueue(workInProgress, newProps, instance, renderLanes);332 newState = workInProgress.memoizedState;333 if (334 oldProps === newProps &&335 oldState === newState &&336 !hasContextChanged() &&337 !checkHasForceUpdateAfterProcessing()338 ) {339 // If an update was already in progress, we should schedule an Update340 // effect even though we're bailing out, so that cWU/cDU are called.341 if (typeof instance.componentDidMount === 'function') {342 workInProgress.flags |= Update;343 }344 return false;345 }346 if (typeof getDerivedStateFromProps === 'function') {347 applyDerivedStateFromProps(348 workInProgress,349 ctor,350 getDerivedStateFromProps,351 newProps,352 );353 newState = workInProgress.memoizedState;354 }355 const shouldUpdate =356 // checkHasForceUpdateAfterProcessing：本次更新的Update中存在tag为ForceUpdate，则返回true357 checkHasForceUpdateAfterProcessing() ||358 checkShouldComponentUpdate(359 workInProgress,360 ctor,361 oldProps,362 newProps,363 oldState,364 newState,365 nextContext,366 );367 if (shouldUpdate) {368 // In order to support react-lifecycles-compat polyfilled components,369 // Unsafe lifecycles should not be invoked for components using the new APIs.370 if (371 !hasNewLifecycles &&372 (typeof instance.UNSAFE_componentWillMount === 'function' ||373 typeof instance.componentWillMount === 'function')374 ) {375 if (typeof instance.componentWillMount === 'function') {376 instance.componentWillMount();377 }378 if (typeof instance.UNSAFE_componentWillMount === 'function') {379 instance.UNSAFE_componentWillMount();380 }381 }382 if (typeof instance.componentDidMount === 'function') {383 workInProgress.flags |= Update;384 }385 } else {386 // If an update was already in progress, we should schedule an Update387 // effect even though we're bailing out, so that cWU/cDU are called.388 if (typeof instance.componentDidMount === 'function') {389 workInProgress.flags |= Update;390 }391 // If shouldComponentUpdate returned false, we should still update the392 // memoized state to indicate that this work can be reused.393 workInProgress.memoizedProps = newProps;394 workInProgress.memoizedState = newState;395 }396 // Update the existing instance's state, props, and context pointers even397 // if shouldComponentUpdate returns false.398 instance.props = newProps;399 instance.state = newState;400 instance.context = nextContext;401 return shouldUpdate;402}403// Invokes the update life-cycles and returns false if it shouldn't rerender.404function updateClassInstance(405 current: Fiber,406 workInProgress: Fiber,407 ctor: any,408 newProps: any,409 renderLanes: Lanes,410): boolean {411 const instance = workInProgress.stateNode;412 cloneUpdateQueue(current, workInProgress);413 const unresolvedOldProps = workInProgress.memoizedProps;414 const oldProps =415 workInProgress.type === workInProgress.elementType416 ? unresolvedOldProps417 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);418 instance.props = oldProps;419 const unresolvedNewProps = workInProgress.pendingProps;420 const oldContext = instance.context;421 const contextType = ctor.contextType;422 let nextContext = emptyContextObject;423 if (typeof contextType === 'object' && contextType !== null) {424 nextContext = readContext(contextType);425 } else {426 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);427 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);428 }429 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;430 const hasNewLifecycles =431 typeof getDerivedStateFromProps === 'function' ||432 typeof instance.getSnapshotBeforeUpdate === 'function';433 // Note: During these life-cycles, instance.props/instance.state are what434 // ever the previously attempted to render - not the "current". However,435 // during componentDidUpdate we pass the "current" props.436 // In order to support react-lifecycles-compat polyfilled components,437 // Unsafe lifecycles should not be invoked for components using the new APIs.438 if (439 !hasNewLifecycles &&440 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||441 typeof instance.componentWillReceiveProps === 'function')442 ) {443 // unresolvedOldProps为组件上次更新时的props，444 // 而unresolvedNewProps则来自ClassComponent调用this.render返回的JSX中的props参数。445 // 可见他们的引用是不同的。所以他们全等比较为false446 if (447 unresolvedOldProps !== unresolvedNewProps ||448 oldContext !== nextContext449 ) {450 // 会调用componentWillRecieveProps451 callComponentWillReceiveProps(452 workInProgress,453 instance,454 newProps,455 nextContext,456 );457 }458 }459 resetHasForceUpdateBeforeProcessing();460 const oldState = workInProgress.memoizedState;461 let newState = (instance.state = oldState);462 processUpdateQueue(workInProgress, newProps, instance, renderLanes);463 newState = workInProgress.memoizedState;464 if (465 unresolvedOldProps === unresolvedNewProps &&466 oldState === newState &&467 !hasContextChanged() &&468 !checkHasForceUpdateAfterProcessing()469 ) {470 // If an update was already in progress, we should schedule an Update471 // effect even though we're bailing out, so that cWU/cDU are called.472 if (typeof instance.componentDidUpdate === 'function') {473 if (474 unresolvedOldProps !== current.memoizedProps ||475 oldState !== current.memoizedState476 ) {477 workInProgress.flags |= Update;478 }479 }480 if (typeof instance.getSnapshotBeforeUpdate === 'function') {481 if (482 unresolvedOldProps !== current.memoizedProps ||483 oldState !== current.memoizedState484 ) {485 workInProgress.flags |= Snapshot;486 }487 }488 return false;489 }490 if (typeof getDerivedStateFromProps === 'function') {491 applyDerivedStateFromProps(492 workInProgress,493 ctor,494 getDerivedStateFromProps,495 newProps,496 );497 newState = workInProgress.memoizedState;498 }499 const shouldUpdate =500 checkHasForceUpdateAfterProcessing() ||501 checkShouldComponentUpdate(502 workInProgress,503 ctor,504 oldProps,505 newProps,...

Full Screen

Full Screen

ReactFiberClassComponent.old.js

Source:ReactFiberClassComponent.old.js Github

copy

Full Screen

...51const isArray = Array.isArray;52// React.Component uses a shared frozen object by default.53// We'll use it to determine whether we need to initialize legacy refs.54export const emptyRefsObject = new React.Component().refs;55export function applyDerivedStateFromProps(56 workInProgress: Fiber,57 ctor: any,58 getDerivedStateFromProps: (props: any, state: any) => any,59 nextProps: any,60) {61 const prevState = workInProgress.memoizedState;62 const partialState = getDerivedStateFromProps(nextProps, prevState);63 // Merge the partial state and the previous state.64 const memoizedState =65 partialState === null || partialState === undefined66 ? prevState67 : Object.assign({}, prevState, partialState);68 workInProgress.memoizedState = memoizedState;69 // Once the update queue is empty, persist the derived state onto the70 // base state.71 if (workInProgress.lanes === NoLanes) {72 // Queue is always non-null for classes73 const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);74 updateQueue.baseState = memoizedState;75 }76}77const classComponentUpdater = {78 isMounted,79 enqueueSetState(inst, payload, callback) {80 const fiber = getInstance(inst);81 const eventTime = requestEventTime();82 const lane = requestUpdateLane(fiber);83 const update = createUpdate(eventTime, lane);84 update.payload = payload;85 if (callback !== undefined && callback !== null) {86 update.callback = callback;87 }88 enqueueUpdate(fiber, update);89 scheduleUpdateOnFiber(fiber, lane, eventTime);90 if (enableSchedulingProfiler) {91 markStateUpdateScheduled(fiber, lane);92 }93 },94 enqueueReplaceState(inst, payload, callback) {95 const fiber = getInstance(inst);96 const eventTime = requestEventTime();97 const lane = requestUpdateLane(fiber);98 const update = createUpdate(eventTime, lane);99 update.tag = ReplaceState;100 update.payload = payload;101 if (callback !== undefined && callback !== null) {102 update.callback = callback;103 }104 enqueueUpdate(fiber, update);105 scheduleUpdateOnFiber(fiber, lane, eventTime);106 if (enableSchedulingProfiler) {107 markStateUpdateScheduled(fiber, lane);108 }109 },110 enqueueForceUpdate(inst, callback) {111 const fiber = getInstance(inst);112 const eventTime = requestEventTime();113 const lane = requestUpdateLane(fiber);114 const update = createUpdate(eventTime, lane);115 update.tag = ForceUpdate;116 if (callback !== undefined && callback !== null) {117 update.callback = callback;118 }119 enqueueUpdate(fiber, update);120 scheduleUpdateOnFiber(fiber, lane, eventTime);121 if (enableSchedulingProfiler) {122 markForceUpdateScheduled(fiber, lane);123 }124 },125};126function checkShouldComponentUpdate(127 workInProgress,128 ctor,129 oldProps,130 newProps,131 oldState,132 newState,133 nextContext,134) {135 const instance = workInProgress.stateNode;136 if (typeof instance.shouldComponentUpdate === 'function') {137 const shouldUpdate = instance.shouldComponentUpdate(138 newProps,139 newState,140 nextContext,141 );142 return shouldUpdate;143 }144 if (ctor.prototype && ctor.prototype.isPureReactComponent) {145 return (146 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)147 );148 }149 return true;150}151function adoptClassInstance(workInProgress: Fiber, instance: any): void {152 instance.updater = classComponentUpdater;153 workInProgress.stateNode = instance;154 // The instance needs access to the fiber so that it can schedule updates155 setInstance(instance, workInProgress);156}157function constructClassInstance(158 workInProgress: Fiber,159 ctor: any,160 props: any,161): any {162 let isLegacyContextConsumer = false;163 let unmaskedContext = emptyContextObject;164 let context = emptyContextObject;165 const contextType = ctor.contextType;166 if (typeof contextType === 'object' && contextType !== null) {167 context = readContext((contextType: any));168 } else if (!disableLegacyContext) {169 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);170 console.log('unmaskedContext', unmaskedContext);171 const contextTypes = ctor.contextTypes;172 isLegacyContextConsumer =173 contextTypes !== null && contextTypes !== undefined;174 context = isLegacyContextConsumer175 ? getMaskedContext(workInProgress, unmaskedContext)176 : emptyContextObject;177 }178 // Instantiate twice to help detect side-effects.179 const instance = new ctor(props, context);180 const state = (workInProgress.memoizedState =181 instance.state !== null && instance.state !== undefined182 ? instance.state183 : null);184 adoptClassInstance(workInProgress, instance);185 // Cache unmasked context so we can avoid recreating masked context unless necessary.186 // ReactFiberContext usually updates this cache but can't for newly-created instances.187 if (isLegacyContextConsumer) {188 cacheContext(workInProgress, unmaskedContext, context);189 }190 return instance;191}192function callComponentWillMount(workInProgress, instance) {193 const oldState = instance.state;194 if (typeof instance.componentWillMount === 'function') {195 instance.componentWillMount();196 }197 if (typeof instance.UNSAFE_componentWillMount === 'function') {198 instance.UNSAFE_componentWillMount();199 }200 if (oldState !== instance.state) {201 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);202 }203}204function callComponentWillReceiveProps(205 workInProgress,206 instance,207 newProps,208 nextContext,209) {210 const oldState = instance.state;211 if (typeof instance.componentWillReceiveProps === 'function') {212 instance.componentWillReceiveProps(newProps, nextContext);213 }214 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {215 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);216 }217 if (instance.state !== oldState) {218 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);219 }220}221// Invokes the mount life-cycles on a previously never rendered instance.222function mountClassInstance(223 workInProgress: Fiber,224 ctor: any,225 newProps: any,226 renderLanes: Lanes,227): void {228 const instance = workInProgress.stateNode;229 instance.props = newProps;230 instance.state = workInProgress.memoizedState;231 instance.refs = emptyRefsObject;232 initializeUpdateQueue(workInProgress);233 const contextType = ctor.contextType;234 if (typeof contextType === 'object' && contextType !== null) {235 instance.context = readContext(contextType);236 } else if (disableLegacyContext) {237 instance.context = emptyContextObject;238 } else {239 const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);240 instance.context = getMaskedContext(workInProgress, unmaskedContext);241 }242 processUpdateQueue(workInProgress, newProps, instance, renderLanes);243 instance.state = workInProgress.memoizedState;244 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;245 if (typeof getDerivedStateFromProps === 'function') {246 applyDerivedStateFromProps(247 workInProgress,248 ctor,249 getDerivedStateFromProps,250 newProps,251 );252 instance.state = workInProgress.memoizedState;253 }254 // In order to support react-lifecycles-compat polyfilled components,255 // Unsafe lifecycles should not be invoked for components using the new APIs.256 if (257 typeof ctor.getDerivedStateFromProps !== 'function' &&258 typeof instance.getSnapshotBeforeUpdate !== 'function' &&259 (typeof instance.UNSAFE_componentWillMount === 'function' ||260 typeof instance.componentWillMount === 'function')261 ) {262 callComponentWillMount(workInProgress, instance);263 // If we had additional state updates during this life-cycle, let's264 // process them now.265 processUpdateQueue(workInProgress, newProps, instance, renderLanes);266 instance.state = workInProgress.memoizedState;267 }268 if (typeof instance.componentDidMount === 'function') {269 workInProgress.flags |= Update;270 }271}272function resumeMountClassInstance(273 workInProgress: Fiber,274 ctor: any,275 newProps: any,276 renderLanes: Lanes,277): boolean {278 const instance = workInProgress.stateNode;279 const oldProps = workInProgress.memoizedProps;280 instance.props = oldProps;281 const oldContext = instance.context;282 const contextType = ctor.contextType;283 let nextContext = emptyContextObject;284 if (typeof contextType === 'object' && contextType !== null) {285 nextContext = readContext(contextType);286 } else if (!disableLegacyContext) {287 const nextLegacyUnmaskedContext = getUnmaskedContext(288 workInProgress,289 ctor,290 true,291 );292 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);293 }294 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;295 const hasNewLifecycles =296 typeof getDerivedStateFromProps === 'function' ||297 typeof instance.getSnapshotBeforeUpdate === 'function';298 // Note: During these life-cycles, instance.props/instance.state are what299 // ever the previously attempted to render - not the "current". However,300 // during componentDidUpdate we pass the "current" props.301 // In order to support react-lifecycles-compat polyfilled components,302 // Unsafe lifecycles should not be invoked for components using the new APIs.303 if (304 !hasNewLifecycles &&305 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||306 typeof instance.componentWillReceiveProps === 'function')307 ) {308 if (oldProps !== newProps || oldContext !== nextContext) {309 callComponentWillReceiveProps(310 workInProgress,311 instance,312 newProps,313 nextContext,314 );315 }316 }317 resetHasForceUpdateBeforeProcessing();318 const oldState = workInProgress.memoizedState;319 let newState = (instance.state = oldState);320 processUpdateQueue(workInProgress, newProps, instance, renderLanes);321 newState = workInProgress.memoizedState;322 if (323 oldProps === newProps &&324 oldState === newState &&325 !hasContextChanged() &&326 !checkHasForceUpdateAfterProcessing()327 ) {328 // If an update was already in progress, we should schedule an Update329 // effect even though we're bailing out, so that cWU/cDU are called.330 if (typeof instance.componentDidMount === 'function') {331 workInProgress.flags |= Update;332 }333 return false;334 }335 if (typeof getDerivedStateFromProps === 'function') {336 applyDerivedStateFromProps(337 workInProgress,338 ctor,339 getDerivedStateFromProps,340 newProps,341 );342 newState = workInProgress.memoizedState;343 }344 const shouldUpdate =345 checkHasForceUpdateAfterProcessing() ||346 checkShouldComponentUpdate(347 workInProgress,348 ctor,349 oldProps,350 newProps,351 oldState,352 newState,353 nextContext,354 );355 if (shouldUpdate) {356 // In order to support react-lifecycles-compat polyfilled components,357 // Unsafe lifecycles should not be invoked for components using the new APIs.358 if (359 !hasNewLifecycles &&360 (typeof instance.UNSAFE_componentWillMount === 'function' ||361 typeof instance.componentWillMount === 'function')362 ) {363 if (typeof instance.componentWillMount === 'function') {364 instance.componentWillMount();365 }366 if (typeof instance.UNSAFE_componentWillMount === 'function') {367 instance.UNSAFE_componentWillMount();368 }369 }370 if (typeof instance.componentDidMount === 'function') {371 workInProgress.flags |= Update;372 }373 } else {374 // If an update was already in progress, we should schedule an Update375 // effect even though we're bailing out, so that cWU/cDU are called.376 if (typeof instance.componentDidMount === 'function') {377 workInProgress.flags |= Update;378 }379 // If shouldComponentUpdate returned false, we should still update the380 // memoized state to indicate that this work can be reused.381 workInProgress.memoizedProps = newProps;382 workInProgress.memoizedState = newState;383 }384 // Update the existing instance's state, props, and context pointers even385 // if shouldComponentUpdate returns false.386 instance.props = newProps;387 instance.state = newState;388 instance.context = nextContext;389 return shouldUpdate;390}391// Invokes the update life-cycles and returns false if it shouldn't rerender.392function updateClassInstance(393 current: Fiber,394 workInProgress: Fiber,395 ctor: any,396 newProps: any,397 renderLanes: Lanes,398): boolean {399 const instance = workInProgress.stateNode;400 cloneUpdateQueue(current, workInProgress);401 const unresolvedOldProps = workInProgress.memoizedProps;402 const oldProps =403 workInProgress.type === workInProgress.elementType404 ? unresolvedOldProps405 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);406 instance.props = oldProps;407 const unresolvedNewProps = workInProgress.pendingProps;408 const oldContext = instance.context;409 const contextType = ctor.contextType;410 let nextContext = emptyContextObject;411 if (typeof contextType === 'object' && contextType !== null) {412 nextContext = readContext(contextType);413 } else if (!disableLegacyContext) {414 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);415 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);416 }417 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;418 const hasNewLifecycles =419 typeof getDerivedStateFromProps === 'function' ||420 typeof instance.getSnapshotBeforeUpdate === 'function';421 // Note: During these life-cycles, instance.props/instance.state are what422 // ever the previously attempted to render - not the "current". However,423 // during componentDidUpdate we pass the "current" props.424 // In order to support react-lifecycles-compat polyfilled components,425 // Unsafe lifecycles should not be invoked for components using the new APIs.426 if (427 !hasNewLifecycles &&428 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||429 typeof instance.componentWillReceiveProps === 'function')430 ) {431 if (432 unresolvedOldProps !== unresolvedNewProps ||433 oldContext !== nextContext434 ) {435 callComponentWillReceiveProps(436 workInProgress,437 instance,438 newProps,439 nextContext,440 );441 }442 }443 resetHasForceUpdateBeforeProcessing();444 const oldState = workInProgress.memoizedState;445 let newState = (instance.state = oldState);446 processUpdateQueue(workInProgress, newProps, instance, renderLanes);447 newState = workInProgress.memoizedState;448 if (449 unresolvedOldProps === unresolvedNewProps &&450 oldState === newState &&451 !hasContextChanged() &&452 !checkHasForceUpdateAfterProcessing()453 ) {454 // If an update was already in progress, we should schedule an Update455 // effect even though we're bailing out, so that cWU/cDU are called.456 if (typeof instance.componentDidUpdate === 'function') {457 if (458 unresolvedOldProps !== current.memoizedProps ||459 oldState !== current.memoizedState460 ) {461 workInProgress.flags |= Update;462 }463 }464 if (typeof instance.getSnapshotBeforeUpdate === 'function') {465 if (466 unresolvedOldProps !== current.memoizedProps ||467 oldState !== current.memoizedState468 ) {469 workInProgress.flags |= Snapshot;470 }471 }472 return false;473 }474 if (typeof getDerivedStateFromProps === 'function') {475 applyDerivedStateFromProps(476 workInProgress,477 ctor,478 getDerivedStateFromProps,479 newProps,480 );481 newState = workInProgress.memoizedState;482 }483 const shouldUpdate =484 checkHasForceUpdateAfterProcessing() ||485 checkShouldComponentUpdate(486 workInProgress,487 ctor,488 oldProps,489 newProps,...

Full Screen

Full Screen

ReactFiberClassComponent.js

Source:ReactFiberClassComponent.js Github

copy

Full Screen

...152 processUpdateQueue(workInProgress, newProps, instance, renderLanes);153 instance.state = workInProgress.memoizedState;154 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;155 if (typeof getDerivedStateFromProps === 'function') {156 applyDerivedStateFromProps(157 workInProgress,158 ctor,159 getDerivedStateFromProps,160 newProps161 );162 instance.state = workInProgress.memoizedState;163 }164 if (165 typeof ctor.getDerivedStateFromProps !== 'function' &&166 typeof instance.getSnapshotBeforeUpdate !== 'function' &&167 (typeof instance.UNSAFE_componentWillMount === 'function' ||168 typeof instance.componentWillMount === 'function')169 ) {170 callComponentWillMount(workInProgress, instance);171 processUpdateQueue(workInProgress, newProps, instance, renderLanes);172 instance.state = workInProgress.memoizedState;173 }174 if (typeof instance.componentDidMount === 'function') {175 workInProgress.flags |= Update;176 }177};178const callComponentWillReceiveProps = (179 workInProgress,180 instance,181 newProps,182 nextContext183) => {184 const oldState = instance.state;185 if (typeof instance.componentWillReceiveProps === 'function') {186 instance.componentWillReceiveProps(newProps, nextContext);187 }188 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {189 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);190 }191 if (instance.state !== oldState) {192 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);193 }194};195const checkShouldComponentUpdate = (196 workInProgress,197 ctor,198 oldProps,199 newProps,200 oldState,201 newState,202 nextContext203) => {204 const instance = workInProgress.stateNode;205 if (typeof instance.shouldComponentUpdate === 'function') {206 const shouldUpdate = instance.shouldComponentUpdate(207 newProps,208 newState,209 nextContext210 );211 return shouldUpdate;212 }213 if (ctor.prototype && ctor.prototype.isPureReactComponent) {214 return (215 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)216 );217 }218 return true;219};220const resumeMountClassInstance = (221 workInProgress,222 ctor,223 newProps,224 renderLanes225) => {226 const instance = workInProgress.stateNode;227 const oldProps = workInProgress.memoizedProps;228 instance.props = oldProps;229 const oldContext = instance.context;230 const contextType = ctor.contextType;231 let nextContext = emptyContextObject;232 if (typeof contextType === 'object' && contextType !== null) {233 nextContext = readContext(contextType);234 } else {235 const nextLegacyUnmaskedContext = getUnmaskedContext(236 workInProgress,237 ctor,238 true239 );240 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);241 }242 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;243 const hasNewLifecycles =244 typeof getDerivedStateFromProps === 'function' ||245 typeof instance.getSnapshotBeforeUpdate === 'function';246 if (247 !hasNewLifecycles &&248 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||249 typeof instance.componentWillReceiveProps === 'function')250 ) {251 if (oldProps !== newProps || oldContext !== nextContext) {252 callComponentWillReceiveProps(253 workInProgress,254 instance,255 newProps,256 nextContext257 );258 }259 }260 resetHasForceUpdateBeforeProcessing();261 const oldState = workInProgress.memoizedState;262 let newState = (instance.state = oldState);263 processUpdateQueue(workInProgress, newProps, instance, renderLanes);264 newState = workInProgress.memoizedState;265 if (266 oldProps === newProps &&267 oldState === newState &&268 !hasContextChanged() &&269 !checkHasForceUpdateAfterProcessing()270 ) {271 if (typeof instance.componentDidMount === 'function') {272 workInProgress.flags |= Update;273 }274 return false;275 }276 if (typeof getDerivedStateFromProps === 'function') {277 applyDerivedStateFromProps(278 workInProgress,279 ctor,280 getDerivedStateFromProps,281 newProps282 );283 newState = workInProgress.memoizedState;284 }285 const shouldUpdate =286 checkHasForceUpdateAfterProcessing() ||287 checkShouldComponentUpdate(288 workInProgress,289 ctor,290 oldProps,291 newProps,292 oldState,293 newState,294 nextContext295 );296 if (shouldUpdate) {297 if (298 !hasNewLifecycles &&299 (typeof instance.UNSAFE_componentWillMount === 'function' ||300 typeof instance.componentWillMount === 'function')301 ) {302 if (typeof instance.componentWillMount === 'function') {303 instance.componentWillMount();304 }305 if (typeof instance.UNSAFE_componentWillMount === 'function') {306 instance.UNSAFE_componentWillMount();307 }308 }309 if (typeof instance.componentDidMount === 'function') {310 workInProgress.flags |= Update;311 }312 } else {313 if (typeof instance.componentDidMount === 'function') {314 workInProgress.flags |= Update;315 }316 workInProgress.memoizedProps = newProps;317 workInProgress.memoizedState = newState;318 }319 instance.props = newProps;320 instance.state = newState;321 instance.context = nextContext;322 return shouldUpdate;323};324const updateClassInstance = (325 current,326 workInProgress,327 ctor,328 newProps,329 renderLanes330) => {331 const instance = workInProgress.stateNode;332 cloneUpdateQueue(current, workInProgress);333 const unresolvedOldProps = workInProgress.memoizedProps;334 const oldProps =335 workInProgress.type === workInProgress.elementType336 ? unresolvedOldProps337 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);338 instance.props = oldProps;339 const unresolvedNewProps = workInProgress.pendingProps;340 const oldContext = instance.context;341 const contextType = ctor.contextType;342 let nextContext = emptyContextObject;343 if (typeof contextType === 'object' && contextType !== null) {344 nextContext = readContext(contextType);345 } else if (!disableLegacyContext) {346 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);347 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);348 }349 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;350 const hasNewLifecycles =351 typeof getDerivedStateFromProps === 'function' ||352 typeof instance.getSnapshotBeforeUpdate === 'function';353 if (354 !hasNewLifecycles &&355 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||356 typeof instance.componentWillReceiveProps === 'function')357 ) {358 if (359 unresolvedOldProps !== unresolvedNewProps ||360 oldContext !== nextContext361 ) {362 callComponentWillReceiveProps(363 workInProgress,364 instance,365 newProps,366 nextContext367 );368 }369 }370 resetHasForceUpdateBeforeProcessing();371 const oldState = workInProgress.memoizedState;372 let newState = (instance.state = oldState);373 processUpdateQueue(workInProgress, newProps, instance, renderLanes);374 newState = workInProgress.memoizedState;375 if (376 unresolvedOldProps === unresolvedNewProps &&377 oldState === newState &&378 !hasContextChanged() &&379 !checkHasForceUpdateAfterProcessing()380 ) {381 if (typeof instance.componentDidUpdate === 'function') {382 if (383 unresolvedOldProps !== current.memoizedProps ||384 oldState !== current.memoizedState385 ) {386 workInProgress.flags |= Update;387 }388 }389 if (typeof instance.getSnapshotBeforeUpdate === 'function') {390 if (391 unresolvedOldProps !== current.memoizedProps ||392 oldState !== current.memoizedState393 ) {394 workInProgress.flags |= Snapshot;395 }396 }397 return false;398 }399 if (typeof getDerivedStateFromProps === 'function') {400 applyDerivedStateFromProps(401 workInProgress,402 ctor,403 getDerivedStateFromProps,404 newProps405 );406 newState = workInProgress.memoizedState;407 }408 const shouldUpdate =409 checkHasForceUpdateAfterProcessing() ||410 checkShouldComponentUpdate(411 workInProgress,412 ctor,413 oldProps,414 newProps,...

Full Screen

Full Screen

reconciler.js

Source:reconciler.js Github

copy

Full Screen

...110 instance.props = nextProps;111 instance.state = workInProgress.memoizedState;112 instance.refs = EMPTY_REFS;113 processUpdate(workInProgress, instance);114 applyDerivedStateFromProps(workInProgress, Component, nextProps);115 if (typeof instance.componentDidMount === 'function') {116 workInProgress.effectTag |= UPDATE;117 }118 shouldUpdate = true;119 } else {120 shouldUpdate = updateClassInstance(workInProgress, Component, nextProps);121 }122 return finishClassComponent(workInProgress, Component, shouldUpdate);123}124function updateClassInstance(workInProgress, Component, nextProps) {125 const instance = workInProgress.stateNode;126 const oldProps = workInProgress.memoizedProps;127 128 instance.props = oldProps;129 const oldState = workInProgress.memoizedState;130 let newState = instance.state = oldState;131 processUpdate(workInProgress, instance);132 133 newState = workInProgress.memoizedState;134 applyDerivedStateFromProps(workInProgress, Component, nextProps);135 136 let shouldUpdate = checkShouldComponentUpdate(workInProgress, Component, oldProps, nextProps, oldState, newState);137 if (shouldUpdate) {138 if (typeof instance.componentDidUpdate === 'function') {139 workInProgress.effectTag |= UPDATE;140 }141 if (typeof instance.getSnapshotBeforeUpdate === 'function') {142 workInProgress.effectTag |= SNAPSHOT;143 }144 } else {145 if (typeof instance.componentDidUpdate === 'function') {146 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {147 workInProgress.effectTag |= UPDATE;148 }149 }150 if (typeof instance.getSnapshotBeforeUpdate === 'function') {151 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {152 workInProgress.effectTag |= SNAPSHOT;153 }154 }155 workInProgress.memoizedProps = nextProps;156 workInProgress.memoizedState = newState;157 }158 instance.props = nextProps;159 instance.state = newState;160 instance._reactInternalFiber = workInProgress;161 return shouldUpdate;162}163function finishClassComponent(workInProgress, Component, shouldUpdate) {164 const ref = workInProgress.ref;165 if (ref !== null) {166 workInProgress.effectTag |= REF;167 }168 if (!shouldUpdate) {169 return bailoutOnAlreadyFinishedWork(current, workInProgress);170 }171 const instance = workInProgress.stateNode;172 const nextChildren = instance.render();173 174 workInProgress.effectTag |= PERFORMED_WORK;175 // if (current !== null) {176 // workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren);177 // } else {178 // reconcileChildren(current, workInProgress, nextChildren);179 // }180 reconcileChildren(workInProgress, nextChildren);181 workInProgress.memoizedState = instance.state;182 return workInProgress.child;183}184function applyDerivedStateFromProps(workInProgress, Component, nextProps) {185 const getDerivedStateFromProps = Component.getDerivedStateFromProps;186 if (typeof getDerivedStateFromProps === 'function') {187 const memoizedState = workInProgress.memoizedState;188 const nextState = getDerivedStateFromProps(nextProps, memoizedState);189 instance.state = workInProgress.memoizedState = nextState === null || nextState === undefined ? 190 memoizedState : 191 { ...memoizedState, partialState };192 }193}194function processUpdate (195 workInProgress,196 instance197) {198 let resultState = null;...

Full Screen

Full Screen

VueRelayQueryRenderer.js

Source:VueRelayQueryRenderer.js Github

copy

Full Screen

1import Vue from 'vue'2import VueRelayQueryFetcher from './VueRelayQueryFetcher'3import { VUE_RELAY_PROPS } from './buildVueRelayContainer'4import areEqual from 'fbjs/lib/areEqual'5import {6 createOperationDescriptor,7 deepFreeze,8 getRequest9} from 'relay-runtime'10const requestCache = {}11const NETWORK_ONLY = 'NETWORK_ONLY'12const STORE_THEN_NETWORK = 'STORE_THEN_NETWORK'13const DataFromEnum = {14 NETWORK_ONLY,15 STORE_THEN_NETWORK16}17const VueRelayQueryRenderer = {18 name: 'relay-query-renderer',19 props: {20 cacheConfig: {21 type: Object22 },23 dataFrom: {24 type: String,25 validator (val) {26 return Object.values(DataFromEnum).indexOf(val) !== -127 }28 },29 environment: {30 type: Object,31 required: true32 },33 query: {},34 variables: {35 type: Object,36 default: () => ({})37 }38 },39 data () {40 // Callbacks are attached to the current instance and shared with static41 // lifecyles by bundling with state. This is okay to do because the42 // callbacks don't change in reaction to props. However we should not43 // "leak" them before mounting (since we would be unable to clean up). For44 // that reason, we define them as null initially and fill them in after45 // mounting to avoid leaking memory.46 const retryCallbacks = {47 handleDataChange: null,48 handleRetryAfterError: null49 }50 let queryFetcher51 let requestCacheKey52 if (this.query) {53 const { query } = this54 const request = getRequest(query)55 requestCacheKey = getRequestCacheKey(request.params, this.variables)56 queryFetcher = requestCache[requestCacheKey]57 ? requestCache[requestCacheKey].queryFetcher58 : new VueRelayQueryFetcher()59 } else {60 queryFetcher = new VueRelayQueryFetcher()61 }62 this.state = {63 prevPropsEnvironment: this.environment,64 prevPropsVariables: this.variables,65 prevQuery: this.query,66 queryFetcher,67 retryCallbacks,68 ...fetchQueryAndComputeStateFromProps(69 this.$props,70 queryFetcher,71 retryCallbacks,72 requestCacheKey73 )74 }75 return {}76 },77 methods: {78 applyDerivedStateFromProps () {79 this.setState(this.getDerivedStateFromProps(this.$props, this.state))80 },81 setState (partialState) {82 if (typeof partialState === 'function') {83 partialState = partialState({ ...this.state })84 }85 if (partialState != null) {86 const nextState = {87 ...this.state,88 ...partialState89 }90 const forceUpdate = this.shouldComponentUpdate(this.$props, nextState)91 this.state = nextState92 if (forceUpdate) {93 this.$forceUpdate()94 }95 }96 },97 getDerivedStateFromProps (nextProps, prevState) {98 if (99 prevState.prevQuery !== nextProps.query ||100 prevState.prevPropsEnvironment !== nextProps.environment ||101 !areEqual(prevState.prevPropsVariables, nextProps.variables)102 ) {103 const { query } = nextProps104 const prevSelectionReferences = prevState.queryFetcher.getSelectionReferences()105 prevState.queryFetcher.disposeRequest()106 let queryFetcher107 if (query) {108 const request = getRequest(query)109 const requestCacheKey = getRequestCacheKey(110 request.params,111 nextProps.variables112 )113 queryFetcher = requestCache[requestCacheKey]114 ? requestCache[requestCacheKey].queryFetcher115 : new VueRelayQueryFetcher(prevSelectionReferences)116 } else {117 queryFetcher = new VueRelayQueryFetcher(prevSelectionReferences)118 }119 return {120 prevQuery: nextProps.query,121 prevPropsEnvironment: nextProps.environment,122 prevPropsVariables: nextProps.variables,123 queryFetcher: queryFetcher,124 ...fetchQueryAndComputeStateFromProps(125 nextProps,126 queryFetcher,127 prevState.retryCallbacks128 // passing no requestCacheKey will cause it to be recalculated internally129 // and we want the updated requestCacheKey, since variables may have changed130 )131 }132 }133 return null134 },135 shouldComponentUpdate (_, nextState) {136 return (137 nextState.renderProps !== this.state.renderProps138 )139 }140 },141 watch: {142 environment: 'applyDerivedStateFromProps',143 query: 'applyDerivedStateFromProps',144 variables: {145 handler: 'applyDerivedStateFromProps',146 deep: true147 }148 },149 render (h) {150 const { renderProps, relayContext } = this.state151 // Note that the root fragment results in `renderProps.props` is already152 // frozen by the store; this call is to freeze the renderProps object and153 // error property if set.154 if (process.env.NODE_ENV !== 'production') {155 deepFreeze(renderProps)156 }157 this[VUE_RELAY_PROPS].__relayContext = Object.freeze({158 ...relayContext159 })160 return h('keep-alive', {161 props: {162 include: []163 }164 }, this.$scopedSlots.default(renderProps))165 },166 mounted () {167 const { retryCallbacks, queryFetcher, requestCacheKey } = this.state168 if (requestCacheKey) {169 delete requestCache[requestCacheKey]170 }171 retryCallbacks.handleDataChange = (params) => {172 const error = params.error == null ? null : params.error173 const snapshot = params.snapshot == null ? null : params.snapshot174 this.setState(prevState => {175 const { requestCacheKey: prevRequestCacheKey } = prevState176 if (prevRequestCacheKey) {177 delete requestCache[prevRequestCacheKey]178 }179 // Don't update state if nothing has changed.180 if (snapshot === prevState.snapshot && error === prevState.error) {181 return null182 }183 return {184 renderProps: getRenderProps(185 error,186 snapshot,187 prevState.queryFetcher,188 prevState.retryCallbacks189 ),190 snapshot,191 requestCacheKey: null192 }193 })194 }195 retryCallbacks.handleRetryAfterError = (_) =>196 this.setState(prevState => {197 const { requestCacheKey: prevRequestCacheKey } = prevState198 if (prevRequestCacheKey) {199 delete requestCache[prevRequestCacheKey]200 }201 return {202 renderProps: getLoadingRenderProps(),203 requestCacheKey: null204 }205 })206 // Re-initialize the VueRelayQueryFetcher with callbacks.207 // If data has changed since constructions, this will re-render.208 if (this.$props.query) {209 queryFetcher.setOnDataChange(retryCallbacks.handleDataChange)210 }211 },212 updated () {213 // We don't need to cache the request after the component commits214 const { requestCacheKey } = this.state215 if (requestCacheKey) {216 delete requestCache[requestCacheKey]217 // HACK218 delete this.state.requestCacheKey219 }220 },221 beforeDestroy () {222 this.state.queryFetcher.dispose()223 },224 provide () {225 return {226 [VUE_RELAY_PROPS]: (this[VUE_RELAY_PROPS] = Vue.observable({227 __relayContext: Object.freeze({228 ...this.state.relayContext229 })230 }))231 }232 }233}234function getContext (235 environment,236 variables237) {238 return {239 environment,240 variables241 }242}243function getLoadingRenderProps () {244 return {245 error: null,246 props: null, // `props: null` indicates that the data is being fetched (i.e. loading)247 retry: null248 }249}250function getEmptyRenderProps () {251 return {252 error: null,253 props: {}, // `props: {}` indicates no data available254 retry: null255 }256}257function getRenderProps (258 error,259 snapshot,260 queryFetcher,261 retryCallbacks262) {263 return {264 error: error || null,265 props: snapshot ? snapshot.data : null,266 retry: () => {267 const syncSnapshot = queryFetcher.retry()268 if (269 syncSnapshot &&270 typeof retryCallbacks.handleDataChange === 'function'271 ) {272 retryCallbacks.handleDataChange({ snapshot: syncSnapshot })273 } else if (274 error &&275 typeof retryCallbacks.handleRetryAfterError === 'function'276 ) {277 // If retrying after an error and no synchronous result available,278 // reset the render props279 retryCallbacks.handleRetryAfterError(error)280 }281 }282 }283}284function getRequestCacheKey (285 request,286 variables287) {288 const requestID = request.id || request.text289 return JSON.stringify({290 id: String(requestID),291 variables292 })293}294function fetchQueryAndComputeStateFromProps (295 props,296 queryFetcher,297 retryCallbacks,298 requestCacheKey299) {300 const { environment, query, variables } = props301 const genericEnvironment = (environment)302 if (query) {303 const request = getRequest(query)304 const operation = createOperationDescriptor(request, variables)305 const relayContext = getContext(genericEnvironment, operation.variables)306 if (typeof requestCacheKey === 'string' && requestCache[requestCacheKey]) {307 // This same request is already in flight.308 const { snapshot } = requestCache[requestCacheKey]309 if (snapshot) {310 // Use the cached response311 return {312 error: null,313 relayContext,314 renderProps: getRenderProps(315 null,316 snapshot,317 queryFetcher,318 retryCallbacks319 ),320 snapshot,321 requestCacheKey322 }323 } else {324 // Render loading state325 return {326 error: null,327 relayContext,328 renderProps: getLoadingRenderProps(),329 snapshot: null,330 requestCacheKey331 }332 }333 }334 try {335 const storeSnapshot =336 props.dataFrom === STORE_THEN_NETWORK337 ? queryFetcher.lookupInStore(genericEnvironment, operation)338 : null339 const querySnapshot = queryFetcher.fetch({340 cacheConfig: props.cacheConfig,341 dataFrom: props.dataFrom,342 environment: genericEnvironment,343 onDataChange: retryCallbacks.handleDataChange,344 operation345 })346 // Use network data first, since it may be fresher347 const snapshot = querySnapshot || storeSnapshot348 // cache the request to avoid duplicate requests349 requestCacheKey =350 requestCacheKey || getRequestCacheKey(request.params, props.variables)351 requestCache[requestCacheKey] = { queryFetcher, snapshot }352 if (!snapshot) {353 return {354 error: null,355 relayContext,356 renderProps: getLoadingRenderProps(),357 snapshot: null,358 requestCacheKey359 }360 }361 return {362 error: null,363 relayContext,364 renderProps: getRenderProps(365 null,366 snapshot,367 queryFetcher,368 retryCallbacks369 ),370 snapshot,371 requestCacheKey372 }373 } catch (error) {374 return {375 error,376 relayContext,377 renderProps: getRenderProps(error, null, queryFetcher, retryCallbacks),378 snapshot: null,379 requestCacheKey380 }381 }382 } else {383 queryFetcher.dispose()384 const relayContext = getContext(genericEnvironment, variables)385 return {386 error: null,387 relayContext,388 renderProps: getEmptyRenderProps(),389 requestCacheKey: null // if there is an error, don't cache request390 }391 }392}...

Full Screen

Full Screen

lifecycle.js

Source:lifecycle.js Github

copy

Full Screen

...26 }27 const getDerivedStateFromProps = Constructor.getDerivedStateFromProps;28 // lifecycle getDervivedStateFromProps29 if (isFunction(getDerivedStateFromProps)) {30 applyDerivedStateFromProps(31 workInProgress, 32 Constructor, 33 getDerivedStateFromProps34 );35 instance.state = workInProgress.memoizedState;36 }37 if (38 !isFunction(Constructor.getDerivedStateFromProps)39 ) {40 callComponentWillMount(workInProgress, instance);41 queue = workInProgress.queue;42 if (queue !== null) {43 processUpdate(workInProgress, queue);44 instance.state = workInProgress.memoizedState;...

Full Screen

Full Screen

useComponent.js

Source:useComponent.js Github

copy

Full Screen

...20 21 const oldState = workInProgress.memoizedState;22 let newState = instance.state = state;23 24 applyDerivedStateFromProps(workInProgress, Component, props);25 let shouldUpdate = checkShouldComponentUpdate(workInProgress, Component, oldProps, props, oldState, newState);26 27 if (shouldUpdate) {28 debugger;29 return instance.render();30 }31 32 } else {33 const instance = useMemo(() => new Component(props), []);34 const [state, setState] = useState(instance.state);35 workInProgress.stateNode = instance;36 workInProgress.memoizedState = {37 ...workInProgress.memoizedState,38 ...state,39 }40 41 instance.props = props;42 instance.state = state;43 instance.setState = setState;44 45 applyDerivedStateFromProps(workInProgress, Component, props);46 return instance.render();47 }48 49 }50 Wrapper.displayName = Component.name;51 52 return hoistNonReactStatics(Wrapper, Component);53 } else {54 throw new Error(`Must provide react class component`);55 }56}57function applyDerivedStateFromProps(workInProgress, Component, nextProps) {58 const getDerivedStateFromProps = Component.getDerivedStateFromProps;59 if (typeof getDerivedStateFromProps === 'function') {60 const instance = workInProgress.stateNode;61 const memoizedState = workInProgress.memoizedState;62 const nextState = getDerivedStateFromProps(nextProps, memoizedState);63 instance.state = workInProgress.memoizedState = nextState === null || nextState === undefined ? 64 memoizedState : 65 { ...memoizedState, partialState };66 }67}68function checkShouldComponentUpdate(workInProgress, Component, oldProps, newProps, oldState, newState) {69 const instance = workInProgress.stateNode;70 if (typeof instance.shouldComponentUpdate === 'function') {71 const shouldUpdate = instance.shouldComponentUpdate(newProps, newState);...

Full Screen

Full Screen

buildVueRelayContainer.js

Source:buildVueRelayContainer.js Github

copy

Full Screen

1import Vue from 'vue'2import assertFragmentMap from './assertFragmentMap'3import {4 getComponentName5} from './VueRelayContainerUtils'6import mapObject from 'fbjs/lib/mapObject'7import { getFragment } from 'relay-runtime'8const VUE_RELAY_PROPS = 'vue-relay-props'9const buildVueRelayContainer = function (component, fragmentSpec, createContainerWithFragments) {10 // Sanity-check user-defined fragment input11 assertFragmentMap(getComponentName(component), fragmentSpec)12 const fragments = mapObject(fragmentSpec, getFragment)13 const props = Object.keys(fragments)14 return {15 extends: createContainerWithFragments(component, fragments),16 props,17 methods: {18 applyDerivedStateFromProps () {19 this.setState(this.getDerivedStateFromProps({20 ...this.$props,21 ...this.props22 }, this.state))23 },24 setState (partialState, callback) {25 if (typeof partialState === 'function') {26 partialState = partialState({ ...this.state })27 }28 if (partialState != null) {29 const prevState = this.state30 const nextState = {31 ...prevState,32 ...partialState33 }34 const prevProps = {35 ...this.$props,36 ...this.props37 }38 const forceUpdate = this.shouldComponentUpdate(prevProps, nextState)39 this.state = nextState40 if (typeof callback === 'function') {41 callback()42 }43 if (forceUpdate) {44 this.$nextTick(() => {45 this.componentDidUpdate(prevProps, prevState)46 })47 this.$forceUpdate()48 }49 }50 }51 },52 watch: {53 'props.__relayContext': 'applyDerivedStateFromProps',54 ...props.map(prop => ({ [prop]: 'applyDerivedStateFromProps' }))55 },56 render (h) {57 if (this.state.contextForChildren != null) {58 this[VUE_RELAY_PROPS].__relayContext = Object.freeze({59 ...this.state.contextForChildren60 })61 }62 if (component != null) {63 return h(component, {64 props: {65 ...this.$attrs,66 ...this.state.data,67 relay: this.state.relayProp68 }69 })70 }71 return h('keep-alive', {72 props: {73 include: []74 }75 }, this.$scopedSlots.default({76 ...this.state.data,77 relay: this.state.relayProp78 }))79 },80 inject: {81 'props': { from: VUE_RELAY_PROPS }82 },83 provide () {84 return this.state.contextForChildren != null85 ? {86 [VUE_RELAY_PROPS]: (this[VUE_RELAY_PROPS] = Vue.observable({87 __relayContext: Object.freeze({88 ...this.state.contextForChildren89 })90 }))91 }92 : {}93 }94 }95}96export default buildVueRelayContainer...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.waitForSelector('text=Get Started');6 const state = {7 button: {8 boundingBox: {9 },10 },11 };12 const action = {13 };14 await page.applyDerivedStateFromProps(state, action);15 await browser.close();16})();17module.exports = {18 use: {19 },20 {21 use: {22 },23 },24};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');2const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');3const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');4const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');5const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');6const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');7const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');8const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');9const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');10const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');11const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');12const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');13const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');14const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');15const { applyDerivedStateFromProps

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { PlaywrightInternal } = require('@playwright/test/lib/server/playwright');2const { Playwright } = require('@playwright/test/lib/server/playwright');3const { BrowserContext } = require('@playwright/test/lib/server/browserContext');4const { Browser } = require('@playwright/test/lib/server/browser');5const { BrowserType } = require('@playwright/test/lib/server/browserType');6const { Page } = require('@playwright/test/lib/server/page');7const { Worker } = require('@playwright/test/lib/server/worker');8const { assert } = require('chai');9const internal = new PlaywrightInternal();10const playwright = new Playwright(internal);11const browserType = new BrowserType(internal, 'chromium');12const browser = new Browser(internal, browserType, 'browserId');13const context = new BrowserContext(internal, browser, 'contextId');14const page = new Page(internal, context, 'pageId');15const worker = new Worker(internal, page, 'workerId');16const derivedState = {17};18PlaywrightInternal.applyDerivedStateFromProps(worker, derivedState);19assert.equal(worker._browserName, 'chromium');20assert.equal(worker._browserVersion, '1.2.3');21assert.equal(worker._isMobile, false);22assert.equal(worker._isAndroid, false);23assert.equal(worker._isChromium, true);24assert.equal(worker._isFirefox, false);25assert.equal(worker._isWebKit, false);26assert.equal(worker._platform, 'linux');27assert.equal(worker._platformName, 'linux');28assert.equal(worker._deviceScaleFactor, 1);29assert.equal(worker._isMobile, false);30assert.equal(worker._isLandscape, false);31assert.equal(worker._hasTouch, false);32console.log('Test Passed');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright');2const { Internal } = require('playwright/lib/server/playwright');3const { Page } = require('playwright/lib/server/page');4const { Frame } = require('playwright/lib/server/frames');5const playwright = new Playwright();6const internal = new Internal(playwright);7const page = new Page(internal);8const frame = new Frame(page, 'mainFrame', null);9frame.applyDerivedStateFromProps({

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('@playwright/test');2const { applyDerivedStateFromProps } = Playwright;3applyDerivedStateFromProps({});4const { Playwright } = require('@playwright/test');5const { applyDerivedStateFromProps } = Playwright;6applyDerivedStateFromProps({});7const { Playwright } = require('@playwright/test');8const { applyDerivedStateFromProps } = Playwright;9applyDerivedStateFromProps({});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { PlaywrightInternal } = require('playwright');2const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;3const { test } = require('playwright-test');4test('test', async ({ page }) => {5 const { PlaywrightInternal } = require('playwright');6 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;7 await page.waitForSelector('input[title="Search"]');8 await page.fill('input[title="Search"]', 'Hello World');9 await page.keyboard.press('Enter');10 const { PlaywrightInternal } = require('playwright');11 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;12 await page.waitForSelector('text=Hello World');13 await page.click('text=Hello World');14 await page.waitForSelector('text=Hello World - Google Search');15 await page.click('text=Hello World - Google Search');16 await page.waitForSelector('text=Hello World - Google Search');17 await page.click('text=Hello World - Google Search');18});19const { PlaywrightInternal } = require('playwright');20const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;21const { test } = require('playwright-test');22test('test', async ({ page }) => {23 const { PlaywrightInternal } = require('playwright');24 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;25 await page.waitForSelector('input[title="Search"]');26 await page.fill('input[title="Search"]', 'Hello World');27 await page.keyboard.press('Enter');28 const { PlaywrightInternal } = require('playwright');29 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;30 await page.waitForSelector('text=Hello World');31 await page.click('text=Hello World');32 await page.waitForSelector('text=Hello World

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { applyDerivedStateFromProps } = require('@playwright/test/lib/test');2const { test } = require('@playwright/test');3test.describe('Test', () => {4 test('test', async ({ page }) => {5 await applyDerivedStateFromProps(page, {6 });7 });8});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { test, expect } = require('@playwright/test');2test('test', async ({ page }) => {3 const google = page.locator('div');4 const google1 = google.locator('div');5 const google2 = google1.locator('div');6 const google3 = google2.locator('div');7 const google4 = google3.locator('div');8 const google5 = google4.locator('div');9 const google6 = google5.locator('div');10 const google7 = google6.locator('div');11 const google8 = google7.locator('div');12 const google9 = google8.locator('div');13 const google10 = google9.locator('div');14 const google11 = google10.locator('div');15 const google12 = google11.locator('div');16 const google13 = google12.locator('div');17 const google14 = google13.locator('div');18 const google15 = google14.locator('div');19 const google16 = google15.locator('div');20 const google17 = google16.locator('div');21 const google18 = google17.locator('div');22 const google19 = google18.locator('div');23 const google20 = google19.locator('div');24 const google21 = google20.locator('div');25 const google22 = google21.locator('div');26 const google23 = google22.locator('div');27 const google24 = google23.locator('div');28 const google25 = google24.locator('div');29 const google26 = google25.locator('div');30 const google27 = google26.locator('div');31 const google28 = google27.locator('div');32 const google29 = google28.locator('div');33 const google30 = google29.locator('div');34 const google31 = google30.locator('div');35 const google32 = google31.locator('div');36 const google33 = google32.locator('div');37 const google34 = google33.locator('div');38 const google35 = google34.locator('div');39 const google36 = google35.locator('div');40 const google37 = google36.locator('div');41 const google38 = google37.locator('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwrightInternal = require('playwright/lib/server/playwright.js');2const { applyDerivedStateFromProps } = playwrightInternal.helper;3const { helper } = require('playwright/lib/server/helper.js');4const { Page } = require('playwright/lib/server/page.js');5const page = new Page();6const derivedState = {7 viewportSize: { width: 1000, height: 1000 },8};9applyDerivedStateFromProps(page, derivedState);

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