feat: add support for TS in templates

Author: magicmatatjahu

package-lock.json

@@ -34,6 +34,7 @@
     "@babel/core": "7.12.9",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
+    "@babel/preset-typescript": "^7.13.0",
     "@rollup/plugin-babel": "^5.2.1",
     "babel-plugin-source-map-support": "^2.1.3",
     "prop-types": "^15.7.2",
@@ -58,8 +59,7 @@
     "jsdoc-to-markdown": "^6.0.1",
     "markdown-toc": "^1.2.0",
     "semantic-release": "^17.3.0",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.1.2"
+    "ts-jest": "^26.4.4"
   },
   "scripts": {
     "start": "tsc --watch",

package.json

@@ -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/renderer/template.ts

@@ -9,7 +9,8 @@ import { TranspileFilesOptions } from '../types';
 const ROOT_DIR = Path.resolve(__dirname, '../..');
 
 /**
- * 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.
@@ -46,19 +47,22 @@ export async function transpileFiles(directory: string, outputDir: string, optio
                 })
             ]
         })
-        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/transpiler/transpiler.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}