{"commit":{"shortRevision":"b6606ecba8","authorEmail":"bvaughn@fb.com","authoredAt":"2019-09-26T08:41:46-07:00","subject":"DevTools shows unsupported renderer version dialog (#16897)","authorName":"Brian Vaughn","revision":"b6606ecba80b591ea66db1e2ee1fed72befb4c32"},"patch":"diff --git a\/packages\/react-devtools-extensions\/src\/main.js b\/packages\/react-devtools-extensions\/src\/main.js\nindex b2cb6758e6..ad75317a34 100644\n--- a\/packages\/react-devtools-extensions\/src\/main.js\n+++ b\/packages\/react-devtools-extensions\/src\/main.js\n@@ -161,7 +161,7 @@ function createPanelIfReactLoaded() {\n overrideTab,\n profilerPortalContainer,\n showTabBar: false,\n- showWelcomeToTheNewDevToolsDialog: true,\n+ warnIfUnsupportedVersionDetected: true,\n store,\n viewElementSourceFunction,\n }),\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex 3bbec8416a..3e73c0f750 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -474,6 +474,10 @@ export default class Agent extends EventEmitter<{|\n }\n };\n \n+ onUnsupportedRenderer(rendererID: number) {\n+ this._bridge.send('unsupportedRendererVersion', rendererID);\n+ }\n+\n _throttledPersistSelection = throttle((rendererID: number, id: number) => {\n \/\/ This is throttled, so both renderer and selected ID\n \/\/ might not be available by the time we read them.\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/index.js b\/packages\/react-devtools-shared\/src\/backend\/index.js\nindex 2c57627f31..73e6c9f8f2 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/index.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/index.js\n@@ -39,6 +39,10 @@ export function initBackend(\n },\n ),\n \n+ hook.sub('unsupported-renderer-version', (id: number) => {\n+ agent.onUnsupportedRenderer(id);\n+ }),\n+\n hook.sub('operations', agent.onHookOperations),\n \n \/\/ TODO Add additional subscriptions required for profiling mode\n@@ -48,23 +52,33 @@ export function initBackend(\n let rendererInterface = hook.rendererInterfaces.get(id);\n \n \/\/ Inject any not-yet-injected renderers (if we didn't reload-and-profile)\n- if (!rendererInterface) {\n+ if (rendererInterface == null) {\n if (typeof renderer.findFiberByHostInstance === 'function') {\n+ \/\/ react-reconciler v16+\n rendererInterface = attach(hook, id, renderer, global);\n- } else {\n+ } else if (renderer.ComponentTree) {\n+ \/\/ react-dom v15\n rendererInterface = attachLegacy(hook, id, renderer, global);\n+ } else {\n+ \/\/ Older react-dom or other unsupported renderer version\n }\n \n- hook.rendererInterfaces.set(id, rendererInterface);\n+ if (rendererInterface != null) {\n+ hook.rendererInterfaces.set(id, rendererInterface);\n+ }\n }\n \n \/\/ Notify the DevTools frontend about new renderers.\n \/\/ This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).\n- hook.emit('renderer-attached', {\n- id,\n- renderer,\n- rendererInterface,\n- });\n+ if (rendererInterface != null) {\n+ hook.emit('renderer-attached', {\n+ id,\n+ renderer,\n+ rendererInterface,\n+ });\n+ } else {\n+ hook.emit('unsupported-renderer-version', id);\n+ }\n };\n \n \/\/ Connect renderers that have already injected themselves.\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 245817b5c6..bf6a4c7286 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -81,7 +81,10 @@ export type ReactRenderer = {\n \/\/ Enables DevTools to append owners-only component stack to error messages.\n getCurrentFiber?: () => Fiber | null,\n \n- \/\/ <= 15\n+ \/\/ Uniquely identifies React DOM v15.\n+ ComponentTree?: any,\n+\n+ \/\/ Present for React DOM v12 (possibly earlier) through v15.\n Mount?: any,\n };\n \ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex 4d88747992..695121d08c 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -83,6 +83,7 @@ type BackendEvents = {|\n stopInspectingNative: [boolean],\n syncSelectionFromNativeElementsPanel: [],\n syncSelectionToNativeElementsPanel: [],\n+ unsupportedRendererVersion: [RendererID],\n \n \/\/ React Native style editor plug-in.\n isNativeStyleEditorSupported: [\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 00956d28ff..d0f0a89807 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -35,6 +35,9 @@ export const PROFILER_EXPORT_VERSION = 4;\n export const CHANGE_LOG_URL =\n 'https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-devtools\/CHANGELOG.md';\n \n+export const UNSUPPORTED_VERSION_URL =\n+ 'https:\/\/reactjs.org\/blog\/2019\/08\/15\/new-react-devtools.html#how-do-i-get-the-old-version-back';\n+\n \/\/ HACK\n \/\/\n \/\/ Extracting during build time avoids a temporarily invalid state for the inline target.\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 68264ddeb4..efbcf02196 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -73,6 +73,7 @@ export default class Store extends EventEmitter<{|\n supportsNativeStyleEditor: [],\n supportsProfiling: [],\n supportsReloadAndProfile: [],\n+ unsupportedRendererVersionDetected: [],\n |}> {\n _bridge: FrontendBridge;\n \n@@ -125,6 +126,8 @@ export default class Store extends EventEmitter<{|\n _supportsProfiling: boolean = false;\n _supportsReloadAndProfile: boolean = false;\n \n+ _unsupportedRendererVersionDetected: boolean = false;\n+\n \/\/ Total number of visible elements (within all roots).\n \/\/ Used for windowing purposes.\n _weightAcrossRoots: number = 0;\n@@ -179,6 +182,10 @@ export default class Store extends EventEmitter<{|\n 'isNativeStyleEditorSupported',\n this.onBridgeNativeStyleEditorSupported,\n );\n+ bridge.addListener(\n+ 'unsupportedRendererVersion',\n+ this.onBridgeUnsupportedRendererVersion,\n+ );\n \n this._profilerStore = new ProfilerStore(bridge, this, isProfiling);\n }\n@@ -337,6 +344,10 @@ export default class Store extends EventEmitter<{|\n return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;\n }\n \n+ get unsupportedRendererVersionDetected(): boolean {\n+ return this._unsupportedRendererVersionDetected;\n+ }\n+\n containsElement(id: number): boolean {\n return this._idToElement.get(id) != null;\n }\n@@ -1009,4 +1020,10 @@ export default class Store extends EventEmitter<{|\n \n this.emit('supportsReloadAndProfile');\n };\n+\n+ onBridgeUnsupportedRendererVersion = () => {\n+ this._unsupportedRendererVersionDetected = true;\n+\n+ this.emit('unsupportedRendererVersionDetected');\n+ };\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex 89b275cffd..229a750adb 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -24,6 +24,7 @@ import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n import {ProfilerContextController} from '.\/Profiler\/ProfilerContext';\n import {ModalDialogContextController} from '.\/ModalDialog';\n import ReactLogo from '.\/ReactLogo';\n+import UnsupportedVersionDialog from '.\/UnsupportedVersionDialog';\n import WarnIfLegacyBackendDetected from '.\/WarnIfLegacyBackendDetected';\n \n import styles from '.\/DevTools.css';\n@@ -51,6 +52,7 @@ export type Props = {|\n showTabBar?: boolean,\n store: Store,\n warnIfLegacyBackendDetected?: boolean,\n+ warnIfUnsupportedVersionDetected?: boolean,\n viewElementSourceFunction?: ?ViewElementSource,\n \n \/\/ This property is used only by the web extension target.\n@@ -92,6 +94,7 @@ export default function DevTools({\n showTabBar = false,\n store,\n warnIfLegacyBackendDetected = false,\n+ warnIfUnsupportedVersionDetected = false,\n viewElementSourceFunction,\n }: Props) {\n const [tab, setTab] = useState(defaultTab);\n@@ -164,6 +167,7 @@ export default function DevTools({\n <\/ViewElementSourceContext.Provider>\n <\/SettingsContextController>\n {warnIfLegacyBackendDetected && }\n+ {warnIfUnsupportedVersionDetected && }\n <\/ModalDialogContextController>\n <\/StoreContext.Provider>\n <\/BridgeContext.Provider>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.css\nnew file mode 100644\nindex 0000000000..5c183f1fe6\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.css\n@@ -0,0 +1,20 @@\n+.Row { \n+ display: flex; \n+ flex-direction: row; \n+ align-items: center; \n+} \n+\n+.Column { \n+ display: flex; \n+ flex-direction: column; \n+ align-items: center; \n+} \n+\n+.Title { \n+ font-size: var(--font-size-sans-large); \n+ margin-bottom: 0.5rem; \n+} \n+\n+.ReleaseNotesLink { \n+ color: var(--color-button-active); \n+}\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js\nnew file mode 100644\nindex 0000000000..652c4904c2\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js\n@@ -0,0 +1,83 @@\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 React, {Fragment, useContext, useEffect, useState} from 'react';\n+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';\n+import {ModalDialogContext} from '.\/ModalDialog';\n+import {StoreContext} from '.\/context';\n+import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared\/src\/constants';\n+\n+import styles from '.\/UnsupportedVersionDialog.css';\n+\n+type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';\n+\n+export default function UnsupportedVersionDialog(_: {||}) {\n+ const {dispatch} = useContext(ModalDialogContext);\n+ const store = useContext(StoreContext);\n+ const [state, setState] = useState('dialog-not-shown');\n+\n+ useEffect(\n+ () => {\n+ if (state === 'dialog-not-shown') {\n+ const showDialog = () => {\n+ batchedUpdates(() => {\n+ setState('show-dialog');\n+ dispatch({\n+ canBeDismissed: true,\n+ type: 'SHOW',\n+ content: ,\n+ });\n+ });\n+ };\n+\n+ if (store.unsupportedRendererVersionDetected) {\n+ showDialog();\n+ } else {\n+ store.addListener('unsupportedRendererVersionDetected', showDialog);\n+ return () => {\n+ store.removeListener(\n+ 'unsupportedRendererVersionDetected',\n+ showDialog,\n+ );\n+ };\n+ }\n+ }\n+ },\n+ [state, store],\n+ );\n+\n+ return null;\n+}\n+\n+function DialogContent(_: {||}) {\n+ return (\n+ \n+

\n+

Unsupported React version detected<\/div>\n+

\n+ This version of React DevTools supports React DOM v15+ and React\n+ Native v61+.\n+ <\/p>\n+

\n+ In order to use DevTools with an older version of React, you'll need\n+ to{' '}\n+ \n+ install an older version of the extension\n+ <\/a>.\n+ <\/p>\n+ <\/div>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/packages\/react-devtools-shell\/src\/devtools.js b\/packages\/react-devtools-shell\/src\/devtools.js\nindex ce623793a7..5ecd250161 100644\n--- a\/packages\/react-devtools-shell\/src\/devtools.js\n+++ b\/packages\/react-devtools-shell\/src\/devtools.js\n@@ -57,6 +57,7 @@ inject('dist\/app.js', () => {\n browserTheme: 'light',\n showTabBar: true,\n warnIfLegacyBackendDetected: true,\n+ warnIfUnsupportedVersionDetected: true,\n }),\n );\n },\ndiff --git a\/packages\/react-devtools\/CHANGELOG.md b\/packages\/react-devtools\/CHANGELOG.md\nindex 97a3061ab2..9eade1cfaf 100644\n--- a\/packages\/react-devtools\/CHANGELOG.md\n+++ b\/packages\/react-devtools\/CHANGELOG.md\n@@ -12,6 +12,7 @@\n * Fixed bug where Components panel was always empty for certain users. ([linshunghuang](https:\/\/github.com\/linshunghuang) in [#16900](https:\/\/github.com\/facebook\/react\/pull\/16900))\n * Fixed regression in DevTools editable hooks interface that caused primitive values to be shown as `undefined`. ([bvaughn](https:\/\/github.com\/bvaughn) in [#16867](https:\/\/github.com\/facebook\/react\/pull\/16867))\n * Fixed bug where DevTools showed stale values in props\/state\/hooks editing interface. ([bvaughn](https:\/\/github.com\/bvaughn) in [#16878](https:\/\/github.com\/facebook\/react\/pull\/16878))\n+* Show unsupported version dialog with downgrade instructions. ([bvaughn](https:\/\/github.com\/bvaughn) in [#16897](https:\/\/github.com\/facebook\/react\/pull\/16897))\n <\/details>\n \n ## 4.1.0 (September 19, 2019)\n","parents":["84e83db1ee6303bc31120af59e20750a0fa299bc"],"files":[{"status":"M","path":"packages\/react-devtools-extensions\/src\/main.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/agent.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/index.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/bridge.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/constants.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/store.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.css"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js"},{"status":"M","path":"packages\/react-devtools-shell\/src\/devtools.js"},{"status":"M","path":"packages\/react-devtools\/CHANGELOG.md"}],"body":"* DevTools shows unsupported renderer version dialog\r\n\r\n* Optimistic CHANGELOG udpate"}

dillon1000/react

Files changed