Flow Typecast Comments

[jacobp100]

In flow, you can typecast with the following,

(obj: Class).property

You can also do this with comments,

(obj /*: Class */).property

However, this gets transformed into,

obj /*: Class */.property

Both are syntactically valid, but only one is recognised by flow. Maybe we'd just want to check comments that start with :?

Happy to help if you decide what direction we should go!

Edit

Also,

const x = (input /*: string */) /*: string */ => {};
// to
const x = (input /*: string */ /*: string */) => {};

[vjeux]

Thanks for the report, we need to fix it!

[vjeux]

@jacobp100 #722

Do you mind running this pull request and try to find crazy annotations that wouldn't work with it? Thanks!

[jacobp100]

Seemed to work!

[vjeux]

Another idea: use the flow parser to parse comments and have a way to output flow types as comments instead of the ast version.

[jokeyrhyme]

Related to #204 ?

[jokeyrhyme]

I've just encountered the Flow comment syntax issues with functions

Here are a few more test cases, I hope these are helpful

https://prettier.github.io v0.22.0

// input
function fnNoArgs () /* : Promise<void> */ {
  return Promise.resolve()
}

// output
function fnNoArgs(/* : Promise<void> */) {
  return Promise.resolve();
}

// input
function fnOneArg (a /* : string */) /* : Promise<string> */ {
  return Promise.resolve(a)
}

// output
function fnOneArg(a /* : string */) /* : Promise<string> */ {
  return Promise.resolve(a);
}

// input
const arrowNoArgs = () /* : Promise<void> */ => {
  return Promise.resolve()
}

// output
const arrowNoArgs = (/* : Promise<void> */) => {
  return Promise.resolve();
};

// input
const arrowOneArge = (a /* : string */) /* : Promise<string> */ => {
  return Promise.resolve(a)
}

// output
const arrowOneArge = (a /* : string */ /* : Promise<string> */) => {
  return Promise.resolve(a);
};

[jokeyrhyme]

Awesome work! It looks like most of the above has been resolved.

As of 1.2.2, the first two examples above are now working perfectly. That is, these are the cases with traditional functions with Flow comments.

Arrow functions (=>) still seem to be problematic, in that the return type Flow comment is being positioned in the wrong place:

// input
const arrowNoArgs = () /* : Promise<void> */ => {
  return Promise.resolve()
}

// output
const arrowNoArgs = () => /* : Promise<void> */ {
  return Promise.resolve();
};

// input
const arrowOneArge = (a /* : string */) /* : Promise<string> */ => {
  return Promise.resolve(a)
}

// output
const arrowOneArge = (a /* : string */ /* : Promise<string> */) => {
  return Promise.resolve(a);
};

[vjeux]

We now have a much better infrastructure for dealing with comments so we should be able to fix all the issues reported here :)

[brownieboy]

Any update on this one?

Flow comment-style annotations are still being moved from outside to inside the parens on arrow functions for me. I'm using Prettier 1.7.0.

[duailibe]

All the examples off arrow and regular functions are working correctly in master now. You can check out this preview (I copied all the samples in this issue): link

I'll work on the OP example now

[akalin]

Trying 1.10, this fixes a lot of cases, thanks! One remaining case I ran into is:

    this.state = ({ a, b } /* : AddDemoState */);

link

[suchipi]

As a workaround for that particular case, I think you could do:

this.state /* : AddDemoState */ = { a, b };

[akalin]

Ah, just tried that. flow doesn't seem to like that, I'm guessing because state is a field and not a variable. (I think this is why I wrote it like I did originally.)

[suchipi]

I guess you could do this as a workaround then:

const addDemoState /* : AddDemoState */ = { a, b };
this.state = addDemoState;

[suchipi]

(We still want to fix this long-term though)

[k7n4n5t3w4rt]

I'm not sure I'm understanding this correctly but I'm having problems with flow types using the comment syntax.

This:

/*::
type Props = {
  prop1: string,
  prop2: number
}
*/
class App extends Component/*:: <Props> */ {

...

}

is becoming this:

type Props = {
  prop1: string,
  prop2: number
}
class App extends Component<Props> {

...

}

which is valid flow syntax of course. However, I was expecting the comment syntax to be preserved. Am I missing something?

[hawkrives]

@k7n4n5t3w4rt Can you reproduce that bug on the playground (prettier.io)? I ask because I've never personally experienced Prettier changing my type comments to code.

[k7n4n5t3w4rt]

@hawkrives It seems to be doing the same thing in the playground when the parser option is set to "flow":

https://goo.gl/pL1Nwu

[duailibe]

@k7n4n5t3w4rt It's a known bug, you can follow it on #3493

[hawkrives]

@k7n4n5t3w4rt Ah, you're using the Flow parser.

If you don't need to use it, you can use the (default) Babylon parser, which also supports Flow types, and doesn't have this bug: playground link

[k7n4n5t3w4rt]

@hawkrives Aha! I didn't realise I could use the babylon parser, thanks.

@duailibe Thanks for that, I'll keep an eye on it.

[pannous]

can prettier be used to convert flow annotations into flow comments?
like thus:

prettier --emit-flow-comments   "var test:int=8"
var test/*:int*/=8

[duailibe]

@pannous I don't think so, it's out of Prettier's scope, but it's really interesting and someone should totally build a tool that does that.

[suchipi]

@pannous you can use https://www.npmjs.com/package/@babel/plugin-transform-flow-comments to do that, though the formatting isn't great:

const { code } = require("@babel/core").transform("var test:int=8", {
  plugins: [require("@babel/plugin-transform-flow-comments")]
});
console.log(code); // "var test\n/*:int*/\n= 8;"

[swac]

What's the overall status of this? It seems there are two options, but neither is actually compatible with using Flow's comment syntax.

The first option is to specify "flow" as the parser in Prettier's config file. This preserves Flow compatibility, but it replaces Flow comments with Flow's standard syntax, as shown in @k7n4n5t3w4rt's comment. This effectively defeats the purpose of Flow's comment syntax.

The second option is to stick with the default parser, which retains Flow's comments, but removes the necessary parentheses to satisfy Flow. So something like this:

new (window.Request/*: Class<Request> */)('');

gets turned into this:

new window.Request /*: Class<Request> */("");

This is no longer valid Flow syntax, so Flow throws an error.

Am I correct that because of these two issues together, there's effectively no way to use Flow's comment syntax with Prettier (barring heavy use of prettier-ignore comments)? Although it's possible to rewrite the code like:

const Request/*: Class<Request> */ = window.Request;
new Request('');

this slightly defeats the purpose of Prettier, since it no longer serves as an autoformatter that you can just forget about.

[alexander-akait]

@swac PR welcome

[swac]

@evilebottnawi Apologies if my comment sounded overly critical. I was just trying to sum up the current state of affairs, since it took me a while to piece together everything from this comment thread 😅

[alexander-akait]

@swac don't worry, we have limited time and contributors to fix all problems, do it yourself it's true the quickest solution 😄

[swac]

@evilebottnawi I took a stab at fixing this in #5280 😄

[ikatyang]

Fixed by #5280.