#57 remove runtime prop checks with prop-types

.eslintrc

@@ -60,17 +60,24 @@
 
         "no-unused-vars": ["error", {
 
-            // allow unused vars with Type at the end, since they really
-            // used in jsdoc type annotations, but eslint does not support
-            // jsdoc as a valid 'use' for vars
-            // https://github.com/eslint/eslint/issues/2813
-            "varsIgnorePattern": ".+Type$"
+            // 1. allow unused vars with 'Type' in name, since they really
+            //    used in jsdoc type annotations, but eslint does not support
+            //    jsdoc as a valid 'use' for vars
+            //    https://github.com/eslint/eslint/issues/2813
+            // 2. allow unused vars with 'unrested' in name, to remove
+            //    props from rest`ed object while destructuring
+            //    (eg. we do not want 'someProp' to appear in 'rest' object:
+            //    'const {someProp: unrested, ...rest} = obj')
+            "varsIgnorePattern": "(.+Type$|^unrested\\d+$)"
         }],
 
         // React
         "jsx-quotes": [ 1, "prefer-single" ],
         "react/jsx-indent": [2, 4],
 
+        // ignore 'propTypes' since using static prop validation
+        "react/prop-types": 0,
+
         // Babel rewrites
         "object-curly-spacing": 0,
         "babel/object-curly-spacing": 1

src/action/handlers/create-cross-association.js

@@ -58,7 +58,6 @@ export default function createCrossAssociation(state, data) {
         from: head,
         toId: tailIdeaId,
         to: tail,
-        // @ts-ignore
         weight: weighAssociation(head.posAbs, tail.posAbs)
     });
 

src/action/handlers/create-idea.js

@@ -49,7 +49,6 @@ export default function createIdea(state, data) {
         from: parent,
         toId: idea.id,
         to: idea,
-        // @ts-ignore
         weight: weighAssociation(parent.posAbs, idea.posAbs)
     });
 

src/action/handlers/remove-idea.js

