Last active
August 20, 2017 17:29
-
-
Save frantic/9649f9fd90f5d40629f21c8a35f4775d to your computer and use it in GitHub Desktop.
Problem with Flow React HoC with cross modules deps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ignore] | |
[include] | |
[libs] | |
[lints] | |
[options] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
// All code in one file - everything works | |
const React = require('react'); | |
function injectProp<Props: {}>( | |
Component: React.ComponentType<{ foo: number } & Props>, | |
): React.ComponentType<Props> { | |
return function WrapperComponent(props: Props) { | |
return <Component {...props} foo={42} />; | |
}; | |
} | |
class MyComponent extends React.Component<{ | |
a: number, | |
b: number, | |
foo: number, | |
}> {} | |
const MyEnhancedComponent = injectProp(MyComponent); | |
<MyEnhancedComponent a={1} b={2} />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
// 01. Code in separate files - doesn't work | |
const React = require('react'); | |
function injectProp<Props: {}>( | |
Component: React.ComponentType<{ foo: number } & Props>, | |
): React.ComponentType<Props> { | |
return function WrapperComponent(props: Props) { | |
return <Component {...props} foo={42} />; | |
}; | |
} | |
module.exports = injectProp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
// 02. Code in separate files - doesn't work | |
const React = require('react'); | |
const injectProp = require('./hoc'); | |
class MyComponent extends React.Component<{ | |
a: number, | |
b: number, | |
foo: number, | |
}> {} | |
module.exports = injectProp(MyComponent); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"dependencies": { | |
"flow-bin": "^0.53.1" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
// 03. Code in separate files - doesn't work | |
const React = require('react'); | |
const MyEnhancedComponent = require('./mycomp'); | |
/* | |
$ flow | |
Error: usage.js:6 | |
6: <MyEnhancedComponent a={1} b={2} />; | |
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `MyEnhancedComponent` | |
v | |
6: class MyComponent extends React.Component<{ | |
7: a: number, | |
8: b: number, | |
9: foo: number, | |
10: }> {} | |
^ property `foo`. Property not found in. See: mycomp.js:6 | |
6: <MyEnhancedComponent a={1} b={2} />; | |
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `MyEnhancedComponent` | |
*/ | |
<MyEnhancedComponent a={1} b={2} />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. | |
# yarn lockfile v1 | |
flow-bin@^0.53.1: | |
version "0.53.1" | |
resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.53.1.tgz#9b22b63a23c99763ae533ebbab07f88c88c97d84" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment