diff --git a/cli.js b/cli.js index 97968aa..309bc62 100755 --- a/cli.js +++ b/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" diff --git a/config.js b/config.js index 035dba5..0903be7 100644 --- a/config.js +++ b/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 } diff --git a/src/__tests__/__snapshots__/generate.js.snap b/src/__tests__/__snapshots__/generate.js.snap index 6e855c7..85d2de1 100644 --- a/src/__tests__/__snapshots__/generate.js.snap +++ b/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(, div); +}); +", + "import * as React from 'react'; +import './T.css'; + +class T extends React.Component<{}, {}> { + public state = {}; + + public render() { + return ( +
+ ); + } +} + +export default T; +", +] +`; diff --git a/src/__tests__/generate.js b/src/__tests__/generate.js index 168e561..ec21ddf 100644 --- a/src/__tests__/generate.js +++ b/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") diff --git a/templates/index.js b/templates/index.js index ceea063..f41313c 100644 --- a/templates/index.js +++ b/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 } diff --git a/templates/template.typescript.js b/templates/template.typescript.js new file mode 100644 index 0000000..7199aeb --- /dev/null +++ b/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 = ({}) => ( +
+)${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 ( +
+ )${semiColon} + } +} + +export default ${componentName}${semiColon} + `, + })