dc630d3374 · samitouri/QOS-React-2

packages/react-reconciler/src/ReactChildFiber.new.js

+1 -1

@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';

12 import type {BlockComponent} from 'react/src/ReactBlock';

13 import type {LazyComponent} from 'react/src/ReactLazy';

14 import type {Fiber} from './ReactInternalTypes';

15 -import type {ExpirationTime} from './ReactFiberExpirationTime';

15 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

16

17 import getComponentName from 'shared/getComponentName';

18 import {Placement, Deletion} from './ReactSideEffectTags';

packages/react-reconciler/src/ReactChildFiber.old.js

+1 -1

@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';

12 import type {BlockComponent} from 'react/src/ReactBlock';

13 import type {LazyComponent} from 'react/src/ReactLazy';

14 import type {Fiber} from './ReactInternalTypes';

15 -import type {ExpirationTime} from './ReactFiberExpirationTime';

15 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

16

17 import getComponentName from 'shared/getComponentName';

18 import {Placement, Deletion} from './ReactSideEffectTags';

packages/react-reconciler/src/ReactFiber.new.js

+2 -2

@@ -18,7 +18,7 @@ import type {Fiber} from './ReactInternalTypes';

18 import type {RootTag} from './ReactRootTags';

19 import type {WorkTag} from './ReactWorkTags';

20 import type {TypeOfMode} from './ReactTypeOfMode';

21 -import type {ExpirationTime} from './ReactFiberExpirationTime';

21 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

22 import type {SuspenseInstance} from './ReactFiberHostConfig';

23

24 import invariant from 'shared/invariant';

@@ -63,7 +63,7 @@ import {

63 resolveFunctionForHotReloading,

64 resolveForwardRefForHotReloading,

65 } from './ReactFiberHotReloading.new';

66 -import {NoWork} from './ReactFiberExpirationTime';

66 +import {NoWork} from './ReactFiberExpirationTime.new';

