Comment types of Flow makes Prettier confused

[jinmayamashita]

Prettier 1.15.1

Sorry, I could not reproduce it on v1.15.2 playground. 🙇 (solved at 1.15.2 ? 👀)
Playground link

In flow, I can typecast with the following, not type-assertion.

Input:

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact<$Call<typeof mapStateToProps, *, *>>,
  ...$Exact<$Call<typeof mapDispatch, *, *>>,
  ...$Exact<withResponse.WithQueryProps<RootQuery>>,
|};

However, this gets error message below in prettier 1.15.1

Replace `<$Call<typeof·mapDispatch,·*,·*>>` with `/*::·<$Call/*::·<typeof·mapDispatch,·*,·*>·*/>·*/`

Output:

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact/*:: <$Call/*:: <typeof·mapStateToProps, *, *>*/> */
  ...$Exact/*:: <$Call/*:: <typeof mapDispatch, *, *>*/> */,
  ...$Exact/*:: <withResponse.WithQueryProps<RootQuery>*/> */,
|};

Expected behavior:

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact<$Call<typeof mapStateToProps, *, *>>,
  ...$Exact<$Call<typeof mapDispatch, *, *>>,
  ...$Exact<withResponse.WithQueryProps<RootQuery>>,
|};

[j-f1]

Does upgrading to Prettier 1.15.2 fix the issue for you?

[jinmayamashita]

@j-f1 Thanks for your comment!
I checked Prettier 1.15.2, but same the message is displayed.

Also, I can reproduce it on v1.15.2 playground. 🙏

Maybe /* :: (user.__typename: empty); */ // eslint-disable-line Is related? 👀

playground

Prettier 1.15.2
Playground link

--jsx-bracket-same-line
--parser flow
--trailing-comma all

Input:

// @flow

const mapDispatch: MapDispatch<*> = (dispatch, props) => ({
  ...props,
  onInit: ({ user }: { user: Some_user }) => {
    if (user) {
      const { name } = user;
      switch (user.__typename) {
        case "A": {
          dispatch(user.onInitByQuery("A"));
          break;
        }
        case "B":
          dispatch(user.onInitByQuery("B"));
          break;
        case "C":
          dispatch(user.onInitByQuery("C"));
          break;
        default:
          /* :: (user.__typename: empty); */ // eslint-disable-line
          break;
      }
      dispatch(
        user.onInitByQuery({
          user: { firstName: first_name, lastName: last_name },
        }),
      );
    }
  },
});

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact<$Call<typeof mapStateToProps, *, *>>,
  ...$Exact<$Call<typeof mapDispatch, *, *>>,
  ...$Exact<withResponse.WithQueryProps<RootQuery>>,
|};

Output:

// @flow

const mapDispatch: MapDispatch<*> = (dispatch, props) => ({
  ...props,
  onInit: ({ user }: { user: Some_user }) => {
    if (user) {
      const { name } = user;
      switch (user.__typename) {
        case "A": {
          dispatch(user.onInitByQuery("A"));
          break;
        }
        case "B":
          dispatch(user.onInitByQuery("B"));
          break;
        case "C":
          dispatch(user.onInitByQuery("C"));
          break;
        default:
          (user.__typename: empty); // eslint-disable-line
          break;
      }
      dispatch(
        user.onInitByQuery({
          user: { firstName: first_name, lastName: last_name },
        }),
      );
    }
  },
});

type Props = {|
  ...$Exact/*:: <PropsWithTFn> */,
  ...$Exact/*:: <$Call/*:: <typeof mapStateToProps, *, *> */> */,
  ...$Exact/*:: <$Call/*:: <typeof mapDispatch, *, *> */> */,
  ...$Exact/*:: <withResponse.WithQueryProps/*:: <RootQuery> */> */,
|};

[j-f1]

That’s a long-standing issue with the Flow parser. Using the default babylon parser (which also supports Flow) fixes the issue:

Prettier 1.15.2
Playground link

--jsx-bracket-same-line
--parser babylon
--trailing-comma all

Input:

// @flow

const mapDispatch: MapDispatch<*> = (dispatch, props) => ({
  ...props,
  onInit: ({ user }: { user: Some_user }) => {
    if (user) {
      const { name } = user;
      switch (user.__typename) {
        case "A": {
          dispatch(user.onInitByQuery("A"));
          break;
        }
        case "B":
          dispatch(user.onInitByQuery("B"));
          break;
        case "C":
          dispatch(user.onInitByQuery("C"));
          break;
        default:
          /* :: (user.__typename: empty); */ // eslint-disable-line
          break;
      }
      dispatch(
        user.onInitByQuery({
          user: { firstName: first_name, lastName: last_name },
        }),
      );
    }
  },
});

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact<$Call<typeof mapStateToProps, *, *>>,
  ...$Exact<$Call<typeof mapDispatch, *, *>>,
  ...$Exact<withResponse.WithQueryProps<RootQuery>>,
|};

Output:

// @flow

const mapDispatch: MapDispatch<*> = (dispatch, props) => ({
  ...props,
  onInit: ({ user }: { user: Some_user }) => {
    if (user) {
      const { name } = user;
      switch (user.__typename) {
        case "A": {
          dispatch(user.onInitByQuery("A"));
          break;
        }
        case "B":
          dispatch(user.onInitByQuery("B"));
          break;
        case "C":
          dispatch(user.onInitByQuery("C"));
          break;
        default:
          /* :: (user.__typename: empty); */ // eslint-disable-line
          break;
      }
      dispatch(
        user.onInitByQuery({
          user: { firstName: first_name, lastName: last_name },
        }),
      );
    }
  },
});

type Props = {|
  ...$Exact<PropsWithTFn>,
  ...$Exact<$Call<typeof mapStateToProps, *, *>>,
  ...$Exact<$Call<typeof mapDispatch, *, *>>,
  ...$Exact<withResponse.WithQueryProps<RootQuery>>,
|};

[ikatyang]

@j-f1 There're two bugs in the example:

• /* :: (user.__typename: empty); */ -> (user.__typename: empty);
  • this is the long-standing one
• ...$Exact<PropsWithTFn>, -> ...$Exact/*:: <PropsWithTFn> */,
  • this one is somehow caused by /* :: (user.__typename: empty); */, it works fine if there's no /* :: (user.__typename: empty); */

[j-f1]

Ah, missed that. Apologies.

[kogai]

Still occurred at 1.16.4.
As @ikatyang said, I think this issue actually discussed a confusable situation when the user using comment types of Flow.

FYI, I attempt to present the smallest reproduction codes here

It's just from

/* :: (kind: empty);*/
export const A: T<V> = 0;

to

(kind: empty);
export const A: T/*:: <V> */ = 0;

I wonder although the issue labeld as a high-priority bug, but it still not fixed.
Is fixing the issue a hard problem or need to change something external libraries?
Or, if it not so, but not exists enough time of contributers, would you allow me to attempt fixing the issue?

[j-f1]

would you allow me to attempt fixing the issue?

Please go ahead! We appreciate PRs.

[thorn0]

Not an issue anymore because support for Flow comments was removed in #13687

[thorn0]

@fisker Why did you reopen it?

[fisker]

Sorry, must hit the wrong button.