newline-per-chained-call and PropTypes

[armandabric]

Hi everyone,

I'm facing a some trouble with one rule: how do you define PropTypes with the newline-per-chained-call rule activated?

/* @flow */

import React from 'react';

class Baz extends React.Component {
    static propTypes = {
        foo: React.PropTypes.oneOf(['nice', 'bad']),  // This trigger an error
        bar: React.PropTypes.instanceOf(Date).isRequired, // Here too
    };

    // ...
}

[lencioni]

If I understand the rule correctly, and the configuration we have here, I would expect your foo example to not trigger an error but your bar example to trigger an error, since we have set ignoreChainWithDepth to 3.

In which case, you should be able to resolve this by first destructuring PropTypes from React, and then using it directly:

/* @flow */

import React from 'react';

const { PropTypes } = React;

class Baz extends React.Component {
    static propTypes = {
        foo: PropTypes.oneOf(['nice', 'bad']),
        bar: PropTypes.instanceOf(Date).isRequired,
    };

    // ...
}

[armandabric]

Ho you right! I've build this example from actual code, and only the bar prop types trigger error. My bad.

If the only solution is to play with the PropTypes object, I guess this is the trick:

import { default as React, PropTypes } from 'react';

[kylehodgetts]

@Spy-Seth What does default as React achieve?
Does it just save you having to do:

import React from 'react';
import { PropTypes } from React;

?

[lencioni]

I believe that this syntax might happen work:

import React, { PropTypes } from 'react';

However, since PropTypes is not (yet?) an actual named export (since React isn't using ES2015 modules), I think that this is not supposed work according to spec (even though it may happen to work with your environment). I think it is probably best to destructure separately for now, to avoid potential problems when upgrading your transpiler or module bundler.

I'd like to throw in a plug for import-js, an editor plugin I've been working on that helps you add imports to your files. Check it out! :)

[ljharb]

I'm starting to think this particular rule might be a bit odd - it's called "newline per chained call" but it's counting property access (which is not a "call"). imo none of those examples should be throwing. @yannickcr, what do you think?

[dustinmoorenet]

There is an issue opened on eslint for that rule. It appears to be a bug. eslint/eslint#5289

IMO, this rule should be turned off until that issue is resolved.

[ljharb]

Agreed.

[ljharb]

Published as v6.0.1.

We'll re-enable this rule once eslint has fixed the bug.

[armandabric]

That's solution resolve my issue 😄 👍

[taion]

This got fixed in 2.3.0, BTW.

[taion]

eslint/eslint@9b54ed3