Merge pull request #499 from KnisterPeter/fix-default-export-sfc

fix: for SFCs export a const and not a type

Author: unstubbable

package-lock.json

@@ -69,7 +69,7 @@
     "babel-generator": "^6.26.0",
     "babylon": "7.0.0-beta.40",
     "chalk": "^2.3.0",
-    "dts-dom": "^2.0.1",
+    "dts-dom": "^2.1.0",
     "get-stdin": "^6.0.0",
     "meow": "^4.0.0",
     "pascal-case": "2.0.1",

package.json

@@ -70,7 +70,7 @@ export function createTypings(moduleName: string|null, programAst: any, options:
   if (moduleName === null) {
     return m.members.map(member => dom.emit(member)).join('');
   } else {
-    return dom.emit(m, { rootFlags: dom.ContextFlags.Module, tripleSlashDirectives });
+    return dom.emit(m, { tripleSlashDirectives });
   }
 }
 
@@ -107,13 +107,16 @@ function createExportedClassComponent(m: dom.ModuleDeclaration, componentName: s
 }
 
 function createExportedFunctionalComponent(m: dom.ModuleDeclaration, componentName: string, propTypes: any,
-  exportType: dom.DeclarationFlags, interf: dom.InterfaceDeclaration): void {
+    exportType: dom.DeclarationFlags, interf: dom.InterfaceDeclaration): void {
+  const typeDecl = dom.create.namedTypeReference(`React.SFC${ propTypes ? `<${interf.name}>` : '' }`);
+  const constDecl = dom.create.const(componentName, typeDecl);
+  m.members.push(constDecl);
 
-  const typeDecl = dom.create.alias(
-    componentName,
-    dom.create.namedTypeReference(`React.SFC${ propTypes ? `<${interf.name}>` : '' }`));
-  typeDecl.flags = exportType;
-  m.members.push(typeDecl);
+  if (exportType === dom.DeclarationFlags.ExportDefault) {
+    m.members.push(dom.create.exportDefault(componentName));
+  } else {
+    constDecl.flags = exportType;
+  }
 }
 
 function createPropTypeTypings(interf: dom.InterfaceDeclaration, ast: AstQuery, propTypes: any,

src/typings.ts

@@ -8,5 +8,5 @@ declare module 'component' {
     render(): JSX.Element;
   }
 
-  export type test = React.SFC;
+  export const test: React.SFC;
 }

tests/component-without-proptypes.d.ts

@@ -5,7 +5,7 @@ declare module 'component' {
     optionalAny?: any;
   }
 
-  export type Component = React.SFC<ComponentProps>;
+  export const Component: React.SFC<ComponentProps>;
 
-  export type Component2 = React.SFC;
+  export const Component2: React.SFC;
 }

tests/named-export-specifiers.d.ts

@@ -108,6 +108,9 @@ test('Parsing should suppport props-types repo', t => {
 test('Parsing should suppport props-types repo (with a default import)', t => {
   compare(t, 'path', 'prop-types-default-import.jsx', 'prop-types.d.ts', {});
 });
+test('Parsing should support an SFC with default export', t => {
+  compare(t, 'component', 'stateless-default-export.jsx', 'stateless-default-export.d.ts');
+});
 test('Parsing should support an SFC with default export babeled to es6', t => {
   compare(t, 'component', 'stateless-export-as-default.js', 'stateless-export-as-default.d.ts');
 });

tests/parsing-test.ts

@@ -0,0 +1,12 @@
+declare module 'component' {
+  import * as React from 'react';
+  
+  export interface ComponentProps {
+    optionalString?: string;
+  }
+
+  const Component: React.SFC<ComponentProps>;
+  export default Component;
+
+  export const Component2: React.SFC;
+}

tests/stateless-default-export.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function Component({optionalString}) {
+  return <div />;
+}
+
+Component.propTypes = {
+  optionalString: React.PropTypes.string,
+};
+
+export const Component2 = () => <div />;

tests/stateless-default-export.jsx

@@ -6,5 +6,6 @@ declare module 'component' {
     className?: string;
   }
 
-  export default type Component = React.SFC<ComponentProps>;
+  const Component: React.SFC<ComponentProps>;
+  export default Component;
 }

tests/stateless-export-as-default.d.ts

@@ -5,7 +5,7 @@ declare module 'component' {
     optionalAny?: any;
   }
 
-  export type Component = React.SFC<ComponentProps>;
+  export const Component: React.SFC<ComponentProps>;
 
-  export type Component2 = React.SFC;
+  export const Component2: React.SFC;
 }