@@ -75,12 +75,10 @@ export default function removeIdea(state, data) {
     // removing parent-child edge is enough.
     const parent = idea.edgeFromParent.from;
 
-    // @ts-ignore
     const index = parent.edgesToChilds.indexOf(idea.edgeFromParent);
 
     patch.push('update-idea', {
         id: parent.id,
-        // @ts-ignore
         edgesToChilds: withoutItem(parent.edgesToChilds, index)
     });
 

src/boot/client/client.js

@@ -17,7 +17,7 @@ import mutateVM from 'vm/mutators';
 import mutateView from 'view/mutators';
 
 // for devtools Fauxton extension
-// @ts-ignore
+// @ts-ignore unknown 'window' prop
 window.PouchDB = PouchDB;
 
 /**

src/model/utils/is-valid-position.js

@@ -8,7 +8,5 @@ import PointType from 'model/entities/Point';
  */
 export default function isValidPosition(pos) {
     return typeof pos === 'object'
-
-        // @ts-ignore
         && Number.isFinite(pos.x) && Number.isFinite(pos.y);
 }

src/utils/guard-object-props.js

@@ -1,10 +1,12 @@
 /**
- * Throws error on attempt to read/write unexisting object props.
- * 
+ * Run-time checks accessing object props.  
  * Prevents unintentional access by mistyping prop name.
  * 
- * - allow to read from own and prototype props.
- * - allow to write to own, but not prototype (!) props.
+ * @deprecated prefer static type checks over run-time checks.
+ *             use as last resort when static analisys is not possible.
+ * 
+ * - allows to read from own and prototype props.
+ * - allows to write to own, but not prototype (!) props.
  * 
  * @param {object} object
  * @return {Proxy|object}

src/utils/noop.js

@@ -1 +1,6 @@
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @param {array} [args]
+ * @return {*}
+ */
 export default () => {};

src/utils/required-params.js

@@ -1,8 +1,8 @@
 /**
  * Run-time checks for required function parameters
  * 
- * NOTE: always prefer static type checks over run-time checks.
- *       use as last resort in case static analisys is not possible.
+ * @deprecated prefer static type checks over run-time checks.
+ *             use as last resort when static analisys is not possible.
  * 
  * Current usecases:
  * - Store action handlers (until #65 is fixed)

src/utils/state/middlewares/logger/index.js

@@ -1,2 +1,2 @@
-// @ts-ignore
-export default from './logger';
+import module from './logger';
+export default module;

src/view/main/Main/Main.jsx

@@ -1,21 +1,21 @@
-// @ts-nocheck
-
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
-import MainVM from 'vm/main/Main';
+import MainVmType from 'vm/main/Main';
 import Mindmap from '../Mindmap';
 
+// @ts-ignore
 import classes from './Main.css';
 
+/**
+ * @typedef {object} Props
+ * @prop {MainVmType} vm
+ * 
+ * @extends {Component<Props>}
+ */
 export default class Main extends Component {
 
-    static propTypes = {
-        vm: PropTypes.instanceOf(MainVM).isRequired
-    };
-
     render() {
-        
+
         return (
             <main className={classes.root}>
                 {

src/view/main/Main/index.js

@@ -1,2 +1,2 @@
-// @ts-ignore
-export default from './Main';
+import module from './Main';
+export default module;

src/view/main/Mindmap/Mindmap.jsx

@@ -1,31 +1,30 @@
-// @ts-nocheck
-
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import MindmapVM from 'vm/main/Mindmap';
+import MindmapType from 'vm/main/Mindmap';
 
 import Graph from 'view/map/entities/Graph';
 
+// @ts-ignore
 import classes from './Mindmap.css';
 
+/**
+ * @typedef {object} Props
+ * @prop {MindmapType} mindmap
+ * 
+ * @extends {Component<Props>}
+ */
 export default class Mindmap extends Component {
 
-    static propTypes = {
-        mindmap: PropTypes.instanceOf(MindmapVM).isRequired,
-        className: PropTypes.string
-    };
-
     render() {
 
-        const {mindmap, className, ...other} = this.props;
+        const {mindmap, ...other} = this.props;
 
         return (
-            <div className={ cx(classes.root, className) }
+            <div className={cx(classes.root)}
                 {...other}>
 
-                <Graph graph={ mindmap.graph } />
+                <Graph graph={mindmap.graph} />
 
             </div>
         );

src/view/main/Mindmap/index.js

@@ -1,2 +1,2 @@
-// @ts-ignore
-export default from './Mindmap.connect';
+import module from './Mindmap.connect';
+export default module;

src/view/map/entities/Graph/Graph.jsx

@@ -1,15 +1,12 @@
-// @ts-nocheck
-
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
 import getBodyMargin from 'view/utils/dom/get-body-margin';
 import getElementSize from 'view/utils/dom/get-element-size';
 import getPageScale from 'view/utils/dom/get-page-scale';
 import toElementCoords from 'view/utils/dom/map-window-to-element-coords';
 
 import Point from 'model/entities/Point';
-import GraphVM from 'vm/map/entities/Graph';
+import GraphVmType from 'vm/map/entities/Graph';
 
 import Svg from 'view/shared/svg/Svg';
 import Group from 'view/shared/svg/Group';
@@ -21,33 +18,38 @@ import ContextMenu from 'view/shared/ContextMenu';
 import ColorPicker from 'view/shared/ColorPicker';
 import LookupPopup from 'view/shared/LookupPopup';
 
+// @ts-ignore
 import classes from './Graph.css';
 
-export default class Graph extends Component {
-
-    static propTypes = {
-        graph: PropTypes.instanceOf(GraphVM).isRequired,
-
-        // own events
-        onClick: PropTypes.func.isRequired,
-        onWheel: PropTypes.func.isRequired,
-        onMouseUp: PropTypes.func.isRequired,
-        onMouseMove: PropTypes.func.isRequired,
-        onMouseLeave: PropTypes.func.isRequired,
-        onKeyPress: PropTypes.func.isRequired,
-        onViewportResize: PropTypes.func.isRequired,
-
-        // child events
-        onContextMenuItemSelect: PropTypes.func.isRequired,
-        onAssociationTailsLookupPhraseChange: PropTypes.func.isRequired,
-        onAssociationTailsLookupKeyDown: PropTypes.func.isRequired,
-        onAssociationTailsLookupSuggestionSelect: PropTypes.func.isRequired,
-        onColorPickerChange: PropTypes.func.isRequired,
-
-        onNodeMouseDown: PropTypes.func.isRequired,
-        onNodeRightClick: PropTypes.func.isRequired,
-        onLinkRightClick: PropTypes.func.isRequired
-    }
+// TODO: eslint 'valid-jsdoc' throws on classes with methods
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @typedef {object} Props
+ * @prop {GraphVmType} graph
+ * 
+ * own events
+ * @prop {function()}          onClick
+ * @prop {function({up, pos})} onWheel
+ * @prop {function()}          onMouseUp
+ * @prop {function()}          onMouseLeave
+ * @prop {function({key})}     onKeyPress
+ * @prop {function({size})}    onViewportResize
+ * @prop {function({viewportShift, pressedMouseButton})} onMouseMove
+ * 
+ * child events
+ * @prop {function({item})} onContextMenuItemSelect
+ * @prop {function()}       onAssociationTailsLookupPhraseChange
+ * @prop {function()}       onAssociationTailsLookupKeyDown
+ * @prop {function()}       onAssociationTailsLookupSuggestionSelect
+ * @prop {function()}       onColorPickerChange
+ * 
+ * @prop {function({node, button})} onNodeMouseDown
+ * @prop {function({node, pos})}    onNodeRightClick
+ * @prop {function({link, pos})}    onLinkRightClick
+ * 
+ * @extends {Component<Props>}
+ */
+export default class GraphTest extends Component {
 
     getViewportSize = () => {
         return getElementSize(this.viewport);
@@ -57,7 +59,7 @@ export default class Graph extends Component {
         return toElementCoords(windowPos, this.viewport);
     }
 
-    componentDidMount = () => {
+    componentDidMount() {
         // for now detect viewport resize by window 'resize'.
         // eslint-disable-next-line max-len
         // https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

src/view/map/entities/Graph/index.js

@@ -1,2 +1,2 @@
-// @ts-ignore
-export default from './Graph.connect';
+import module from './Graph.connect';
+export default module;

src/view/map/entities/GraphDebug/GraphDebug.jsx

@@ -1,19 +1,19 @@
-// @ts-nocheck
-
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
 import round from 'utils/round';
-import GraphVM from 'vm/map/entities/Graph';
+import GraphVmType from 'vm/map/entities/Graph';
 
+// @ts-ignore
 import classes from './GraphDebug.css';
 
+/**
+ * @typedef {object} Props
+ * @prop {GraphVmType} graph
+ * 
+ * @extends {Component<Props>}
+ */
 export default class GraphDebug extends Component {
 
-    static propTypes = {
-        graph: PropTypes.instanceOf(GraphVM).isRequired
-    }
-
     render() {
 
         const {graph, graph: {viewbox}} = this.props;

src/view/map/entities/GraphDebug/index.js

@@ -1,2 +1,2 @@
-// @ts-ignore
-export default from './GraphDebug';
+import module from './GraphDebug';
+export default module;