{"parents":["77196100b833cca83a928caa2bd02482665546c2"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationRefs-test.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-is\/src\/ReactIs.js"},{"status":"M","path":"packages\/react-is\/src\/__tests__\/ReactIs-test.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js"},{"status":"M","path":"packages\/react\/src\/React.js"},{"status":"M","path":"packages\/react\/src\/ReactElementValidator.js"},{"status":"A","path":"packages\/react\/src\/__tests__\/forwardRef-test.internal.js"},{"status":"A","path":"packages\/react\/src\/forwardRef.js"},{"status":"M","path":"packages\/shared\/ReactSymbols.js"},{"status":"M","path":"packages\/shared\/ReactTypeOfWork.js"}],"commit":{"shortRevision":"bc70441c8b","authorEmail":"brian.david.vaughn@gmail.com","revision":"bc70441c8b3fa85338283af3eeb47b5d15e9dbfe","authorName":"Brian Vaughn","authoredAt":"2018-03-14T13:07:58-07:00","subject":"RFC #30: React.forwardRef implementation (#12346)"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationRefs-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationRefs-test.js\nindex 974d69497d..37a83b2ff2 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationRefs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationRefs-test.js\n@@ -96,4 +96,25 @@ describe('ReactDOMServerIntegration', () => {\n expect(component.refs.myDiv).toBe(root.firstChild);\n });\n });\n+\n+ it('should forward refs', async () => {\n+ const divRef = React.createRef();\n+\n+ class InnerComponent extends React.Component {\n+ render() {\n+ return

{this.props.value}<\/div>;\n+ }\n+ }\n+\n+ const OuterComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ await clientRenderOnServerString(\n+ ,\n+ );\n+\n+ expect(divRef.current).not.toBe(null);\n+ expect(divRef.current.textContent).toBe('hello');\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex b7742df2f6..1cede6e411 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -27,6 +27,7 @@ import describeComponentFrame from 'shared\/describeComponentFrame';\n import {ReactDebugCurrentFrame} from 'shared\/ReactGlobalSharedState';\n import {warnAboutDeprecatedLifecycles} from 'shared\/ReactFeatureFlags';\n import {\n+ REACT_FORWARD_REF_TYPE,\n REACT_FRAGMENT_TYPE,\n REACT_STRICT_MODE_TYPE,\n REACT_ASYNC_MODE_TYPE,\n@@ -841,6 +842,25 @@ class ReactDOMServerRenderer {\n }\n if (typeof elementType === 'object' && elementType !== null) {\n switch (elementType.$$typeof) {\n+ case REACT_FORWARD_REF_TYPE: {\n+ const element: ReactElement = ((nextChild: any): ReactElement);\n+ const nextChildren = toArray(\n+ elementType.render(element.props, element.ref),\n+ );\n+ const frame: Frame = {\n+ type: null,\n+ domNamespace: parentNamespace,\n+ children: nextChildren,\n+ childIndex: 0,\n+ context: context,\n+ footer: '',\n+ };\n+ if (__DEV__) {\n+ ((frame: any): FrameDev).debugElementStack = [];\n+ }\n+ this.stack.push(frame);\n+ return '';\n+ }\n case REACT_PROVIDER_TYPE: {\n const provider: ReactProvider = (nextChild: any);\n const nextProps = provider.props;\ndiff --git a\/packages\/react-is\/src\/ReactIs.js b\/packages\/react-is\/src\/ReactIs.js\nindex d26bc82f5e..0265055e02 100644\n--- a\/packages\/react-is\/src\/ReactIs.js\n+++ b\/packages\/react-is\/src\/ReactIs.js\n@@ -13,6 +13,7 @@ import {\n REACT_ASYNC_MODE_TYPE,\n REACT_CONTEXT_TYPE,\n REACT_ELEMENT_TYPE,\n+ REACT_FORWARD_REF_TYPE,\n REACT_FRAGMENT_TYPE,\n REACT_PORTAL_TYPE,\n REACT_PROVIDER_TYPE,\n@@ -37,6 +38,7 @@ export function typeOf(object: any) {\n \n switch ($$typeofType) {\n case REACT_CONTEXT_TYPE:\n+ case REACT_FORWARD_REF_TYPE:\n case REACT_PROVIDER_TYPE:\n return $$typeofType;\n default:\n@@ -55,6 +57,7 @@ export const AsyncMode = REACT_ASYNC_MODE_TYPE;\n export const ContextConsumer = REACT_CONTEXT_TYPE;\n export const ContextProvider = REACT_PROVIDER_TYPE;\n export const Element = REACT_ELEMENT_TYPE;\n+export const ForwardRef = REACT_FORWARD_REF_TYPE;\n export const Fragment = REACT_FRAGMENT_TYPE;\n export const Portal = REACT_PORTAL_TYPE;\n export const StrictMode = REACT_STRICT_MODE_TYPE;\n@@ -75,6 +78,9 @@ export function isElement(object: any) {\n object.$$typeof === REACT_ELEMENT_TYPE\n );\n }\n+export function isForwardRef(object: any) {\n+ return typeOf(object) === REACT_FORWARD_REF_TYPE;\n+}\n export function isFragment(object: any) {\n return typeOf(object) === REACT_FRAGMENT_TYPE;\n }\ndiff --git a\/packages\/react-is\/src\/__tests__\/ReactIs-test.js b\/packages\/react-is\/src\/__tests__\/ReactIs-test.js\nindex 6200388fd5..ab7f6e0d4c 100644\n--- a\/packages\/react-is\/src\/__tests__\/ReactIs-test.js\n+++ b\/packages\/react-is\/src\/__tests__\/ReactIs-test.js\n@@ -76,6 +76,15 @@ describe('ReactIs', () => {\n expect(ReactIs.isElement()).toBe(true);\n });\n \n+ it('should identify ref forwarding component', () => {\n+ const RefForwardingComponent = React.forwardRef((props, ref) => null);\n+ expect(ReactIs.typeOf()).toBe(ReactIs.ForwardRef);\n+ expect(ReactIs.isForwardRef()).toBe(true);\n+ expect(ReactIs.isForwardRef({type: ReactIs.StrictMode})).toBe(false);\n+ expect(ReactIs.isForwardRef()).toBe(false);\n+ expect(ReactIs.isForwardRef(

)).toBe(false);\n+ });\n+\n it('should identify fragments', () => {\n expect(ReactIs.typeOf()).toBe(ReactIs.Fragment);\n expect(ReactIs.isFragment()).toBe(true);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.js b\/packages\/react-reconciler\/src\/ReactFiber.js\nindex eea42369de..6c88c0aa18 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.js\n@@ -25,6 +25,7 @@ import {\n HostPortal,\n CallComponent,\n ReturnComponent,\n+ ForwardRef,\n Fragment,\n Mode,\n ContextProvider,\n@@ -35,6 +36,7 @@ import getComponentName from 'shared\/getComponentName';\n import {NoWork} from '.\/ReactFiberExpirationTime';\n import {NoContext, AsyncMode, StrictMode} from '.\/ReactTypeOfMode';\n import {\n+ REACT_FORWARD_REF_TYPE,\n REACT_FRAGMENT_TYPE,\n REACT_RETURN_TYPE,\n REACT_CALL_TYPE,\n@@ -357,6 +359,9 @@ export function createFiberFromElement(\n \/\/ This is a consumer\n fiberTag = ContextConsumer;\n break;\n+ case REACT_FORWARD_REF_TYPE:\n+ fiberTag = ForwardRef;\n+ break;\n default:\n if (typeof type.tag === 'number') {\n \/\/ Currently assumed to be a continuation and therefore is a\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 95914814bc..039fe24032 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -26,6 +26,7 @@ import {\n CallComponent,\n CallHandlerPhase,\n ReturnComponent,\n+ ForwardRef,\n Fragment,\n Mode,\n ContextProvider,\n@@ -153,6 +154,17 @@ export default function(\n }\n }\n \n+ function updateForwardRef(current, workInProgress) {\n+ const render = workInProgress.type.render;\n+ const nextChildren = render(\n+ workInProgress.pendingProps,\n+ workInProgress.ref,\n+ );\n+ reconcileChildren(current, workInProgress, nextChildren);\n+ memoizeProps(workInProgress, nextChildren);\n+ return workInProgress.child;\n+ }\n+\n function updateFragment(current, workInProgress) {\n const nextChildren = workInProgress.pendingProps;\n if (hasLegacyContextChanged()) {\n@@ -1130,6 +1142,8 @@ export default function(\n workInProgress,\n renderExpirationTime,\n );\n+ case ForwardRef:\n+ return updateForwardRef(current, workInProgress);\n case Fragment:\n return updateFragment(current, workInProgress);\n case Mode:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex 9e796dd53c..3fb99ef2c2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -32,6 +32,7 @@ import {\n ReturnComponent,\n ContextProvider,\n ContextConsumer,\n+ ForwardRef,\n Fragment,\n Mode,\n } from 'shared\/ReactTypeOfWork';\n@@ -603,6 +604,8 @@ export default function(\n case ReturnComponent:\n \/\/ Does nothing.\n return null;\n+ case ForwardRef:\n+ return null;\n case Fragment:\n return null;\n case Mode:\ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex a2feefed09..d3a52cf61c 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -24,6 +24,7 @@ import {\n isValidElement,\n } from '.\/ReactElement';\n import {createContext} from '.\/ReactContext';\n+import forwardRef from '.\/forwardRef';\n import {\n createElementWithValidation,\n createFactoryWithValidation,\n@@ -45,6 +46,7 @@ const React = {\n PureComponent,\n \n createContext,\n+ forwardRef,\n \n Fragment: REACT_FRAGMENT_TYPE,\n StrictMode: REACT_STRICT_MODE_TYPE,\ndiff --git a\/packages\/react\/src\/ReactElementValidator.js b\/packages\/react\/src\/ReactElementValidator.js\nindex 471e6d6f8b..fff09423d3 100644\n--- a\/packages\/react\/src\/ReactElementValidator.js\n+++ b\/packages\/react\/src\/ReactElementValidator.js\n@@ -22,6 +22,7 @@ import {\n REACT_ASYNC_MODE_TYPE,\n REACT_PROVIDER_TYPE,\n REACT_CONTEXT_TYPE,\n+ REACT_FORWARD_REF_TYPE,\n } from 'shared\/ReactSymbols';\n import checkPropTypes from 'prop-types\/checkPropTypes';\n import warning from 'fbjs\/lib\/warning';\n@@ -297,7 +298,8 @@ export function createElementWithValidation(type, props, children) {\n (typeof type === 'object' &&\n type !== null &&\n (type.$$typeof === REACT_PROVIDER_TYPE ||\n- type.$$typeof === REACT_CONTEXT_TYPE));\n+ type.$$typeof === REACT_CONTEXT_TYPE ||\n+ type.$$typeof === REACT_FORWARD_REF_TYPE));\n \n \/\/ We warn in this case but don't throw. We expect the element creation to\n \/\/ succeed and there will likely be errors in render.\ndiff --git a\/packages\/react\/src\/__tests__\/forwardRef-test.internal.js b\/packages\/react\/src\/__tests__\/forwardRef-test.internal.js\nnew file mode 100644\nindex 0000000000..068448c437\n--- \/dev\/null\n+++ b\/packages\/react\/src\/__tests__\/forwardRef-test.internal.js\n@@ -0,0 +1,252 @@\n+\/**\n+ * Copyright (c) 2013-present, Facebook, Inc.\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+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+describe('forwardRef', () => {\n+ let React;\n+ let ReactFeatureFlags;\n+ let ReactNoop;\n+\n+ beforeEach(() => {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;\n+ React = require('react');\n+ ReactNoop = require('react-noop-renderer');\n+ });\n+\n+ it('should work without a ref to be forwarded', () => {\n+ class Child extends React.Component {\n+ render() {\n+ ReactNoop.yield(this.props.value);\n+ return null;\n+ }\n+ }\n+\n+ function Wrapper(props) {\n+ return ;\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ ReactNoop.render();\n+ expect(ReactNoop.flush()).toEqual([123]);\n+ });\n+\n+ it('should forward a ref for a single child', () => {\n+ class Child extends React.Component {\n+ render() {\n+ ReactNoop.yield(this.props.value);\n+ return null;\n+ }\n+ }\n+\n+ function Wrapper(props) {\n+ return ;\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render();\n+ expect(ReactNoop.flush()).toEqual([123]);\n+ expect(ref.current instanceof Child).toBe(true);\n+ });\n+\n+ it('should forward a ref for multiple children', () => {\n+ class Child extends React.Component {\n+ render() {\n+ ReactNoop.yield(this.props.value);\n+ return null;\n+ }\n+ }\n+\n+ function Wrapper(props) {\n+ return ;\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render(\n+

\n+

\n+ \n+

\n+ <\/div>,\n+ );\n+ expect(ReactNoop.flush()).toEqual([123]);\n+ expect(ref.current instanceof Child).toBe(true);\n+ });\n+\n+ it('should update refs when switching between children', () => {\n+ function FunctionalComponent({forwardedRef, setRefOnDiv}) {\n+ return (\n+

\n+

First<\/div>\n+ Second<\/span>\n+ <\/section>\n+ );\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(ref.current.type).toBe('div');\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(ref.current.type).toBe('span');\n+ });\n+\n+ it('should maintain child instance and ref through updates', () => {\n+ class Child extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ }\n+ render() {\n+ ReactNoop.yield(this.props.value);\n+ return null;\n+ }\n+ }\n+\n+ function Wrapper(props) {\n+ return ;\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ let setRefCount = 0;\n+ let ref;\n+\n+ const setRef = r => {\n+ setRefCount++;\n+ ref = r;\n+ };\n+\n+ ReactNoop.render();\n+ expect(ReactNoop.flush()).toEqual([123]);\n+ expect(ref instanceof Child).toBe(true);\n+ expect(setRefCount).toBe(1);\n+ ReactNoop.render();\n+ expect(ReactNoop.flush()).toEqual([456]);\n+ expect(ref instanceof Child).toBe(true);\n+ expect(setRefCount).toBe(1);\n+ });\n+\n+ it('should not break lifecycle error handling', () => {\n+ class ErrorBoundary extends React.Component {\n+ state = {error: null};\n+ componentDidCatch(error) {\n+ ReactNoop.yield('ErrorBoundary.componentDidCatch');\n+ this.setState({error});\n+ }\n+ render() {\n+ if (this.state.error) {\n+ ReactNoop.yield('ErrorBoundary.render: catch');\n+ return null;\n+ }\n+ ReactNoop.yield('ErrorBoundary.render: try');\n+ return this.props.children;\n+ }\n+ }\n+\n+ class BadRender extends React.Component {\n+ render() {\n+ ReactNoop.yield('BadRender throw');\n+ throw new Error('oops!');\n+ }\n+ }\n+\n+ function Wrapper(props) {\n+ ReactNoop.yield('Wrapper');\n+ return ;\n+ }\n+\n+ const RefForwardingComponent = React.forwardRef((props, ref) => (\n+ \n+ ));\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n+ expect(ReactNoop.flush()).toEqual([\n+ 'ErrorBoundary.render: try',\n+ 'Wrapper',\n+ 'BadRender throw',\n+ 'ErrorBoundary.componentDidCatch',\n+ 'ErrorBoundary.render: catch',\n+ ]);\n+ expect(ref.current).toBe(null);\n+ });\n+\n+ it('should support rendering null', () => {\n+ const RefForwardingComponent = React.forwardRef((props, ref) => null);\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(ref.current).toBe(null);\n+ });\n+\n+ it('should support rendering null for multiple children', () => {\n+ const RefForwardingComponent = React.forwardRef((props, ref) => null);\n+\n+ const ref = React.createRef();\n+\n+ ReactNoop.render(\n+

\n+

\n+ \n+

\n+ <\/div>,\n+ );\n+ ReactNoop.flush();\n+ expect(ref.current).toBe(null);\n+ });\n+\n+ it('should warn if not provided a callback during creation', () => {\n+ expect(() => React.forwardRef(undefined)).toWarnDev(\n+ 'forwardRef requires a render function but was given undefined.',\n+ );\n+ expect(() => React.forwardRef(null)).toWarnDev(\n+ 'forwardRef requires a render function but was given null.',\n+ );\n+ expect(() => React.forwardRef('foo')).toWarnDev(\n+ 'forwardRef requires a render function but was given string.',\n+ );\n+ });\n+\n+ it('should warn if no render function is provided', () => {\n+ expect(React.forwardRef).toWarnDev(\n+ 'forwardRef requires a render function but was given undefined.',\n+ );\n+ });\n+});\ndiff --git a\/packages\/react\/src\/forwardRef.js b\/packages\/react\/src\/forwardRef.js\nnew file mode 100644\nindex 0000000000..6a923be127\n--- \/dev\/null\n+++ b\/packages\/react\/src\/forwardRef.js\n@@ -0,0 +1,27 @@\n+\/**\n+ * Copyright (c) 2014-present, Facebook, Inc.\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+\n+import {REACT_FORWARD_REF_TYPE} from 'shared\/ReactSymbols';\n+\n+import warning from 'fbjs\/lib\/warning';\n+\n+export default function forwardRef(\n+ render: (props: Props, ref: React$ElementRef) => React$Node,\n+) {\n+ if (__DEV__) {\n+ warning(\n+ typeof render === 'function',\n+ 'forwardRef requires a render function but was given %s.',\n+ render === null ? 'null' : typeof render,\n+ );\n+ }\n+\n+ return {\n+ $$typeof: REACT_FORWARD_REF_TYPE,\n+ render,\n+ };\n+}\ndiff --git a\/packages\/shared\/ReactSymbols.js b\/packages\/shared\/ReactSymbols.js\nindex cc60e34e4c..12e0fdddad 100644\n--- a\/packages\/shared\/ReactSymbols.js\n+++ b\/packages\/shared\/ReactSymbols.js\n@@ -36,6 +36,9 @@ export const REACT_CONTEXT_TYPE = hasSymbol\n export const REACT_ASYNC_MODE_TYPE = hasSymbol\n ? Symbol.for('react.async_mode')\n : 0xeacf;\n+export const REACT_FORWARD_REF_TYPE = hasSymbol\n+ ? Symbol.for('react.forward_ref')\n+ : 0xead0;\n \n const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n const FAUX_ITERATOR_SYMBOL = '@@iterator';\ndiff --git a\/packages\/shared\/ReactTypeOfWork.js b\/packages\/shared\/ReactTypeOfWork.js\nindex 3d1bfc3f37..573b75aabc 100644\n--- a\/packages\/shared\/ReactTypeOfWork.js\n+++ b\/packages\/shared\/ReactTypeOfWork.js\n@@ -21,7 +21,8 @@ export type TypeOfWork =\n | 10\n | 11\n | 12\n- | 13;\n+ | 13\n+ | 14;\n \n export const IndeterminateComponent = 0; \/\/ Before we know whether it is functional or class\n export const FunctionalComponent = 1;\n@@ -37,3 +38,4 @@ export const Fragment = 10;\n export const Mode = 11;\n export const ContextConsumer = 12;\n export const ContextProvider = 13;\n+export const ForwardRef = 14;\n","body":"Added React.forwardRef support to react-reconciler based renders and the SSR partial renderer."}

dillon1000/react

Files changed