From 49a3c36095797f19ca14018d53d6fc75a406b980 Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:49:35 +0200 Subject: [PATCH 1/6] document that -t option now accepts type --- cli.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/cli.js b/cli.js index 97968aa..03b42c0 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]", + "add @flow or comment to script files or create typescript files" + ) .option( "-c, --css-extension [extension]", "changes the extension of generated css files" From 1963ead88a1b94e41becebbb3593c0aa6227a45a Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:50:15 +0200 Subject: [PATCH 2/6] make it more clear the options for --type-check --- cli.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli.js b/cli.js index 03b42c0..309bc62 100755 --- a/cli.js +++ b/cli.js @@ -14,7 +14,7 @@ const program = commander .option("-s, --stateful", "create a stateful class component") .option( "-t, --type-check [system]", - "add @flow or comment to script files or create typescript files" + 'either "flow", "flowtype" or "typescript"' ) .option( "-c, --css-extension [extension]", From 22d99467b0e6447ec6d26de7538666ee82153b56 Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:51:07 +0200 Subject: [PATCH 3/6] add typescript support to config.js - check for tsconfig.json in path - check so typeCheck is of type "string" --- config.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 } From ef8a6f9dd16f4d87d2bb2a3cd529336565feed26 Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:51:51 +0200 Subject: [PATCH 4/6] add typescript template --- templates/index.js | 3 ++ templates/template.typescript.js | 63 ++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 templates/template.typescript.js 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..567970c --- /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} + `, + }) From 03b500800c1ba733fdae0265efeaaf4a43d68a49 Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:55:14 +0200 Subject: [PATCH 5/6] add test for typescript template --- src/__tests__/__snapshots__/generate.js.snap | 31 ++++++++++++++++++++ src/__tests__/generate.js | 9 ++++++ 2 files changed, 40 insertions(+) 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") From a2bcc0c7c751adace7490dfdee187f36eecb9480 Mon Sep 17 00:00:00 2001 From: alexdriaguine Date: Sat, 13 Oct 2018 12:59:27 +0200 Subject: [PATCH 6/6] do not have self enclosing div in component --- templates/template.typescript.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/template.typescript.js b/templates/template.typescript.js index 567970c..7199aeb 100644 --- a/templates/template.typescript.js +++ b/templates/template.typescript.js @@ -53,7 +53,7 @@ class ${componentName} extends React.Component<{}, {}> { public render() { return ( -
+
)${semiColon} } }