Merge pull request #44 from pvasek/fix/43_imports_from_tsx_files

Imports from tsx files are not working

README.md

@@ -19,7 +19,13 @@ npm install --save-dev react-docgen-typescript
 Include following line in your `styleguide.config.js`:
 
 ```javascript
-propsParser: require('react-docgen-typescript').parse
+propsParser: require('react-docgen-typescript').withDefaultConfig()
+```
+
+or if you want to use custom tsconfig file
+
+```javascript
+propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json')
 ```
 
 ## Example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-docgen-typescript",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/__tests__/data/ExtendsExternalPropsComponent.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ParentProps } from './ExtendsExternalPropsComponentParentProps';
+
+interface ExtendsExternalPropsComponentProps extends ParentProps {
+  /** prop2 */
+  prop2?: string;
+}
+
+/**
+ * ExtendsExternalPropsComponent description
+ */
+export class ExtendsExternalPropsComponent extends React.Component<ExtendsExternalPropsComponentProps, {}> {
+    render() {
+        return <div>ExtendsExternalPropsComponent</div>
+    }
+}

src/__tests__/data/ExtendsExternalPropsComponentParentProps.tsx

@@ -0,0 +1,4 @@
+export interface ParentProps {
+  /** prop1 */
+  prop1?: number;
+}

src/__tests__/parser.ts

@@ -102,6 +102,16 @@ describe('parser', () => {
         });
     });
 
+    it.only('should parse react component with properties extended from an external .tsx file', function(){
+        check('ExtendsExternalPropsComponent', {
+            ExtendsExternalPropsComponent: {
+                children,
+                prop1: { type: 'number', required: false, description: 'prop1' },
+                prop2: { type: 'string', required: false, description: 'prop2' },
+            }
+        });
+    });
+
     it('should parse react component with properties defined as type', function(){
         check('FlippableImage', {
             FlippableImage: {

src/index.ts

@@ -1,5 +1,7 @@
 import {
     parse,
+    withDefaultConfig,
+    withCustomConfig,
     ComponentDoc,
     Props,
     PropItem,
@@ -8,6 +10,8 @@ import {
 
 export {
     parse,
+    withDefaultConfig,
+    withCustomConfig,
     ComponentDoc,
     Props,
     PropItem,

src/parser.ts

@@ -24,23 +24,35 @@ export interface PropItemType {
     value?: any;
 }
 
+export interface FileParser {
+    parse(filePath: string): ComponentDoc[];
+}
+
 const defaultOptions: ts.CompilerOptions = {
     target: ts.ScriptTarget.Latest,
-    module: ts.ModuleKind.CommonJS
+    module: ts.ModuleKind.CommonJS,
+    jsx: ts.JsxEmit.React,
 };
 
 /**
  * Parses a file with default TS options
- * @param filePath 
+ * @param filePath component file that should be parsed
  */
 export function parse(filePath: string) {
     return withCompilerOptions(defaultOptions).parse(filePath);
 }
 
+/**
+ * Constructs a parser for a default configuration.
+ */
+export function withDefaultConfig(): FileParser {
+    return withCompilerOptions(defaultOptions);
+}
+
 /**
  * Constructs a parser for a specified tsconfig file.
  */
-export function withConfig(tsconfigPath: string) {
+export function withCustomConfig(tsconfigPath: string): FileParser {
     const configJson = JSON.parse(fs.readFileSync(tsconfigPath, 'utf8'));
     const basePath = path.dirname(tsconfigPath);
 
@@ -58,7 +70,7 @@ export function withConfig(tsconfigPath: string) {
 /**
  * Constructs a parser for a specified set of TS compiler options.
  */
-export function withCompilerOptions(compilerOptions: ts.CompilerOptions) {
+export function withCompilerOptions(compilerOptions: ts.CompilerOptions): FileParser {
     return {
         parse(filePath: string): ComponentDoc[] {
             const program = ts.createProgram([filePath], compilerOptions);
@@ -89,7 +101,6 @@ class Parser {
 
     public getComponentInfo(exp: ts.Symbol, source: ts.SourceFile): ComponentDoc {
         const type = this.checker.getTypeOfSymbolAtLocation(exp, exp.valueDeclaration);
-
         let propsType = this.extractPropsFromTypeIfStatelessComponent(type);
         if (!propsType) {
             propsType = this.extractPropsFromTypeIfStatefulComponent(type);
@@ -160,6 +171,8 @@ class Parser {
         const result: Props = {};
 
         propertiesOfProps.forEach(prop => {
+            console.log("parser.getPropsInfo prop: ", prop.name);
+
             const propName = prop.getName();