[FlowCleanup] InspectorPanel -> Delete PropTypes #21392

dkaushik95 · 2018-09-28T04:25:12Z

Related to #21342

Test Plan:

There are 4 functions which I have stubbed as ?Function and I need some help with the parameters and/or return types (if the return type is void, I will put it as mixed so no need to mention that.)

The code is properly formatted.
I also ran Flow to make sure I don't get errors for this file.

Release Notes

Help reviewers and the release process by writing your own release notes. See below for an example.

[CATEGORY] [TYPE] [LOCATION] - Message

facebook-github-bot · 2018-09-28T04:25:54Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

analysis-bot

eslint found some issues. You may run yarn prettier or npm run prettier to fix these.

analysis-bot · 2018-09-28T04:27:33Z

Libraries/Inspector/InspectorPanel.js

+  ...ViewProps,
+  devtoolsIsOpen?: ?boolean,
+  inspecting?: ?boolean,
+  setInspecting?: ?Function,


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

This should be:

setInspecting?: ?(val: boolean) => void

edit: never mind this, missed the custom button component

@empyrical Hah! You made the same mistake I did. :P

More of a reason to rename Button to InspectorPanelButton.

analysis-bot · 2018-09-28T04:27:33Z

Libraries/Inspector/InspectorPanel.js

+  inspecting?: ?boolean,
+  setInspecting?: ?Function,
+  perfing?: ?boolean,
+  setPerfing?: ?Function,


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

This should be:

setPerfing?: ?(val: boolean) => void

analysis-bot · 2018-09-28T04:27:33Z

Libraries/Inspector/InspectorPanel.js

+  perfing?: ?boolean,
+  setPerfing?: ?Function,
+  touchTargeting?: ?boolean,
+  setTouchTargeting?: ?Function,


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

This should be:

setTouchTargeting?: ?(val: boolean) => void

analysis-bot · 2018-09-28T04:27:33Z

Libraries/Inspector/InspectorPanel.js

+  touchTargeting?: ?boolean,
+  setTouchTargeting?: ?Function,
+  networking?: ?boolean,
+  setNetworking?: ?Function,


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

This should be:

setNetworking?: ?(val: boolean) => void

analysis-bot · 2018-09-28T04:27:33Z

Libraries/Inspector/InspectorPanel.js

 };

