TypeScript support (#42)

* Support for Hoist React v54 w/TS - via Babel. * Minor dependency updates Co-authored-by: Anselm McClain <[email protected]>
xh · Nov 21, 2022 · 4899c94 · 4899c94
1 parent 5f65164
commit 4899c94
Show file tree

Hide file tree

Showing 4 changed files with 979 additions and 742 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,27 @@
 # Changelog
 
-## v6.0.0-SNAPSHOT - under development
+## v6.1.0 - 2022-11-21
 
-This release features an update to Webpack v5, along with updates to all supporting libraries.
+### 🎁 New Features
+
+* Typescript support for Hoist React v54+ via `@babel/plugin-transform-typescript`.
+* Remains compatible for use with JS-only application projects and prior JS-only versions of Hoist React.
+
+### 📚 Libraries
+
+* @babel/* `7.18 -> 7.20`
+* @xh/eslint-config `4.0 -> 5.0`
+* babel-loader `8.2 -> 9.1`
+* mini-css-extract-plugin `2.6 -> 2.7`
+* sass `1.53 -> 1.56`
+* sass-loader `13.0 -> 13.2`
+* webpack `5.73 -> 5.75`
+* webpack-cli `4.10 -> 5.0`
+* webpack-dev-server `4.9 -> 4.11`
+
+## v6.0.0 - 2022-07-19
+
+* This release features an update to Webpack v5, along with updates to all supporting libraries.
 
 ### 💥 Breaking Changes
 

diff --git a/configureWebpack.js b/configureWebpack.js
@@ -301,10 +301,10 @@ async function configureWebpack(env) {
     const appDirPath = path.resolve(srcPath, 'apps'),
         apps = fs
             .readdirSync(appDirPath)
-            .filter(f => f.endsWith('.js'))
+            .filter(f => f.endsWith('.js') || f.endsWith('.ts'))
             .map(f => {
                 return {
-                    name: f.replace('.js', ''),
+                    name: f.replace('.js', '').replace('.ts', ''),
                     path: path.resolve(appDirPath, f)
                 };
             }),
@@ -374,7 +374,7 @@ async function configureWebpack(env) {
             // Add JSX to support imports from .jsx source w/o needing to add the extension.
             // Include "*" to continue supporting other imports that *do* specify an extension
             // within the import statement (i.e. `import './foo.png'`). Yes, it's confusing.
-            extensions: ['*', '.js', '.jsx', '.json']
+            extensions: ['*', '.js', '.ts', '.jsx', '.tsx', '.json']
         },
 
         // Ensure Webpack can find loaders installed both within the top-level node_modules dir for
@@ -424,15 +424,16 @@ async function configureWebpack(env) {
                         },
 
                         //------------------------
-                        // JS processing
+                        // JS/TS processing
                         // Transpile via Babel, with presets/plugins to support Hoist's use of modern / staged JS features.
                         //------------------------
                         {
-                            test: /\.(jsx?)$/,
+                            test: /\.(jsx?)$|\.(tsx?)$/,
                             use: {
                                 loader: 'babel-loader',
                                 options: {
                                     presets: [
+                                        '@babel/preset-typescript',
                                         '@babel/preset-react',
                                         [
                                             '@babel/preset-env',
@@ -456,6 +457,11 @@ async function configureWebpack(env) {
                                         ]
                                     ],
                                     plugins: [
+                                        // Support Typescript via Babel. `isTSX` option allows use of JSX inline with
+                                        // .js files for older JS apps. Typescript apps must use the .tsx extension for
+                                        // any files containing JSX syntax.
+                                        ['@babel/plugin-transform-typescript', {allowDeclareFields: true, isTSX: true}],
+
                                         // Support our current decorator syntax, for MobX and Hoist decorators.
                                         // See notes @ https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy
                                         ['@babel/plugin-proposal-decorators', {legacy: true}],
@@ -702,7 +708,6 @@ async function configureWebpack(env) {
     };
 }
 
-
 //------------------------
 // Implementation
 //------------------------

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist-dev-utils",
-  "version": "6.0.0-SNAPSHOT",
+  "version": "7.0.0-SNAPSHOT",
   "description": "Utilities for configuring builds of Hoist-React client applications.",
   "repository": "github:xh/hoist-dev-utils",
   "homepage": "https://github.com/xh/hoist-dev-utils",
@@ -11,16 +11,17 @@
     "configureWebpack.js"
   ],
   "dependencies": {
-    "@babel/core": "~7.18.9",
-    "@babel/plugin-proposal-decorators": "~7.18.9",
-    "@babel/preset-env": "~7.18.9",
-    "@babel/preset-react": "~7.18.6",
+    "@babel/core": "^7.20",
+    "@babel/plugin-proposal-decorators": "^7.20",
+    "@babel/preset-env": "^7.20",
+    "@babel/preset-react": "^7.18",
+    "@babel/preset-typescript": "^7.18",
     "@cerner/duplicate-package-checker-webpack-plugin": "~2.3.0",
     "@types/lodash": "^4.0.0",
-    "@types/react": "^17.0.0",
-    "@xh/eslint-config": "~4.0.1",
-    "autoprefixer": "~10.4.7",
-    "babel-loader": "~8.2.5",
+    "@types/react": "^18.0.0",
+    "@xh/eslint-config": "^5.0.0",
+    "autoprefixer": "~10.4.13",
+    "babel-loader": "~9.1.0",
     "babel-plugin-transform-imports": "~2.0.0",
     "case-sensitive-paths-webpack-plugin": "~2.4.0",
     "changelog-parser": "~2.8.1",
@@ -31,21 +32,21 @@
     "html-webpack-plugin": "~5.5.0",
     "html-webpack-tags-plugin": "~3.0.2",
     "lodash": "~4.17.21",
-    "mini-css-extract-plugin": "~2.6.1",
+    "mini-css-extract-plugin": "~2.7.0",
     "postcss": "~8.4.14",
     "postcss-flexbugs-fixes": "~5.0.2",
     "postcss-loader": "~7.0.1",
     "rimraf": "~3.0.2",
-    "sass": "~1.53.0",
-    "sass-loader": "~13.0.2",
+    "sass": "~1.56.1",
+    "sass-loader": "~13.2.0",
     "sass-material-colors": "~0.0.5",
     "style-loader": "~3.3.1",
     "terser-webpack-plugin": "~5.3.3",
     "url-loader": "~4.1.1",
-    "webpack": "~5.73.0",
-    "webpack-bundle-analyzer": "~4.5.0",
-    "webpack-cli": "~4.10.0",
-    "webpack-dev-server": "~4.9.3",
+    "webpack": "~5.75.0",
+    "webpack-bundle-analyzer": "~4.7.0",
+    "webpack-cli": "~5.0.0",
+    "webpack-dev-server": "~4.11.1",
     "webpackbar": "~5.0.2"
   }
 }