67 import {

68 NoMode,

69 ConcurrentMode,

packages/react-reconciler/src/ReactFiber.old.js

+2 -2

@@ -18,7 +18,7 @@ import type {Fiber} from './ReactInternalTypes';

18 import type {RootTag} from './ReactRootTags';

19 import type {WorkTag} from './ReactWorkTags';

20 import type {TypeOfMode} from './ReactTypeOfMode';

21 -import type {ExpirationTime} from './ReactFiberExpirationTime';

21 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

22 import type {SuspenseInstance} from './ReactFiberHostConfig';

23

24 import invariant from 'shared/invariant';

@@ -63,7 +63,7 @@ import {

63 resolveFunctionForHotReloading,

64 resolveForwardRefForHotReloading,

65 } from './ReactFiberHotReloading.old';

66 -import {NoWork} from './ReactFiberExpirationTime';

66 +import {NoWork} from './ReactFiberExpirationTime.old';

67 import {

68 NoMode,

69 ConcurrentMode,

packages/react-reconciler/src/ReactFiberBeginWork.new.js

+2 -2

@@ -12,7 +12,7 @@ import type {BlockComponent} from 'react/src/ReactBlock';

12 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';

13 import type {Fiber} from './ReactInternalTypes';

14 import type {FiberRoot} from './ReactInternalTypes';

15 -import type {ExpirationTime} from './ReactFiberExpirationTime';

15 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

16 import type {

17 SuspenseState,

18 SuspenseListRenderState,

@@ -100,7 +100,7 @@ import {

100 Never,

101 Sync,

102 computeAsyncExpiration,

103 -} from './ReactFiberExpirationTime';

103 +} from './ReactFiberExpirationTime.new';

104 import {

105 ConcurrentMode,

106 NoMode,

packages/react-reconciler/src/ReactFiberBeginWork.old.js

+2 -2

@@ -12,7 +12,7 @@ import type {BlockComponent} from 'react/src/ReactBlock';

12 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';

13 import type {Fiber} from './ReactInternalTypes';

14 import type {FiberRoot} from './ReactInternalTypes';

15 -import type {ExpirationTime} from './ReactFiberExpirationTime';

15 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

16 import type {

17 SuspenseState,

18 SuspenseListRenderState,

@@ -100,7 +100,7 @@ import {

100 Never,

101 Sync,

102 computeAsyncExpiration,

103 -} from './ReactFiberExpirationTime';

103 +} from './ReactFiberExpirationTime.old';

104 import {

105 ConcurrentMode,

106 NoMode,

packages/react-reconciler/src/ReactFiberClassComponent.new.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9

10 import type {Fiber} from './ReactInternalTypes';

11 -import type {ExpirationTime} from './ReactFiberExpirationTime';

11 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

12 import type {UpdateQueue} from './ReactUpdateQueue.new';

13

14 import * as React from 'react';

@@ -40,7 +40,7 @@ import {

40 initializeUpdateQueue,

41 cloneUpdateQueue,

42 } from './ReactUpdateQueue.new';

43 -import {NoWork} from './ReactFiberExpirationTime';

43 +import {NoWork} from './ReactFiberExpirationTime.new';

44 import {

45 cacheContext,

46 getMaskedContext,

packages/react-reconciler/src/ReactFiberClassComponent.old.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9

10 import type {Fiber} from './ReactInternalTypes';

11 -import type {ExpirationTime} from './ReactFiberExpirationTime';

11 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

12 import type {UpdateQueue} from './ReactUpdateQueue.old';

13

14 import * as React from 'react';

@@ -40,7 +40,7 @@ import {

40 initializeUpdateQueue,

41 cloneUpdateQueue,

42 } from './ReactUpdateQueue.old';

43 -import {NoWork} from './ReactFiberExpirationTime';

43 +import {NoWork} from './ReactFiberExpirationTime.old';

44 import {

45 cacheContext,

46 getMaskedContext,

packages/react-reconciler/src/ReactFiberCommitWork.new.js

+1 -1

@@ -17,7 +17,7 @@ import type {

17 } from './ReactFiberHostConfig';

18 import type {Fiber} from './ReactInternalTypes';

19 import type {FiberRoot} from './ReactInternalTypes';

20 -import type {ExpirationTime} from './ReactFiberExpirationTime';

20 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

21 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';

22 import type {UpdateQueue} from './ReactUpdateQueue.new';

23 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';

packages/react-reconciler/src/ReactFiberCommitWork.old.js

+1 -1

@@ -17,7 +17,7 @@ import type {

17 } from './ReactFiberHostConfig';

18 import type {Fiber} from './ReactInternalTypes';

19 import type {FiberRoot} from './ReactInternalTypes';

20 -import type {ExpirationTime} from './ReactFiberExpirationTime';

20 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

21 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';

22 import type {UpdateQueue} from './ReactUpdateQueue.old';

23 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9

10 import type {Fiber} from './ReactInternalTypes';

11 -import type {ExpirationTime} from './ReactFiberExpirationTime';

11 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

12 import type {

13 ReactFundamentalComponentInstance,

14 ReactScopeInstance,

@@ -129,7 +129,7 @@ import {

129 renderHasNotSuspendedYet,

130 } from './ReactFiberWorkLoop.new';

131 import {createFundamentalStateInstance} from './ReactFiberFundamental.new';

132 -import {Never} from './ReactFiberExpirationTime';

132 +import {Never} from './ReactFiberExpirationTime.new';

133 import {resetChildFibers} from './ReactChildFiber.new';

134 import {updateDeprecatedEventListeners} from './ReactFiberDeprecatedEvents.new';

135 import {createScopeMethods} from './ReactFiberScope.new';

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9

10 import type {Fiber} from './ReactInternalTypes';

11 -import type {ExpirationTime} from './ReactFiberExpirationTime';

11 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

12 import type {

13 ReactFundamentalComponentInstance,

14 ReactScopeInstance,

@@ -129,7 +129,7 @@ import {

129 renderHasNotSuspendedYet,

130 } from './ReactFiberWorkLoop.old';

131 import {createFundamentalStateInstance} from './ReactFiberFundamental.old';

132 -import {Never} from './ReactFiberExpirationTime';

132 +import {Never} from './ReactFiberExpirationTime.old';

133 import {resetChildFibers} from './ReactChildFiber.old';

134 import {updateDeprecatedEventListeners} from './ReactFiberDeprecatedEvents.old';

135 import {createScopeMethods} from './ReactFiberScope.old';

packages/react-reconciler/src/ReactFiberDeprecatedEvents.new.js

+1 -1

@@ -19,7 +19,7 @@ import {

19 DEPRECATED_mountResponderInstance,

20 DEPRECATED_unmountResponderInstance,

21 } from './ReactFiberHostConfig';

22 -import {NoWork} from './ReactFiberExpirationTime';

22 +import {NoWork} from './ReactFiberExpirationTime.new';

23

24 import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';

25

packages/react-reconciler/src/ReactFiberDeprecatedEvents.old.js

+1 -1

@@ -19,7 +19,7 @@ import {

19 DEPRECATED_mountResponderInstance,

20 DEPRECATED_unmountResponderInstance,

21 } from './ReactFiberHostConfig';

22 -import {NoWork} from './ReactFiberExpirationTime';

22 +import {NoWork} from './ReactFiberExpirationTime.old';

23

24 import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';

25

packages/react-reconciler/src/ReactFiberDevToolsHook.new.js

+2 -2

@@ -9,11 +9,11 @@

9

10 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';

11 import {getCurrentTime} from './ReactFiberWorkLoop.new';

12 -import {inferPriorityFromExpirationTime} from './ReactFiberExpirationTime';

12 +import {inferPriorityFromExpirationTime} from './ReactFiberExpirationTime.new';

13

14 import type {Fiber} from './ReactInternalTypes';

15 import type {FiberRoot} from './ReactInternalTypes';

16 -import type {ExpirationTime} from './ReactFiberExpirationTime';

16 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

17 import type {ReactNodeList} from 'shared/ReactTypes';

18

19 import {DidCapture} from './ReactSideEffectTags';

packages/react-reconciler/src/ReactFiberDevToolsHook.old.js

+2 -2

@@ -9,11 +9,11 @@

9

10 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';

11 import {getCurrentTime} from './ReactFiberWorkLoop.old';

12 -import {inferPriorityFromExpirationTime} from './ReactFiberExpirationTime';

12 +import {inferPriorityFromExpirationTime} from './ReactFiberExpirationTime.old';

13

14 import type {Fiber} from './ReactInternalTypes';

15 import type {FiberRoot} from './ReactInternalTypes';

16 -import type {ExpirationTime} from './ReactFiberExpirationTime';

16 +import type {ExpirationTime} from './ReactFiberExpirationTime.old';

17 import type {ReactNodeList} from 'shared/ReactTypes';

18

19 import {DidCapture} from './ReactSideEffectTags';

packages/react-reconciler/src/ReactFiberExpirationTime.new.js new

+147

@@ -0,0 +1,147 @@

1 +/**

2 + * Copyright (c) Facebook, Inc. and its affiliates.

3 + *

4 + * This source code is licensed under the MIT license found in the

5 + * LICENSE file in the root directory of this source tree.

6 + *

7 + * @flow

8 + */

9 +

10 +import type {ReactPriorityLevel} from './ReactInternalTypes';

11 +

12 +import {MAX_SIGNED_31_BIT_INT} from './MaxInts';

13 +

14 +import {

15 + ImmediatePriority,

16 + UserBlockingPriority,

17 + NormalPriority,

18 + IdlePriority,

19 +} from './SchedulerWithReactIntegration.new';

20 +

21 +export type ExpirationTime = number;

22 +

23 +export const NoWork = 0;

24 +// TODO: Think of a better name for Never. The key difference with Idle is that

25 +// Never work can be committed in an inconsistent state without tearing the UI.

26 +// The main example is offscreen content, like a hidden subtree. So one possible

27 +// name is Offscreen. However, it also includes dehydrated Suspense boundaries,

28 +// which are inconsistent in the sense that they haven't finished yet, but

29 +// aren't visibly inconsistent because the server rendered HTML matches what the

30 +// hydrated tree would look like.

31 +export const Never = 1;

32 +// Idle is slightly higher priority than Never. It must completely finish in

33 +// order to be consistent.

34 +export const Idle = 2;

35 +// Continuous Hydration is slightly higher than Idle and is used to increase

36 +// priority of hover targets.

37 +export const ContinuousHydration = 3;

38 +export const Sync = MAX_SIGNED_31_BIT_INT;

39 +export const Batched = Sync - 1;

40 +

41 +const UNIT_SIZE = 10;

42 +const MAGIC_NUMBER_OFFSET = Batched - 1;

43 +

44 +// 1 unit of expiration time represents 10ms.

45 +export function msToExpirationTime(ms: number): ExpirationTime {

46 + // Always subtract from the offset so that we don't clash with the magic number for NoWork.

47 + return MAGIC_NUMBER_OFFSET - ((ms / UNIT_SIZE) | 0);

48 +}

49 +

50 +export function expirationTimeToMs(expirationTime: ExpirationTime): number {

51 + return (MAGIC_NUMBER_OFFSET - expirationTime) * UNIT_SIZE;

52 +}

53 +

54 +function ceiling(num: number, precision: number): number {

55 + return (((num / precision) | 0) + 1) * precision;

56 +}

57 +

58 +function computeExpirationBucket(

59 + currentTime,

60 + expirationInMs,

61 + bucketSizeMs,

62 +): ExpirationTime {

63 + return (

64 + MAGIC_NUMBER_OFFSET -

65 + ceiling(

66 + MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE,

67 + bucketSizeMs / UNIT_SIZE,

68 + )

69 + );

70 +}

71 +

72 +// TODO: This corresponds to Scheduler's NormalPriority, not LowPriority. Update

73 +// the names to reflect.

74 +export const LOW_PRIORITY_EXPIRATION = 5000;

75 +export const LOW_PRIORITY_BATCH_SIZE = 250;

76 +

77 +export function computeAsyncExpiration(

78 + currentTime: ExpirationTime,

79 +): ExpirationTime {

80 + return computeExpirationBucket(

81 + currentTime,

82 + LOW_PRIORITY_EXPIRATION,

83 + LOW_PRIORITY_BATCH_SIZE,

84 + );

85 +}

86 +

87 +export function computeSuspenseExpiration(

88 + currentTime: ExpirationTime,

89 + timeoutMs: number,

90 +): ExpirationTime {

91 + // TODO: Should we warn if timeoutMs is lower than the normal pri expiration time?

92 + return computeExpirationBucket(

93 + currentTime,

94 + timeoutMs,

95 + LOW_PRIORITY_BATCH_SIZE,

96 + );

97 +}

98 +

99 +// We intentionally set a higher expiration time for interactive updates in

100 +// dev than in production.

101 +//

102 +// If the main thread is being blocked so long that you hit the expiration,

103 +// it's a problem that could be solved with better scheduling.

104 +//

105 +// People will be more likely to notice this and fix it with the long

106 +// expiration time in development.

107 +//

108 +// In production we opt for better UX at the risk of masking scheduling

109 +// problems, by expiring fast.

110 +export const HIGH_PRIORITY_EXPIRATION = __DEV__ ? 500 : 150;

111 +export const HIGH_PRIORITY_BATCH_SIZE = 100;

112 +

113 +export function computeInteractiveExpiration(currentTime: ExpirationTime) {

114 + return computeExpirationBucket(

115 + currentTime,

116 + HIGH_PRIORITY_EXPIRATION,

117 + HIGH_PRIORITY_BATCH_SIZE,

118 + );

119 +}

120 +

121 +export function inferPriorityFromExpirationTime(

122 + currentTime: ExpirationTime,

123 + expirationTime: ExpirationTime,

124 +): ReactPriorityLevel {

125 + if (expirationTime === Sync) {

126 + return ImmediatePriority;

127 + }

128 + if (expirationTime === Never || expirationTime === Idle) {

129 + return IdlePriority;

130 + }

131 + const msUntil =

132 + expirationTimeToMs(expirationTime) - expirationTimeToMs(currentTime);

133 + if (msUntil <= 0) {

134 + return ImmediatePriority;

135 + }

136 + if (msUntil <= HIGH_PRIORITY_EXPIRATION + HIGH_PRIORITY_BATCH_SIZE) {

137 + return UserBlockingPriority;

138 + }

139 + if (msUntil <= LOW_PRIORITY_EXPIRATION + LOW_PRIORITY_BATCH_SIZE) {

140 + return NormalPriority;

141 + }

142 +

143 + // TODO: Handle LowPriority

144 +

145 + // Assume anything lower has idle priority

146 + return IdlePriority;

147 +}

packages/react-reconciler/src/ReactFiberExpirationTime.old.js renamed

packages/react-reconciler/src/ReactFiberHooks.new.js

+2 -2

@@ -17,7 +17,7 @@ import type {

17 ReactScopeMethods,

18 } from 'shared/ReactTypes';

19 import type {Fiber, Dispatcher} from './ReactInternalTypes';

20 -import type {ExpirationTime} from './ReactFiberExpirationTime';

20 +import type {ExpirationTime} from './ReactFiberExpirationTime.new';

21 import type {HookEffectTag} from './ReactHookEffectTags';

22 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';

23 import type {ReactPriorityLevel} from './ReactInternalTypes';

@@ -33,7 +33,7 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';

33 import {enableUseEventAPI} from 'shared/ReactFeatureFlags';

34

35 import {markRootExpiredAtTime} from './ReactFiberRoot.new';

36 -import {NoWork, Sync} from './ReactFiberExpirationTime';

36 +import {NoWork, Sync} from './ReactFiberExpirationTime.new';

37 import {NoMode, BlockingMode} from './ReactTypeOfMode';

38 import {readContext} from './ReactFiberNewContext.new';

39 import {createDeprecatedResponderListener} from './ReactFiberDeprecatedEvents.new';

packages/react-reconciler/src/ReactFiberHooks.old.js