Add ability to declare module interfaces by path

[thomasboyt]

Based on conversations in IRC, it seems like the declare module Foo {} syntax for interfaces doesn't support paths. This is bad news for CommonJS, where imports like this are common:

var MyMixin = require('some-module/mixins/MyMixin');

The easiest way to fix this would be to allow a string in the declare module syntax, like:

declare module "some-module/mixins/MyMixin" {}

The same could work for relative imports (e.g. require('../foo/bar'), assuming that Flow can resolve a "full path" from the directory of the file. For example:

// foo/bar/baz.js
var MyMixin = require('../mixins/MyMixin');

should be use the declaration from:

declare module "foo/bar/mixins/MyMixin" {}

assuming that foo is the root of the project.

[gabelevi]

I know there's parser support for this since I added it last night :)

We just need to add support to Flow's core to understand what the path means as a module name.

[avikchaudhuri]

Will fix.

[Raynos]

👍 Looking forward to this for my commonJS modules

[avikchaudhuri]

Huh, I just checked what we have, and it seems that at least path-based requires that don't start with /, ./, or ../ should already work with declare module "..." syntax (this is more of a documentation issue, we should explain how this works!)

In other words, you can do exactly what you suggest in the first case, and it should work.

The other cases definitely do not work currently with declare module, since we don't know what a canonical string at the declaration site should be. You suggestion of going relative to the root is a good idea, let me think about it a bit more.

[Raynos]

I would like to recommend that

declare module "foo/bar/mixins/MyMixin" {}

is relative not to the CWD but to the location of the declaration file.

So if the declaration file is in the foo folder it would be

declare module "bar/mixins/MyMixin" {}

This is consistent with the node lookup algorithm as well for local files.

[Raynos]

@avikchaudhuri

This is issue is important for being able to use and test flow. I would like to use flowtype with pure ES5 and have local declaration files that define the types of local files.

This would allow me to use flowtype on a non-trivial project without having to use the inline type signatures extended ES5 language.

I would not mind contributing a fix for this if you could point at the rough area of the code that needs to change for this.

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[nmn]

This has long been fixed with type imports etc.

[capi1O]

Sorry @nmn but could you give an example ?

I am in the situation where there I need to require a module by path, and I cannot get Flow to understand the declared types for this module default export.

• module.js:

const FunctionalComponent = (name: string): React$Element<*> => (<button>{name}</button>);

export default FunctionalComponent;

• app.js:

const FunctionalComponent = require('./FunctionalComponent'); // eslint-disable-line global-require

render(<FunctionalComponent/>, rootElement);

got the error Expected React component instead of CommonJS exports of ".FunctionalComponent"

I tried to declare the module in FunctionalComponent.flow.js in various ways, ex :

• FunctionalComponent.flow.js :

declare module 'FunctionalComponent'
{
	declare var exports: (name: string) => React.Component;
}

but this file does not seem to be used by flow at all.