fix: upgrade Flow and library types

FezVrasta · FezVrasta · commit 363472459ceb · 2021-03-25T13:09:54.000+01:00
diff --git a/.flowconfig b/.flowconfig
@@ -1,15 +1,18 @@
 [ignore]
-/lib/.*
+<PROJECT_ROOT>/lib/.*
 .*/.cache
 
 [include]
 
 [libs]
 
 [lints]
+sketchy-number=error
+sketchy-null=error
 
 [options]
-types_first=false
+react.runtime=automatic
+exact_by_default=true
 
 [strict]
 
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,4 +1,5 @@
 module.exports = {
+  parser: 'flow',
   singleQuote: true,
   trailingComma: 'es5',
   proseWrap: 'always',
diff --git a/demo/index.js b/demo/index.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Global, css } from '@emotion/core';
diff --git a/jest.setup.js b/jest.setup.js
@@ -1,2 +1,2 @@
-// @flow
+// @flow strict
 import '@babel/polyfill';
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-popper",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "Official library to use Popper on React projects",
   "license": "MIT",
   "author": "Travis Arnold <travis@souporserious.com> (http://souporserious.com)",
@@ -93,7 +93,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
-    "flow-bin": "^0.139.0",
+    "flow-bin": "^0.147.0",
     "flow-copy-source": "^2.0.9",
     "gh-pages": "^2.2.0",
     "git-branch-is": "^3.1.0",
diff --git a/src/Manager.js b/src/Manager.js
@@ -1,16 +1,16 @@
-// @flow
+// @flow strict
 import * as React from 'react';
 
-export const ManagerReferenceNodeContext = React.createContext<?Element>();
-export const ManagerReferenceNodeSetterContext = React.createContext<
+export const ManagerReferenceNodeContext: React.Context<?Element>  = React.createContext();
+export const ManagerReferenceNodeSetterContext: React.Context<
   void | ((?Element) => void)
->();
+> = React.createContext();
 
-export type ManagerProps = {
+export type ManagerProps = $ReadOnly<{
   children: React.Node,
-};
+}>;
 
