{"commit":{"revision":"aa88589d0b56521512e864243744513ee1f93a81","shortRevision":"aa88589d0b","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2020-05-01T19:01:43+01:00","subject":"Refine experimental Scopes API (#18778)"},"parents":["d804f99b9e4409a1d11212fb889450ab75243d5b"],"body":"* Refine experimental Scopes API","files":[{"status":"M","path":"packages\/react-art\/src\/ReactARTHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMComponentTree.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/createReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js"},{"status":"A","path":"packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoScopes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScope.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberScope.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"},{"status":"M","path":"scripts\/error-codes\/codes.json"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex 18395feffc..28c76b9752 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -243,6 +243,7 @@ function applyTextProps(instance, props, prevProps = {}) {\n \n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoPersistence';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoHydration';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoScopes';\n \n export function appendInitialChild(parentInstance, child) {\n if (typeof child === 'string') {\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\nindex 9ac7aee0a6..c458093a83 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n@@ -8,6 +8,7 @@\n *\/\n \n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n+import type {ReactScopeInstance} from 'shared\/ReactTypes';\n import type {\n Container,\n TextInstance,\n@@ -23,10 +24,12 @@ import {\n HostRoot,\n SuspenseComponent,\n } from 'react-reconciler\/src\/ReactWorkTags';\n-import invariant from 'shared\/invariant';\n \n import {getParentSuspenseInstance} from '.\/ReactDOMHostConfig';\n \n+import invariant from 'shared\/invariant';\n+import {enableScopeAPI} from 'shared\/ReactFeatureFlags';\n+\n const randomKey = Math.random()\n .toString(36)\n .slice(2);\n@@ -47,7 +50,7 @@ export type ElementListenerMapEntry = {\n \n export function precacheFiberNode(\n hostInst: Fiber,\n- node: Instance | TextInstance | SuspenseInstance,\n+ node: Instance | TextInstance | SuspenseInstance | ReactScopeInstance,\n ): void {\n (node: any)[internalInstanceKey] = hostInst;\n }\n@@ -205,3 +208,12 @@ export function getEventListenerMap(node: EventTarget): ElementListenerMap {\n }\n return elementListenerMap;\n }\n+\n+export function getFiberFromScopeInstance(\n+ scope: ReactScopeInstance,\n+): null | Fiber {\n+ if (enableScopeAPI) {\n+ return (scope: any)[internalInstanceKey] || null;\n+ }\n+ return null;\n+}\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 0fbeaed352..8988bc5a3a 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -9,6 +9,7 @@\n \n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n import type {RootType} from '.\/ReactDOMRoot';\n+import type {ReactScopeInstance} from 'shared\/ReactTypes';\n import type {\n ReactDOMEventResponder,\n ReactDOMEventResponderInstance,\n@@ -19,6 +20,7 @@ import {\n precacheFiberNode,\n updateFiberProps,\n getClosestInstanceFromNode,\n+ getFiberFromScopeInstance,\n } from '.\/ReactDOMComponentTree';\n import {\n createElement,\n@@ -65,6 +67,7 @@ import {\n enableDeprecatedFlareAPI,\n enableFundamentalAPI,\n enableModernEventSystem,\n+ enableScopeAPI,\n } from 'shared\/ReactFeatureFlags';\n import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n import {listenToEvent} from '..\/events\/DOMModernPluginEventSystem';\n@@ -1117,3 +1120,25 @@ export function preparePortalMount(portalInstance: Instance): void {\n listenToEvent('onMouseEnter', portalInstance);\n }\n }\n+\n+export function prepareScopeUpdate(\n+ scopeInstance: ReactScopeInstance,\n+ internalInstanceHandle: Object,\n+): void {\n+ if (enableScopeAPI) {\n+ precacheFiberNode(internalInstanceHandle, scopeInstance);\n+ }\n+}\n+\n+export function prepareScopeUnmount(scopeInstance: Object): void {\n+ \/\/ TODO when we add createEventHandle\n+}\n+\n+export function getInstanceFromScope(\n+ scopeInstance: ReactScopeInstance,\n+): null | Object {\n+ if (enableScopeAPI) {\n+ return getFiberFromScopeInstance(scopeInstance);\n+ }\n+ return null;\n+}\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 5387d6de4b..f5511bbbd7 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -14,7 +14,7 @@ import type {\n ElementListenerMapEntry,\n } from '..\/client\/ReactDOMComponentTree';\n import type {EventSystemFlags} from '.\/EventSystemFlags';\n-import type {EventPriority, ReactScopeMethods} from 'shared\/ReactTypes';\n+import type {EventPriority} from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {PluginModule} from 'legacy-events\/PluginModuleType';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n@@ -381,22 +381,6 @@ function isMatchingRootContainer(\n );\n }\n \n-export function isManagedDOMElement(\n- target: EventTarget | ReactScopeMethods,\n-): boolean {\n- return getClosestInstanceFromNode(((target: any): Node)) !== null;\n-}\n-\n-export function isValidEventTarget(\n- target: EventTarget | ReactScopeMethods,\n-): boolean {\n- return typeof (target: Object).addEventListener === 'function';\n-}\n-\n-export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {\n- return typeof (target: Object).getChildContextValues === 'function';\n-}\n-\n export function dispatchEventForPluginEventSystem(\n topLevelType: DOMTopLevelEventType,\n eventSystemFlags: EventSystemFlags,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex fa3b25103f..1790295de4 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -183,6 +183,7 @@ class ReactFabricHostComponent {\n \n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoMutation';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoHydration';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoScopes';\n \n export function appendInitialChild(\n parentInstance: Instance,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex 5fe7ffd1bf..89bc375928 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -87,6 +87,7 @@ function recursivelyUncacheFiberNode(node: Instance | TextInstance) {\n \n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoPersistence';\n export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoHydration';\n+export * from 'react-reconciler\/src\/ReactFiberHostConfigWithNoScopes';\n \n export function appendInitialChild(\n parentInstance: Instance,\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 227b24d3b9..6c2417a22f 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -457,6 +457,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n preparePortalMount() {\n \/\/ NO-OP\n },\n+\n+ prepareScopeUpdate() {},\n+\n+ prepareScopeUnmount() {},\n+\n+ getInstanceFromScope() {\n+ throw new Error('Not yet implemented.');\n+ },\n };\n \n const hostConfig = useMutation\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex 1defb7340b..8e71d3a99b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -115,6 +115,8 @@ import {\n commitHydratedSuspenseInstance,\n beforeRemoveInstance,\n clearContainer,\n+ prepareScopeUpdate,\n+ prepareScopeUnmount,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -890,7 +892,7 @@ function commitAttachRef(finishedWork: Fiber) {\n }\n \/\/ Moved outside to ensure DCE works with this flag\n if (enableScopeAPI && finishedWork.tag === ScopeComponent) {\n- instanceToUse = instance.methods;\n+ instanceToUse = instance;\n }\n if (typeof ref === 'function') {\n ref(instanceToUse);\n@@ -1065,10 +1067,12 @@ function commitUnmount(\n return;\n }\n case ScopeComponent: {\n- if (enableDeprecatedFlareAPI) {\n- unmountDeprecatedResponderListeners(current);\n- }\n if (enableScopeAPI) {\n+ if (enableDeprecatedFlareAPI) {\n+ unmountDeprecatedResponderListeners(current);\n+ }\n+ const scopeInstance = current.stateNode;\n+ prepareScopeUnmount(scopeInstance);\n safelyDetachRef(current);\n }\n return;\n@@ -1721,7 +1725,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ScopeComponent: {\n if (enableScopeAPI) {\n const scopeInstance = finishedWork.stateNode;\n- scopeInstance.fiber = finishedWork;\n if (enableDeprecatedFlareAPI) {\n const newProps = finishedWork.memoizedProps;\n const oldProps = current !== null ? current.memoizedProps : newProps;\n@@ -1731,6 +1734,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n updateDeprecatedEventListeners(nextListeners, finishedWork, null);\n }\n }\n+ prepareScopeUpdate(scopeInstance, finishedWork);\n return;\n }\n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 5b65fdded4..16c25e1593 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -112,6 +112,8 @@ import {\n commitHydratedSuspenseInstance,\n beforeRemoveInstance,\n clearContainer,\n+ prepareScopeUpdate,\n+ prepareScopeUnmount,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -888,7 +890,7 @@ function commitAttachRef(finishedWork: Fiber) {\n }\n \/\/ Moved outside to ensure DCE works with this flag\n if (enableScopeAPI && finishedWork.tag === ScopeComponent) {\n- instanceToUse = instance.methods;\n+ instanceToUse = instance;\n }\n if (typeof ref === 'function') {\n ref(instanceToUse);\n@@ -1063,10 +1065,12 @@ function commitUnmount(\n return;\n }\n case ScopeComponent: {\n- if (enableDeprecatedFlareAPI) {\n- unmountDeprecatedResponderListeners(current);\n- }\n if (enableScopeAPI) {\n+ if (enableDeprecatedFlareAPI) {\n+ unmountDeprecatedResponderListeners(current);\n+ }\n+ const scopeInstance = current.stateNode;\n+ prepareScopeUnmount(scopeInstance);\n safelyDetachRef(current);\n }\n return;\n@@ -1715,7 +1719,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case ScopeComponent: {\n if (enableScopeAPI) {\n const scopeInstance = finishedWork.stateNode;\n- scopeInstance.fiber = finishedWork;\n if (enableDeprecatedFlareAPI) {\n const newProps = finishedWork.memoizedProps;\n const oldProps = current !== null ? current.memoizedProps : newProps;\n@@ -1725,6 +1728,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n updateDeprecatedEventListeners(nextListeners, finishedWork, null);\n }\n }\n+ prepareScopeUpdate(scopeInstance, finishedWork);\n return;\n }\n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex 653a5f1584..e228067323 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -87,6 +87,7 @@ import {\n cloneFundamentalInstance,\n shouldUpdateFundamentalComponent,\n preparePortalMount,\n+ prepareScopeUpdate,\n } from '.\/ReactFiberHostConfig';\n import {\n getRootHostContainer,\n@@ -138,7 +139,7 @@ import {createFundamentalStateInstance} from '.\/ReactFiberFundamental.new';\n import {Never, isSameOrHigherPriority} from '.\/ReactFiberExpirationTime.new';\n import {resetChildFibers} from '.\/ReactChildFiber.new';\n import {updateDeprecatedEventListeners} from '.\/ReactFiberDeprecatedEvents.new';\n-import {createScopeMethods} from '.\/ReactFiberScope.new';\n+import {createScopeInstance} from '.\/ReactFiberScope.new';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -1247,13 +1248,8 @@ function completeWork(\n case ScopeComponent: {\n if (enableScopeAPI) {\n if (current === null) {\n- const type = workInProgress.type;\n- const scopeInstance: ReactScopeInstance = {\n- fiber: workInProgress,\n- methods: null,\n- };\n+ const scopeInstance: ReactScopeInstance = createScopeInstance();\n workInProgress.stateNode = scopeInstance;\n- scopeInstance.methods = createScopeMethods(type, scopeInstance);\n if (enableDeprecatedFlareAPI) {\n const listeners = newProps.DEPRECATED_flareListeners;\n if (listeners != null) {\n@@ -1265,6 +1261,7 @@ function completeWork(\n );\n }\n }\n+ prepareScopeUpdate(scopeInstance, workInProgress);\n if (workInProgress.ref !== null) {\n markRef(workInProgress);\n markUpdate(workInProgress);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex 82ec4d95f7..d024c9711c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -84,6 +84,7 @@ import {\n cloneFundamentalInstance,\n shouldUpdateFundamentalComponent,\n preparePortalMount,\n+ prepareScopeUpdate,\n } from '.\/ReactFiberHostConfig';\n import {\n getRootHostContainer,\n@@ -134,7 +135,7 @@ import {createFundamentalStateInstance} from '.\/ReactFiberFundamental.old';\n import {Never} from '.\/ReactFiberExpirationTime.old';\n import {resetChildFibers} from '.\/ReactChildFiber.old';\n import {updateDeprecatedEventListeners} from '.\/ReactFiberDeprecatedEvents.old';\n-import {createScopeMethods} from '.\/ReactFiberScope.old';\n+import {createScopeInstance} from '.\/ReactFiberScope.old';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -1262,13 +1263,8 @@ function completeWork(\n case ScopeComponent: {\n if (enableScopeAPI) {\n if (current === null) {\n- const type = workInProgress.type;\n- const scopeInstance: ReactScopeInstance = {\n- fiber: workInProgress,\n- methods: null,\n- };\n+ const scopeInstance: ReactScopeInstance = createScopeInstance();\n workInProgress.stateNode = scopeInstance;\n- scopeInstance.methods = createScopeMethods(type, scopeInstance);\n if (enableDeprecatedFlareAPI) {\n const listeners = newProps.DEPRECATED_flareListeners;\n if (listeners != null) {\n@@ -1280,6 +1276,7 @@ function completeWork(\n );\n }\n }\n+ prepareScopeUpdate(scopeInstance, workInProgress);\n if (workInProgress.ref !== null) {\n markRef(workInProgress);\n markUpdate(workInProgress);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoScopes.js b\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoScopes.js\nnew file mode 100644\nindex 0000000000..1c784ff529\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoScopes.js\n@@ -0,0 +1,27 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import invariant from 'shared\/invariant';\n+\n+\/\/ Renderers that don't support React Scopes\n+\/\/ can re-export everything from this module.\n+\n+function shim(...args: any) {\n+ invariant(\n+ false,\n+ 'The current renderer does not support React Scopes. ' +\n+ 'This error is likely caused by a bug in React. ' +\n+ 'Please file an issue.',\n+ );\n+}\n+\n+\/\/ React Scopes (when unsupported)\n+export const prepareScopeUpdate = shim;\n+export const prepareScopeUnmount = shim;\n+export const getInstanceFromScope = shim;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScope.new.js b\/packages\/react-reconciler\/src\/ReactFiberScope.new.js\nindex 1ee2083560..ccc589a9df 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScope.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScope.new.js\n@@ -9,14 +9,16 @@\n \n import type {Fiber} from '.\/ReactInternalTypes';\n import type {\n- ReactScope,\n ReactScopeInstance,\n- ReactScopeMethods,\n ReactContext,\n ReactScopeQuery,\n } from 'shared\/ReactTypes';\n \n-import {getPublicInstance, getInstanceFromNode} from '.\/ReactFiberHostConfig';\n+import {\n+ getPublicInstance,\n+ getInstanceFromNode,\n+ getInstanceFromScope,\n+} from '.\/ReactFiberHostConfig';\n import {isFiberSuspenseAndTimedOut} from '.\/ReactFiberTreeReflection';\n \n import {HostComponent, ScopeComponent, ContextProvider} from '.\/ReactWorkTags';\n@@ -138,50 +140,60 @@ function collectNearestChildContextValues(\n }\n }\n \n-export function createScopeMethods(\n- scope: ReactScope,\n- instance: ReactScopeInstance,\n-): ReactScopeMethods {\n+function DO_NOT_USE_queryAllNodes(fn: ReactScopeQuery): null | Array

dillon1000/react

Files changed