fix: for SFCs use triple slash directive instead of react import

fixes #469
closes #471

Author: unstubbable

package-lock.json

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

package.json

@@ -44,9 +44,14 @@ export function createTypings(moduleName: string|null, programAst: any, options:
     ...getComponentNamesByStaticPropTypeAttribute(ast),
     ...getComponentNamesByJsxInBody(ast)
   ]);
+  const tripleSlashDirectives: dom.TripleSlashDirective[] = [];
   const m = dom.create.module(moduleName || 'moduleName');
 
-  createReactImport(m, ast, reactImport, reactComponentName);
+  if (hasReactClass(ast, reactComponentName)) {
+    m.members.push(dom.create.importNamed('Component', reactImport));
+  } else {
+    tripleSlashDirectives.push(dom.create.tripleSlashReferenceTypesDirective('react'));
+  }
 
   if (importStatements.length > 0) {
     importStatements.forEach(importStatement => {
@@ -67,20 +72,9 @@ export function createTypings(moduleName: string|null, programAst: any, options:
   });
 
   if (moduleName === null) {
-    return m.members
-      .map(member => dom.emit(member, dom.ContextFlags.None))
-      .join('');
-  } else {
-    return dom.emit(m, dom.ContextFlags.Module);
-  }
-}
-
-function createReactImport(m: dom.ModuleDeclaration, ast: AstQuery, reactImport: string,
-    reactComponentName: string|undefined): void {
-  if (hasReactClass(ast, reactComponentName)) {
-    m.members.push(dom.create.importNamed('Component', reactImport));
+    return m.members.map(member => dom.emit(member)).join('');
   } else {
-    m.members.push(dom.create.import(reactImport));
+    return dom.emit(m, { rootFlags: dom.ContextFlags.Module, tripleSlashDirectives });
   }
 }
 

src/typings.ts

@@ -1,6 +1,5 @@
+/// <reference types="react" />
 declare module 'component' {
-  import 'react';
-
   export interface ComponentProps {
     optionalAny?: any;
   }

tests/named-export-specifiers.d.ts

@@ -1,6 +1,5 @@
+/// <reference types="react" />
 declare module 'component' {
-  import 'react';
-
   export interface ComponentProps {
     text: string;
     className?: string;

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

@@ -1,6 +1,5 @@
+/// <reference types="react" />
 declare module 'component' {
-  import 'react';
-
   export interface ComponentProps {
     optionalAny?: any;
   }