-export function Manager({ children }: ManagerProps) {
+export function Manager({ children }: ManagerProps): React.Node {
   const [referenceNode, setReferenceNode] = React.useState<?Element>(null);
 
   const hasUnmounted = React.useRef(false);
diff --git a/src/Manager.test.js b/src/Manager.test.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import * as Popperjs from '@popperjs/core';
diff --git a/src/Popper.js b/src/Popper.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import * as React from 'react';
 import {
   type State,
@@ -34,15 +34,15 @@ export type PopperChildrenProps = {|
 |};
 export type PopperChildren = (PopperChildrenProps) => React.Node;
 
-export type PopperProps = {|
+export type PopperProps = $ReadOnly<{|
   children: PopperChildren,
   innerRef?: Ref,
   modifiers?: Modifiers,
   placement?: Placement,
   strategy?: PositioningStrategy,
   referenceElement?: ReferenceElement,
   onFirstUpdate?: ($Shape<State>) => void,
-|};
+|}>;
 
 const NOOP = () => void 0;
 const NOOP_PROMISE = () => Promise.resolve(null);
@@ -56,7 +56,7 @@ export function Popper({
   onFirstUpdate,
   innerRef,
   children,
-}: PopperProps) {
+}: PopperProps): React.Node {
   const referenceNode = React.useContext(ManagerReferenceNodeContext);
 
   const [popperElement, setPopperElement] = React.useState(null);
diff --git a/src/Popper.test.js b/src/Popper.test.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import React from 'react';
 import { render, waitFor, act } from '@testing-library/react';
 import * as PopperJs from '@popperjs/core';
diff --git a/src/RefTypes.js b/src/RefTypes.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 type RefHandler = (?HTMLElement) => void;
 type RefObject = { current?: ?HTMLElement};
 
diff --git a/src/Reference.js b/src/Reference.js
@@ -1,17 +1,17 @@
-// @flow
+// @flow strict
 import * as React from 'react';
 import warning from 'warning';
 import { ManagerReferenceNodeSetterContext } from './Manager';
 import { safeInvoke, unwrapArray, setRef } from './utils';
 import { type Ref } from './RefTypes';
 
-export type ReferenceChildrenProps = { ref: Ref };
-export type ReferenceProps = {|
+export type ReferenceChildrenProps = $ReadOnly<{ ref: Ref }>;
+export type ReferenceProps = $ReadOnly<{|
   children: (ReferenceChildrenProps) => React.Node,
   innerRef?: Ref,
-|};
+|}>;
 
-export function Reference({ children, innerRef }: ReferenceProps) {
+export function Reference({ children, innerRef }: ReferenceProps): React.Node {
   const setReferenceNode = React.useContext(ManagerReferenceNodeSetterContext);
 
   const refHandler = React.useCallback(
diff --git a/src/Reference.test.js b/src/Reference.test.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import React from 'react';
 import warning from 'warning';
 import { render } from '@testing-library/react';
diff --git a/src/__typings__/main-test.js b/src/__typings__/main-test.js
@@ -1,12 +1,12 @@
-// @flow
+// @flow strict
 
 // Please remember to update also the TypeScript test files that can
 // be found under `/typings/tests` please. Thanks! 🤗
 
-import React from 'react';
+import * as React from 'react';
 import { Manager, Reference, Popper } from '..';
 
-export const Test = () => (
+export const Test = (): React.Node => (
   <Manager>
     {/* $FlowExpectedError: empty children */}
     <Reference />
@@ -33,7 +33,7 @@ export const Test = () => (
       }) => (
         <div
           ref={ref}
-          style={{ ...style, opacity: (isReferenceHidden || hasPopperEscaped) ? 0 : 1 }}
+          style={{ ...style, opacity: (isReferenceHidden === true || hasPopperEscaped === true) ? 0 : 1 }}
           data-placement={placement}
           onClick={() => update()}
         >
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 
 // Public components
 import { Popper } from './Popper';
diff --git a/src/usePopper.js b/src/usePopper.js
@@ -1,9 +1,11 @@
-// @flow
+// @flow strict
 import * as React from 'react';
 import {
   createPopper as defaultCreatePopper,
   type Options as PopperOptions,
   type VirtualElement,
+  type State as PopperState,
+  type Instance as PopperInstance,
 } from '@popperjs/core';
 import isEqual from 'react-fast-compare';
 import { fromEntries, useIsomorphicLayoutEffect } from './utils';
@@ -13,22 +15,34 @@ type Options = $Shape<{
   createPopper: typeof defaultCreatePopper,
 }>;
 
+type Styles = {
+  [key: string]: $Shape<CSSStyleDeclaration>,
+};
+
+type Attributes = {
+  [key: string]: { [key: string]: string },
+};
+
 type State = {
-  styles: {
-    [key: string]: $Shape<CSSStyleDeclaration>,
-  },
-  attributes: {
-    [key: string]: { [key: string]: string },
-  },
+  styles: Styles,
+  attributes: Attributes,
 };
 
 const EMPTY_MODIFIERS = [];
 
+type UsePopperResult = $ReadOnly<{
+  state: ?PopperState,
+  styles: Styles,
+  attributes: Attributes,
+  update: ?$PropertyType<PopperInstance, 'update'>,
+  forceUpdate: ?$PropertyType<PopperInstance, 'forceUpdate'>,
+}>;
+
 export const usePopper = (
   referenceElement: ?(Element | VirtualElement),
   popperElement: ?HTMLElement,
   options: Options = {}
-) => {
+): UsePopperResult => {
   const prevOptions = React.useRef<?PopperOptions>(null);
 
   const optionsWithDefaults = {
@@ -46,7 +60,7 @@ export const usePopper = (
         top: '0',
       },
       arrow: {
-        position: 'absolute', 
+        position: 'absolute',
       },
     },
     attributes: {},
@@ -62,10 +76,10 @@ export const usePopper = (
 
         setState({
           styles: fromEntries(
-            elements.map((element) => [element, state.styles[element] || {}])
+            elements.map(element => [element, state.styles[element] || {}])
           ),
           attributes: fromEntries(
-            elements.map((element) => [element, state.attributes[element]])
+            elements.map(element => [element, state.attributes[element]])
           ),
         });
       },
diff --git a/src/usePopper.test.js b/src/usePopper.test.js
@@ -1,3 +1,4 @@
+// @flow strict
 import { renderHook, act } from '@testing-library/react-hooks';
 import * as PopperJs from '@popperjs/core';
 
@@ -98,8 +99,8 @@ describe('userPopper', () => {
 
     const { result, waitForNextUpdate } = renderHook(() =>
       usePopper(referenceElement, popperElementWithArrow, {
-        placement: "bottom",
-        modifiers: [{ name: "arrow", options: { element: arrowElement } }]
+        placement: 'bottom',
+        modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
       })
     );
 
diff --git a/src/utils.js b/src/utils.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow strict
 import * as React from 'react';
 import { type Ref } from './RefTypes';
 
@@ -12,7 +12,10 @@ export const unwrapArray = (arg: *): * => (Array.isArray(arg) ? arg[0] : arg);
  * Takes a maybe-undefined function and arbitrary args and invokes the function
  * only if it is defined.
  */
-export const safeInvoke = (fn: ?Function, ...args: *) => {
+export const safeInvoke = <F: Function>(
+  fn: ?F,
+  ...args: Array<mixed>
+): $Call<F> => {
   if (typeof fn === 'function') {
     return fn(...args);
   }
@@ -21,7 +24,7 @@ export const safeInvoke = (fn: ?Function, ...args: *) => {
 /**
  * Sets a ref using either a ref callback or a ref object
  */
-export const setRef = (ref: ?Ref, node: ?HTMLElement) => {
+export const setRef = (ref: ?Ref, node: ?HTMLElement): void => {
   // if its a function call it
   if (typeof ref === 'function') {
     return safeInvoke(ref, node);
@@ -35,7 +38,9 @@ export const setRef = (ref: ?Ref, node: ?HTMLElement) => {
 /**
  * Simple ponyfill for Object.fromEntries
  */
-export const fromEntries = (entries: Array<[string, any]>) =>
+export const fromEntries = (
+  entries: Array<[string, any]>
+): { [key: string]: any } =>
   entries.reduce((acc, [key, value]) => {
     acc[key] = value;
     return acc;
@@ -44,7 +49,9 @@ export const fromEntries = (entries: Array<[string, any]>) =>
 /**
  * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
  */
-export const useIsomorphicLayoutEffect =
+export const useIsomorphicLayoutEffect:
+  | typeof React.useEffect
+  | typeof React.useLayoutEffect =
   typeof window !== 'undefined' &&
   window.document &&
   window.document.createElement
diff --git a/yarn.lock b/yarn.lock
@@ -3648,10 +3648,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.139.0:
-  version "0.139.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.139.0.tgz#3ad6c75460be45b64f00521035c5affb3c440df5"
-  integrity sha512-eilVetLwztYtKjRj//4OsJ7aw47hsUZ8GTINxaZHWhpqiFikErQL0sV/3hQtpm54w9FuS2PO4yvbU0pWrtckqg==
+flow-bin@^0.147.0:
+  version "0.147.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.147.0.tgz#5ac0152e6daabfa8a78950aa1d02aefa968c4300"
+  integrity sha512-4VwnpQGxFQHRo2AvWcHbVOD6wLunT8Tge/cZGSv9twAxLMGSOTop7KDToZI6M/yoGBzdHxQWBii426LupWlbog==
 
 flow-copy-source@^2.0.9:
   version "2.0.9"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`module.exports = {`
	`2`	`+ parser: 'flow',`
`2`	`3`	`singleQuote: true,`
`3`	`4`	`trailingComma: 'es5',`
`4`	`5`	`proseWrap: 'always',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// @flow`
	`1`	`+// @flow strict`
`2`	`2`	`import React, { useState } from 'react';`
`3`	`3`	`import ReactDOM from 'react-dom';`
`4`	`4`	`import { Global, css } from '@emotion/core';`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-// @flow`
	`1`	`+// @flow strict`
`2`	`2`	`import '@babel/polyfill';`