Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Show unsupported screen in dev tools for React version < 15.0.0 #16720

Closed
wants to merge 2 commits into from
Closed

WIP: Show unsupported screen in dev tools for React version < 15.0.0 #16720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5451e06
Show unsupported screen in dev tools for React version < 15.0.0
danielhusar Sep 10, 2019
b86e3a5
Remove console log
danielhusar Sep 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/react-devtools-core/src/standalone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,10 @@ function initialize(socket: WebSocket) {
socket.close();
});

store = new Store(bridge, {supportsNativeInspection: false});
store = new Store(bridge, {
supportsNativeInspection: false,
supportsReact: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this param name is a bit confusing. React DevTools always "support React" 😄 We just want to detect an unsupported version.

I think this probably doesn't belong as a store capability.

});

log('Connected');
reload();
Expand Down
6 changes: 4 additions & 2 deletions packages/react-devtools-extensions/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,9 @@ function createPanelIfReactLoaded() {
}

chrome.devtools.inspectedWindow.eval(
'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
function(pageHasReact, error) {
'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers',
function(renderers, error) {
const pageHasReact = renderers && renderers.size > 0;
if (!pageHasReact || panelCreated) {
return;
}
Expand Down Expand Up @@ -130,6 +131,7 @@ function createPanelIfReactLoaded() {
isProfiling,
supportsReloadAndProfile: isChrome,
supportsProfiling,
supportsReact: renderers.get(1) && !!renderers.get(1).ComponentTree,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to above comment. I don't think this belongs as a store capability, so this can be reverted 😄

});
store.profilerStore.profilingData = profilingData;

Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-inline/src/frontend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function initialize(
},
});

const store: Store = new Store(bridge);
const store: Store = new Store(bridge, {supportsReact: true});

const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
<DevTools ref={ref} bridge={bridge} store={store} {...props} />
Expand Down
11 changes: 11 additions & 0 deletions packages/react-devtools-shared/src/devtools/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,13 @@ type Config = {|
supportsNativeInspection?: boolean,
supportsReloadAndProfile?: boolean,
supportsProfiling?: boolean,
supportsReact?: boolean,
|};

export type Capabilities = {|
hasOwnerMetadata: boolean,
supportsProfiling: boolean,
supportsReact: boolean,
|};

/**
Expand Down Expand Up @@ -124,6 +126,7 @@ export default class Store extends EventEmitter<{|
_supportsNativeInspection: boolean = true;
_supportsProfiling: boolean = false;
_supportsReloadAndProfile: boolean = false;
_supportsReact: boolean = false;

// Total number of visible elements (within all roots).
// Used for windowing purposes.
Expand Down Expand Up @@ -154,6 +157,7 @@ export default class Store extends EventEmitter<{|
supportsNativeInspection,
supportsProfiling,
supportsReloadAndProfile,
supportsReact,
} = config;
this._supportsNativeInspection = supportsNativeInspection !== false;
if (supportsProfiling) {
Expand All @@ -162,6 +166,9 @@ export default class Store extends EventEmitter<{|
if (supportsReloadAndProfile) {
this._supportsReloadAndProfile = true;
}
if (supportsReact) {
this._supportsReact = true;
}
}

this._bridge = bridge;
Expand Down Expand Up @@ -330,6 +337,10 @@ export default class Store extends EventEmitter<{|
return this._supportsProfiling;
}

get supportsReact(): boolean {
return this._supportsReact;
}

get supportsReloadAndProfile(): boolean {
// Does the DevTools shell support reloading and eagerly injecting the renderer interface?
// And if so, can the backend use the localStorage API?
Expand Down
21 changes: 21 additions & 0 deletions packages/react-devtools-shared/src/devtools/views/Components/Components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,24 @@
font-size: var(--font-size-sans-large);
color: var(--color-dim);
}

.Column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 1rem;
height: 100%;
border-top: 1px solid var(--color-border);
}

.Paragraph {
text-align: center;
font-size: var(--font-size-sans-normal);
}

.Header {
font-size: var(--font-size-sans-large);
margin-bottom: 0.5rem;
}

46 changes: 32 additions & 14 deletions packages/react-devtools-shared/src/devtools/views/Components/Components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @flow
*/

import React, {Suspense} from 'react';
import React, {Suspense, useContext} from 'react';
import Tree from './Tree';
import SelectedElement from './SelectedElement';
import {InspectedElementContextController} from './InspectedElementContext';
Expand All @@ -17,29 +17,36 @@ import portaledContent from '../portaledContent';
import {ModalDialog} from '../ModalDialog';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
import {StoreContext} from '../context';

import styles from './Components.css';

function Components(_: {||}) {
const {supportsReact} = useContext(StoreContext);

// TODO Flex wrappers below should be user resizable.
return (
<SettingsModalContextController>
<OwnersListContextController>
<InspectedElementContextController>
<div className={styles.Components}>
<div className={styles.TreeWrapper}>
<Tree />
</div>
<div className={styles.SelectedElementWrapper}>
<NativeStyleContextController>
<Suspense fallback={<Loading />}>
<SelectedElement />
</Suspense>
</NativeStyleContextController>
{supportsReact ? (
<div className={styles.Components}>
<div className={styles.TreeWrapper}>
<Tree />
</div>
<div className={styles.SelectedElementWrapper}>
<NativeStyleContextController>
<Suspense fallback={<Loading />}>
<SelectedElement />
</Suspense>
</NativeStyleContextController>
</div>
<ModalDialog />
<SettingsModal />
</div>
<ModalDialog />
<SettingsModal />
</div>
) : (
<UnsupportedReactVersion />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should use the ModalDialogContext to show a message if we detect an unsupported React version. We do a similar thing for React Native in WarnIfLegacyBackendDetected actually. Conceptually the two are kind of the same.

)}
</InspectedElementContextController>
</OwnersListContextController>
</SettingsModalContextController>
Expand All @@ -50,4 +57,15 @@ function Loading() {
return <div className={styles.Loading}>Loading...</div>;
}

function UnsupportedReactVersion() {
return (
<div className={styles.Column}>
<div className={styles.Header}>Unsupported React version.</div>
<p className={styles.Paragraph}>
React DevTools support requires a development build of React v15.0+.
</p>
</div>
);
}

export default portaledContent(Components);