Skip to content
This repository was archived by the owner on Sep 21, 2019. It is now read-only.
This repository was archived by the owner on Sep 21, 2019. It is now read-only.

arrayOf and shape #15

Closed
Closed
@Zalastax

Description

@Zalastax

First of, thanks for creating this!

Trying to convert a JS file with some advanced propTypes, I don't get the result I expected.

type RouterProps = {
    routes: string;
};

Looking at your conversion code, I see that it's using some regular expressions. To make the converter a lot more stable and extendable, I'd recommend using a proper parser instead. For example, using the acorn-jsx parser we get very nice results:

var acorn = require('acorn-jsx');

var code = "import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport { connect } from \'react-redux\';\nimport { match } from \'.\/match\';\n\nclass Router extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      component: null,\n      params: {},\n    };\n    this.getNewComponent = this.getNewComponent.bind(this);\n  }\n\n  componentWillMount() {\n    const { routes, router } = this.props;\n    this.getNewComponent(routes, router.pathname);\n  }\n\n  componentWillReceiveProps(nextProps) {\n    const { routes, router } = nextProps;\n    this.getNewComponent(routes, router.pathname);\n  }\n\n  getNewComponent(routes, pathname) {\n    const { route, params } = match(routes, pathname);\n    if (route) {\n      route.load().then((component) => {\n        this.setState({ params, component });\n      });\n    }\n  }\n\n  render() {\n    const { component: Component, params } = this.state;\n    const { queries, hash } = this.props.router;\n    return Component ? <Component params={params} queries={queries} hash={hash} \/> : null;\n  }\n}\n\nRouter.propTypes = {\n  routes: PropTypes.arrayOf(PropTypes.shape({\n    path: PropTypes.string.isRequired,\n    load: PropTypes.func.isRequired,\n    children: PropTypes.array,\n  })).isRequired,\n  router: PropTypes.shape({\n    pathname: PropTypes.string.isRequired,\n    search: PropTypes.string.isRequired,\n    queries: PropTypes.object.isRequired,\n    hash: PropTypes.string.isRequired,\n  }),\n};\n\nconst RouterContainer = connect(({ router }) => ({ router }))(Router);\n\nexport { Router, RouterContainer };\n" 

var ast = acorn.parse(code, {
  sourceType: "module",
  plugins: {
    jsx: { allowNamespaces: false }
  }
});

console.log(ast.body[5])

To try it out paste the code into runkit.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions