feat: add support for TS in templates

package.json

@@ -35,11 +35,13 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
     "babel-plugin-source-map-support": "^2.1.3",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "rollup": "^2.34.0",
-    "source-map-support": "^0.5.19"
+    "source-map-support": "^0.5.19",
+    "tslib": "^2.2.0"
   },
   "devDependencies": {
     "@semantic-release/commit-analyzer": "^8.0.1",
@@ -59,7 +61,7 @@
     "markdown-toc": "^1.2.0",
     "semantic-release": "^17.3.0",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.1.2"
+    "typescript": "^4.2.2"
   },
   "scripts": {
     "start": "tsc --watch",

src/renderer/template.ts

@@ -5,7 +5,7 @@ import { isJsFile } from "../utils";
 import { TemplateContext, TemplateFunction, TemplateRenderResult } from "../types";
 
 /**
- * render a file with react. This function automatically transforms jsx to js before importing the component.
+ * Render a file with React.
  * 
  * @param filepath the path to file to render
  */

src/transpiler/transpiler.ts

@@ -1,64 +1,70 @@
 import Path from 'path';
 
 import { rollup } from 'rollup';
+import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
 
 import { getStatsInDir } from '../utils';
 import { TranspileFilesOptions } from '../types';
 
 const ROOT_DIR = Path.resolve(__dirname, '../..');
+const extensions = ['.js', '.jsx', '.cjs', '.tsx'];
 
 /**
- * Transpile files in a given directory (and sub directory if recursive option are passed) and write it to an output directory, if no errors are thrown it completed successfully.
+ * Transpile files in a given directory (and sub directory if recursive option are passed) and write it to an output directory,
+ * if no errors are thrown it completed successfully.
  * 
  * @param directory to transpile.
  * @param outputDir to write the transpiled files to.
  * @param options any extra options that should be passed.
  */
 export async function transpileFiles(directory: string, outputDir: string, options?: TranspileFilesOptions) {
-    const { files, dirs } = await getStatsInDir(directory);
-    if (files.length) {
-        /**
-         * WHEN ADDING PLUGINS to transform the input keep in mind that 
-         * IF any of these changes the actual original content in some way
-         * the output is not able to produce accurate source map to the original file.
-         * 
-         * An example of this is using the `sourceMaps: 'inline'` configuration for the babel plugin.
-         */
-        const bundles = await rollup({
-            input: files,
-            onwarn: () => {},
-            plugins: [
-                babel({
-                    cwd: ROOT_DIR,
-                    babelHelpers: "bundled",
-                    plugins: [
-                        "source-map-support",
-                    ],
-                    presets: [
-                        ["@babel/preset-env", {
-                            targets: { node: "12.16" },
-                        }],
-                        ["@babel/preset-react", {
-                            runtime: "automatic",
-                        }],
-                    ],
-                })
-            ]
+  const { files, dirs } = await getStatsInDir(directory);
+
+  if (files.length) {
+    /**
+     * WHEN ADDING PLUGINS to transform the input keep in mind that 
+     * IF any of these changes the actual original content in some way
+     * the output is not able to produce accurate source map to the original file.
+     * 
+     * An example of this is using the `sourceMaps: 'inline'` configuration for the babel plugin.
+     */
+    const bundles = await rollup({
+      input: files,
+      onwarn: () => {},
+      plugins: [
+        typescript(),
+        babel({
+          cwd: ROOT_DIR,
+          babelHelpers: "bundled",
+          plugins: [
+            "source-map-support",
+          ],
+          presets: [
+            ["@babel/preset-env", {
+              targets: { node: "12.16" },
+            }],
+            ["@babel/preset-react", {
+              runtime: "automatic",
+            }],
+          ],
         })
-        await bundles.write({
-            format: "commonjs",
-            sourcemap: true,
-            dir: outputDir,
-            exports: "auto"
-        })
-    }
+      ]
+    });
+
+    await bundles.write({
+      format: "commonjs",
+      sourcemap: true,
+      dir: outputDir,
+      exports: "auto"
+    });
+  }
 
-    // Check if we should transpile all subdirs
-    if (options?.recursive === true && dirs.length > 0) {
-        for (const subdir of dirs) {
-            const subdirPath = Path.parse(subdir);
-            await transpileFiles(subdir, Path.resolve(outputDir, subdirPath.base), options);
-        }
+  // Check if we should transpile all subdirs
+  if (options?.recursive === true && dirs.length > 0) {
+    for (const subdir of dirs) {
+      const subdirPath = Path.parse(subdir);
+      await transpileFiles(subdir, Path.resolve(outputDir, subdirPath.base), options);
     }
+  }
 }

src/utils/isJsFile.ts

@@ -1,7 +1,8 @@
-const ALLOWED_EXTS = ['js', 'jsx', 'cjs'];
+const ALLOWED_EXTS = ['js', 'jsx', 'cjs', 'tsx'];
 
 /**
- * Function which checks if file is JS file
+ * Function which checks if file is JS file that supports JSX syntax
+ * 
  * @private
  * @param {string} filename
  * @returns {boolean}