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, 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,54 +9,59 @@ 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.
  * @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",
-                        ["@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: [
+        babel({
+          cwd: ROOT_DIR,
+          babelHelpers: "bundled",
+          extensions: ['.js', '.jsx', '.cjs', '.tsx'],
+          presets: [
+            "@babel/preset-env",
+            "@babel/preset-typescript",
+            ["@babel/preset-react", {
+              runtime: "automatic",
+            }],
+          ],
+          plugins: [
+            "source-map-support"
+          ],
         })
-        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}