Upgrade typescript to 5.2

.babelrc

@@ -7,7 +7,7 @@
         "useBuiltIns": "usage"
       }
     ],
-    "@babel/preset-react",
+    ["@babel/preset-react", { "runtime": "automatic" }],
     ["@babel/typescript", { "allowNamespaces": true }]
   ],
   "plugins": [

.gitignore

@@ -1,3 +1,4 @@
+# Update .prettierignore whenever this file changes
 docs/
 node_modules/
 .idea/
@@ -17,6 +18,7 @@ package-lock.json
 *.swp
 dist
 .history/
+ts-out/
 
 # Catalog index generation files
 catalog-index*.json

.prettierignore

@@ -20,6 +20,7 @@ package-lock.json
 *.swp
 dist
 .history/
+ts-out/
 
 # Catalog index generation files
 catalog-index*.json

CHANGES.md

@@ -1,7 +1,11 @@
 # Change Log
 
-#### next release (8.4.1)
+#### next release (8.5.0)
 
+- **Breaking changes:**
+  - Upgrade TypeScript to 5.2
+  - Switch Babel configuration to new JSX transform
+- Improve tsconfig files
 - Fix a bug where `DragPoints` was interfering with pedstrian mode mouse movements.
 - Update `webpack` to `4.47.0` to support Node >= 18 without extra command line parameters.
 - [The next improvement]

buildprocess/configureWebpack.js

@@ -126,7 +126,7 @@ function configureWebpack(
                 useBuiltIns: "usage"
               }
             ],
-            "@babel/preset-react",
+            ["@babel/preset-react", { runtime: "automatic" }],
             ["@babel/typescript", { allowNamespaces: true }]
           ],
           plugins: [

lib/ReactViews/Map/Panels/SettingPanel.tsx

@@ -318,7 +318,7 @@ class SettingPanel extends React.Component<PropTypes> {
                     }
                     onClick={(event) => this.selectBaseMap(baseMap.item, event)}
                     onMouseEnter={this.mouseEnterBaseMap.bind(this, baseMap)}
-                    onMouseLeave={this.mouseLeaveBaseMap.bind(this, baseMap)}
+                    onMouseLeave={this.mouseLeaveBaseMap.bind(this)}
                     onFocus={this.mouseEnterBaseMap.bind(this, baseMap)}
                   >
                     {baseMap.item === this.props.terria.mainViewer.baseMap ? (

package.json

@@ -12,16 +12,17 @@
   },
   "resolutions": {
     "colors": "1.4.0",
-    "@types/node": "^18.15.11"
+    "@types/node": "^18.15.11",
+    "@types/css-font-loading-module": "^0.0.9"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/parser": "^7.22.7",
+    "@babel/core": "^7.23.5",
+    "@babel/parser": "^7.23.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.22.5",
     "@mapbox/geojson-merge": "^1.1.1",
     "@mapbox/point-geometry": "^0.1.0",
@@ -177,7 +178,7 @@
     "ts-essentials": "^5.0.0",
     "ts-loader": "^5.3.3",
     "ts-node": "^5.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "~5.2.0",
     "urijs": "^1.18.12",
     "url-loader": "^1.1.2",
     "webpack": "~4.47.0",
@@ -186,7 +187,7 @@
     "worker-loader": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.12.16",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@types/dateformat": "^3.0.1",
     "@types/node": "^18.15.11",
@@ -213,7 +214,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-opera-launcher": "^1.0.0",
     "karma-safari-launcher": "^1.0.0",
-    "karma-spec-reporter": "^0.0.32",
+    "karma-spec-reporter": "^0.0.36",
     "klaw-sync": "^4.0.0",
     "minimist": "^1.2.8",
     "node-notifier": "^5.1.2",

tsconfig-node.json

@@ -1,25 +1,9 @@
 // This tsconfig is used to build the model layer only for use in a node.js app.
 // Build with ./node_modules/.bin/tsc -p tsconfig-models.json
 {
+  "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "es2019",
-    "experimentalDecorators": true,
-    "module": "esNext",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "strict": true,
-    "allowJs": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "useDefineForClassFields": true, // required for mobx6 - https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties
     "outDir": "dist",
-    "resolveJsonModule": true,
-    "typeRoots": [
-      "./lib/ThirdParty"
-      //"./node_modules/@types",
-      //"../node_modules/@types"
-    ],
     "types": [
       "terriajs-cesium",
       "mapbox__geojson-merge",
@@ -28,8 +12,8 @@
       "pmtiles",
       "terriajs-html2canvas",
       "urijs",
-      "styled-components" // eventually it will be required anyway for SSR.
-      //"react"
+      "styled-components", // eventually it will be required anyway for SSR.
+      "react"
     ]
   },
   "include": [

tsconfig.json

@@ -7,13 +7,23 @@
     "sourceMap": true,
     "strict": true,
     "allowJs": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "useDefineForClassFields": true, // required for mobx6 - https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties
     "outDir": "ts-out",
     "resolveJsonModule": true,
-    "typeRoots": ["./lib/ThirdParty/**/*.d.ts"],
+    "typeRoots": [
+      "./lib/ThirdParty/",
+      "./node_modules/",
+      "./node_modules/@types/",
+      "../node_modules/",
+      "../node_modules/@types/",
+      "../../node_modules/",
+      "../../node_modules/@types/",
+      "../../../node_modules/",
+      "../../../node_modules/@types/"
+    ],
     "types": ["terriajs-cesium"]
   },
   "include": [