{"commit":{"revision":"acd65db5bc2cd1ab19be66318f3e931054796739","authorEmail":"sebastian@calyptus.eu","authoredAt":"2019-03-19T12:55:27-07:00","subject":"Deprecate module pattern (factory) components (#15145)","shortRevision":"acd65db5bc","authorName":"Sebastian Markbåge"},"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/refs-test.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\nindex 2bbd3c57c2..05c70bac3c 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -977,7 +977,16 @@ describe('ReactComponentLifeCycle', () => {\n };\n \n const div = document.createElement('div');\n- ReactDOM.render( c && log.push('ref')} \/>, div);\n+ expect(() =>\n+ ReactDOM.render( c && log.push('ref')} \/>, div),\n+ ).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Parent to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Parent.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n+ );\n ReactDOM.render( c && log.push('ref')} \/>, div);\n \n expect(log).toEqual([\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\nindex de512b7ec1..7766944ec6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\n@@ -118,7 +118,14 @@ describe('ReactCompositeComponent', () => {\n }\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+ expect(() => ReactDOM.render(, el)).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Child to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Child.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n+ );\n \n expect(el.textContent).toBe('test');\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\nindex f882dc01be..3c28f48337 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n@@ -474,7 +474,14 @@ describe('ReactCompositeComponent-state', () => {\n }\n \n const el = document.createElement('div');\n- ReactDOM.render(, el);\n+ expect(() => ReactDOM.render(, el)).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Child to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Child.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n+ );\n \n expect(el.textContent).toBe('count:123');\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\nindex 33f63a26f2..535191d66e 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n@@ -644,7 +644,7 @@ describe('ReactDOMServerIntegration', () => {\n },\n };\n };\n- checkFooDiv(await render());\n+ checkFooDiv(await render(, 1));\n });\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\nindex c982c787ee..3b19a87ecb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n@@ -768,12 +768,23 @@ describe('ReactErrorBoundaries', () => {\n };\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n+ expect(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container,\n+ ),\n+ ).toWarnDev(\n+ 'Warning: The component appears to be a function component that ' +\n+ 'returns a class instance. ' +\n+ 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n );\n+\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\nindex 7cec1ac6e9..234558172f 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\n@@ -742,11 +742,21 @@ describe('ReactLegacyErrorBoundaries', () => {\n };\n \n const container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n+ expect(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container,\n+ ),\n+ ).toWarnDev(\n+ 'Warning: The component appears to be a function component that ' +\n+ 'returns a class instance. ' +\n+ 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n );\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/refs-test.js b\/packages\/react-dom\/src\/__tests__\/refs-test.js\nindex f3ce43adb1..7cc764bdef 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-test.js\n@@ -166,7 +166,17 @@ describe('factory components', () => {\n };\n }\n \n- const inst = ReactTestUtils.renderIntoDocument();\n+ let inst;\n+ expect(\n+ () => (inst = ReactTestUtils.renderIntoDocument()),\n+ ).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Comp to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Comp.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n+ );\n expect(inst.refs.elemRef.tagName).toBe('DIV');\n });\n });\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 142f932cf7..6a8231e56d 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -179,6 +179,7 @@ let didWarnDefaultTextareaValue = false;\n let didWarnInvalidOptionChildren = false;\n const didWarnAboutNoopUpdateForComponent = {};\n const didWarnAboutBadClass = {};\n+const didWarnAboutModulePatternComponent = {};\n const didWarnAboutDeprecatedWillMount = {};\n const didWarnAboutUndefinedDerivedState = {};\n const didWarnAboutUninitializedState = {};\n@@ -525,6 +526,24 @@ function resolve(\n validateRenderResult(child, Component);\n return;\n }\n+\n+ if (__DEV__) {\n+ const componentName = getComponentName(Component) || 'Unknown';\n+ if (!didWarnAboutModulePatternComponent[componentName]) {\n+ warningWithoutStack(\n+ false,\n+ 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n+ 'Change %s to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ \"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it \" +\n+ 'cannot be called with `new` by React.',\n+ componentName,\n+ componentName,\n+ componentName,\n+ );\n+ didWarnAboutModulePatternComponent[componentName] = true;\n+ }\n+ }\n }\n \n inst.props = element.props;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex f1b6563332..6cc20994c2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -144,6 +144,7 @@ const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n let didReceiveUpdate: boolean = false;\n \n let didWarnAboutBadClass;\n+let didWarnAboutModulePatternComponent;\n let didWarnAboutContextTypeOnFunctionComponent;\n let didWarnAboutGetDerivedStateOnFunctionComponent;\n let didWarnAboutFunctionRefs;\n@@ -151,6 +152,7 @@ export let didWarnAboutReassigningProps;\n \n if (__DEV__) {\n didWarnAboutBadClass = {};\n+ didWarnAboutModulePatternComponent = {};\n didWarnAboutContextTypeOnFunctionComponent = {};\n didWarnAboutGetDerivedStateOnFunctionComponent = {};\n didWarnAboutFunctionRefs = {};\n@@ -1222,6 +1224,24 @@ function mountIndeterminateComponent(\n typeof value.render === 'function' &&\n value.$$typeof === undefined\n ) {\n+ if (__DEV__) {\n+ const componentName = getComponentName(Component) || 'Unknown';\n+ if (!didWarnAboutModulePatternComponent[componentName]) {\n+ warningWithoutStack(\n+ false,\n+ 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n+ 'Change %s to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ \"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it \" +\n+ 'cannot be called with `new` by React.',\n+ componentName,\n+ componentName,\n+ componentName,\n+ );\n+ didWarnAboutModulePatternComponent[componentName] = true;\n+ }\n+ }\n+\n \/\/ Proceed under the assumption that this is a class instance\n workInProgress.tag = ClassComponent;\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex 8933125cbf..455df5d557 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -1327,7 +1327,14 @@ describe('ReactHooks', () => {\n expect(renderCount).toBe(1);\n \n renderCount = 0;\n- renderer.update();\n+ expect(() => renderer.update()).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Factory to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Factory.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n+ );\n expect(renderCount).toBe(1);\n renderCount = 0;\n renderer.update();\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\nindex 6fd77a90e4..a1e12ca463 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -137,13 +137,22 @@ describe('ReactHooksWithNoopRenderer', () => {\n };\n }\n ReactNoop.render();\n- expect(Scheduler).toFlushAndThrow(\n- 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +\n- ' one of the following reasons:\\n' +\n- '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n- '2. You might be breaking the Rules of Hooks\\n' +\n- '3. You might have more than one copy of React in the same app\\n' +\n- 'See https:\/\/fb.me\/react-invalid-hook-call for tips about how to debug and fix this problem.',\n+ expect(() =>\n+ expect(Scheduler).toFlushAndThrow(\n+ 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen ' +\n+ 'for one of the following reasons:\\n' +\n+ '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n+ '2. You might be breaking the Rules of Hooks\\n' +\n+ '3. You might have more than one copy of React in the same app\\n' +\n+ 'See https:\/\/fb.me\/react-invalid-hook-call for tips about how to debug and fix this problem.',\n+ ),\n+ ).toWarnDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Counter to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Counter.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ {withoutStack: true},\n );\n \n \/\/ Confirm that a subsequent hook works properly.\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\nindex f94b8f5280..9db2710e1a 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\n@@ -2026,8 +2026,15 @@ describe('ReactIncremental', () => {\n \n ReactNoop.render();\n expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev(\n- 'Legacy context API has been detected within a strict-mode tree: \\n\\n' +\n- 'Please update the following components: Recurse',\n+ [\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Recurse to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Recurse.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ 'Legacy context API has been detected within a strict-mode tree: \\n\\n' +\n+ 'Please update the following components: Recurse',\n+ ],\n {withoutStack: true},\n );\n expect(ops).toEqual([\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\nindex 6979375d5a..d1f360592b 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n@@ -1596,8 +1596,15 @@ describe('ReactIncrementalErrorHandling', () => {\n expect(() => {\n expect(Scheduler).toFlushAndThrow('Oops!');\n }).toWarnDev(\n- 'Legacy context API has been detected within a strict-mode tree: \\n\\n' +\n- 'Please update the following components: Provider',\n+ [\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Provider to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Provider.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ 'Legacy context API has been detected within a strict-mode tree: \\n\\n' +\n+ 'Please update the following components: Provider',\n+ ],\n {withoutStack: true},\n );\n });\ndiff --git a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\nindex fc279a50a2..7c0b308e67 100644\n--- a\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n+++ b\/packages\/react\/src\/__tests__\/ReactStrictMode-test.internal.js\n@@ -835,7 +835,6 @@ describe('ReactStrictMode', () => {\n

\n \n \n- \n <\/div>\n );\n }\n@@ -845,14 +844,6 @@ describe('ReactStrictMode', () => {\n return null;\n }\n \n- function FactoryLegacyContextConsumer() {\n- return {\n- render() {\n- return null;\n- },\n- };\n- }\n-\n LegacyContextProvider.childContextTypes = {\n color: PropTypes.string,\n };\n@@ -885,10 +876,6 @@ describe('ReactStrictMode', () => {\n color: PropTypes.string,\n };\n \n- FactoryLegacyContextConsumer.contextTypes = {\n- color: PropTypes.string,\n- };\n-\n let rendered;\n \n expect(() => {\n@@ -898,7 +885,7 @@ describe('ReactStrictMode', () => {\n '\\n in StrictMode (at **)' +\n '\\n in div (at **)' +\n '\\n in Root (at **)' +\n- '\\n\\nPlease update the following components: FactoryLegacyContextConsumer, ' +\n+ '\\n\\nPlease update the following components: ' +\n 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' +\n '\\n\\nLearn more about this warning here:' +\n '\\nhttps:\/\/fb.me\/react-strict-mode-warnings',\n","body":"","parents":["55cc921c5d3485eb60fe94628b227d4069c97b6c"]}

dillon1000/react

Files changed