Add type import support to import/order

[gajus]

Example:

import React from 'react';
import reactCssModules from 'react-css-modules';
import styles from './static/styles.css';
import type {
  TopicType
} from '../../types';

Refer to https://flowtype.org/blog/2015/02/18/Import-Types.html

[bsr203]

+1. I import my types with modules path (not relative), as I use webpack alias. I like to import types after all ( the module + relative import) non type imports like.

import React from 'react';
import A from '../';

import type { TopicType } from 'app/types';

[benmosher]

I think this makes sense, need @jfmengels to manage the resolution, though.

Not sure if this is a new flowtype classification analogous to external, etc., or if it's another level of ordering. Needs some more discussion.

[jfmengels]

We could make that a new importType value (like external), which sounds good to me. The "problem" is stylistic:

if some people want to have their imports glued together without empty lines, then the type imports, with both groups separated by a line.

import path from 'path';
import a from './a';

import type Foo from 'foo';

Or if some people want to have their types next to the imported package

import path from 'path';
import foo from 'foo';
import type Foo from 'foo';
import a from './a';

That said, you'd get the same problem if you wanted to order things by resource type (js, json, css, types, ...), which is not possible at the moment.

Also, maybe you'd want to order your type imports by the import type of the module.

import type A from './a'; // this import should be after import of 'foo'
import type Foo from 'foo';

Any thoughts?

[benmosher]

yeah, that's where I almost feel like some sort of tiered ordering is needed, but I don't know how it would be specified. the existing types are a function of the import path, but this new flow type is a function of the import itself, so they're orthogonal classifications.

which is how you end up with the options you've described.

[bsr203]

maybe just ignore type imports. I personally prefer,

import path from 'path';
import a from './a';

import type Foo from 'foo';

as types are just compile time thing, and get a good sense of all the imports if I group them. If this plugin ignores type imports, then user can either separate it at the end as below, or together with the module import.

[jfmengels]

In Flow v0.38.0, there is a new feature that allows you to import both values and types in a single import statement.

New shorthand for importing types in the same declaration that imports values: import {someValue, type someType, typeof someOtherValue} from 'foo'

I haven't used it yet, but that sounds better and I feel like we should encourage the use of that syntax rather than one separating the import of types and the import of values.
This way, the order rule wouldn't need to be adapted, which sounds better to me. With the proposed solution, you'd have first the values imports, then the types imports, but the types wouldn't be sorted according to where they are from, which sounds pretty weird to me now.

Maybe eslint-plugin-flow could implement a rule enforcing the use of that syntax @gajus ?

What do you think?
(cc @avaly who already started working on this)

[jribeiro]

A problem I frequently run into, as well, is importing types from relative vs absolute paths.

// @flow
import fs from 'fs';
import Foo from './FooClass';

import type { SomeGlobalType } from 'my-global-types-pkg';
import type { LocalModuleType } from './types';

It makes sense to me to group the types together as it makes reading the code more natural. Probably related with https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md as well. Any thoughts?

[emil14]

@jfmengels , but what if i have to import the default module and a type?

/* @flow */

import type { awesomeType } from './awesomeModule.js'
import awesomeDefaultModule from './awesomeModule.js'

[christophehurpeau]

@emil14 you can do:

import awesomeDefaultModule, { type awesomeType } from './awesomeModule.js'

[emil14]

@christophehurpeau wow thank you, I'll try it