feat(init): support ts in configuration

Author: misterdev

packages/generators/init-generator.ts

@@ -55,6 +55,7 @@ export default class InitGenerator extends Generator {
 			config: {
 				configName: this.isProd ? "prod" : "config",
 				topScope: [],
+				// TODO migrate tslint
 				// tslint:disable: object-literal-sort-keys
 				webpackOptions: {
 					mode: this.isProd ? "'production'" : "'development'",

packages/generators/templates/tsconfig.json.js

@@ -0,0 +1,9 @@
+module.exports = {
+	compilerOptions: {
+		noImplicitAny: true,
+		module: "es6",
+		target: "es5",
+		jsx: "react",
+		allowJs: true
+	}
+};

packages/generators/utils/language.ts

@@ -4,9 +4,10 @@ export enum LangType {
 }
 
 interface ModuleRule extends Object {
-	include: string[];
+	include?: string[];
+	exclude?: string[];
 	loader: string;
-	options: {
+	options?: {
 		plugins: string[];
 		presets: Preset[][];
 	};
@@ -21,8 +22,11 @@ type Preset = string | object;
  *
  * @returns {Function} A callable function that adds the babel-loader with env preset
  */
-export function getBabelPlugin(): ModuleRule {
+export function getBabelLoader(): ModuleRule {
 	return {
+		// TODO migrate tslint
+		// tslint:disable: object-literal-sort-keys
+		test: "/\.js$/",
 		include: ["path.resolve(__dirname, 'src')"],
 		loader: "'babel-loader'",
 		options: {
@@ -36,23 +40,60 @@ export function getBabelPlugin(): ModuleRule {
 				]
 			]
 		},
-		test: `${new RegExp(/\.js$/)}`
+		// tslint:enable: object-literal-sort-keys
+	};
+}
+
+export function getTypescriptLoader(): ModuleRule {
+	return {
+		// TODO migrate tslint
+		// tslint:disable: object-literal-sort-keys
+		test: "/\.tsx?$/",
+		loader: "'ts-loader'",
+		include: ["path.resolve(__dirname, 'src')"],
+		exclude: ["/node_modules/"],
+		// tslint:enable: object-literal-sort-keys
 	};
 }
 
 export default function language(self, langType) {
 	switch (langType) {
 		case LangType.ES6:
-			self.configuration.config.webpackOptions.module.rules.push(
-				getBabelPlugin(),
-			);
 			self.dependencies.push(
 				"babel-loader",
 				"@babel/core",
 				"@babel/preset-env",
 			);
+			self.configuration.config.webpackOptions.module.rules.push(
+				getBabelLoader(),
+			);
 			break;
+
 		case LangType.Typescript:
+			self.dependencies.push(
+				"typescript",
+				"ts-loader",
+			);
+			self.configuration.config.webpackOptions.module.rules.push(
+				getTypescriptLoader(),
+			);
+			self.configuration.config.webpackOptions.resolve = {
+				extensions: [ "'.tsx'", "'.ts'", "'.js'" ],
+			};
+
+			// Update the entry files extensions to .ts
+			const jsEntryOption = self.configuration.config.webpackOptions.entry;
+			const jsExtension = new RegExp("\.js(?!.*\.js)");
+			let tsEntryOption = {};
+			if (typeof jsEntryOption === "string") {
+				tsEntryOption = jsEntryOption.replace(jsExtension, ".ts");
+			} else if (typeof jsEntryOption === "object") {
+				Object.keys(jsEntryOption).map((entry) => {
+					tsEntryOption[entry] = jsEntryOption[entry].replace(jsExtension, ".ts");
+				});
+			}
+			self.configuration.config.webpackOptions.entry = tsEntryOption;
+			self.log(jsEntryOption.replace(jsExtension, ".ts"), jsEntryOption);
 			break;
 	}
 }

packages/utils/run-prettier.ts

@@ -19,7 +19,7 @@ export default function runPrettier(outputPath: string, source: string, cb?: Fun
 		try {
 			prettySource = prettier.format(source, {
 				filepath: outputPath,
-				parser: "babel",
+				parser: "babylon",
 				singleQuote: true,
 				tabWidth: 1,
 				useTabs: true,
@@ -29,7 +29,8 @@ export default function runPrettier(outputPath: string, source: string, cb?: Fun
 				"\n" +
 					chalk.yellow(
 						`WARNING: Could not apply prettier to ${outputPath}` +
-							" due validation error, but the file has been created\n",
+						" due validation error, but the file has been created\n" +
+						err,
 					),
 			);
 			prettySource = source;