Flow: Flow as a service

Created on 3 Oct 2016  路  11Comments  路  Source: facebook/flow

Is it possible to, is there a sample of using flow as a service?

The use case I have in mind is creation of F# bindings for the react/react-native libs. Here's an example of the current react bindings. The process at the moment is cumbersome - we import d.ts to produce "import" types then convert generated interface methods into "helpers" DSL. There's quite a bit of manual work and it's not reproducible.

I'm wondering if there a way to ask flow to produce metadata that we could use to produce the DSL directly.

Most helpful comment

Ok, that's a bit tricker but I put something together that may be helpful:

flow suggest foo.js | patch foo.js -o foo.tmp.js && flow gen-flow-files foo.tmp.js && rm foo.tmp.js

I'll break it down:

  • flow suggest foo.js creates a patch that adds all the type annotations Flow was able to infer
  • patch foo.js -o foo.tmp.js applies the patch and saves the result to a temporary file
  • flow gen-flow-files foo.tmp.js uses the temporary file to generate the type definition
  • rm foo.tmp.js removes the temporary file.

Provided you have a foo.js like this in input:

// @flow

export default class Foo {
  bar(x: number) {
    return x;
  }
}

This is the output

// @flow

declare export default class {

  bar(x: number): number;
}

All 11 comments

Maybe I'm completely off-track, but would flow --json help you out? It outputs the typechecker results in a parseable JSON format.

I don't want the typecheck results though, I want the types themselves that flow has detected/inferred.

Oh, I see. Sorry I was definitely off-track.

The closest thing I can think of is then flow type-at-pos <file> <line> <column>

Example, if you have a file foo.js like this:

const x = 42

flow type-at-pos foo.js 1 7 will output

> flow type-at-pos foo.js 1 7
number
/Users/gabro/buildo/experiments/flow-cose/foo.js:1:7,1:7

See the following locations:
/Users/gabro/buildo/experiments/flow-cose/foo.js:1:11-12:
number

You can then use the --json options to have a parseable output, example

{"type":"number","reasons":[{"desc":"number","loc":{"source":"/Users/gabro/buildo/experiments/flow-cose/foo.js","type":"SourceFile","start":{"line":1,"column":11,"offset":10},"end":{"line":1,"column":12,"offset":12}},"path":"/Users/gabro/buildo/experiments/flow-cose/foo.js","line":1,"endline":1,"start":11,"end":12}],"loc":{"source":"/Users/gabro/buildo/experiments/flow-cose/foo.js","type":"SourceFile","start":{"line":1,"column":7,"offset":6},"end":{"line":1,"column":7,"offset":7}},"path":"/Users/gabro/buildo/experiments/flow-cose/foo.js","line":1,"endline":1,"start":7,"end":7}

I guess what I'm looking for is a way to ask flow to produce something like this:
https://github.com/facebook/react-native/blob/master/flow/Map.js
simply by pointing it at an entry point.

check out flow gen-flow-files --help. if that doesn't do what you're looking for, flow dump-types will output all of the inferred types, and flow ast will dump the AST. you can probably use those two things to do what you're looking for. a typed ast that combines those two things is being tracked in https://github.com/facebook/flow/issues/248

Ok, that's a bit tricker but I put something together that may be helpful:

flow suggest foo.js | patch foo.js -o foo.tmp.js && flow gen-flow-files foo.tmp.js && rm foo.tmp.js

I'll break it down:

  • flow suggest foo.js creates a patch that adds all the type annotations Flow was able to infer
  • patch foo.js -o foo.tmp.js applies the patch and saves the result to a temporary file
  • flow gen-flow-files foo.tmp.js uses the temporary file to generate the type definition
  • rm foo.tmp.js removes the temporary file.

Provided you have a foo.js like this in input:

// @flow

export default class Foo {
  bar(x: number) {
    return x;
  }
}

This is the output

// @flow

declare export default class {

  bar(x: number): number;
}

thanks, my brew-installed version wasn't showing any of these options, flow-bin for the win :)

Edit: must've forgotten to brew update

That's strange, I use brew as well and I have the latest version!

I must be missing something, just tried running gen-flow-files against a react-native component (had to update .flowconfig to use 0.33), got the errors:

flow/Promise.js:30
30: static all: Promise$All;
^^^^^^^^^^^ Library type error:
30: static all: Promise$All;
^^^^^^^^^^^ identifier Promise$All. Could not resolve name

Am I approaching this correctly, processing one-by-one components using the original sources? Since there no (apparent) index.js to include all the components, will there be any issues reconciling all the resulting declarations?

Edit: sorry for spamming, pulled latest - it's good now.

@et1975 glad to know it worked for you! Do you think the issue can be closed?

Thanks, closing.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jamiebuilds picture jamiebuilds  路  3Comments

mmollaverdi picture mmollaverdi  路  3Comments

Beingbook picture Beingbook  路  3Comments

john-gold picture john-gold  路  3Comments

ctrlplusb picture ctrlplusb  路  3Comments