Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix generated flow type rule w readonly/aliased types #60

Merged
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 57 additions & 23 deletions src/rule-generated-flow-types.js
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,34 @@ function getDefinitionName(arg) {
return ast.definitions[0].name.value;
}

function extractReadOnlyType(genericType) {
let currentType = genericType;
while (
currentType != null &&
currentType.type === 'GenericTypeAnnotation' &&
currentType.id.name === '$ReadOnly' &&
currentType.typeParameters &&
currentType.typeParameters.type === 'TypeParameterInstantiation' &&
Array.isArray(currentType.typeParameters.params) &&
currentType.typeParameters.params.length === 1
) {
currentType = currentType.typeParameters.params[0];
}
return currentType;
}

function resolveTypeAlias(genericType, typeAliasMap) {
let currentType = genericType;
while (
currentType != null &&
currentType.type === 'GenericTypeAnnotation' &&
typeAliasMap[currentType.id.name] != null
) {
currentType = typeAliasMap[currentType.id.name];
}
return currentType;
}

module.exports = {
meta: {
fixable: 'code',
Expand Down Expand Up @@ -419,57 +447,63 @@ module.exports = {
break;
}
case 'GenericTypeAnnotation': {
const alias = propType.id.name;
if (!typeAliasMap[alias]) {
const aliasedObjectType = extractReadOnlyType(
resolveTypeAlias(propType, typeAliasMap)
);
if (!aliasedObjectType) {
// The type Alias doesn't exist, is invalid, or is being
// imported. Can't do anything.
break;
}
switch (typeAliasMap[alias].type) {
switch (aliasedObjectType.type) {
case 'ObjectTypeAnnotation': {
validateObjectTypeAnnotation(
context,
Component,
importedPropType,
propName,
typeAliasMap[alias],
aliasedObjectType,
importFixRange
);
break;
}
case 'IntersectionTypeAnnotation': {
const objectTypes = typeAliasMap[alias].types
const objectTypes = aliasedObjectType.types
.map(intersectedType => {
if (intersectedType.type === 'GenericTypeAnnotation') {
return typeAliasMap[intersectedType.id.name];
return extractReadOnlyType(
resolveTypeAlias(intersectedType, typeAliasMap)
);
}
if (intersectedType.type === 'ObjectTypeAnnotation') {
return intersectedType;
}
})
.filter(Boolean);
.filter(maybeObjectType => {
// GenericTypeAnnotation may not map to an object type
return maybeObjectType &&
maybeObjectType.type === 'ObjectTypeAnnotation';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The lack of a filter here meant a non-ObjectTypeAnnotation could be passed below

});
if (!objectTypes.length) {
// The type Alias is likely being imported.
// Can't do anything.
break;
}
const lintResults = objectTypes.map(
objectType =>
objectType.type === 'ObjectTypeAnnotation' &&
validateObjectTypeAnnotation(
context,
Component,
importedPropType,
propName,
objectType,
importFixRange,
true // Return false if invalid instead of reporting
)
);
if (lintResults.some(result => result)) {
// One of the intersected objects has it right
break;
for (const objectType of objectTypes) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change to a loop to exit early once we know there's a valid type

const isValid = validateObjectTypeAnnotation(
context,
Component,
importedPropType,
propName,
objectType,
importFixRange,
true // Return false if invalid instead of reporting
);
if (isValid) {
break;
}
}
// otherwise report an error at the first object
validateObjectTypeAnnotation(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...the invalid value would have passed here

context,
Component,
Expand Down
52 changes: 31 additions & 21 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -402,27 +402,6 @@ ruleTester.run('generated-flow-types', rules['generated-flow-types'], {
});
`
},
{
code: `
type RelayProps = {
user: MyComponent_user
}

type Props = {
other: ?Object,
} & RelayProps;

class MyComponent extends React.Component<Props> {
render() {
return <div />;
}
}

createFragmentContainer(MyComponent, {
user: graphql\`fragment MyComponent_user on User {id}\`,
});
`
}
]),
invalid: [
{
Expand Down Expand Up @@ -1346,6 +1325,37 @@ The prop passed to useFragment() should be typed with the type 'TestFragment_foo
column: 15
}
]
},
{
filename: 'MyComponent.jsx',
code: `
type RelayProps = {
user: MyComponent_user
}

type Props = {
other: ?Object,
} & RelayProps;

class MyComponent extends React.Component<Props> {
render() {
return <div />;
}
}

createFragmentContainer(MyComponent, {
user: graphql\`fragment MyComponent_user on User {id}\`,
});
`,
errors: [
{
message:
'`user` is not declared in the `props` of the React component or it is not marked with the generated flow type `MyComponent_user`. ' +
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @josephsavona! Could you please check this issue? #59 I think it's related to what you wrote here since seems like it doesn't work as expected (even though in this case it's probably fine).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks like a separate issue. The issue here is just that we’re not following type aliases and not unwrapping readonly. Happy to accept PRs for #59 though!

'See https://facebook.github.io/relay/docs/en/graphql-in-relay.html#importing-generated-definitions',
line: 10,
column: 15
}
]
}
]
});