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

Flow type definition of functions using Array of arguments should use $ReadOnlyArray #10932

Open
kayhadrin opened this issue Dec 27, 2019 · 1 comment

Comments

@kayhadrin
Copy link

@kayhadrin kayhadrin commented Dec 27, 2019

Bug Report

Current Behavior
When writing JS code typed with Flow and using the t.arrayExpression(...) function, I encountered some Flow type issues.

Example code:

// Confirm type of runtimeArgs  
(runtimeArgs: Array<BabelNodeCallExpression>); // OK!

const arrayExpression = t.arrayExpression(runtimeArgs);

Flow error:

Cannot call `t.arrayExpression` with `runtimeArgs` bound to `elements` because:
 - `BabelNodeArrayExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeArrowFunctionExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeAssignmentExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeAwaitExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeBigIntLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeBinaryExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeBindExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeBooleanLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeClassExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeConditionalExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeDoExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeFunctionExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeIdentifier` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeImport` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeJSXElement` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeJSXFragment` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeLogicalExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeMemberExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeMetaProperty` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeNewExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeNullLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeNumericLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeObjectExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeOptionalCallExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeOptionalMemberExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeParenthesizedExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodePipelinePrimaryTopicReference` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeRegExpLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeSequenceExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeStringLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeSuper` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTSAsExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTSNonNullExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTSTypeAssertion` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTaggedTemplateExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTemplateLiteral` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeThisExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeTypeCastExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeUnaryExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeUpdateExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeYieldExpression` [1] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeSpreadElement` [3] is incompatible with `BabelNodeCallExpression` [2] in array element.
 - `BabelNodeCallExpression` [2] is incompatible with null [4] in array element.

   .../my-sample-file.js
    552|       const arrayExpression = t.arrayExpression(runtimeArgs);
                                                         ^^^^^^^^^^^

References:
   node_modules/@babel/types/lib/index.js.flow:1450:60
   1450|   declare function arrayExpression(elements?: Array<null | BabelNodeExpression | BabelNodeSpreadElement>): BabelNodeArrayExpression;
                                                                    ^^^^^^^^^^^^^^^^^^^ [1]

Expected behavior/code
I expect that passing an array of BabelNodeCallExpression objects to arrayExpression() should be Flow valid.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Not relevant in this scenario.

Environment

- Not relevant in this scenario.
  • Babel version(s): babel/types@7.2.2
  • Monorepo: yes
  • How you are using Babel: babel/types

Possible Solution
The problem is from the arrayExpression type definition.

declare function arrayExpression(elements?: Array<null | BabelNodeExpression | BabelNodeSpreadElement>): BabelNodeArrayExpression;

For Flow, passing a non-readonly array as an argument means that the elements array arguments might be modified internally.
So we can't invoke t.arrayExpression(...) normally.

The solution is to use $ReadOnlyArray<> instead of Array<> to confirm to Flow that the function will not modify the array argument.

See Flow JS example below:

type A = {a: string};
type B = {b: string};

type ArgType = A | B;

function test1(a?: Array<ArgType>) {}
function test2(a?: $ReadOnlyArray<ArgType>) {}

let arg = (global.foo: Array<A>);

test1(arg); // Error
test2(arg); // works!

Error message:

11: test1(arg); // Error
          ^ Cannot call `test1` with `arg` bound to `a` because property `a` is missing in `B` [1] but exists in `A` [2] in array element.
References:
6: function test1(a?: Array<ArgType>) {}
                            ^ [1]
9: let arg = (global.foo: Array<A>);
                                ^ [2]
@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Dec 27, 2019

Hey @kayhadrin! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.