Typescript support

cli.js

@@ -12,7 +12,10 @@ const program = commander
   .version(version)
   .option("-f, --functional", "create a functional component")
   .option("-s, --stateful", "create a stateful class component")
-  .option("-t, --type-check [system]", "add @flow comment to script files")
+  .option(
+    "-t, --type-check [system]",
+    'either "flow", "flowtype" or "typescript"'
+  )
   .option(
     "-c, --css-extension [extension]",
     "changes the extension of generated css files"

config.js

@@ -9,9 +9,21 @@ try {
   pkg = require(path.resolve(process.cwd(), "package.json"))
 } catch (err) {}
 
+const getTypeCheck = () => {
+  const hasFlow = fs.existsSync(path.join(process.cwd(), ".flowconfig"))
+  const hasTypescript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"))
+  if (hasFlow) {
+    return "flow"
+  } else if (hasTypescript) {
+    return "typescript"
+  }
+
+  return false
+}
+
 const defaultOptions = {
   directory: "components",
-  typeCheck: fs.existsSync(path.join(process.cwd(), ".flowconfig")) && "flow",
+  typeCheck: getTypeCheck(),
   cssExtension: "css",
   semi: true,
   type: "stateful",
@@ -34,7 +46,7 @@ module.exports = function(program) {
     config.cssExtension = program.cssExtension
   }
 
-  if (program.typeCheck) {
+  if (program.typeCheck && typeof program.typeCheck === "string") {
     config.typeCheck = program.typeCheck
   }
 

src/__tests__/__snapshots__/generate.js.snap

@@ -123,3 +123,34 @@ export default T;
 ",
 ]
 `;
+
+exports[`generate should use typescript 1`] = `
+Array [
+  "export { default } from './T';
+",
+  "import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import T from './T';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<T />, div);
+});
+",
+  "import * as React from 'react';
+import './T.css';
+
+class T extends React.Component<{}, {}> {
+  public state = {};
+
+  public render() {
+    return (
+      <div className=\\"T\\" />
+    );
+  }
+}
+
+export default T;
+",
+]
+`;

src/__tests__/generate.js

@@ -55,6 +55,15 @@ describe("generate", () => {
     expect(scripts).toMatchSnapshot()
   })
 
+  it("should use typescript", () => {
+    const data = generate("t", { typeCheck: "typescript" })
+
+    const scripts = data.files
+      .filter(({ fileName }) => fileName.includes(".ts", -1))
+      .map(({ content }) => content)
+    expect(scripts).toMatchSnapshot()
+  })
+
   it("should use customized directory", () => {
     const data = generate("t", { directory: "foo" })
     expect(data.componentPath).toContain("/src/foo/T")

templates/index.js

@@ -2,12 +2,15 @@
 
 const flowtype = require("./template.flowtype")
 const javascript = require("./template.javascript")
+const typescript = require("./template.typescript")
 
 module.exports = fileType => {
   switch (fileType.toLowerCase()) {
     case "flow":
     case "flowtype":
       return flowtype
+    case "typescript":
+      return typescript
     default:
       return javascript
   }

templates/template.typescript.js

@@ -0,0 +1,63 @@
+"use strict"
+const utils = require("./utils")
+
+module.exports = ({
+  componentPath,
+  componentName,
+  fileName,
+  semiColon,
+  cssExtension,
+  noTest,
+  isFunctional,
+}) =>
+  utils.createTemplate(componentPath, {
+    [`${fileName}.${cssExtension}`]: `
+.${componentName} {}
+  `,
+
+    "index.ts": `
+export { default } from './${fileName}'${semiColon}
+  `,
+
+    [`${fileName}.test.tsx`]: noTest
+      ? ""
+      : `
+import * as React from 'react'${semiColon}
+import * as ReactDOM from 'react-dom'${semiColon}
+import ${componentName} from './${fileName}'${semiColon}
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')${semiColon}
+  ReactDOM.render(<${componentName} />, div)${semiColon}
+})${semiColon}
+  `,
+
+    [`${fileName}.tsx`]: isFunctional
+      ? `
+import * as React from 'react'${semiColon}
+import './${fileName}.${cssExtension}'${semiColon}
+
+const ${componentName}: React.SFC = ({}) => (
+  <div className="${componentName}"></div>
+)${semiColon}
+
+export default ${componentName}${semiColon}
+
+  `
+      : `
+import * as React from 'react'${semiColon}
+import './${fileName}.${cssExtension}'${semiColon}
+
+class ${componentName} extends React.Component<{}, {}> {
+  public state = {}${semiColon}
+
+  public render() {
+    return (
+      <div className="${componentName}"></div>
+    )${semiColon}
+  }
+}
+
+export default ${componentName}${semiColon}
+  `,
+  })