fix(flow): use (placeholder) type for React module, fix/improve docs

Author: matteocng

README.md

@@ -34,14 +34,15 @@ $ npm install --save react-flag-icon-css
 Apps bootstrapped with [`create-react-app`](https://github.com/facebookincubator/create-react-app) support this module out of the box, remember to set `useCssModules` to `false` (unfortunately `create-react-app` does not currently support Css modules).
 
 ```js
+// @flow
 import * as React from 'react';
 import FlagIconFactory from 'react-flag-icon-css'
 
 // Please only use `FlagIconFactory` one time in your application, there is no
 // need to use it multiple times (it would slow down your app). You may place the
 // line below in a `FlagIcon.js` file in your 'components' directory, then
 // write `export default FlagIcon` after it and import it everywhere in your app.
-const FlagIcon = FlagIconFactory(React.default, { useCssModules: false })
+const FlagIcon = FlagIconFactory(React, { useCssModules: false })
 // ...
 ```
 
@@ -66,19 +67,28 @@ $ npm install --save-dev ...
 Import `FlagIconFactory` from `react-flag-icon-css`, it accepts the `React` module as the first argument and creates the `FlagIcon` component. *This approach ensures that `FlagIcon` uses your app's `React` instance, avoiding issues such as two versions of `React` being loaded at the same time.*
 
 ```js
+/* your-app/your-components/FlagIcon.js */
 // @flow
 import * as React from 'react'
-import ReactDOM from 'react-dom'
 import FlagIconFactory from 'react-flag-icon-css'
 
 // Please only use `FlagIconFactory` one time in your application, there is no
 // need to use it multiple times (it would slow down your app). You may place the
 // line below in a `FlagIcon.js` file in your 'components' directory, then
 // write `export default FlagIcon` after it and import it everywhere in your app.
-const FlagIcon = FlagIconFactory(React.default)
+const FlagIcon = FlagIconFactory(React)
 // If you are not using css modules, write the following:
 // const FlagIcon = FlagIconFactory(React, { useCssModules: false })
 
+export default FlagIcon
+```
+
+```js
+/* your-app/app.js */
+import * as React from 'react';
+import ReactDOM from 'react-dom'
+import FlagIcon from './your-components/FlagIcon.js'
+
 const App = (props = {}) =>
   <div>
     <FlagIcon code={props.code} size={props.size} />

src/FlagIcon/FlagIcon.js

@@ -1,16 +1,16 @@
 // @flow
-import typeof ReactModule from 'react'
 import type { Node } from 'react'
 import type {
   FlagIconPropsType,
   FlagIconOptionsType,
   FlagIconReturnType,
   CssModuleType,
+  ReactModuleType,
 } from '../types/flow'
 import { makeClassnames } from '../functions'
 
 const FlagIcon = <T>(
-  React: ReactModule,
+  React: ReactModuleType,
   options: FlagIconOptionsType<T>,
   styles?: CssModuleType,
 ): FlagIconReturnType<T> => (props: FlagIconPropsType): Node => {

src/FlagIcon/FlagIconFactory.js

@@ -1,5 +1,4 @@
 // @flow
-import typeof ReactModule from 'react'
 import FlagIcon from './FlagIcon'
 import styles from '../styles'
 import { makeStyles, makeFlagIconOptions } from '../functions'
@@ -11,10 +10,11 @@ import type {
   FlagIconFactoryReturnType,
   StandardFlagIconFactoryReturnType,
   CssModuleType,
+  ReactModuleType,
 } from '../types/flow'
 
 const FlagIconFactory = <T>(
-  React: ReactModule,
+  React: ReactModuleType,
   options?: FlagIconOptionsType<T>,
 ): StandardFlagIconFactoryReturnType => {
   // We 'makeFlagIconOptions' by merging the default options with the (optional)
@@ -55,7 +55,7 @@ const FlagIconFactory = <T>(
 export default FlagIconFactory
 
 const CustomFlagIconFactory = <T: { [string]: string }>(
-  React: ReactModule,
+  React: ReactModuleType,
   options?: FlagIconOptionsType<T>,
 ): FlagIconFactoryReturnType<T> => FlagIconFactory(React, options)
 export { CustomFlagIconFactory }

src/__tests__/FlagIcon.js

@@ -17,7 +17,6 @@ import testThemeStyles from './static/testThemeStyles.css'
 import { requiredProps, optionalProps } from './static/flagIconProps'
 
 const { getCountryCodes } = countries
-const ReactDefault = React.default
 
 // Utility functions.
 
@@ -56,7 +55,7 @@ test('props: className', (t: *) => {
   const options = { useCssModules: false }
   const props = { ...requiredProps, className: 'some-css-rule' }
 
-  const FlagIcon = FlagIconFactory(ReactDefault, options)
+  const FlagIcon = FlagIconFactory(React, options)
   const ReactFlagIcon = FlagIcon(props)
   testFlagIcon(t, ReactFlagIcon, options, props)
 })
@@ -69,13 +68,13 @@ test('props: styleName', (t: *) => {
     className: 'some-css-rule',
   }
 
-  const FlagIconModules = FlagIconFactory(ReactDefault, options)(props)
+  const FlagIconModules = FlagIconFactory(React, options)(props)
   testFlagIcon(t, FlagIconModules, options, props)
 })
 
 test('options:themeStyles', (t: *) => {
   const options = { themeStyles: testThemeStyles }
-  const FlagIconCssModules = FlagIconFactory(ReactDefault, options)
+  const FlagIconCssModules = FlagIconFactory(React, options)
   const ReactFlagIcon = FlagIconCssModules({ ...requiredProps })
 
   const tree = render.create(ReactFlagIcon).toJSON()
@@ -124,7 +123,7 @@ test('props:children', (t: *) => {
 
   const childrenClassName = 'test'
   const childrenText = 'test'
-  const DummyComponent = DummyComponentFactory(ReactDefault)
+  const DummyComponent = DummyComponentFactory(React)
   const children = DummyComponent({
     code: 'it',
     text: childrenText,

src/__tests__/FlagIconFactory.js

@@ -5,8 +5,6 @@ import render from 'react-test-renderer'
 import test from 'ava' // eslint-disable-line import/no-extraneous-dependencies
 import FlagIconFactory from '../'
 
-const ReactDefault = React.default
-
 // SEE: https://github.com/facebook/flow/tree/master/packages/flow-upgrade
 test('Works when React is imported in the "old way"', t => {
   const FlagIcon = FlagIconFactory(OldWayReact)
@@ -20,7 +18,7 @@ test('does not set FlagIcon.propTypes in production', t => {
   const previousEnv = process.env.NODE_ENV
   process.env.NODE_ENV = 'production'
 
-  const FlagIcon = FlagIconFactory(ReactDefault)
+  const FlagIcon = FlagIconFactory(React)
 
   process.env.NODE_ENV = previousEnv
   t.falsy(FlagIcon.propTypes)
@@ -30,7 +28,7 @@ test('sets FlagIcon.propTypes in development', t => {
   const previousEnv = process.env.NODE_ENV
   process.env.NODE_ENV = 'development'
 
-  const FlagIcon = FlagIconFactory(ReactDefault)
+  const FlagIcon = FlagIconFactory(React)
 
   process.env.NODE_ENV = previousEnv
   t.truthy(FlagIcon.propTypes)

src/__tests__/customCodes.js

@@ -7,7 +7,6 @@ import { CustomFlagIconFactory } from '../FlagIcon/FlagIconFactory'
 import type { FlagIconOptionsType } from '../types/flow'
 import { codes, styles } from './example-custom-flags'
 
-const ReactDefault = React.default
 const customCodes = codes
 const customCodesStyles = styles
 const themeStyles = {}
@@ -21,8 +20,8 @@ test('FlagIcon options > customCodes', (t: *) => {
       ...customCodesStyles,
     },
   }
-  const FlagIconCssModules = CustomFlagIconFactory(ReactDefault, options)
-  const FlagIcon = CustomFlagIconFactory(ReactDefault, {
+  const FlagIconCssModules = CustomFlagIconFactory(React, options)
+  const FlagIcon = CustomFlagIconFactory(React, {
     ...options,
     useCssModules: false,
   })
@@ -48,8 +47,8 @@ test('FlagIcon options > customCodes & !themeStyles', (t: *) => {
   const options: FlagIconOptionsType<*> = {
     customCodes,
   }
-  const FlagIconCssModules = FlagIconFactory(ReactDefault, options)
-  const FlagIcon = FlagIconFactory(ReactDefault, {
+  const FlagIconCssModules = FlagIconFactory(React, options)
+  const FlagIcon = FlagIconFactory(React, {
     ...options,
     useCssModules: false,
   })
@@ -76,8 +75,8 @@ test('FlagIcon options > customCodes classes not in themeStyles', (t: *) => {
       'theme-base': 'lorem-ipsum',
     },
   }
-  const FlagIconCssModules = FlagIconFactory(ReactDefault, options)
-  const FlagIcon = FlagIconFactory(ReactDefault, {
+  const FlagIconCssModules = FlagIconFactory(React, options)
+  const FlagIcon = FlagIconFactory(React, {
     ...options,
     useCssModules: false,
   })

src/__tests__/internals/DummyComponent.js

@@ -6,10 +6,10 @@
 // and check that it all works in a single file (Flow types, React components,
 // Flow tests).
 import PropTypes from 'prop-types'
-import typeof ReactModule from 'react' // eslint-disable-line import/no-duplicates
 // We import `ReactLibrary` exclusively for the Flow tests below.
 import ReactLibrary from 'react' // eslint-disable-line import/no-duplicates
 import type { Node, StatelessFunctionalComponent } from 'react'
+import type { ReactModuleType } from '../../types/flow'
 
 // 1. Flow types.
 type DummyCodeType = 'it' | 'eu'
@@ -45,7 +45,7 @@ const makeCorrectCode = () => 'it'
 const makeWrongCode = () => 'wrong'
 
 const DummyComponent = <T>(
-  React: ReactModule,
+  React: ReactModuleType,
   // eslint-disable-next-line react/prop-types
 ): DummyReturnType<T> => (props: CustomDummyPropsType<T>): Node => (
   <div className={props.className}>
@@ -66,7 +66,7 @@ const makePropTypes = <T: {}>(options: DummyOptionsType<T> = {}) => ({
 })
 
 const DummyComponentFactory = <T: {}>(
-  React: ReactModule,
+  React: ReactModuleType,
   options?: DummyOptionsType<T>,
 ): StandardDummyFactoryReturnType => {
   const builtDummyComponent = DummyComponent(React)
@@ -80,7 +80,7 @@ const DummyComponentFactory = <T: {}>(
 }
 
 const CustomDummyFactory = <T: {}>(
-  React: ReactModule,
+  React: React,
   options?: DummyOptionsType<T>,
 ): DummyFactoryReturnType<T> => DummyComponentFactory(React, options)
 

src/__tests__/internals/functions.js

@@ -53,7 +53,7 @@ export const makeFlagIcons = <T>(
 
   return aOptions.map((options: FlagIconOptionsType<T>, i: number) => {
     const props = aProps[i]
-    const FlagIcon = FlagIconFactory(React.default, options)
+    const FlagIcon = FlagIconFactory(React, options)
 
     return FlagIcon(props)
   })

src/__tests__/types/flow.js

@@ -21,8 +21,6 @@ import type {
   FlagIconOptionsType,
 } from '../../types/flow'
 
-const ReactDefault = React.default
-
 const makeWrongCode = () => 'wrong'
 const makeCorrectCode = () => 'it'
 
@@ -50,7 +48,7 @@ const optionsCustomCodes = {
 }
 
 // 3. FlagIconFactory, FlagIcon
-const FlagIconCssModules = FlagIconFactory(ReactDefault)
+const FlagIconCssModules = FlagIconFactory(React)
 FlagIconCssModules({ code: validCode })
 
 // $FlowExpectError
@@ -75,7 +73,7 @@ const missingRequiredProps: FlagIconPropsType = {
 }
 
 // 5. CustomFlagIconFactory
-const CustomFlagIcon = CustomFlagIconFactory(ReactDefault, optionsCustomCodes)
+const CustomFlagIcon = CustomFlagIconFactory(React, optionsCustomCodes)
 
 let test = <CustomFlagIcon code={makeCorrectCode()} />
 
@@ -159,19 +157,19 @@ const correctOptions: FlagIconOptionsType<*> = { useCssModules: false }
 // $FlowExpectError
 const wrongOptions: FlagIconOptionsType<*> = { useCssModules: 'wrong' }
 
-FlagIconFactory(ReactDefault, correctOptions)
+FlagIconFactory(React, correctOptions)
 
 // $FlowExpectError
-FlagIconFactory(ReactDefault, { useCssModules: 'wrong' })
+FlagIconFactory(React, { useCssModules: 'wrong' })
 
 // 11. Dynamic loops (typical use case).
 const myAppCodes: FlagIconCodeType[] = ['it', 'eu', 'de', 'fr', 'es']
 
-const MyFlagIcon = FlagIconFactory(ReactDefault)
+const MyFlagIcon = FlagIconFactory(React)
 myAppCodes.map(code => MyFlagIcon({ code }))
 
 const myCustomCodes = { c1: 'Custom 1', c2: 'Custom 2' }
-const MyCustomFlagIcon = CustomFlagIconFactory(ReactDefault, {
+const MyCustomFlagIcon = CustomFlagIconFactory(React, {
   customCodes: myCustomCodes,
 })
 const myAppCodesWithCustom = [...myAppCodes, ...Object.keys(myCustomCodes)]

src/__tests__/types/propTypes.js

@@ -7,8 +7,6 @@ import MakeConsoleHook, { ConsoleOutput } from '../internals/ConsoleHook'
 import FlagIconFactory from '../../'
 import { AddExactValidator } from '../../functions/propTypes'
 
-const ReactDefault = React.default
-
 /**
  * TODO: remove 'ConsoleHook' as soon as possible. SEE: "Add ability to throw
  * "error instead of warning in tests": https://github.com/reactjs/prop-types/issues/28
@@ -22,7 +20,7 @@ test('FlagIconPropsType', (t: *) => {
 
   // We set 'useCssModules' to false because otherwise a 'css modules' error
   // would be thrown, and this test is not about that.
-  const FlagIcon = FlagIconFactory(ReactDefault, { useCssModules: false })
+  const FlagIcon = FlagIconFactory(React, { useCssModules: false })
 
   let element = <FlagIcon code="it" /> // eslint-disable-line no-unused-vars
   t.falsy(consoleHook.flushLog())
@@ -48,22 +46,22 @@ test('FlagIconPropsType', (t: *) => {
 test('FlagIconOptionsType', (t: *) => {
   const consoleHook = MakeConsoleHook({ outputType: ConsoleOutput.error })
 
-  FlagIconFactory(ReactDefault)
+  FlagIconFactory(React)
   t.falsy(consoleHook.flushLog())
 
-  FlagIconFactory(ReactDefault, { useCssModules: true })
+  FlagIconFactory(React, { useCssModules: true })
   t.falsy(consoleHook.flushLog())
 
   // $FlowExpectError
-  FlagIconFactory(ReactDefault, { useCssModules: false, wrong: 'lorem' })
+  FlagIconFactory(React, { useCssModules: false, wrong: 'lorem' })
   t.truthy(consoleHook.flushLog())
 
   // $FlowExpectError
-  FlagIconFactory(ReactDefault, { useCssModules: 'string', themeStyles: {} })
+  FlagIconFactory(React, { useCssModules: 'string', themeStyles: {} })
   t.truthy(consoleHook.flushLog())
 
   // $FlowExpectError
-  FlagIconFactory(ReactDefault, { anotherWrong: 'wrong' })
+  FlagIconFactory(React, { anotherWrong: 'wrong' })
   t.truthy(consoleHook.flushLog())
 
   consoleHook.detach()