-
Notifications
You must be signed in to change notification settings - Fork 47k
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 24, 2021
1 parent
3a8c04e
commit e8d6f06
Showing
10 changed files
with
214 additions
and
3 deletions.
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
37 changes: 37 additions & 0 deletions
37
packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.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,37 @@ | ||
| .Column { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .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: 0; | ||
| font-family: var(--font-family-monospace); | ||
| font-size: var(--font-size-monospace-large); | ||
| } | ||
|
|
||
| .Paragraph { | ||
| margin: 0.5rem 0; | ||
| } | ||
|
|
||
| .Link { | ||
| color: var(--color-link); | ||
| } |
109 changes: 109 additions & 0 deletions
109
packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.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,109 @@ | ||
| /** | ||
| * 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 Button from './Button'; | ||
| import ButtonIcon from './ButtonIcon'; | ||
| import {copy} from 'clipboard-js'; | ||
| import styles from './UnsupportedBridgeProtocolDialog.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; | ||
| const INSTRUCTIONS_FB_URL = 'https://fburl.com/devtools-bridge-protocol'; | ||
|
|
||
| export default function UnsupportedBridgeProtocolDialog(_: {||}) { | ||
| 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} = unsupportedBridgeProtocol; | ||
| const upgradeInstructions = `npm i -g react-devtools@^${minNpmVersion}`; | ||
| return ( | ||
| <Fragment> | ||
| <div className={styles.Column}> | ||
| <div className={styles.Title}>Unsupported DevTools backend version</div> | ||
| <p className={styles.Paragraph}> | ||
| You are running <code>react-devtools</code> version{' '} | ||
| <span className={styles.Version}>{DEVTOOLS_VERSION}</span>. | ||
| </p> | ||
| <p className={styles.Paragraph}> | ||
| This requires bridge protocol{' '} | ||
| <span className={styles.Version}>version 0</span>. However the current | ||
| backend version uses bridge protocol{' '} | ||
| <span className={styles.Version}>version {version}</span>. | ||
| </p> | ||
| <p className={styles.Paragraph}> | ||
| To fix this, upgrade the DevTools NPM package: | ||
| </p> | ||
| <pre className={styles.NpmCommand}> | ||
| {upgradeInstructions} | ||
| <Button | ||
| onClick={() => copy(upgradeInstructions)} | ||
| title="Copy upgrade command to clipboard"> | ||
| <ButtonIcon type="copy" /> | ||
| </Button> | ||
| </pre> | ||
| <p className={styles.Paragraph}> | ||
| Or{' '} | ||
| <a | ||
| data-electron-external-link="true" | ||
| className={styles.Link} | ||
| href={INSTRUCTIONS_FB_URL} | ||
| target="_blank"> | ||
| click here | ||
| </a>{' '} | ||
| for more information. | ||
| </p> | ||
| </div> | ||
| </Fragment> | ||
| ); | ||
| } |
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