-class Button extends React.Component<$FlowFixMeProps> {
+type ButtonProps = $ReadOnly<{|
+  ...ViewProps,


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

We don't need to spread ViewProps into ButtonProps. The render method of Button only uses onClick, pressed, and title.

pull-bot · 2018-09-28T04:27:41Z

	Warnings
⚠️	📋 Release Notes - This PR may have incorrectly formatted Release Notes.

Generated by 🚫 dangerJS

facebook-github-bot · 2018-09-28T04:28:48Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

RSNara

This is awesome!

But, I'd like to request a few changes. :)

RSNara · 2018-09-28T16:10:19Z

Libraries/Inspector/InspectorPanel.js

+  ...ViewProps,
+  devtoolsIsOpen?: ?boolean,
+  inspecting?: ?boolean,
+  setInspecting?: ?Function,


This should be:

setInspecting?: ?(val: boolean) => void

RSNara · 2018-09-28T16:10:47Z

Libraries/Inspector/InspectorPanel.js

+  inspecting?: ?boolean,
+  setInspecting?: ?Function,
+  perfing?: ?boolean,
+  setPerfing?: ?Function,


This should be:

setPerfing?: ?(val: boolean) => void

RSNara · 2018-09-28T16:10:59Z

Libraries/Inspector/InspectorPanel.js

+  perfing?: ?boolean,
+  setPerfing?: ?Function,
+  touchTargeting?: ?boolean,
+  setTouchTargeting?: ?Function,


This should be:

setTouchTargeting?: ?(val: boolean) => void

RSNara · 2018-09-28T16:11:18Z

Libraries/Inspector/InspectorPanel.js

+  touchTargeting?: ?boolean,
+  setTouchTargeting?: ?Function,
+  networking?: ?boolean,
+  setNetworking?: ?Function,


This should be:

setNetworking?: ?(val: boolean) => void

RSNara · 2018-09-28T16:13:29Z

Libraries/Inspector/InspectorPanel.js

 };

-class Button extends React.Component<$FlowFixMeProps> {
+type ButtonProps = $ReadOnly<{|
+  ...ViewProps,


We don't need to spread ViewProps into ButtonProps. The render method of Button only uses onClick, pressed, and title.

RSNara · 2018-09-28T16:16:11Z

Libraries/Inspector/InspectorPanel.js

+  title?: ?string,
+|}>;
+
+class Button extends React.Component<ButtonProps> {


nit: Can we rename this component to InspectorPanelButton? This current naming is super misleading. When I was reading through this code initially, I thought that the <Button/> used in InspectorPanel was the button component from react-native.

Same here, got confused by that too. I think it would be worth renaming

RSNara · 2018-09-28T16:19:40Z

Libraries/Inspector/InspectorPanel.js

+// import type {SyntheticEvent} from 'CoreEventTypes';
+
+type Props = $ReadOnly<{|
+  ...ViewProps,


It looks like the render method of InspectorPanel doesn't use any the props from View. So it's unnecessary to spread ViewProps into Props.

RSNara · 2018-09-28T16:21:17Z

Libraries/Inspector/InspectorPanel.js

 };

-class Button extends React.Component<$FlowFixMeProps> {
+type ButtonProps = $ReadOnly<{|


nit: Rename to InspectorPanelButtonProps.

RSNara · 2018-09-28T16:21:52Z

Libraries/Inspector/InspectorPanel.js

-class InspectorPanel extends React.Component<$FlowFixMeProps> {
+import type {ViewProps} from 'ViewPropTypes';
+// Will add this once I get params for the functions
+// import type {SyntheticEvent} from 'CoreEventTypes';


I'm afraid I don't follow these comments. Should they be here?

In my instructions, I suggested that people could stub out functions types with ?Function and ask for help getting the function signatures in their pull request if they needed help, and looks like you did just that here 👍

dkaushik95 · 2018-09-29T01:04:38Z

@RSNara Thanks for the help, I will come out with another commit filling out the functions.

@RSNara

…s and return types. Thanks to @RSNara

dkaushik95 · 2018-09-29T01:21:38Z

Libraries/Inspector/InspectorPanel.js

 };

-class Button extends React.Component<$FlowFixMeProps> {
+type InspectorPanelButtonProps = $ReadOnly<{|
+  onClick?: ?Function,


@RSNara I need a similar params/return type here.

You're right. This should also take the same signature:

onClick?: ?(val: boolean) => void

Now that I think about it more, a lot of these types are unnecessarily optional. For example, I think onClick should not be optional, since we assume (in the implementation of this component) that it's a function. Do you mind making these optional properties, that don't need to be optional, non-optional?

dkaushik95 · 2018-09-29T02:47:15Z

Libraries/Inspector/InspectorPanel.js

-class InspectorPanel extends React.Component<$FlowFixMeProps> {
+type Props = $ReadOnly<{|
+  devtoolsIsOpen?: ?boolean,
+  inspecting?: ?boolean,


Circle CI errors indicate that we need to strict type it rather than ?boolean. Do we want strict type checking or nullable type checking? or maybe both. I think this applies to all the boolean values when we are doing:

if(value) then something

Does the following work?

if (value === true) { // stuff }

Yes. But these props can be either boolean or undefined. I don't know how to write for both? ?boolean should work, but I get this error:

Sketchy null check on boolean [1] which is potentially false. Perhaps you meant to check for null or undefined [2]? (`sketchy-null-bool`)`

Hmm... There's only one use of <InspectorPanel> in the codebase:

<InspectorPanel devtoolsIsOpen={!!this.state.devtoolsAgent} inspecting={this.state.inspecting} perfing={this.state.perfing} setPerfing={this.setPerfing.bind(this)} setInspecting={this.setInspecting.bind(this)} inspected={this.state.inspected} hierarchy={this.state.hierarchy} selection={this.state.selection} setSelection={this.setSelection.bind(this)} touchTargeting={Touchable.TOUCH_TARGET_DEBUG} setTouchTargeting={this.setTouchTargeting.bind(this)} networking={this.state.networking} setNetworking={this.setNetworking.bind(this)} />

Lets make the inspecting, setInspecting, perfing, setPerfing, selection, setSelection props non-optional. That should fix our problems.

…to primitive types (can be exported to child components)

…PropTypes import

analysis-bot

eslint found some issues. You may run yarn prettier or npm run prettier to fix these.

analysis-bot · 2018-09-29T03:34:55Z

Libraries/Inspector/InspectorPanel.js

 const ScrollView = require('ScrollView');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');

-class InspectorPanel extends React.Component<$FlowFixMeProps> {
+import type {ViewStyleProp} from 'StyleSheet';


Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)

RSNara · 2018-09-29T18:23:06Z

Libraries/Inspector/InspectorPanel.js

+      fileName?: string,
+      lineNumber?: number,
+    },
+  },


I think we should be more strict and use exact object types here, so:

inspected?: ?{| style?: ?ViewStyleProp, frame?: ?{| top?: ?number, left?: ?number, width?: ?number, height: ?number, |}, source?: ?{| fileName?: string, lineNumber?: number, |}, |},

Cool. Also, I found these types from other components. So should we export these types on those components and reference them here? There are many components in Inspector which needs to be converted to flow types.

Yeah, that sounds like a great idea! I can see there being an InspectorTypes module under Libraries/Inspector that contains shared types for the modules in that folder. But I think it may be too much to make that refactor in this diff.

Would you like to tackle this in another PR? For now, we can just copy-paste the frame type here.

Sure. I'll finish up with this today and work on the Inspector folder next week.

RSNara

Sweet! Let me merge this. :)

facebook-github-bot

RSNara has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

react-native-bot · 2018-10-01T21:35:04Z

@dkaushik95 merged commit c870533 into facebook:master.

Summary: Related to facebook#21342 Pull Request resolved: facebook#21392 Reviewed By: TheSavior Differential Revision: D10129812 Pulled By: RSNara fbshipit-source-id: 79e900b56eb043452ce8e13e998a9ad8d4443897

InspectorPanel -> Delete PropTypes

d818626

analysis-bot suggested changes Sep 28, 2018

View reviewed changes

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 28, 2018

react-native-bot added ✅Test Plan Missing Changelog This PR appears to be missing a changelog, or they are incorrectly formatted. labels Sep 28, 2018

dkaushik95 mentioned this pull request Sep 28, 2018

Removing propTypes from core components #21342

Closed

42 tasks

RSNara requested changes Sep 28, 2018

View reviewed changes

dkaushik95 added 2 commits September 28, 2018 21:13

removed imports that were not required. added suitable function param…

59c68f3

…s and return types. Thanks to @RSNara

renamed Button inside InspectorPanel to InspectorPanelButton

758c13a

dkaushik95 commented Sep 29, 2018

View reviewed changes

dkaushik95 added 3 commits September 28, 2018 23:03

Digged into the child components and added types to required objects …

d234739

…to primitive types (can be exported to child components)

Fixed hierarchy flowtypes based on CircleCI/analyze

15406ff

Changed hierarchy to any taken from Inspector.js flow types, removed …

a8dd2fd

…PropTypes import

analysis-bot suggested changes Sep 29, 2018

View reviewed changes

RSNara reviewed Sep 29, 2018

View reviewed changes

changed certain optional types to required. Added type for onClick

db5d2f3

RSNara approved these changes Oct 1, 2018

View reviewed changes

facebook-github-bot reviewed Oct 1, 2018

View reviewed changes

hramos changed the title ~~InspectorPanel -> Delete PropTypes~~ [FlowCleanup] InspectorPanel -> Delete PropTypes Oct 1, 2018

facebook-github-bot closed this in c870533 Oct 1, 2018

facebook locked as resolved and limited conversation to collaborators Oct 1, 2018

react-native-bot added the Merged This PR has been merged. label Oct 1, 2018

[FlowCleanup] InspectorPanel -> Delete PropTypes #21392

[FlowCleanup] InspectorPanel -> Delete PropTypes #21392

Conversation

dkaushik95 commented Sep 28, 2018 • edited Loading

Test Plan:

Release Notes

facebook-github-bot commented Sep 28, 2018

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

empyrical Sep 28, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pull-bot commented Sep 28, 2018 • edited Loading

facebook-github-bot commented Sep 28, 2018

RSNara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dkaushik95 commented Sep 29, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dkaushik95 Sep 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RSNara Sep 29, 2018 • edited Loading

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RSNara Sep 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RSNara left a comment

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

react-native-bot commented Oct 1, 2018

dkaushik95 commented Sep 28, 2018 •

edited

Loading

empyrical Sep 28, 2018 •

edited

Loading

pull-bot commented Sep 28, 2018 •

edited

Loading

dkaushik95 Sep 29, 2018 •

edited

Loading

RSNara Sep 29, 2018 •

edited

Loading

RSNara Sep 29, 2018 •

edited

Loading