Import type - implementation guidelines? about babel-plugin-flow-react-proptypes HOT 4 CLOSED

So with from 'types' we detect that it looks like an import from 'node_modules', and decide not to import the type, so it behaves like the import doesn't exist (you'd get the same output if you removed the type import).

If that's changed to from './types', which looks like an import of your own source files (presumably also compiled by this plugin), then you get this:

import React from "react";

const X = props => React.createElement("div", null);

X.propTypes = {
  aa: function() {
    return (typeof bpfrpt_proptype_MyType === "function"
      ? bpfrpt_proptype_MyType.isRequired
        ? bpfrpt_proptype_MyType.isRequired
        : bpfrpt_proptype_MyType
      : PropTypes.shape(bpfrpt_proptype_MyType).isRequired
    ).apply(this, arguments);
  }
};
export default X;
import { bpfrpt_proptype_MyType } from "./types";
import PropTypes from "prop-types";

The reason for the relative vs package import rule is the webpack will error if you try to import something that doesn't exist from an ESM. We had to add it when we started supporting the output you see above, with the import/export syntax being generated.

Your longer output examples are with the import/export syntax we generate being run through the official 'babel-plugin-transform-es2015-modules-commonjs' transform, which is why you get the require/exports.

You can get the plugin to produce require/exports code by enabling the 'deadCode' option, e.g. if you didn't want it to ever eliminate the code, it'd be:

"plugins": [["flow-react-proptypes", { "deadCode": "false" }]]

Hope that clarifies things a bit. Going to close this for now, but if you have ideas on improvements, please share.

from babel-plugin-flow-react-proptypes.

Thanks for the info!

from babel-plugin-flow-react-proptypes.

@brigand would you consider a PR that adds an option (default to current behavior) around https://github.com/brigand/babel-plugin-flow-react-proptypes/blob/master/src/index.js#L629 to bypass the relative path regex / requirement?

We use a flat, haste-like module resolver, where filenames are guaranteed unique. Even in a webpack system, I think the current regex solution could potentially result in confusing behavior if aliases are used.

from babel-plugin-flow-react-proptypes.

@ndreckshage yeah, and option for that seems reasonable. There's no way we can really detect that automatically that I know of.

from babel-plugin-flow-react-proptypes.