initial release

Author: Ivan Grekov

README.md

@@ -1,2 +1,40 @@
 # typescript-react-function-component-props-handler
-Custom react function component props handler for react-docgen. It allows you to parse props, which are typed as React.functionComponent<props> without rewriting your code
+
+Custom react function component props handler for react-docgen. It allows you to parse props, which are typed as React.functionComponent<props> without rewriting your code.
+
+## intro
+
+React-docgen 5.3.0 allow you to parse React.components and generate documentation. But if you don't explicitly set type of pros parameter, information about props is not visible in output. This custom handler allows you to fix [this problem](https://github.com/reactjs/react-docgen/issues/387). This is one-purpose, zero-dependency project.
+
+## Getting started
+
+### Add nececcary dependencies to your project
+
+```bash
+yarn add typescript-react-function-component-props-handler react-docgen
+```
+
+### Write script for running react-docgen
+
+Add the following content to the file:
+
+```js
+
+const reactDocs = require('react-docgen');
+
+const setParamsTypeDefinitionFromFunctionType = require('typescript-react-function-component-props-handler');
+
+const doc = reactDocs.parse(
+    source,
+    null,
+    [setParamsTypeDefinitionFromFunctionType, ...reactDocs.defaultHandlers],
+    null
+);
+
+```
+
+**Note:** `source` is a path to your component to parse.
+
+## What code-examples are covered
+
+Most of general and corner-cases for `React.functionComponents` were covered.

index.js

@@ -0,0 +1,103 @@
+function setParamTypeName(path) {
+    if (
+        path.parentPath.node.id.typeAnnotation &&
+        path.parentPath.node.id.typeAnnotation.typeAnnotation.typeParameters &&
+        path.parentPath.node.id.typeAnnotation.typeAnnotation.typeParameters.params[0].typeName.name
+    ) {
+        return path.parentPath.node.id.typeAnnotation.typeAnnotation.typeParameters.params[0]
+            .typeName.name;
+    }
+
+    return path.parentPath.node.id.name;
+}
+
+function getTypePath(path) {
+    if (
+        path.parentPath.parentPath.parentPath.parentPath.value &&
+        path.parentPath.parentPath.parentPath.parentPath.value.find
+    ) {
+        return path.parentPath.parentPath.parentPath.parentPath.value;
+    }
+
+    if (
+        path.parentPath.parentPath.parentPath.parentPath.parentPath &&
+        path.parentPath.parentPath.parentPath.parentPath.parentPath.value
+    ) {
+        return path.parentPath.parentPath.parentPath.parentPath.parentPath.value;
+    }
+
+    return [];
+}
+
+function checkForProptypes(path, paramTypeName) {
+    const propsDefinition = getTypePath(path).find(propertyPath => {
+        return (
+            propertyPath.type &&
+            propertyPath.type === 'ExpressionStatement' &&
+            propertyPath.expression &&
+            propertyPath.expression.left.object.name === paramTypeName &&
+            propertyPath.expression.right.type === 'ObjectExpression' &&
+            Boolean(propertyPath.expression.right.properties)
+        );
+    });
+
+    return Boolean(propsDefinition);
+}
+
+function setParamsTypeDefinitionFromFunctionType(documentation, path) {
+    if (path.parentPath.node.init && path.parentPath.node.init.params.length === 0) {
+        return;
+    }
+
+    if (
+        path.node.type === 'ArrowFunctionExpression' &&
+        !path.parentPath.node.init.params[0].typeAnnotation
+    ) {
+        const paramTypeName = setParamTypeName(path);
+
+        const hasPropTypes = checkForProptypes(path, paramTypeName);
+
+        if (hasPropTypes) {
+            return;
+        }
+
+        let typePath = getTypePath(path).find(propertyPath => {
+            if (
+                propertyPath.type === 'ExportNamedDeclaration' &&
+                propertyPath.declaration &&
+                propertyPath.declaration.id &&
+                propertyPath.declaration.id.name === paramTypeName
+            ) {
+                return true;
+            }
+
+            if (
+                propertyPath.type === 'TSInterfaceDeclaration' &&
+                propertyPath.id &&
+                propertyPath.id.name === paramTypeName
+            ) {
+                return true;
+            }
+
+            return (
+                propertyPath.type === 'TSTypeAliasDeclaration' &&
+                propertyPath.id.name === paramTypeName
+            );
+        });
+
+        typePath =
+            typePath && typePath.type && typePath.type === 'ExportNamedDeclaration'
+                ? typePath.declaration
+                : typePath;
+
+        if (typePath) {
+            const typedParam = Object.assign({}, path.parentPath.node.init.params[0], {
+                typeAnnotation: typePath,
+            });
+
+            path.parentPath.node.init.params = [typedParam];
+        }
+    }
+}
+
+module.exports = setParamsTypeDefinitionFromFunctionType;

node_modules/.yarn-integrity

@@ -0,0 +1,28 @@
+{
+  "name": "typescript-react-function-component-props-handler",
+  "version": "1.0.0",
+  "description": "a custom react function components props handler for react-docgen. It allows you to parse props, which are typed as React.functionComponent<props> without rewriting your code",
+  "main": "index.js",
+  "scripts": {
+    "test": "yarn test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Winner95/typescript-react-function-component-props-handler.git"
+  },
+  "keywords": [
+    "react-docgen",
+    "react",
+    "function",
+    "components",
+    "props",
+    "handler",
+    "documentation-generation"
+  ],
+  "author": "Ivan Grekov",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Winner95/typescript-react-function-component-props-handler/issues"
+  },
+  "homepage": "https://github.com/Winner95/typescript-react-function-component-props-handler#readme"
+}

package.json

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+