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

Support flowtype definition for flow-typed (WIP) #5027

Open
wants to merge 3 commits into
base: dev
from

Conversation

Projects
None yet
8 participants
@kazupon
Member

kazupon commented Feb 27, 2017

This is a flowtype definition for Vue.js
If this pull request does not need, feel free to close it.

Like a TypeScript, I would like to unite the way of providing these definition files.
Already in the flow directory, as @evan have said in here,
but these definition files are defined that specialized in due to internal develop.
I feel these definition files don't give good development experimence to users, to say the least.
As well as typescript, I hope to provide the official flowtype definitions.

I'm considering the below specs:

  • Adding decls directory for flowtype definition
  • Put type definitions in the same directory structure as flow-typed
  • Testing type definitions with flow-bin (already installed with package.json)
  • Support from flowtype version of package.json

kazupon added some commits Feb 27, 2017

@HerringtonDarkholme

This comment has been minimized.

Show comment
Hide comment
@HerringtonDarkholme

HerringtonDarkholme Mar 7, 2017

Member

Hi @kazupon , thank you for this contribution.

I'm reporting my experience with integrating Flow with Vue. But I think this might be helpful to you.

(Flow) definition files don't give good development experimence to users

Providing good typing experience would be very hard in flow. Mainly due to flow's inherent expressiveness:

this-type: facebook/flow#452
library augmentation: facebook/flow#396

Without this -type, we cannot define Vue's methods/data option. Without augmentation, we cannot extend Vue's option object (which is a practice quite common in Vue community). These two are simply deal breakers.

Arguably TypeScript definition file does not provide decent experience (for now, will be better after TS2.3). But TS definition serves as a basic ground for library authors like vue-class-component.

Sadly, class component like approach utilizes stage-1 decorator syntax, which flow just ignores now. This simply means flow-definition isn't needed. 😞

Other typing approach like chain-api isn't doable in flow due to this-typing problem stated above.

Generally I would dare to say Flow is (naturally) React biased. It is very hard to integrate other frameworks with it...

Member

HerringtonDarkholme commented Mar 7, 2017

Hi @kazupon , thank you for this contribution.

I'm reporting my experience with integrating Flow with Vue. But I think this might be helpful to you.

(Flow) definition files don't give good development experimence to users

Providing good typing experience would be very hard in flow. Mainly due to flow's inherent expressiveness:

this-type: facebook/flow#452
library augmentation: facebook/flow#396

Without this -type, we cannot define Vue's methods/data option. Without augmentation, we cannot extend Vue's option object (which is a practice quite common in Vue community). These two are simply deal breakers.

Arguably TypeScript definition file does not provide decent experience (for now, will be better after TS2.3). But TS definition serves as a basic ground for library authors like vue-class-component.

Sadly, class component like approach utilizes stage-1 decorator syntax, which flow just ignores now. This simply means flow-definition isn't needed. 😞

Other typing approach like chain-api isn't doable in flow due to this-typing problem stated above.

Generally I would dare to say Flow is (naturally) React biased. It is very hard to integrate other frameworks with it...

@kazupon

This comment has been minimized.

Show comment
Hide comment
@kazupon

kazupon Mar 7, 2017

Member

@HerringtonDarkholme
Thank you for your advise!

When I'm implementing flow type definition of vue, I encountered to it.
In flow version, I feel so difficulty.
Flow and Vue API not are very compatible. 😞
In this reason, I'll pend this PR once.

Member

kazupon commented Mar 7, 2017

@HerringtonDarkholme
Thank you for your advise!

When I'm implementing flow type definition of vue, I encountered to it.
In flow version, I feel so difficulty.
Flow and Vue API not are very compatible. 😞
In this reason, I'll pend this PR once.

@StreetStrider

This comment has been minimized.

Show comment
Hide comment
@StreetStrider

StreetStrider Mar 18, 2017

@kazupon @HerringtonDarkholme, hello. I'm kinda confused on this topic. I'm seeing some flowtype defs in /flow directory of the vue (as well as vue-router) project. But in the mean time this PR is pended. What's the status of current definitions?

StreetStrider commented Mar 18, 2017

@kazupon @HerringtonDarkholme, hello. I'm kinda confused on this topic. I'm seeing some flowtype defs in /flow directory of the vue (as well as vue-router) project. But in the mean time this PR is pended. What's the status of current definitions?

@kazupon

This comment has been minimized.

Show comment
Hide comment
@kazupon

kazupon Mar 18, 2017

Member

@StreetStrider
Sorry to confuse you. 🙇

Vue core or Vue official plugins have some flowtype definitions, But these are for internal developement. in this reason, I'll try to improve, As I have mentioned in the above, I have encountered difficulties.

Member

kazupon commented Mar 18, 2017

@StreetStrider
Sorry to confuse you. 🙇

Vue core or Vue official plugins have some flowtype definitions, But these are for internal developement. in this reason, I'll try to improve, As I have mentioned in the above, I have encountered difficulties.

@LinusBorg

This comment has been minimized.

Show comment
Hide comment
@LinusBorg

LinusBorg Mar 18, 2017

Member

@StreetStrider The definitions in the /flow directory of the vue and vue-router repositories are used during delevopment of those libraries - they offer typings of the internal APIs, and are not suited to be used by the users of those libraries because the public APIs are not sufficiently typed as of now.

As @HerringtonDarkholme explained, that is hard to do currently, without a possibilty to type this in Flow.

Member

LinusBorg commented Mar 18, 2017

@StreetStrider The definitions in the /flow directory of the vue and vue-router repositories are used during delevopment of those libraries - they offer typings of the internal APIs, and are not suited to be used by the users of those libraries because the public APIs are not sufficiently typed as of now.

As @HerringtonDarkholme explained, that is hard to do currently, without a possibilty to type this in Flow.

@kazupon kazupon added pending and removed in progress labels Mar 18, 2017

@StreetStrider

This comment has been minimized.

Show comment
Hide comment
@StreetStrider

StreetStrider Mar 18, 2017

I see. 🤔 the main obstacle is Flow does not allow determine this type as a part of function signature and Vue rely (heavily) on it. Why not just omit it? The rest of the signature will be under type control. This isn't ideal typedef but it is better than nothing at all.

In light of this extensively used in Vue architecture this would look worthless (defs will be weak), but I would satisfy any Flowtype defs for Vue becaue of facebook/flow#1548. tl;dr: you can't both import module and flow-ignore it, you'll get error in either case. I personally use stub for Vue which is created by flow-typed. It silences all errors but effectively checks nothing.

StreetStrider commented Mar 18, 2017

I see. 🤔 the main obstacle is Flow does not allow determine this type as a part of function signature and Vue rely (heavily) on it. Why not just omit it? The rest of the signature will be under type control. This isn't ideal typedef but it is better than nothing at all.

In light of this extensively used in Vue architecture this would look worthless (defs will be weak), but I would satisfy any Flowtype defs for Vue becaue of facebook/flow#1548. tl;dr: you can't both import module and flow-ignore it, you'll get error in either case. I personally use stub for Vue which is created by flow-typed. It silences all errors but effectively checks nothing.

@nickmessing

This comment has been minimized.

Show comment
Hide comment
@nickmessing

nickmessing May 4, 2017

Member

@kazupon, any updates on this? I'd enjoy using Flow type checking with Vue but it actually looks like they are interested only in React ecosystem atm.

Member

nickmessing commented May 4, 2017

@kazupon, any updates on this? I'd enjoy using Flow type checking with Vue but it actually looks like they are interested only in React ecosystem atm.

@sobolevn

This comment has been minimized.

Show comment
Hide comment
@sobolevn

sobolevn Oct 30, 2017

This would be a nice feature indeed.

sobolevn commented Oct 30, 2017

This would be a nice feature indeed.

@pichillilorenzo

This comment has been minimized.

Show comment
Hide comment
@pichillilorenzo

pichillilorenzo Mar 2, 2018

@kazupon any news about that? Thanks!

pichillilorenzo commented Mar 2, 2018

@kazupon any news about that? Thanks!

@HerringtonDarkholme

This comment has been minimized.

Show comment
Hide comment
@HerringtonDarkholme

HerringtonDarkholme Mar 2, 2018

Member

Until this-type: facebook/flow#452 and library augmentation: facebook/flow#396 are supported in Flow hardly can we take any further action.

Member

HerringtonDarkholme commented Mar 2, 2018

Until this-type: facebook/flow#452 and library augmentation: facebook/flow#396 are supported in Flow hardly can we take any further action.

@yyx990803 yyx990803 removed the 2.x label Apr 17, 2018

@sobolevn

This comment has been minimized.

Show comment
Hide comment
@sobolevn

sobolevn May 1, 2018

@kazupon what about providing partial flow support for now? Is it possible?

I know, that we can not extend existing library definitions, but still. I had some experiments to be able to annotate vue + vuex. I came up with something like this (oversimplifying here):

// @flow

interface Vue {
  $isServer: boolean;
  $on(event: string, callback: Function): any;
}

interface Vuex$Vue {
  $store: Object;
}

class MyComponent implements Vue, Vuex$Vue {
  $isServer = false
  $store = {}
  
  $on (event: string, callback: Function) {
  	callback(event)
  }
}

Link to playground: https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWA7ALgUwE6QIYDGWoAagK4kDeiooAJCgM4DKuAbrgFygBGssaFnxoA3LQaw0ACiydMPJhhzoA5gBpQhfNGi8iAax4AxcmkIYUUgJQ8RAT3EBfZOmx4iJClgAe9b6A0dPRKsDhYPADyvABWWBbOyITQ+ExMoACy9gDCsAC2AA5SWJigKIVCeSUY6d6a3n4BQQzMbDicOKAAvKAE0ExYEiEYYSQ9VC50Q1KgsvIYispqmtq6+oRGoKbmljaBEgCQq3qGc9XWEi5OQA

You can join me with my attempts here: https://github.com/sobolevn/vue-flow-typed

sobolevn commented May 1, 2018

@kazupon what about providing partial flow support for now? Is it possible?

I know, that we can not extend existing library definitions, but still. I had some experiments to be able to annotate vue + vuex. I came up with something like this (oversimplifying here):

// @flow

interface Vue {
  $isServer: boolean;
  $on(event: string, callback: Function): any;
}

interface Vuex$Vue {
  $store: Object;
}

class MyComponent implements Vue, Vuex$Vue {
  $isServer = false
  $store = {}
  
  $on (event: string, callback: Function) {
  	callback(event)
  }
}

Link to playground: https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWA7ALgUwE6QIYDGWoAagK4kDeiooAJCgM4DKuAbrgFygBGssaFnxoA3LQaw0ACiydMPJhhzoA5gBpQhfNGi8iAax4AxcmkIYUUgJQ8RAT3EBfZOmx4iJClgAe9b6A0dPRKsDhYPADyvABWWBbOyITQ+ExMoACy9gDCsAC2AA5SWJigKIVCeSUY6d6a3n4BQQzMbDicOKAAvKAE0ExYEiEYYSQ9VC50Q1KgsvIYispqmtq6+oRGoKbmljaBEgCQq3qGc9XWEi5OQA

You can join me with my attempts here: https://github.com/sobolevn/vue-flow-typed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment