Merge pull request #482 from ingdir/stateless-comp

unstubbable · web-flow · commit 49ba17c12f60 · 2018-02-23T14:45:40.000+01:00
Generate named type instead of function
diff --git a/src/typings.ts b/src/typings.ts
@@ -47,11 +47,7 @@ export function createTypings(moduleName: string|null, programAst: any, options:
   const tripleSlashDirectives: dom.TripleSlashDirective[] = [];
   const m = dom.create.module(moduleName || 'moduleName');
 
-  if (hasReactClass(ast, reactComponentName)) {
-    m.members.push(dom.create.importNamed(reactComponentName || 'Component', reactImport));
-  } else {
-    tripleSlashDirectives.push(dom.create.tripleSlashReferenceTypesDirective('react'));
-  }
+  m.members.push(dom.create.importAll('React', reactImport));
 
   if (importStatements.length > 0) {
     importStatements.forEach(importStatement => {
@@ -104,18 +100,20 @@ function createExportedTypes(m: dom.ModuleDeclaration, ast: AstQuery, componentN
 function createExportedClassComponent(m: dom.ModuleDeclaration, componentName: string,
     reactComponentName: string|undefined, exportType: dom.DeclarationFlags, interf: dom.InterfaceDeclaration): void {
   const classDecl = dom.create.class(componentName);
-  classDecl.baseType = dom.create.interface(`${reactComponentName || 'Component'}<${interf.name}, any>`);
+  classDecl.baseType = dom.create.interface(`React.${reactComponentName || 'Component'}<${interf.name}, any>`);
   classDecl.flags = exportType;
   classDecl.members.push(dom.create.method('render', [], dom.create.namedTypeReference('JSX.Element')));
   m.members.push(classDecl);
 }
 
 function createExportedFunctionalComponent(m: dom.ModuleDeclaration, componentName: string, propTypes: any,
   exportType: dom.DeclarationFlags, interf: dom.InterfaceDeclaration): void {
-  const funcDelc = dom.create.function(componentName, propTypes ? [dom.create.parameter('props', interf)] : [],
-    dom.create.namedTypeReference('JSX.Element'));
-  funcDelc.flags = exportType;
-  m.members.push(funcDelc);
+
+  const typeDecl = dom.create.alias(
+    componentName,
+    dom.create.namedTypeReference(`React.SFC${ propTypes ? `<${interf.name}>` : '' }`));
+  typeDecl.flags = exportType;
+  m.members.push(typeDecl);
 }
 
 function createPropTypeTypings(interf: dom.InterfaceDeclaration, ast: AstQuery, propTypes: any,
@@ -269,36 +267,6 @@ function getImportedPropTypes(ast: AstQuery): ImportedPropType[] {
   }));
 }
 
-function hasReactClass(ast: AstQuery, reactComponentName: string|undefined): boolean {
-  const res = ast.query(`
-      // ClassDeclaration[
-        '${reactComponentName}' == 'undefined'
-        ?
-          /:superClass MemberExpression[
-            /:object Identifier[@name == 'React'] &&
-            /:property Identifier[@name == 'Component']
-          ]
-        :
-          /:superClass Identifier[@name == '${reactComponentName}']
-      ]
-    ,
-      // VariableDeclaration
-      / VariableDeclarator[
-        /:init CallExpression[
-          '${reactComponentName}' == 'undefined'
-          ?
-            /:arguments MemberExpression[
-              /:object Identifier[@name == 'React'] &&
-              /:property Identifier[@name == 'Component']
-            ]
-          :
-            /:arguments Identifier[@name == '${reactComponentName}']
-        ]
-      ]
-  `);
-  return res.length > 0;
-}
-
 function getInstanceOfPropTypes(ast: AstQuery, importedPropTypes: ImportedPropTypes): string[] {
   const {propTypesName, propTypes} = importedPropTypes;
   const instanceOfPropType = propTypes.find(({importedName}) => importedName === 'instanceOf');
diff --git a/tests/component-without-proptyes.d.ts b/tests/component-without-proptyes.d.ts
diff --git a/tests/component-without-proptypes.d.ts b/tests/component-without-proptypes.d.ts
@@ -0,0 +1,12 @@
+declare module 'component' {
+  import * as React from 'react';
+
+  export interface TestProps {
+  }
+
+  export default class Test extends React.Component<TestProps, any> {
+    render(): JSX.Element;
+  }
+
+  export type test = React.SFC;
+}
diff --git a/tests/component-without-proptypes.jsx b/tests/component-without-proptypes.jsx
diff --git a/tests/es6-class.d.ts b/tests/es6-class.d.ts
@@ -1,5 +1,5 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   import Message from './path/to/Message';
 
@@ -52,7 +52,7 @@ declare module 'component' {
     requiredSymbol: Symbol;
   }
 
-  export class Component extends Component<ComponentProps, any> {
+  export class Component extends React.Component<ComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/es7-class-babeled-to-es6.d.ts b/tests/es7-class-babeled-to-es6.d.ts
@@ -1,5 +1,5 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   import Message from './path/to/Message';
 
@@ -52,7 +52,7 @@ declare module 'component' {
     requiredSymbol: Symbol;
   }
 
-  export class MyComponent extends Component<MyComponentProps, any> {
+  export class MyComponent extends React.Component<MyComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/es7-class-separate-export.d.ts b/tests/es7-class-separate-export.d.ts
@@ -1,11 +1,11 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   export interface ComponentProps {
     optionalAny?: any;
   }
 
-  export default class Component extends Component<ComponentProps, any> {
+  export default class Component extends React.Component<ComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/es7-class-top-level-module.d.ts b/tests/es7-class-top-level-module.d.ts
@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import * as React from 'react';
 import Message from './path/to/Message';
 
 export type ComponentOptionalUnion = string | number;
@@ -27,6 +27,6 @@ export interface ComponentProps {
   requiredArrayOf: string[];
 }
 
-export default class Component extends Component<ComponentProps, any> {
+export default class Component extends React.Component<ComponentProps, any> {
   render(): JSX.Element;
 }
diff --git a/tests/es7-class.d.ts b/tests/es7-class.d.ts
@@ -1,5 +1,5 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
   import Message from './path/to/Message';
 
   export type ComponentOptionalUnion = string | number;
@@ -28,7 +28,7 @@ declare module 'component' {
     requiredArrayOf: string[];
   }
 
-  export default class Component extends Component<ComponentProps, any> {
+  export default class Component extends React.Component<ComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/import-react-component.d.ts b/tests/import-react-component.d.ts
@@ -1,3 +1,3 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 }
diff --git a/tests/instance-of-proptype-names.d.ts b/tests/instance-of-proptype-names.d.ts
@@ -1,12 +1,12 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
   import Member from './member';
 
   export interface TestProps {
     test?: Member;
   }
 
-  export class Test extends Component<TestProps, any> {
+  export class Test extends React.Component<TestProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/named-export-specifiers.d.ts b/tests/named-export-specifiers.d.ts
@@ -1,10 +1,11 @@
-/// <reference types="react" />
 declare module 'component' {
+  import * as React from 'react';
+  
   export interface ComponentProps {
     optionalAny?: any;
   }
 
-  export function Component(props: ComponentProps): JSX.Element;
+  export type Component = React.SFC<ComponentProps>;
 
-  export function Component2(): JSX.Element;
+  export type Component2 = React.SFC;
 }
diff --git a/tests/parsing-test.ts b/tests/parsing-test.ts
@@ -85,7 +85,7 @@ test('Parsing should create definition from class import PropTypes and instanceO
   compare(t, 'component', 'instance-of-proptype-names.jsx', 'instance-of-proptype-names.d.ts');
 });
 test('Parsing should create definition from file without propTypes', t => {
-  compare(t, 'component', 'component-without-proptyes.jsx', 'component-without-proptyes.d.ts');
+  compare(t, 'component', 'component-without-proptypes.jsx', 'component-without-proptypes.d.ts');
 });
 test('Parsing should create definition from file with references in propTypes', t => {
   compare(t, 'component', 'references-in-proptypes.jsx', 'references-in-proptypes.d.ts');
diff --git a/tests/preact-definition.d.ts b/tests/preact-definition.d.ts
@@ -1,11 +1,11 @@
 declare module 'path' {
-  import {Component} from 'preact';
+  import * as React from 'preact';
 
   export interface SomeComponentProps {
     onClick?: (...args: any[]) => any;
   }
 
-  export class SomeComponent extends Component<SomeComponentProps, any> {
+  export class SomeComponent extends React.Component<SomeComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/prop-types.d.ts b/tests/prop-types.d.ts
@@ -1,11 +1,11 @@
 declare module 'path' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   export interface Props {
     optionalString?: string;
   }
 
-  export default class extends Component<Props, any> {
+  export default class extends React.Component<Props, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/pure-component.d.ts b/tests/pure-component.d.ts
@@ -1,11 +1,11 @@
 declare module 'component' {
-  import {PureComponent} from 'react';
+  import * as React from 'react';
 
   export interface Props {
     optionalString?: string;
   }
 
-  export default class extends PureComponent<Props, any> {
+  export default class extends React.PureComponent<Props, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/reference-as-proptypes.d.ts b/tests/reference-as-proptypes.d.ts
@@ -1,11 +1,11 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   export interface SomeComponentProps {
     someString?: string;
   }
 
-  export default class SomeComponent extends Component<SomeComponentProps, any> {
+  export default class SomeComponent extends React.Component<SomeComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/references-in-proptypes.d.ts b/tests/references-in-proptypes.d.ts
@@ -1,5 +1,5 @@
 declare module 'component' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   export type SomeComponentSomeOneOf = "foo" | "bar";
   export type SomeComponentAnotherOneOf = "foo" | "bar";
@@ -14,7 +14,7 @@ declare module 'component' {
     someShape?: SomeComponentSomeShape;
   }
 
-  export default class SomeComponent extends Component<SomeComponentProps, any> {
+  export default class SomeComponent extends React.Component<SomeComponentProps, any> {
     render(): JSX.Element;
   }
 }
diff --git a/tests/stateless-export-as-default.d.ts b/tests/stateless-export-as-default.d.ts
@@ -1,9 +1,10 @@
-/// <reference types="react" />
 declare module 'component' {
+  import * as React from 'react';
+  
   export interface ComponentProps {
     text: string;
     className?: string;
   }
 
-  export default function Component(props: ComponentProps): JSX.Element;
+  export default type Component = React.SFC<ComponentProps>;
 }
diff --git a/tests/stateless.d.ts b/tests/stateless.d.ts
@@ -1,10 +1,11 @@
-/// <reference types="react" />
 declare module 'component' {
+  import * as React from 'react';
+  
   export interface ComponentProps {
     optionalAny?: any;
   }
 
-  export function Component(props: ComponentProps): JSX.Element;
+  export type Component = React.SFC<ComponentProps>;
 
-  export function Component2(): JSX.Element;
+  export type Component2 = React.SFC;
 }
diff --git a/tests/unnamed-default-export.d.ts b/tests/unnamed-default-export.d.ts
@@ -1,11 +1,11 @@
 declare module 'path' {
-  import {Component} from 'react';
+  import * as React from 'react';
 
   export interface Props {
     onClick?: (...args: any[]) => any;
   }
 
-  export default class extends Component<Props, any> {
+  export default class extends React.Component<Props, any> {
     render(): JSX.Element;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`declare module 'component' {`
`2`		`- import {Component} from 'react';`
	`2`	`+ import * as React from 'react';`
`3`	`3`
`4`	`4`	`import Message from './path/to/Message';`
`5`	`5`
`@@ -52,7 +52,7 @@ declare module 'component' {`
`52`	`52`	`requiredSymbol: Symbol;`
`53`	`53`	`}`
`54`	`54`
`55`		`- export class Component extends Component<ComponentProps, any> {`
	`55`	`+ export class Component extends React.Component<ComponentProps, any> {`
`56`	`56`	`render(): JSX.Element;`
`57`	`57`	`}`
`58`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`	`1`	`declare module 'component' {`
`2`		`- import {Component} from 'react';`
	`2`	`+ import * as React from 'react';`
`3`	`3`
`4`	`4`	`export interface ComponentProps {`
`5`	`5`	`optionalAny?: any;`
`6`	`6`	`}`
`7`	`7`
`8`		`- export default class Component extends Component<ComponentProps, any> {`
	`8`	`+ export default class Component extends React.Component<ComponentProps, any> {`
`9`	`9`	`render(): JSX.Element;`
`10`	`10`	`}`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {Component} from 'react';`
	`1`	`+import * as React from 'react';`
`2`	`2`	`import Message from './path/to/Message';`
`3`	`3`
`4`	`4`	`export type ComponentOptionalUnion = string \| number;`
`@@ -27,6 +27,6 @@ export interface ComponentProps {`
`27`	`27`	`requiredArrayOf: string[];`
`28`	`28`	`}`
`29`	`29`
`30`		`-export default class Component extends Component<ComponentProps, any> {`
	`30`	`+export default class Component extends React.Component<ComponentProps, any> {`
`31`	`31`	`render(): JSX.Element;`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`declare module 'component' {`
`2`		`- import {Component} from 'react';`
	`2`	`+ import * as React from 'react';`
`3`	`3`	`}`