-
Notifications
You must be signed in to change notification settings - Fork 46.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DevTools: Add Bridge protocol version backend/frontend
Frontend shows upgrade or downgrade instructions if the version does not match.
- Loading branch information
Brian Vaughn
committed
Apr 22, 2021
1 parent
89847bf
commit 9ee44ca
Showing
10 changed files
with
259 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/react-devtools-shared/src/devtools/views/UnsupportedProtocolDialog.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .Row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .Column { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .Title { | ||
| font-size: var(--font-size-sans-large); | ||
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
| .ReleaseNotesLink { | ||
| color: var(--color-button-active); | ||
| } | ||
|
|
||
| .Version { | ||
| color: var(--color-bridge-version-number); | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .NpmCommand { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding: 0.25rem 0.25rem 0.25rem 0.5rem; | ||
| background-color: var(--color-bridge-version-npm-background); | ||
| color: var(--color-bridge-version-npm-text); | ||
| margin-bottom: 0; | ||
| font-family: var(--font-family-monospace); | ||
| font-size: var(--font-size-monospace-large); | ||
| } | ||
|
|
||
| .Instructions { | ||
| margin-bottom: 0; | ||
| } |
127 changes: 127 additions & 0 deletions
127
packages/react-devtools-shared/src/devtools/views/UnsupportedProtocolDialog.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| import {Fragment, useContext, useEffect, useState} from 'react'; | ||
| import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; | ||
| import {ModalDialogContext} from './ModalDialog'; | ||
| import {StoreContext} from './context'; | ||
| import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge'; | ||
| import Button from './Button'; | ||
| import ButtonIcon from './ButtonIcon'; | ||
| import {copy} from 'clipboard-js'; | ||
| import styles from './UnsupportedProtocolDialog.css'; | ||
|
|
||
| import type {BridgeProtocol} from 'react-devtools-shared/src/bridge'; | ||
|
|
||
| type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown'; | ||
|
|
||
| const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION; | ||
|
|
||
| export default function UnsupportedProtocolDialog(_: {||}) { | ||
| const {dispatch} = useContext(ModalDialogContext); | ||
| const store = useContext(StoreContext); | ||
| const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown'); | ||
|
|
||
| useEffect(() => { | ||
| if (state === 'dialog-not-shown') { | ||
| const showDialog = () => { | ||
| batchedUpdates(() => { | ||
| setState('show-dialog'); | ||
| dispatch({ | ||
| canBeDismissed: false, | ||
| type: 'SHOW', | ||
| content: ( | ||
| <DialogContent | ||
| unsupportedBridgeProtocol={store.unsupportedBridgeProtocol} | ||
| /> | ||
| ), | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| if (store.unsupportedBridgeProtocol !== null) { | ||
| showDialog(); | ||
| } else { | ||
| store.addListener('unsupportedBridgeProtocolDetected', showDialog); | ||
| return () => { | ||
| store.removeListener('unsupportedBridgeProtocolDetected', showDialog); | ||
| }; | ||
| } | ||
| } | ||
| }, [state, store]); | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| function DialogContent({ | ||
| unsupportedBridgeProtocol, | ||
| }: {| | ||
| unsupportedBridgeProtocol: BridgeProtocol, | ||
| |}) { | ||
| const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol; | ||
|
|
||
| let instructions; | ||
| if (maxNpmVersion === null) { | ||
| const upgradeInstructions = `npm i -g react-devtools@^${minNpmVersion}`; | ||
| instructions = ( | ||
| <p className={styles.Instructions}> | ||
| To fix this, upgrade the DevTools NPM package: | ||
| <pre className={styles.NpmCommand}> | ||
| {upgradeInstructions} | ||
| <Button | ||
| onClick={() => copy(upgradeInstructions)} | ||
| title="Copy upgrade command to clipboard"> | ||
| <ButtonIcon type="copy" /> | ||
| </Button> | ||
| </pre> | ||
| </p> | ||
| ); | ||
| } else { | ||
| const downgradeInstructions = `npm i -g react-devtools@${maxNpmVersion}`; | ||
| instructions = ( | ||
| <p className={styles.Instructions}> | ||
| To fix this, downgrade the DevTools NPM package: | ||
| <pre className={styles.NpmCommand}> | ||
| {downgradeInstructions} | ||
| <Button | ||
| onClick={() => copy(downgradeInstructions)} | ||
| title="Copy downgrade command to clipboard"> | ||
| <ButtonIcon type="copy" /> | ||
| </Button> | ||
| </pre> | ||
| </p> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <div className={styles.Row}> | ||
| <div> | ||
| <div className={styles.Title}> | ||
| Unsupported DevTools backend version | ||
| </div> | ||
| <p> | ||
| You are running <code>react-devtools</code> version{' '} | ||
| <span className={styles.Version}>{DEVTOOLS_VERSION}</span>. | ||
| </p> | ||
| <p> | ||
| This requires bridge protocol{' '} | ||
| <span className={styles.Version}> | ||
| version {currentBridgeProtocol.version} | ||
| </span> | ||
| . However the current backend version uses bridge protocol{' '} | ||
| <span className={styles.Version}>version {version}</span>. | ||
| </p> | ||
| {instructions} | ||
| </div> | ||
| </div> | ||
| </Fragment> | ||
| ); | ||
| } |
Oops, something went wrong.