feat: Support es6 class syntax

Author: KnisterPeter

README.md

@@ -11,6 +11,7 @@ Create typescript definitions files (d.ts) from react components.
 
 # Features
 
+* ES6 and ES7 class syntax
 * Most PropTypes
  * any, array, bool, func, number, object, string, node, element, oneOfType, arrayOf
 * required PropTypes

index.ts

@@ -83,7 +83,7 @@ export function generateFromSource(name: string, code: string, options: IOptions
 const defaultInstanceOfResolver: InstanceOfResolver = (name: string): string => undefined;
 
 export function generateFromAst(name: string, ast: any, options: IOptions = {}): string {
-  const {classname, propTypes}: IParsingResult = parseAst(ast, options.instanceOfResolver);
+  const {exportType, classname, propTypes}: IParsingResult = parseAst(ast, options.instanceOfResolver);
   const writer: Writer = options.writer || new Writer();
   writer.declareModule(name, () => {
     writer.import('* as React', 'react');
@@ -98,46 +98,73 @@ export function generateFromAst(name: string, ast: any, options: IOptions = {}):
     writer.nl();
     writer.props(classname, propTypes);
     writer.nl();
-    writer.exportDefault(() => {
+    writer.exportDeclaration(exportType, () => {
       writer.class(classname, !!propTypes);
     });
   });
   return writer.toString();
 }
 
+enum ExportType {
+  default,
+  named
+}
+
 interface IParsingResult {
+  exportType: ExportType;
   classname: string;
   propTypes: IPropTypes;
 }
 
 function parseAst(ast: any, instanceOfResolver: InstanceOfResolver): IParsingResult {
+  let exportType: ExportType;
   let classname: string;
-  let propTypes: IPropTypes = undefined;
+  let propTypes: IPropTypes = {};
   walk(ast.program, {
+    'ExportNamedDeclaration': (exportNode: any): void => {
+      exportType = ExportType.named;
+    },
+    'ExportDefaultDeclaration': (exportNode: any): void => {
+      exportType = ExportType.default;
+    },
     'ClassDeclaration': (classNode: any): void => {
       classname = classNode.id.name;
       walk(classNode.body, {
         'ClassProperty': (attributeNode: any): void => {
           if (attributeNode.key.name == 'propTypes') {
-            propTypes = {};
-            walk(attributeNode.value, {
-              'ObjectProperty': (propertyNode: any): void => {
-                const prop: IProp = getTypeFromPropType(propertyNode.value, instanceOfResolver);
-                prop.documentation = getOptionalDocumentation(propertyNode);
-                propTypes[propertyNode.key.name] = prop;
-              }
-            });
+            propTypes = parsePropTypes(attributeNode.value, instanceOfResolver);
           }
         }
       });
+    },
+    'ExpressionStatement': (expressionNode: any): void => {
+      if (expressionNode.expression.type == 'AssignmentExpression'
+          && expressionNode.expression.left.type == 'MemberExpression'
+          && expressionNode.expression.left.object.name == classname
+          && expressionNode.expression.left.property.name == 'propTypes') {
+        propTypes = parsePropTypes(expressionNode.expression.right, instanceOfResolver);
+      }
     }
   });
   return {
+    exportType,
     classname,
     propTypes
   };
 }
 
+function parsePropTypes(node: any, instanceOfResolver: InstanceOfResolver): IPropTypes {
+  let propTypes: IPropTypes = {};
+  walk(node, {
+    'ObjectProperty': (propertyNode: any): void => {
+      const prop: IProp = getTypeFromPropType(propertyNode.value, instanceOfResolver);
+      prop.documentation = getOptionalDocumentation(propertyNode);
+      propTypes[propertyNode.key.name] = prop;
+    }
+  });
+  return propTypes;
+}
+
 function getOptionalDocumentation(propertyNode: any): string {
   return (((propertyNode.leadingComments || []) as any[])
     .filter((comment: any) => comment.type == 'CommentBlock')[0] || {})
@@ -351,9 +378,12 @@ export class Writer {
     this.nl();
   }
 
-  public exportDefault(fn: () => void): void {
+  public exportDeclaration(exportType: ExportType, fn: () => void): void {
     this.indent();
-    this.code += 'export default ';
+    this.code += 'export ';
+    if (exportType == ExportType.default) {
+      this.code += 'default ';
+    }
     fn();
   }
 

tests/simple-component.d.ts renamed to tests/es6-class.d.ts

@@ -1,8 +1,8 @@
-declare module 'simple-component' {
+declare module 'component' {
 	import * as React from 'react';
 	import Message from './path/to/Message';
 
-	interface SimpleComponentProps {
+	interface ComponentProps {
 		key?: any;
 		/**
 		 * This is a jsdoc comment for optionalAny.
@@ -25,6 +25,6 @@ declare module 'simple-component' {
 		requiredArrayOf: string[];
 	}
 
-	export default class SimpleComponent extends React.Component<SimpleComponentProps, any> {
+	export class Component extends React.Component<ComponentProps, any> {
 	}
 }

tests/es6-class.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+export class Component extends React.Component {
+
+	render() {
+		return (
+			<div />
+		);
+	}
+}
+Component.propTypes = {
+	/**
+	 * This is a jsdoc comment for optionalAny.
+	 */
+	optionalAny: React.PropTypes.any,
+	optionalArray: React.PropTypes.array,
+	optionalBool: React.PropTypes.bool,
+	optionalFunc: React.PropTypes.func,
+	optionalNumber: React.PropTypes.number,
+	optionalObject: React.PropTypes.object,
+	optionalString: React.PropTypes.string,
+	optionalNode: React.PropTypes.node,
+	optionalElement: React.PropTypes.element,
+	optionalMessage: React.PropTypes.instanceOf(Message),
+	//optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
+	optionalUnion: React.PropTypes.oneOfType([
+		React.PropTypes.string,
+		React.PropTypes.number
+	]),
+	optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+	//optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+	//optionalObjectWithShape: React.PropTypes.shape({
+	//	color: React.PropTypes.string,
+	//	fontSize: React.PropTypes.number
+	//}),
+	requiredFunc: React.PropTypes.func.isRequired,
+	requiredAny: React.PropTypes.any.isRequired,
+	requiredUnion: React.PropTypes.oneOfType([
+		React.PropTypes.array,
+		React.PropTypes.bool
+	]).isRequired,
+	requiredArrayOf: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+};

tests/es7-class.d.ts

@@ -0,0 +1,30 @@
+declare module 'component' {
+	import * as React from 'react';
+	import Message from './path/to/Message';
+
+	interface ComponentProps {
+		key?: any;
+		/**
+		 * This is a jsdoc comment for optionalAny.
+		 */
+		optionalAny?: any;
+		optionalArray?: any[];
+		optionalBool?: boolean;
+		optionalFunc?: (...args: any[]) => any;
+		optionalNumber?: number;
+		optionalObject?: Object;
+		optionalString?: string;
+		optionalNode?: React.ReactNode;
+		optionalElement?: React.ReactElement<any>;
+		optionalMessage?: typeof Message;
+		optionalUnion?: string|number;
+		optionalArrayOf?: number[];
+		requiredFunc: (...args: any[]) => any;
+		requiredAny: any;
+		requiredUnion: any[]|boolean;
+		requiredArrayOf: string[];
+	}
+
+	export default class Component extends React.Component<ComponentProps, any> {
+	}
+}

tests/simple-component.jsx renamed to tests/es7-class.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export default class SimpleComponent extends React.Component {
+export default class Component extends React.Component {
 
 	static propTypes = {
 		/**

tests/parsing-test.ts

@@ -0,0 +1,26 @@
+import { assert } from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+
+import * as react2dts from '../index';
+
+describe('Parsing', () => {
+  it('should create definition from es6 class component', () => {
+    const opts: react2dts.IOptions = {
+      instanceOfResolver: (name: string): string => './path/to/Message'
+    };
+    assert.equal(
+      react2dts.generateFromFile('component', path.join(__dirname, 'es6-class.jsx'), opts),
+      fs.readFileSync(path.join(__dirname, 'es6-class.d.ts')).toString()
+    );
+  });
+  it('should create definition from es7 class component', () => {
+    const opts: react2dts.IOptions = {
+      instanceOfResolver: (name: string): string => './path/to/Message'
+    };
+    assert.equal(
+      react2dts.generateFromFile('component', path.join(__dirname, 'es7-class.jsx'), opts),
+      fs.readFileSync(path.join(__dirname, 'es7-class.d.ts')).toString()
+    );
+  });
+});

tests/simple-component-test.ts

@@ -40,4 +40,12 @@ describe('The Writer', () => {
     writer.comment('* yada\n\t\t\t\tyada\n ');
     assert.equal(writer.toString(), '/** yada\nyada\n */\n');
   });
+  it('should write an export default declaration', () => {
+    writer.exportDeclaration(0, () => undefined);
+    assert.equal(writer.toString(), 'export default ');
+  });
+  it('should write a named export declaration', () => {
+    writer.exportDeclaration(1, () => undefined);
+    assert.equal(writer.toString(), 'export ');
+  });
 });

tests/writer-test.ts

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "target": "ES5",
+    "target": "es5",
     "module": "commonjs",
     "noImplicitAny": true,
     "sourceMap": true
   },
   "files": [
     "typings/tsd.d.ts",
     "index.ts",
-    "tests/simple-component-test.ts",
+    "tests/parsing-test.ts",
     "tests/parse-prop-types-test.ts",
     "tests/writer-test.ts"
   ]