Did not recognize object of type "ObjectTypeSpreadProperty"

[danrot]

I am using the react-styleguidist package, which makes use of react-docgen. When I want to build my styleguide, I get the following error:

Warning: Cannot parse src/Sulu/Bundle/AdminBundle/Resources/js/components/Checkbox/Checkbox.js: Error: did not recognize object of type "ObjectTypeSpreadProperty"

I am using flow for static type checks in this project, and I assume the error is because of type definitions using the spread operator, in this specific case:

type Props = {|
 ...SwitchProps,
 className?: string,
 onChange?: (checked: boolean, value?: string | number) => void,
 skin: 'dark' | 'light',
|};

Is there a reason this is not supported, or is this an error?

[KutnerUri]

you can use the & syntax:

type Props = {
 className?: string,
 onChange?: (checked: boolean, value?: string | number) => void,
 skin: 'dark' | 'light',
} & SwitchProps;

or the interface syntax:

interface Props extends SwitchProps {
 className?: string,
 onChange?: (checked: boolean, value?: string | number) => void,
 skin: 'dark' | 'light',
};

it won't show props from SwitchProps, but it will at least work.

[danrot]

The & operator does not work in combination with exact objects, so that is not really an option.

And if the interface syntax does also not show the props, it works as well as it does currently.

[imdreamrunner]

I found the same problem!

To debug, I create a unit test for the this issue at https://github.com/imdreamrunner/react-docgen/pull/1/files

The test case is very simple

 var x: {| apple: string, banana: string, ...OtherFruits |} = 2;
 type OtherFruits = { orange: string }

The error is that "orange" was not in the result.

 ● getFlowType › handles ObjectTypeSpreadProperty

 expect(received).toEqual(expected) // deep equality

 - Expected - 7
 + Received + 0

 @@ -15,16 +15,9 @@
 "value": Object {
 "name": "string",
 "required": true,
 },
 },
 - Object {
 - "key": "orange",
 - "value": Object {
 - "name": "string",
 - "required": true,
 - },
 - },
 ],
 },
 "type": "object",
 }

However if we look at the same test file getFlowType-test.ts, object spread is actually supported if using with $Keys. The test case below is working as expected (all three keys are returned as a union type).

 var x: $Keys<{| apple: string, banana: string, ...OtherFruits |}> = 2;
 type OtherFruits = { orange: string }