chore(dev): upgrade webpack & flow

Author: STRML

.flowconfig

@@ -6,11 +6,8 @@ lib/
 index.js
 
 [options]
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowBug.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowNewLine.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIssue
 esproposal.class_instance_fields=enable
 esproposal.class_static_fields=enable
 sharedmemory.heap_size=3221225472
+esproposal.optional_chaining=enable
+exact_by_default=true

Makefile

@@ -29,13 +29,13 @@ install link:
 	@yarn $@
 
 test: $(BIN)
-	@NODE_ENV=test $(BIN)/karma start
+	@$(BIN)/karma start
 
 test-phantom: $(BIN)
-	@NODE_ENV=test $(BIN)/karma start karma-phantomjs.conf.js
+	@$(BIN)/karma start karma-phantomjs.conf.js
 
 dev: $(BIN) clean
-	env DRAGGABLE_DEBUG=1 $(BIN)/webpack-dev-server
+	env DRAGGABLE_DEBUG=1 $(BIN)/webpack serve --mode=development
 
 node_modules/.bin: install
 

karma.conf.js

@@ -2,14 +2,14 @@
 
 const _ = require('lodash');
 const webpack = require('webpack');
-process.env.NODE_ENV = 'test';
+process.env.NODE_ENV = 'development';
 process.env.CHROME_BIN = require('puppeteer').executablePath();
 
 module.exports = function(config) {
   const webpackConfig = _.merge(
     require('./webpack.config.js')({}, {}),
     {
-      mode: 'production',
+      mode: 'development',
       // Remove source maps: *speeeeeed*
       devtool: false,
       cache: true,
@@ -23,6 +23,7 @@ module.exports = function(config) {
 
   delete webpackConfig.entry; // karma-webpack complains
   delete webpackConfig.output; // karma-webpack complains
+  // Make sure `process.env` is present as an object
   webpackConfig.plugins.push(new webpack.DefinePlugin({
     process: {env: {}},
   }));

lib/Draggable.js

@@ -7,7 +7,7 @@ import {createCSSTransform, createSVGTransform} from './utils/domFns';
 import {canDragX, canDragY, createDraggableData, getBoundPosition} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import DraggableCore from './DraggableCore';
-import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps} from './DraggableCore';
+import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps, DraggableCoreDefaultProps} from './DraggableCore';
 import log from './utils/log';
 import type {Bounds, DraggableEventHandler} from './utils/types';
 import type {Element as ReactElement} from 'react';
@@ -21,18 +21,22 @@ type DraggableState = {
   prevPropsPosition: ?ControlPosition,
 };
 
-export type DraggableProps = {
-  ...$Exact<DraggableCoreProps>,
+export type DraggableDefaultProps = {
+  ...DraggableCoreDefaultProps,
   axis: 'both' | 'x' | 'y' | 'none',
   bounds: Bounds | string | false,
   defaultClassName: string,
   defaultClassNameDragging: string,
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
-  nodeRef?: ?React.ElementRef<any>,
+  scale: number,
+};
+
+export type DraggableProps = {
+  ...DraggableCoreProps,
+  ...DraggableDefaultProps,
   positionOffset: PositionOffsetControlPosition,
   position: ControlPosition,
-  scale: number
 };
 
 //
@@ -41,7 +45,7 @@ export type DraggableProps = {
 
 class Draggable extends React.Component<DraggableProps, DraggableState> {
 
-  static displayName = 'Draggable';
+  static displayName: ?string = 'Draggable';
 
   static propTypes = {
     // Accepts all props <DraggableCore> accepts.
@@ -162,32 +166,31 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     transform: dontSetMe
   };
 
-  static defaultProps = {
+  static defaultProps: DraggableDefaultProps = {
     ...DraggableCore.defaultProps,
     axis: 'both',
     bounds: false,
     defaultClassName: 'react-draggable',
     defaultClassNameDragging: 'react-draggable-dragging',
     defaultClassNameDragged: 'react-draggable-dragged',
     defaultPosition: {x: 0, y: 0},
-    position: null,
     scale: 1
   };
 
   // React 16.3+
   // Arity (props, state)
-  static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState) {
+  static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState): ?$Shape<DraggableState> {
     // Set x/y if a new position is provided in props that is different than the previous.
     if (
       position &&
-      (!prevPropsPosition || 
+      (!prevPropsPosition ||
         position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y
       )
     ) {
       log('Draggable: getDerivedStateFromProps %j', {position, prevPropsPosition});
       return {
-        x: position.x, 
-        y: position.y, 
+        x: position.x,
+        y: position.y,
         prevPropsPosition: {...position}
       };
     }
@@ -239,7 +242,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
   // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
   // the underlying DOM node ourselves. See the README for more information.
   findDOMNode(): ?HTMLElement {
-    return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+    return this.props?.nodeRef?.current ?? ReactDOM.findDOMNode(this);
   }
 
   onDragStart: DraggableEventHandler = (e, coreData) => {

lib/DraggableCore.js

@@ -42,28 +42,32 @@ export type DraggableData = {
   lastX: number, lastY: number,
 };
 
-export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void;
+export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void | false;
 
 export type ControlPosition = {x: number, y: number};
 export type PositionOffsetControlPosition = {x: number|string, y: number|string};
 
-export type DraggableCoreProps = {
+export type DraggableCoreDefaultProps = {
   allowAnyClick: boolean,
-  cancel: string,
-  children: ReactElement<any>,
   disabled: boolean,
   enableUserSelectHack: boolean,
-  offsetParent: HTMLElement,
-  grid: [number, number],
-  handle: string,
-  nodeRef?: ?React.ElementRef<any>,
   onStart: DraggableEventHandler,
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
   scale: number,
 };
 
+export type DraggableCoreProps = {
+  ...DraggableCoreDefaultProps,
+  cancel: string,
+  children: ReactElement<any>,
+  offsetParent: HTMLElement,
+  grid: [number, number],
+  handle: string,
+  nodeRef?: ?React.ElementRef<any>,
+};
+
 //
 // Define <DraggableCore>.
 //
@@ -73,7 +77,7 @@ export type DraggableCoreProps = {
 
 export default class DraggableCore extends React.Component<DraggableCoreProps, DraggableCoreState> {
 
-  static displayName = 'DraggableCore';
+  static displayName: ?string = 'DraggableCore';
 
   static propTypes = {
     /**
@@ -111,7 +115,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      * `grid` specifies the x and y that dragging should snap to.
      */
     grid: PropTypes.arrayOf(PropTypes.number),
-    
+
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
      *
@@ -212,30 +216,25 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     transform: dontSetMe
   };
 
-  static defaultProps = {
+  static defaultProps: DraggableCoreDefaultProps = {
     allowAnyClick: false, // by default only accept left click
-    cancel: null,
     disabled: false,
     enableUserSelectHack: true,
-    offsetParent: null,
-    handle: null,
-    grid: null,
-    transform: null,
     onStart: function(){},
     onDrag: function(){},
     onStop: function(){},
     onMouseDown: function(){},
     scale: 1,
   };
 
-  state = {
+  state: DraggableCoreState = {
     dragging: false,
     // Used while dragging to determine deltas.
     lastX: NaN, lastY: NaN,
     touchIdentifier: null
   };
 
-  mounted = false;
+  mounted: boolean = false;
 
   componentDidMount() {
     this.mounted = true;
@@ -266,7 +265,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
   // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
   // the underlying DOM node ourselves. See the README for more information.
   findDOMNode(): ?HTMLElement {
-    return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+    return this.props?.nodeRef?.current ?? ReactDOM.findDOMNode(this);
   }
 
   handleDragStart: EventHandler<MouseTouchEvent> = (e) => {
@@ -441,7 +440,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     return this.handleDragStop(e);
   };
 
-  render() {
+  render(): React.Element<any> {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return React.cloneElement(React.Children.only(this.props.children), {
@@ -450,7 +449,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp,
       // onTouchStart is added on `componentDidMount` so they can be added with
-      // {passive: false}, which allows it to cancel. See 
+      // {passive: false}, which allows it to cancel. See
       // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });

lib/utils/domFns.js

@@ -101,7 +101,7 @@ export function innerWidth(node: HTMLElement): number {
 }
 
 // Get from offsetParent
-export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offsetParent: HTMLElement, scale: number): ControlPosition {
+export function offsetXYFromParent(evt: {clientX: number, clientY: number, ...}, offsetParent: HTMLElement, scale: number): ControlPosition {
   const isBody = offsetParent === offsetParent.ownerDocument.body;
   const offsetParentRect = isBody ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
 

lib/utils/getPrefix.js

@@ -44,4 +44,4 @@ function kebabToTitleCase(str: string): string {
 // Default export is the prefix itself, like 'Moz', 'Webkit', etc
 // Note that you may have to re-test for certain things; for instance, Chrome 50
 // can handle unprefixed `transform`, but not unprefixed `user-select`
-export default getPrefix();
+export default (getPrefix(): string);

lib/utils/positionFns.js

@@ -27,15 +27,16 @@ export function getBoundPosition(draggable: Draggable, x: number, y: number): [n
     if (!(boundNode instanceof ownerWindow.HTMLElement)) {
       throw new Error('Bounds selector "' + bounds + '" could not find an element.');
     }
+    const boundNodeEl: HTMLElement = boundNode; // for Flow, can't seem to refine correctly
     const nodeStyle = ownerWindow.getComputedStyle(node);
-    const boundNodeStyle = ownerWindow.getComputedStyle(boundNode);
+    const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
     // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
     bounds = {
       left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
       top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
-      right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft +
+      right: innerWidth(boundNodeEl) - outerWidth(node) - node.offsetLeft +
         int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),
-      bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop +
+      bottom: innerHeight(boundNodeEl) - outerHeight(node) - node.offsetTop +
         int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)
     };
   }

lib/utils/shims.js

@@ -18,7 +18,7 @@ export function int(a: string): number {
   return parseInt(a, 10);
 }
 
-export function dontSetMe(props: Object, propName: string, componentName: string) {
+export function dontSetMe(props: Object, propName: string, componentName: string): ?Error {
   if (props[propName]) {
     return new Error(`Invalid prop ${propName} passed to ${componentName} - do not set this, set it on the child.`);
   }

package.json

@@ -39,11 +39,11 @@
   },
   "homepage": "https://github.com/mzabriskie/react-draggable",
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-flow-comments": "^7.8.3",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.13.12",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@types/react": "^16.9.35",
@@ -52,11 +52,11 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "eslint": "^7.0.0",
+    "eslint": "^7.22.0",
     "eslint-plugin-react": "^7.20.0",
-    "flow-bin": "^0.125.1",
-    "jasmine-core": "^3.5.0",
-    "karma": "^6.1.1",
+    "flow-bin": "^0.147.0",
+    "jasmine-core": "^3.7.1",
+    "karma": "^6.2.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "2.0.0",
     "karma-firefox-launcher": "^2.1.0",
@@ -77,7 +77,7 @@
     "semver": "^7.3.2",
     "static-server": "^3.0.0",
     "typescript": "^3.9.3",
-    "webpack": "^5.24.3",
+    "webpack": "^5.27.2",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.0"
   },