feat: Re-enable typescript for production builds

build: Add .ts/.tsx extensions to webpack resolver

chore: Add ending newline to Image.tsx

README.rst

@@ -157,6 +157,14 @@ You may create a `.env.private` with any overrides of the environment settings c
 
 **Note: .env.private should be added to your project's .gitignore so it does not get checked in.**
 
+Local module configuration for TypeScript
+-----------------------------------------
+
+#. Copy tsconfig.json into the root of the module
+#. Set "rootDir" to the root of the source code folders
+#. Set "include" to wildcard patterns specifying the subdirectories/files under rootDir where source code can be found
+#. Include any wildcards under rootDir that should be excluded using "exclude"
+
 Development
 -----------
 

config/jest.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const { jsWithTs: tsjPreset } = require('ts-jest/presets');
 
 const presets = require('../lib/presets');
 
@@ -33,11 +34,12 @@ module.exports = {
     '/node_modules/(?!@edx)',
   ],
   transform: {
-    '^.+\\.[t|j]sx?$': [
+    '^.+\\.jsx?$': [
       'babel-jest',
       {
         configFile: presets.babel.resolvedFilepath,
       },
     ],
+    ...tsjPreset.transform,
   },
 };

config/webpack.common.config.js

@@ -17,6 +17,6 @@ module.exports = {
       // the application being built.
       'env.config': false,
     },
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
 };

config/webpack.prod.config.js

@@ -71,12 +71,12 @@ module.exports = merge(commonConfig, {
       // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
       // Babel is configured with the .babelrc file at the root of the project.
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js|jsx|ts|tsx)$/,
         exclude: /node_modules\/(?!@edx)/,
         use: {
           loader: 'babel-loader',
           options: {
-            configFile: presets.babel.resolvedFilepath,
+            configFile: presets['babel-typescript'].resolvedFilepath,
           },
         },
       },

example/src/App.jsx

@@ -1,4 +1,5 @@
 import config from 'env.config';
+import Image from './Image';
 import appleUrl, { ReactComponent as Apple } from './apple.svg';
 import appleImg from './apple.jpg';
 
@@ -19,6 +20,8 @@ export default function App() {
       </ul>
       <h2>JSX parsing tests</h2>
       <Apple style={{ width: '10rem' }} />
+      <h2>TSX parsing tests</h2>
+      <Image src={appleUrl} alt="appleFromTsx" style={{ width: '10rem' }} />
       <h2>Asset import tests</h2>
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />
       <img src={appleUrl} alt="apple" style={{ width: '10rem' }} />

example/src/Image.tsx

@@ -0,0 +1,11 @@
+import React, { CSSProperties } from "react";
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+  style?: CSSProperties;
+};
+
+export default function Image(props:ImageProps) {
+  return <img {...props} />;
+}

example/src/__snapshots__/App.test.jsx.snap

@@ -39,6 +39,18 @@ exports[`Basic test should render 1`] = `
       }
     }
   />
+  <h2>
+    TSX parsing tests
+  </h2>
+  <img
+    alt="appleFromTsx"
+    src="icon/mock/path"
+    style={
+      Object {
+        "width": "10rem",
+      }
+    }
+  />
   <h2>
     Asset import tests
   </h2>

package.json

@@ -35,9 +35,11 @@
     "@babel/preset-react": "7.18.6",
     "@edx/eslint-config": "3.1.1",
     "@edx/new-relic-source-map-webpack-plugin": "1.0.2",
+    "@edx/typescript-config": "^1.0.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@svgr/webpack": "6.5.1",
+    "@types/jest": "^26.0.0",
     "autoprefixer": "10.4.14",
     "babel-jest": "26.6.3",
     "babel-loader": "9.1.2",
@@ -73,6 +75,8 @@
     "sharp": "^0.31.0",
     "source-map-loader": "^4.0.1",
     "style-loader": "3.3.2",
+    "ts-jest": "^26.5.0",
+    "typescript": "^4.9.4",
     "url-loader": "4.1.1",
     "webpack": "5.76.0",
     "webpack-bundle-analyzer": "4.5.0",

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@edx/typescript-config",
+  "compilerOptions": {
+    "rootDir": "example",
+    "outDir": "dist"
+  },
+  "include": ["example/**/*"],
+  "exclude": ["example/dist/*", "example/node_modules/*'"]
+}