Merge pull request #356 from KnisterPeter/preact-output

feat: support output for react-like libraries

Author: KnisterPeter

cli.js

@@ -4,13 +4,14 @@ var meow = require('meow');
 
 const cli = meow(`
   Usage
-    $ react2dts [--module-name <name> | --top-level-module]
+    $ react2dts [--module-name <name> | --top-level-module] [--react-import <name>]
 
   react2dts reads from stdin to process a file.
 
   Options
     --module-name, --name  name of the module to create
     --top-level-module     if the created module should live in top-level
+    --react-import         name of the react-like library to import (default to react)
 
   Examples
     $ cat <some/react/component.jsx> |react2dts --module-name module-name

src/index.ts

@@ -52,21 +52,23 @@ export interface Options {
 export function cli(options: any): void {
   getStdin().then(stdinCode => {
     if (options.topLevelModule) {
-      process.stdout.write(generateFromSource(null, stdinCode));
+      process.stdout.write(generateFromSource(null, stdinCode, {}, options.reactImport || 'react'));
     } else if (options.moduleName) {
-      process.stdout.write(generateFromSource(options.moduleName, stdinCode));
+      process.stdout.write(generateFromSource(options.moduleName, stdinCode, {}, options.reactImport || 'react'));
     }
   });
 }
 
-export function generateFromFile(moduleName: string|null, path: string, options: IOptions = {}): string {
+export function generateFromFile(moduleName: string|null, path: string, options: IOptions = {},
+    reactImport = 'react'): string {
   if (!options.filename) {
     options.filename = path;
   }
-  return generateFromSource(moduleName, fs.readFileSync(path).toString(), options);
+  return generateFromSource(moduleName, fs.readFileSync(path).toString(), options, reactImport);
 }
 
-export function generateFromSource(moduleName: string|null, code: string, options: IOptions = {}): string {
+export function generateFromSource(moduleName: string|null, code: string, options: IOptions = {},
+    reactImport = 'react'): string {
   const ast = babylon.parse(code, {
     sourceType: 'module',
     allowReturnOutsideFunction: true,
@@ -92,12 +94,13 @@ export function generateFromSource(moduleName: string|null, code: string, option
   if (!options.source) {
     options.source = code;
   }
-  return generateFromAst(moduleName, ast, options);
+  return generateFromAst(moduleName, ast, options, reactImport);
 }
 
-export function generateFromAst(moduleName: string|null, ast: any, options: IOptions = {}): string {
+export function generateFromAst(moduleName: string|null, ast: any, options: IOptions = {},
+    reactImport = 'react'): string {
   if (options.generator) {
     return generateTypings(moduleName, ast, options);
   }
-  return createTypings(moduleName, ast, options);
+  return createTypings(moduleName, ast, options, reactImport);
 }

src/typings.ts

@@ -10,7 +10,8 @@ export interface AstQuery {
   querySubtree(subtree: any, query: string): any[];
 }
 
-export function createTypings(moduleName: string|null, programAst: any, options: IOptions): string {
+export function createTypings(moduleName: string|null, programAst: any, options: IOptions,
+    reactImport: string): string {
   const astq = new ASTQ();
   const ast = {
     ast: programAst,
@@ -33,7 +34,7 @@ export function createTypings(moduleName: string|null, programAst: any, options:
 
   const m = dom.create.module(moduleName || 'moduleName');
   if (hasReactClass(ast, reactComponentName)) {
-    m.members.push(dom.create.importNamed('Component', 'react'));
+    m.members.push(dom.create.importNamed('Component', reactImport));
   }
   if (importStatements.length > 0) {
     importStatements.forEach(importStatement => {

tests/parsing-test.ts

@@ -32,10 +32,10 @@ function textDiff(t: ContextualTestContext, actual: string, expected: string): v
 }
 
 function compare(t: ContextualTestContext, moduleName: string|null, file1: string, file2: string,
-    opts: react2dts.IOptions = {}): void {
+    opts: react2dts.IOptions = {}, reactImport = 'react'): void {
   textDiff(
     t,
-    react2dts.generateFromFile(moduleName, path.join(basedir, file1), opts),
+    react2dts.generateFromFile(moduleName, path.join(basedir, file1), opts, reactImport),
     fs.readFileSync(path.join(basedir, file2)).toString()
   );
 }
@@ -85,3 +85,6 @@ test('Parsing should create definition from file with references in propTypes',
 test('Parsing should create definition from file with unnamed default export', t => {
   compare(t, 'path', 'unnamed-default-export.jsx', 'unnamed-default-export.d.ts');
 });
+test('Parsing should create preact definition', t => {
+  compare(t, 'path', 'preact-definition.jsx', 'preact-definition.d.ts', {}, 'preact');
+});

tests/preact-definition.d.ts

@@ -0,0 +1,11 @@
+declare module 'path' {
+  import {Component} from 'preact';
+
+  export interface SomeComponentProps {
+    onClick?: (...args: any[]) => any;
+  }
+
+  export class SomeComponent extends Component<SomeComponentProps, any> {
+    render(): JSX.Element;
+  }
+}

tests/preact-definition.jsx

@@ -0,0 +1,14 @@
+import {Component, PropTypes} from 'react';
+
+export class SomeComponent extends Component {
+
+    static propTypes = {
+        onClick: PropTypes.func
+    };
+
+    render() {
+        return (
+            <div></div>
+        );
+    }
+}

tests/unnamed-default-export.d.ts

@@ -2,7 +2,7 @@ declare module 'path' {
   import {Component} from 'react';
 
   export interface Props {
-        onClick?: (...args: any[]) => any;
+    onClick?: (...args: any[]) => any;
   }
 
   export default class extends Component<Props, any> {